BootStrap框架

背景

  • 源码下载：https://v3.bootcss.com/getting-started/#download

  • 免费BootStrap的CDN加速

    1
    2
    3
    4
    5
    6
    7
    <!-- BootStrap在使用的时候需要引入样式文件、js文件 -->

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

BootStrap容器

  • container-fluid：流体容器，占一整行

    1
    2
    3
    4
    <!-- 设置该class时，屏幕占比100%，同时内容部分有15px的左右内间距 -->
    <div class="container-fluid">
        内容部分
    </div>

  • container：容器标识，根据情况自动变化

    • 1170：浏览器可见区域宽度大于1200时，该容器宽度为1170px
    • 970：浏览器可见区域宽度大于992，小于1200，该容器宽度为970px
    • 750：浏览器可见区域宽度大于768，小于992，该容器宽度为750px
    • 100%：浏览器可见区域宽度小于768，该容器占比100%
    1
    2
    3
    4
    5
    6
    7
    <!-- 设置该class时，屏幕占比100%，同时内容部分有15px的左右内间距 -->
    <div class="container">
        <!-- 在bootstrap中一行常用row class包裹 -->
        <div class="row">
            内容部分
        </div>
    </div>

BootStrap栅格系统

思想

Bootstrap将页面横向分为12等分，按照12等分定义了适应不同宽度等分的样式类，这些样式类组成了一套响应式、移动设备优先的流式栅格网络

格局

  • col-lg-：大于1200排成一行，小于1200则各占一行
  • col-md-：大于992排成一行，小于992分别占一行
  • col-sm-：大于768排成一行，小于768分别占一行
  • col-xs-：小于768时的排序方式
1
2
3
4
5
6
7
8
9
10
11
<div class="container">
    <!-- 每一行一个row -->
    <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-6">
            随便一观....
        </div>
        <div class="col-lg-3 col-md-3 col-sm-6">
            随便一观....
        </div>
    </div>
</div>

BootStrap栅格偏移

思想

有时一行我们无法凑出12份栅格出来，这个时候就需要使用栅格偏移的方式

格局

  • col-lg-offset-：大于1200时左侧偏移的栅格数
  • col-md-offset-：大于992时左侧偏移的栅格数
  • col-sm-offset-：大于768时左侧偏移的栅格数
  • col-xs-offset-：小于768时左侧偏移的栅格数
1
2
3
4
5
6
7
8
9
10
11
12
<div class="container">
    <!-- 每一行一个row -->
    <div class="row">
        <div class="col-lg-5 col-lg-offset-1 col-md-5 col-md-offset-1">
            元素占5份栅格，当大于1200时，右偏移1份
            992~1200之间时，元素占5分，右偏移一份
        </div>
        <div class="col-lg-5 col-md-5">
            内容部分
        </div>
    </div>
</div>

BootStrap栅格隐藏

思想

当屏幕在某些小尺寸时，为了节省屏幕上显示的内容，可以选择性的隐藏部分内容，且隐藏的内容不占空间

格局

  • hidden-lg：大于1200时隐藏的内容
  • hidden-md：大于992时隐藏的内容
  • hidden-sm：大于768时隐藏的内容
  • hidden-xs：小于768时隐藏的内容
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="container">
    <!-- 每一行一个row -->
    <div class="row">
        <div class="col-lg-5 col-lg-offset-1 col-md-5 col-md-offset-1 hidden-xs">
            元素占5份栅格，当大于1200时，右偏移1份
            992~1200之间时，元素占5分，右偏移一份
            当小于768时，则隐藏该元素
        </div>
        <div class="col-lg-5 col-md-5 ">
            内容部分
        </div>
    </div>
</div>

BootStrap按钮与表单

按钮

注意

  • 定义BootStrap上的按钮，可以用a标签/input标签做都可以
  • 定义按钮时，有三部分组成：声明按钮(btn)、按钮样式、按钮大小，不声明按钮大小，则其根据按钮中的文字而定

image-20201009100655750

