地址

尚硅谷前端bootstrap教程

jQuery的应用和Vue.js的使用

菜鸟教程 Bootstrap 教程

boostrap 全局 CSS 样式

boostrap组件

使用boostrap只需要三个东西:

  • bootstrap.min.css
  • jquery.min.js
  • bootstrap.min.js
1
2
3
4
5
6
7
8
9
<head>
    <meta charset="utf-8">
    
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    
    <title>hello</title>
</head>

移动设备优先

为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：

1
2
3
<meta name="viewport" content="width=device-width, initial-scale=1.0">
或者
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  • initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
  • width=device-width 表示宽度是设备屏幕的宽度。
  • shrink-to-fit=no 自动适应手机屏幕的宽度。

响应式图像

1
<img src="..." class="img-responsive" alt="响应式图像">

img-responsive class 可以让 Bootstrap 3 中的图像对响应式布局的支持更友好。

1
2
3
4
5
.img-responsive {
  display: block;
  height: auto;
  max-width: 100%;
}

可以看到img-responsive class 为图像赋予了 max-width: 100%; 和 height: auto; 属性，可以让图像按比例缩放，不超过其父元素的尺寸

基本的全局显示

设置全局CSS样式；基本的HTML元素均可以通过class设置样式并得到增强效果。

避免跨浏览器的不一致

Bootstrap 使用 Normalize 来建立跨浏览器的一致性。

Normalize.css 是一个很小的 CSS 文件，在 HTML 元素的默认样式中提供了更好的跨浏览器一致性。

Normalize.css :

  • 其实就是将所有的样式全部重置 , 这样就在HTML元素样式上提供了跨浏览器的高度一致性。
  • 同时保护了有价值的默认值

Bootstrap 3 使用 body {margin: 0;} 来移除 body 的边距。

1
2
3
4
5
6
7
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.428571429;
  color: #333333;
  background-color: #ffffff;
}

链接样式

通过属性 @link-color 设置全局链接的颜色。

容器（Container）

1
2
3
<div class="container">
  ...
</div>

Bootstrap 3 的 container class 用于包裹页面上的内容。

1
2
3
4
5
6
.container {
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
}

container 的左右外边距（margin-right、margin-left）交由浏览器决定。

container与container-fluid(固定容器与流体容器)

1
2
3
4
5
6
7
<div class="container-fluid">
    container-fluid
</div>

<div class="container">
    container
</div>
  • 这两种容器的高度都为auto。而他们的不同就在于它们宽度的设定上。
  • container根据屏幕宽度利用媒体查询，已经设定了固定的宽度，作用为阶段性的改变宽度，所以在改变浏览器的大小时，页面是一个阶段一个阶段变化的。
  • container-fluid则是将宽度设定为auto，所以当缩放浏览器时，它会保持全屏大小，始终保持100%的宽度。

container容器的width会随设备分辨率的不同而生产变化

阈值 意义 符号 width
w >=1200 大屏PC lg 容器的width为1170 左右padding为15 （注意是borderBox）
1200>w >=992 中屏PC md 容器的width为970 左右padding为15 （注意是borderBox）
992 > w >=768 平板 sm 容器的width为750 左右padding为15 （注意是borderBox）
768 > w >=992 移动手机 xs 容器的width为auto 左右padding为15 （注意是borderBox） 
1
2
3
4
5
6
7
<div class="container">
    <div class="row">
        <div class="col-md-6 col-xs-1">
            hyl
        </div>
    </div>
</div>

上面的 <div class="col-md-6 col-xs-1"> , 表示,会在中屏PC时占6份 , 在移动手机时占1分

网格系统（Grid System）

  • Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，
  • 随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

什么是 Bootstrap 网格系统

  • 简单来说 , 栅格系统是用来做页面布局的
  • Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（vIewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类。
  • Bootstrap 3 是移动设备优先的，在这个意义上，Bootstrap 代码从小屏幕设备（比如移动设备、平板电脑）开始，然后扩展到大屏幕设备（比如笔记本电脑、台式电脑）上的组件和网格。

移动设备优先策略

  • 内容
    • 决定什么是最重要的。
  • 布局
    • 优先设计更小的宽度。
    • 基础的 CSS 是移动设备优先，媒体查询是针对于平板电脑、台式电脑。
  • 渐进增强
    • 随着屏幕大小的增加而添加元素。

响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

