bootstrap

「这是我参与11月更文挑战的第7天，活动详情查看：2021最后一次更文挑战」 。

中文官网：www.bootcss.com

1.定义：UI框架，适用于响应式布局的框架。

2.使用：

（1）下载

（2）链入bootstrap.css和bootstrap.js（根据需求链入，如果只需要css样式，就只链入bootstrap.css，bootstrap.jsjs同理）

(3)调用指定样式类名

具体需要什么，可以在官网上自己查，用法和类名

3.栅格系统

栅格原理：将整个网页的宽度分成若干份bootstrap3默认将网页分成12份，框架结构就是媒体查询配合百分比再 配合浮动使用

超小屏幕就是当屏幕的width<768px时，调用col-xs-占用的份数

小屏幕就是当屏幕的width>=768px时，调用col-sm-占用的份数

超小屏幕就是当屏幕的width>=992px时，调用col-md-占用的份数

超小屏幕就是当屏幕的width>=1200px时，调用col-lg-占用的份数

例如：

<div class="row">
            <div class="col-xs-12 col-sm-6 col-md-3"><a href="#">是</a></div>
            <div class="col-xs-12 col-sm-6 col-md-3"><a href="#">是</a></div>
            <div class="col-xs-12 col-sm-6 col-md-3"><a href="#">是</a></div>
            <div class="col-xs-12 col-sm-6 col-md-3"><a href="#">是</a></div>
        </div>

4.字体图标

找到字体图标，直接将两个类名复制就好

5.表格布局

例如：

<div class="table-responsive">
        <table class="table table-striped table-hover">
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr class="info">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>

6.插件

步骤：先链入jquery.js,再链入bootstrap.js

如果还需要轮播图的，或者是导航栏，可以自己去bootstrap官网自己去查用法。