定义

  • 声明按钮
    • btn
  • 按钮样式
    • btn-default：默认按钮样式
    • btn-primary：一般的按钮样式
    • btn-success：成功的按钮样式
    • btn-info：提示信息
    • btn-warning：警告的按钮样式
    • btn-danger：危险的按钮样式
    • btn-link：链接类型的按钮样式
  • 按钮大小
    • btn-block：按钮宽度100%
    • btn-lg：大按钮
    • btn-md：中等按钮
    • btn-xs：小按钮
  • 按钮状态
    • active：按钮一直处于激活状态
    • disabled：按钮一直处于未激活状态
  • 按钮组
    • btn-group

案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!-- 以按钮组为例 -->
<!-- 用a标签组成按钮组，则外部需要用btn-group包裹，按钮大小由自定义的决定 -->
<div class="container">
    <div class="row">
        <div class="btn-group">
            <a href="#" class="btn btn-primary">shuai</a>
            <a href="#" class="btn btn-primary">qi</a>
            <a href="#" class="btn btn-primary">shuai</a>
        </div>
    </div>
</div>

<!-- 按钮组若需要直接占一行排列，则需要追加btn-group-justified -->
<div class="container">
    <div class="row">
        <div class="btn-group btn-group-justified">
            <a href="#" class="btn btn-primary">shuai</a>
            <a href="#" class="btn btn-primary">qi</a>
            <a href="#" class="btn btn-primary">shuai</a>
        </div>
    </div>
</div>

<!-- input标签组成按钮组，则每个按钮外部都需要包裹一层btn-group -->
<div class="container">
    <div class="row">
        <div class="btn-group">
            <input type="button" class="btn btn-primary" name="确定"/>
        </div>
        <div class="btn-group">
            <input type="button" class="btn btn-primary" name="取消"/>
        </div>
        <div class="btn-group">
            <input type="button" class="btn btn-primary" name="重置"/>
        </div>
    </div>
</div>

表单

注意

  • BootStrap中表单依旧时form标签包裹

    image-20201009101314462

  • BootStrap中每个label和输入框都是需要用【form-group】的div包裹

    1
    2
    3
    4
    <div class="form-group">
        <label for="name">标签</label>
        <input type="text" id="name" class="form-control" placeholder="信息内容">
    </div>

定义

  • 声明一个表单域

    • form：默认为每个元素独占一行

  • 表单排列方式

    • form-inline：设置内联表单域

      image-20201008123824768

    • form-horizontal：水平排列表单域

      1
      2
      3
      4
      5
      6
      7
      8
      9
      <form class="form-horizontal">
        <div class="form-group">
          <!-- 水平表单，则input外部包裹div搭配栅格实现 -->
          <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
          <div class="col-sm-10">
            <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
          </div>
        </div>
      </form>

  • 声明表单组

    • form-group：表单组，包括表单文字和表单控件
    • form-group-lg：大尺寸表单
    • form-group-sm：小尺寸表单

    image-20201008123327745

  • 表单控件组样式：外层都需要包裹div设置样式

    • form-control：文本输入框、下拉列表控件样式

    • checkbox、checkbox-inline：多选框样式

    • radio、radio-inline：单选框样式

    • input-group：定义一个表单控件组

      • input-group-addon：表单控件组物件样式，控件组的部分用div包裹起来添加样式
      • input-group-btn：定义表单控件的按钮

    image-20201008124155395

BootStrap导航条

思想

BootStrap中先写导航条，再写容器container

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle" data-toggle="collapse" data-target="#mymenu">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">LOGO的内容部分</a>
        </div>
        <div class="collapse navbar-collapse" id="mymenu">
            <ul class="navbar navbar-nav">
                <li class="active">菜单部分</li>
            </ul>
            <form class="navbar-form navbar-right">
                搜索框之类的样式内容
            </form>
        </div>
    </div>
</div>

格局

  • 声明导航条
    • navbar：声明导航条
  • 导航条样式
    • navbar-default：声明默认的导航条样式，灰色背景
    • navbar-inverse：声明黑色背景的导航条样式
    • navbar-static-top：去掉导航条的圆角
  • 导航条位置
    • navbar-fixed-top：固定到顶部的导航条
    • navbar-fixed-bottom：固定到底部的导航条
    • navbar-left：菜单靠左
    • navbar-right：菜单靠右
  • 导航条元素
    • navbar-header：定义一个导航条的头部，是LOGO的容器
    • navbar-brand：定义LOGO等固定内容的样式
    • nav navbar-nav：定义导航条中的菜单，菜单使用ul-li标签的方式
    • navbar-form：定义导航条中的表单，一般用于输入框之类
    • navbar-btn：定义导航条中的按钮
    • navbar-text：定义导航条中的文本