Bootstrap 网格系统（Grid System）的工作原理

网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的：

  • 行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
  • 使用行来创建列的水平组。
  • 内容应该放置在列内，且唯有列可以是行的直接子元素。
  • 预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
  • 列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
  • 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。
  • 对于栅格系统 , 如果超出了12 , 就会自动换行

栅格系统允许嵌套

1
2
3
4
<div class='col-md-10'>
    <div class='col-md-6'>
    </div>
</div>

媒体查询

Bootstrap 中的媒体查询允许您基于视口大小移动、显示并隐藏内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* 超小设备（手机，小于 768px） */
/* Bootstrap 中默认情况下没有媒体查询 */

/* 小型设备（平板电脑，768px 起） */
@media (min-width: @screen-sm-min) { 

}

/* 中型设备（台式电脑，992px 起） */
@media (min-width: @screen-md-min) { 

 }

/* 大型设备（大台式电脑，1200px 起） */
@media (min-width: @screen-lg-min) { 
}

说人话 ,

  • 当屏幕是小型设备的时候 , 就会执行@media (min-width: @screen-sm-min) { }里的css
  • 同理 , 当屏幕是重型设备的时候 , 就会执行@media (min-width: @screen-md-min){} 里的css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style type="text/css">
    div{
        width: 100%;
        height: 200px;
        background: red;
    }
    @media (max-width: 768px) {
        div{
            background: yellow;
        }
    }
</style>
</head>
<body>
    <div class="container-fluid">
        <div>
            hyl
        </div>
    </div>
</body>
  • 默认是超小设备 , 此时div的颜色是red
  • 当设备大于768px的时候 , div的颜色就会变成yellow

有时可能出现 , 你写的样式不生效

  • 原因 : 你的样式和boostrap样式冲突了 , 而且boostrap的样式的优先级高于你

  • 这时 需要使用 !important 来提高优先级

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <style type="text/css">
        div{
            width: 100%;
            height: 200px;
            background: red;
        }
        @media (max-width: 768px) {
            div{
                background: yellow !important;
            }
        }
    </style>

网格选项

超小设备手机（<768px） 小型设备平板电脑（≥768px） 中型设备台式电脑（≥992px） 大型设备台式电脑（≥1200px）
网格行为 一直是水平的 以折叠开始，断点以上是水平的 以折叠开始，断点以上是水平的 以折叠开始，断点以上是水平的
最大容器宽度 None (auto) 750px 970px 1170px
Class 前缀 .col-xs- .col-sm- .col-md- .col-lg-
列数量和 12 12 12 12
最大列宽 Auto 60px 78px 95px
间隙宽度 30px （一个列的每边分别 15px） 30px （一个列的每边分别 15px） 30px （一个列的每边分别 15px） 30px （一个列的每边分别 15px）
可嵌套 Yes Yes Yes Yes
偏移量 Yes Yes Yes Yes
列排序 Yes Yes Yes Yes

基本的网格结构

1
2
3
4
5
6
7
8
<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

示例

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
<div class="container">
    <div class="row" >
        <div class="col-xs-6 col-sm-3" 
            style="background-color: #dedef8;
            box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
        <div class="col-xs-6 col-sm-3" 
        style="background-color: #dedef8;box-shadow: 
        inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat.
            </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut. 
            </p>
        </div>
 
        <div class="clearfix visible-xs"></div>
 
        <div class="col-xs-6 col-sm-3" 
        style="background-color: #dedef8;
        box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco 
            laboris nisi ut aliquip ex ea commodo consequat. 
            </p>
        </div>
        <div class="col-xs-6 col-sm-3" 
        style="background-color: #dedef8;box-shadow: 
        inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim 
            </p>
        </div>
    </div>
</div>

偏移列

  • 可用来给列腾出更多的空间。
  • 例如，**.col-xs-*** 类不支持偏移，但是它们可以简单地通过使用一个空的单元格来实现该效果。
  • 为了在大屏幕显示器上使用偏移，请使用 .col-md-offset-* 类。这些类会把一个列的左外边距（margin）增加 ***** 列，其中 ***** 范围是从 1 到 11。
1
2
3
4
5
6
7
8
9
10
11
12
<div class="container">
    <h1>Hello, world!</h1>
    <div class="row" >
        <div class="col-md-6 col-md-offset-3" 
        style="background-color: #dedef8;box-shadow: 
        inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing 
            elit.
            </p>
        </div>
    </div>
