bootstrap 栅格系统

2021-12-06 20:33:50 阅读：139 来源： 互联网

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>

标签：千玺,样式,bootstrap,系统,栅格,按钮,引入,btn
来源： https://www.cnblogs.com/yinxiaotu/p/15651654.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

bootstrap 栅格系统