bootstrap的使用
你可以使用下载的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’。