</div>

嵌套列

  • 添加一个新的 .row，并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。
  • 被嵌套的行应包含一组列，这组列个数不能超过12（其实，没有要求你必须占满12列）。
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
40
41
42
43
44
<div class="container">
    <h1>Hello, world!</h1>
    <div class="row">
        <div class="col-md-3" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <h4>第一列</h4>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            </p>
        </div>
        <div class="col-md-9" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <h4>第二列 - 分为四个盒子</h4>
            <div class="row">
                <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p>
                        Consectetur art party Tonx culpa semiotics. Pinterest 
        assumenda minim organic quis.
                    </p>
                </div>
                <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p>
                         sed do eiusmod tempor incididunt ut labore et dolore magna 
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
        ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p>
                        quis nostrud exercitation ullamco laboris nisi ut 
        aliquip ex ea commodo consequat.
                    </p>
                </div>
                <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
        sed do eiusmod tempor incididunt ut labore et dolore magna 
        aliqua. Ut enim ad minim.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

列排序

  • 以一种顺序编写列，然后以另一种顺序显示列。
  • 使用 .col-md-push-* 和 .col-md-pull-* 类的内置网格列
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
<div class="container">
    <h1>Hello, world!</h1>
    <div class="row">
        <p>
            排序前
        </p>
        <div class="col-md-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在左边
        </div>
        <div class="col-md-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在右边
        </div>
    </div>
    <br>
    <div class="row">
        <p>
            排序后
        </p>
        <div class="col-md-4 col-md-push-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在左边
        </div>
        <div class="col-md-8 col-md-pull-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在右边
        </div>
    </div>
</div>

Bootstrap 排版

标题

1
2
3
4
5
6
<h1>我是标题1 h1</h1>
<h2>我是标题2 h2</h2>
<h3>我是标题3 h3</h3>
<h4>我是标题4 h4</h4>
<h5>我是标题5 h5</h5>
<h6>我是标题6 h6</h6>
  • 我们可以使用boostrap已经写好的h1到h6
  • 如果我们需要p标签的样式和h1的一样 , 我们可以使用class="h1"
1
2
<h1>hyl</h1>
<p class="h1">dsz</p>

内联子标题

如果需要向任何标题添加一个内联子标题，只需要简单地在元素两旁添加 <small>，或者添加 .small class，这样子您就能得到一个字号更小的颜色更浅的文本，

1
2
3
4
5
6
<h1>我是标题1 h1. <small>我是副标题1 h1</small></h1>
<h2>我是标题2 h2. <small>我是副标题2 h2</small></h2>
<h3>我是标题3 h3. <small>我是副标题3 h3</small></h3>
<h4>我是标题4 h4. <small>我是副标题4 h4</small></h4>
<h5>我是标题5 h5. <small>我是副标题5 h5</small></h5>
<h6>我是标题6 h6. <small>我是副标题6 h6</small></h6>

<small>是父元素大小的85%

使用 @font-family-base、 @font-size-base 和 @line-height-base 属性作为排版样式。

引导主体副本

给段落添加强调文本，则可以添加 class=”lead”，这将得到更大更粗、行高更高的文本

1
2
<h2>引导主体副本</h2>
<p class="lead">这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。</p>

强调

1
2
3
4
5
6
7
8
9
10
11
12
<small>本行内容是在标签内</small><br>
<strong>本行内容是在标签内</strong><br>
<em>本行内容是在标签内，并呈现为斜体</em><br>
<p class="text-left">向左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">向右对齐文本</p>
<p class="text-muted">本行内容是减弱的</p>
<p class="text-primary">本行内容带有一个 primary class</p>
<p class="text-success">本行内容带有一个 success class</p>
<p class="text-info">本行内容带有一个 info class</p>
<p class="text-warning">本行内容带有一个 warning class</p>
<p class="text-danger">本行内容带有一个 danger class</p>

Boostrap图标

Boostrap的图标被封装成了字体

  • 图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。
  • 应该创建一个嵌套的 <span> 标签，并将图标类应用到这个 <span> 标签上。
  • 只对内容为空的元素起作用 : 图标类只能应用在不包含任何文本内容或子元素的元素上。
  • 图标必须设置 aria-hidden="true" 属性。
1
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

实例

1
2
3
4
5
6
7
<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>