BootStrap是基于HTML、CSS和JavaScript的框架,用来快速搭建开发前端页面,具备响应式特点,可进行二次开发。
下载安装
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件(一般不用引入) -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
BootStrap栅格布局
BootStrap将屏幕分为12等分,在具体的DIV中,可以通过设置DIV的所占等分的数字确定其在屏幕中占有的宽度。
<div class="row“><!--表示另起一行-->
<div class="col-md-8" style="border:1px solid black;height:100px;"></div>
<div class="col-md-4" style="border:1px solid black;height:100px;"></div>
</div>
布局屏幕分类
针对不同的显示屏幕尺寸,BootStrap提供了不同的栅格布局的属性:
col-xs-* 超小屏幕 手机 (<768px)
col-sm-* 小屏幕 平板 (≥768px)
col-md-* 中等屏幕 桌面显示器 (≥992px)
col-lg-* 大屏幕 大桌面显示器 (≥1200px)
BootStrap允许我们在一个DIV中写多个类别的布局属性,从而让该DIV在不同的屏幕中呈现不同的屏宽。
<div class="col-md-8 col-xs-6 col-lg-4"></div>