bootstrap 复习

引入

<link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>

注意 src=""这里 绝对不能/开头 虽然也能预览成功 但是会导致bootstrap样式导入不成功

实现:依赖于栅格系统:将每一行平均分成12个格子 可以指定元素占几个格子

步骤：

1. ​ 定义容器
   container:
   container-fluid

2. ​ 定义行 样式: row

3. ​ 定义元素 指定该元素在不同的设备上所占的格子数目. 样式：col-设备代号-格子数目

   • xs:超小屏幕 手机 <768px :col-xs-12
   • sm: 小屏幕 平板 >=768px
   • md:中等屏幕 桌面显示器 >=992px
   • lg :大屏幕 大桌面显示器 >1200px

   1.一个row如果超出格子数量会自动换行
2.栅格类属性可以向上兼容 栅格类适用于屏幕宽度大于等于分界点的设备
3.如果真实设备的宽度小于了设置的栅格类属性的设备代号向下不兼容,默认会一个元素占满一整行

4. 代码

<style>
        .inner
        {
            border: 2px red solid;
        }
</style>

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-1  col-sm-2 col-md-4 col-xs-6 inner">栅格</div>
        <div class="col-lg-1  col-sm-2 col-md-4 col-xs-6 inner">栅格</div>
        <div class="col-lg-1  col-sm-2 col-md-4 col-xs-6 inner">栅格</div>
        <div class="col-lg-1  col-sm-2 col-md-4 col-xs-6 inner">栅格</div>
        <div class="col-lg-1  col-sm-2 col-md-4 col-xs-6 inner">栅格</div>
        <div class="col-lg-1  col-sm-2 col-md-4 col-xs-6 inner">栅格</div>
        <div class="col-lg-1  col-sm-2 col-md-4 col-xs-6 inner">栅格</div>
        <div class="col-lg-1  col-sm-2 col-md-4 col-xs-6 inner">栅格</div>
        <div class="col-lg-1  col-sm-2 col-md-4 col-xs-6 inner">栅格</div>
        <div class="col-lg-1  col-sm-2 col-md-4 col-xs-6 inner">栅格</div>
        <div class="col-lg-1  col-sm-2 col-md-4 col-xs-6 inner">栅格</div>
        <div class="col-lg-1  col-sm-2 col-md-4 col-xs-6 inner">栅格</div>
    </div>
</div>

CSS样式和JS插件