BootStrap简介及应用要点

BootStrap简介

BootStrap是基于HTML、CSS和JavaScript的框架，使你只需要写简单的代码就可以很快的搭建一个还不错的前端框架，他是后端程序员的福音，使他们只需要专注业务逻辑，而无须浪费太多的精力在界面设计上。

它可以开发全响应式网页——不论你使用手机、平板电脑、普通个人电脑浏览网站内容，所有的元素都可以很优雅的呈现。所以，可以用他来开发适合各种设备浏览的页面，避免了大量的因为兼容性而导致的重复劳动。

它的最新版本是4.0，国内目前用的较多的是3.x,我们的教程也基于BootStrap3.x版本，也是目前最受欢迎的前端框架之一。

你可以使用默认的BootStrap样式和组件，你也可以对其进行二次开发，当然你也可以基于BootStrap环境使用自己写的组件。

BootStrap下载及在项目中的使用

你可以登陆http://v3.bootcss.com 点击页面中的下载BootStrap按钮下载它，你可以下载完整版，也可以访问http://v3.bootcss.com/customize/ 在线定制css、组件、javascript插件。

在项目中你可以使用下载的BootStrap文件，通常包括样式文件bootstrap.min.css、Jquery文件（务必在bootstrap.min.js 之前引入）、BootStrap核心脚本文件bootstrap.min.js。注意，为了减少载入的代码，这里使用的都是压缩（min）版本的文件，当然你也可以引入未压缩的版本。示例代码如下：

<!-- Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
<!-- jQuery文件 -->
<script src="/scripts/jquery.min.js"></script>
<!-- Bootstrap 核心 JavaScript 文件 -->
<script src="/scripts/bootstrap.min.js"></script>

当然你也可以使用互联网上提供的CDN服务，示例代码如下：

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

BootStrap栅格布局

BootStrap栅格布局是灵活使用BootStrap的基础。BootStrap将屏幕分为12等分，在具体的DIV中，你可以通过设置DIV的所占等分的数字来确定其在屏幕中占有的宽度。如：

  <div class="row“><!--表示另起一行-->
      <div class="col-md-8" ></div>
      <div class="col-md-4" ></div>
  </div>

在上述代码中为了表示区块，我们设置了DIV的边框宽度为1像素。代码中我们可以看出，第一个DIV中class="col-md-8",第二个DIV中class="col-md-4",其中‘8’和‘4’就是其DIV所占屏幕宽度的数值，加在一起等于‘12’。也就是第一个DIV占整个屏幕宽度的‘8/12’,第二个DIV占‘4/12’。在表示DIV宽度的类属性中，为了实现对全响应的支持，一共有四种类别的属性值，区别如下：
.col-xs- 超小屏幕 手机 (<768px）

.col-sm-* 小屏幕 平板 (≥768px)

.col-md-* 中等屏幕 桌面显示器 (≥992px)

.col-lg-* 大屏幕 大桌面显示器 (≥1200px)

如果一个DIV中同时有上述类别中的两个或两个以上，表示该DIV在不同环境下所占有的屏幕宽度。如：

  <div class="row">
      <div class="col-md-8 col-xs-6 col-lg-4" ></div>
  </div>

该DIV在中等屏幕中占有‘8/12’，在手机中占有‘6/12’，在大屏幕中占有屏幕比例的‘4/12’。

在哪里获取BootStrap资源

你可以登陆BootStrap中文网，获取所有的BootStrap资源，包括基本的CSS、组件、JavaScript插件等。

本文首发于顶求网，转载请注明来源