案例

1
.navbar > .container > .navbar-header > ul.nav + form
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!-- navbar：标识表头，navbar-inverse：标识黑色背景的样式-->
<div class="navbar navbar-inverse">
    <div class="container">
        <!-- navbar-header：标识导航条的头部 -->
        <div class="navbar-header">
            <!-- navbar-tooggle：标识屏幕缩小时收缩，collapse：标识收缩 -->
            <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">DEVIN</a>
        </div>
        <!-- collapse、navbar-collapse：标识菜单收缩后状态栏的收缩目标 -->
        <div class="collapse navbar-collapse" id="menu">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">首页</a></li>
                <li><a href="#">主页</a></li>
                <li><a href="#">关于</a></li>
            </ul>
            <!-- navbar-form：标识导航条的表单效果 -->
            <form class="navbar-form navbar-right">
                <!-- form-group：定义一个表单 -->
                <div class="form-group">
                    <!-- 定义一个表单控件组 -->
                    <div class="input-group">
                        <input type="text" name="searchPlace" placeholder="我们一定可以的" class="form-control"/>
                        <!-- input-group-btn：定义表单控件组的按钮-->
                        <span class="input-group-btn">
                        <button class="btn btn-primary">GO</button>
                    </span>
                    </div>
                </div>
            </form>

        </div>
    </div>

</div>

BootStrap模态框

思想

模态框是BootStrap定义的一种弹框，模态框包含三层，如下：

1
2
3
4
# modal-header：定义弹框的头部标题
# modal-body：定义弹框的内容部分，弹框的提示信息和内容
# modal-footer：定义弹框的底部内容，包括按钮
.modal > .modal-dialog > .modal-content > .modal-header + .modal-body + .modal-footer

格局

  • 定义

    • modal、modal-dialog、modal-content：定义模态框的结构
    • modal-header：定义模态框的头部，模态框的标题
    • modal-body：定义弹框的内容部分，弹框的提示信息和内容
    • modal-footer：定义弹框的底部内容，按钮

  • 样式

    • fade：定义模态框的渐入动画

  • 大小 —- （该class填写在modal-dialog同级中）

    • modal-lg：定义大模态框
    • modal-sm：定义小模态框
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <div class="container">
        <!-- data-toggle、data-target：定义按钮与模态框的关联关系-->
        <button class="btn btn-primary" id="btn" data-toggle="modal" data-target="button">This is a Button</button>
        <!-- 模态三层结构 -->
        <div class="modal" id="button">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">弹框的标题</div>
                    <div class="modal-body">弹框的内容部分</div>
                    <div class="modal-footer">
                        <button class="btn btn-primary">确定</button>
                        <!-- data-dismiss：定义按钮点击时，模态框的消失-->
                        <button class="btn btn-default" data-dismiss="modal">取消</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

JS控制

image-20201010090315769

  • 激活模态框的显示

    1
    2
    3
    4
    5
    6
    $(function(){
        $('#btn').click(function(){
            $('#button').modal('show')
            // $('#button').modal({show:true})
        })
    })

  • 取消模态框的显示

    1
    2
    3
    4
    5
    $(function(){
        $('#btn').click(function(){
            $('#button').modal('hide')
        })
    })

  • 仅允许指定的按钮取消显示模态框

    1
    2
    3
    4
    5
    6
    7
    8
    $(function(){
        $('#btn').click(function(){
            $('#button').modal({
                show:true,
                backdrop:'static'
            })
        })
    })

其它

路径导航 – 面包屑

1
2
# 媒体查询通过breadcrumb标识
ul.breadcrumb > li > a
1
2
3
4
5
6
7
8
9
<div class="container">
    <!-- class用breadcrumb -->
    <ul class="breadcrumb">
        <li><a href="#">首页</a></li>
        <li><a href="#">简介</a></li>
        <!-- 最后一个class用active -->
        <li><a class="active">我</a></li>
    </ul>
</div>

下拉菜单

