bootstrap 栅格系统

lang="zh-CN"     中文字符    

lang="en"            英文字符   使用栅格布局之前先引入栅格布局的自带的样式和jQuery     必须按顺序引入

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

<script src="./js/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>

引入之前移动设备优先引入

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

这个是浏览器兼容性问题   为了让IE8以下支持HTML5和媒体查询更能

 <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->

栅格系统：父容器为12份，不管怎么分父容器都是12份 .col-xs-  超小屏幕 手机 (<768px) .col-sm-  小屏幕 平板 (≥768px) .col-md-  中等屏幕 桌面显示器 (≥992px) .col-lg-  大屏幕 大桌面显示器 (≥1200px) 样式是本身有用本身样式，没有找小的，最小的没有，用原有本身的样式(div)

<div class="container">
        <div class="row">
            <div class="col-md-6"></div>
            <div class="col-md-6"></div>
        </div>
</div>

表格样式：

<table class="table table-bordered table-striped table-hover">
        <thead>
            <tr>
                <th>易烊千玺</th>
                <th>易烊千玺</th>
                <th>易烊千玺</th>
            </tr>
        </thead>
        <tbody>
            <!-- 作用于tr里面的td -->
            <tr class="danger">
                <td>易烊千玺</td>
                <td>易烊千玺</td>
                <td>易烊千玺</td>
            </tr>
            <!-- 作用于tr -->
            <tr class="bg-danger"> 
                <td>易烊千玺</td>
                <td>易烊千玺</td>
                <td>易烊千玺</td>
            </tr>
            <tr>
                <td>易烊千玺</td>
                <td>易烊千玺</td>
                <td>易烊千玺</td>
            </tr>
        </tbody>
    </table>

在表格内加入样式

<table class="table table-bordered table-striped table-hover">

作用于tr里面的td

<tr class="danger">

作用于tr

<tr class="bg-danger"> 

两者作用不一样但是效果一样

 

给标签字体加样式

<h1 class="text-info">白起7</h1>

给标签背景加样式

<h1 class="bg-info">白起7</h1>

btn：告诉样式是按钮  btn-danger：作用于按钮样式的颜色

<a href="#" class="btn btn-danger">按钮</a>