1
.dropdown > .dropdown-toggle + ul.dropdown-menu
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="container">
    <!-- dropdown：定义一个下拉菜单-->
    <div class="dropdown">
        <!-- 只有一个data-toggle-->
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            Dropdown
            <span class="caret"></span>
        </button>
        <!-- dropdown-menu：定义下拉菜单的内容-->
        <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li><a href="#">Separated link</a></li>
        </ul>
    </div>
</div>

巨幕

1
.jumbotron > .container
1
2
3
4
5
6
<div class="jumbotron">
    <div class="container">
        <h1>测试巨幕</h1>
        <p>Test jumbotron display auto information this world is beautiful</p>
    </div>
</div>

image响应式

1
2
<!-- 图片的响应式只需要添加：img-responsive类 --> 
<img src='images/font.jpg' class='img-responsive' />

缩略图 – 做横向排版

1
.container > .col-lg-5 > .thumbnail > img + h1 + p
1
2
3
4
5
6
7
8
9
<div class="container">
    <div class="col-lg-5">
        <div class="thumbnail">
            <img src="img/svelte.png" alt="">
            <h1>图片标题</h1>
            <p>图片描述</p>
        </div>
    </div>
</div>

image-20201010174803740

文本对齐

  • text-left：左对齐
  • text-center：居中对齐
  • text-right：右对齐
  • text-nowrap：内容不换行
1
2
3
4
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-nowrap">No wrap text.</p>

CSS补充知识

背景图

1
2
3
4
/* div的背景图设置为指定的图片，左右居中，上下居中，不重复显示 */
div{
    background: url('../image/bg.jpg') center center no-repeat;
}

权重

背景

  • 权重指指标在整体评价中的相对重要程度，权重系数指在其它指标不变的情况下，当前指标的变化对结果的影响
  • CSS优先级规则(最终起作用的样式)：
    • CSS属性后面加 !important 时，优先级最高；
    • CSS选择规则的权值不同时，权值高的优先；
    • CSS选择规则的权值相同时，后定义的规则优先；

CSS权值

  • 计算公式：权值 = 第一等级选择器个数，第二等级选择器个数，第三等级选择器个数，第四等级选择器个数；
  • 权值等级划分：
    • 最高等级：属性前加：!important。
    • 第一等级：内联样式，如：style=””，权重：1，0，0，0。
    • 第二等级：ID选择器，如：#name=””，权重：0，1，0，0。
    • 第三等级：类选择器 | 伪类 | 属性选择器，权重：0，0，1，0。
    • 第四等级：标签 | 伪元素选择器，权重：0，0，0，1。
    • 第五等级：通用选择器(*) | 子选择器 | 相邻同胞选择器，权重：0，0，0，0。
    • 最低等级：继承的样式
  • 权重比较：
    • 先从高阶权重进行比较，高阶权重相同时，再比较低等级的，以此类推
    • 权重完全相同，则采用后者优先原则（也就是样式覆盖）

CSS媒体查询

背景

  • 媒体查询可以让我们根据设备显示器的变化情况，在不改变页面内容的情况下，为特定的一些输出设备定制显示效果
  • 媒体查询写在CSS样式代码的最后，CSS是层叠样式表，在同一特殊性下，靠后的的样式会重叠前面的样式

使用

  • 使用前需要引入meta标签，用于兼容移动设备的显示效果

    1
    2
    3
    4
    5
    6
    7
    <!-- 
        width=device-width：宽度等于当前设备的宽度
        user-scalable=no：用户不能够手动缩放
        initial-scale=1.0：初始的缩放比例，默认为1
        maximum-scale：允许用户缩放到最大，默认为1
    -->
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale">

  • 使用媒体查询

    1
    2
    3
    4
    5
    6
    7
    8
    9
    @media [设备] [and | or | only] (显示设备检测) {
        /* CSS Code */
    }

    /*
        设备：all | print | screen，依次为所有、打印机、屏幕显示，默认为screen
        and | or | only：用于限制多个显示条件
        设备检测：max-width | min-width | max-height | min-height
    */
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    /* 官方学术风 */
    /* 当屏幕显示宽度位于720px和320px时，body的背景色变为红色 */
    @media screen and (max-width:720px) and (min-width:320px){
          body{
           background-color:red;
        }
    }

    /* 教程中写的 */
    /* 当屏幕显示宽度低于320px时，body背景色变为蓝色 */
    @media (max-width:320px){
          body{
             background-color:blue;
           }
    }

知识点