1. 参考
  2. 载入/环境搭建
  3. 网格系统
    1. col-{breakpoint}-auto
    2. w-100
    3. align-items-{start|center|end}
    4. align-self-{start|center|end}
    5. justify-content-{start|center|end|around|between}
    6. order-{breakpoint}-{index}
    7. offset-{breakpoint}-{index}
    8. 嵌套
    9. 隐藏元素
  4. media object 媒体对象
    1. 嵌套
    2. list

Bootstrap入门

CSS Bootstrap

Bootstrap是一个基于HMTL/CSS/JavaScript的前端CSS框架,支持响应式,移动端优先,自带大量jQuery插件.

参考

Bootstrap 3 Tutorial
Overview · Bootstrap

载入/环境搭建

可在官网下载Bootstrap
下载地址

注意
bootstrap依赖jquery.应在导入bootstrap.js前导入jquery.js
popper是一个弹出框插件,如果载入popper.min.js时报错: Uncaught SyntaxError: Unexpected token export.则使用umd路径下的popper.min.js代替(即umd/popper.min.js)
参考

载入bootstrap的范例 :

1
2
3
4
5
6
7
8
9
10
11
12
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="css/bootstrap.min.css">
  </head>
  <body>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

也可以使用官方CDN载入Bootstrap
使用CDN载入Bootstrap的范例:

1
2
3
4
5
6
7
8
9
10
11
12
13
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
       <script src="https://cdn.bootcss.com/popper.js/1.13.0/umd/popper.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    </body>
</html>

网格系统

网格系统是Bootstrap的一种排版模式,基于flexbox.其能够根据网页总宽度变化,自动调解单个元素宽度
一个完整的网格系统由一系列class名为container/row/column的元素组成
基本的网格系统范例:

1
2
3
4
5
6
7
<div class="container">
  <div class="row">
    <div class="col-sm">1</div>
    <div class="col-sm">2</div>
    <div class="col-sm">3</div>
  </div>
</div>
  • container 创建网格系统的容器
  • row 行(或栏),必须放在container/container-fluid内
  • col-* 列,网页内容应放在列中,每一行最多有12列

规则

  • Containers可以水平/垂直居中网页内容,".container"为固定宽度(见下表).".container-fluid"为总宽度,相当于 .container-fluid{width:100%;}
  • 列(col-)应该放在行(row)中.而且,只有列(col-)可以被直接放在行(row)中(作为行的子元素)
  • 每个列都有padding-left/padding-right属性(官方称其为gutter),以此分隔两个列中的内容
  • 可在行中使用".no-gutters"来删除行的margin/列的padding(即gutter)样式
  • 列的宽度相对于父元素计算,格式为百分比.每行中最多有12列,大于12的列会自动换行
  • (没有指明宽度的)列会自动等分行,例如,一行中有四个"col-sm",则这四个列的宽度皆为25% 
    1
    2
    3
    4
    <div class="row">
        <div class="col-sm">1</div>
        <div class="col-sm">2</div>
    </div>
  • 网格宽度基于最小宽度查询.共有五个等级(见下表).例如col-md适用于大于576px的网页窗口(包括col-lg/col-xl,不包括col-/col-sm)
  • You can use predefined grid classes (like .col-4) or Sass mixins for more semantic markup. ?
Class prefix 窗口宽度 最大容器宽度(container)
col- <576px none
col-sm- ≥576px 540px
col-md- ≥768px 720px
col-lg- ≥992px 960px
col-xl- ≥1200px 1140px

col-{breakpoint}-auto

自动根据内容宽度调整column宽度

1
2
3
4
5
<div class="row">
    <div class="col-auto">1</div>
    <div class="col-auto">2</div>
    <div class="col-auto">Lorem ipsum dolor sit amet
</div>

w-100

通过插入一个带有".w-100"的空元素,强制其后的column换行

1
2
3
4
5
6
<div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="w-100"></div>
    <div class="col">3</div>
</div>

也可以在特定的尺寸下强制换行

1
2
3
4
5
6
<div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="w-100 d-none d-md"></div>
    <div class="col">3</div>
</div>

align-items-{start|center|end}

控制row中所有column的垂直对齐方式

  • align-items-start 对齐行顶
  • align-items-center 垂直居中
  • align-items-end 对齐行底
1
2
3
4
5
6
<div class="row align-items-center">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
    <div class="col">4</div>
</div>

align-self-{start|center|end}

控制行row中单个column的对齐方式

  • align-self-start 对齐行顶
  • align-self-center 垂直居中
  • align-self-end 对齐行底
1
2
3
4
5
<div class="row">
    <div class="col align-self-start">1</div>
    <div class="col align-self-center">2</div>
    <div class="col  align-self-end">3</div>
</div>

justify-content-{start|center|end|around|between}

控制colum的水平对齐方式

1
2
3
4
5
<div class="row justify-content-between">
    <div class="col-auto">1</div>
    <div class="col-auto">2</div>
    <div class="col-auto">3</div>
</div>

order-{breakpoint}-{index}

重新排序column的显示顺序

1
2
3
4
<div class="row">
    <div class="col-sm-9 order-sm-2">1</div>
    <div class="col-sm-3 order-sm-1">2</div>
</div>

bootstrap3及以下使用col-*-pull-*和col-*-push-*代替order
html - Why is my Bootstrap push & pull divs not working? - Stack Overflow

offset-{breakpoint}-{index}

向右移动column

1
2
3
4
5
<div class="row">
 <!--向右移动50%-->
    <div class="col-sm-6 offset-sm-6">1</div>
    <div class="col-sm-6">2</div>
</div>

bootstrap3及以下使用col-*-offset-*代替offset

嵌套

row可以嵌套在column中

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

隐藏元素

Display property · Bootstrap

media object 媒体对象

Bootstrap提供了一种方法对齐media object(图像/视频)和文本.可用于评论/推文/like button等格式内容
创建media object只需要两个class,使用".media"作为媒体和文本的容器,将文本放在".media-body"中

1
2
3
4
5
6
7
<div class="media">
    <img class="mr-3" src="img/64x64.svg" alt="Generic placeholder image">
    <div class="media-body">
        <h5 class="mt-0">Media heading</h5> 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit
    </div>
</div>

和row类似,可用align-self-{start|center|end} 调整媒体对象/文本的垂直对齐方式

1
2
3
4
5
6
7
8
<div class="media">
    <!-- 垂直居中图像 -->
    <img class="mr-3 align-self-center" src="img/64x64.svg" alt="Generic placeholder image">
    <div class="media-body">
        <h5 class="mt-0">Media heading</h5> 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
</div>
1
2
3
4
5
6
7
<div class="media">
    <img class="mr-3" src="img/64x64.svg" alt="Generic placeholder image">
    <div class="media-body align-self-center">
        <!-- 垂直居中文本 -->
        <h5 class="align-self-center">Media heading</h5> 
    </div>
</div>

嵌套

".media"可以互相嵌套

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="media">
    <img class="mr-3" src="img/64x64.svg" alt="Generic placeholder image">
    <div class="media-body">
        <h5 class="mt-0">Media heading</h5> 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. 

        <div class="media mt-3">
            <img class="mr-3" src="img/64x64.svg" alt="Generic placeholder image">
            <div class="media-body">
                <h5 class="mt-0">Media heading</h5> 
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
            </div>
        </div>

    </div>
</div>

list

在列表中使用".media",首先要在ul/ol上添加".list-unstyled"删除默认列表样式,然后为li添加".media"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<ul class="list-unstyled">
    <li class="media">
        <img class="mr-3" src="img/64x64.svg" alt="Generic placeholder image">
        <div class="media-body">
            <h5 class="mt-0">Media heading</h5> 
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
        </div>
    </li>    
    <li class="media">
        <img class="mr-3" src="img/64x64.svg" alt="Generic placeholder image">
        <div class="media-body">
            <h5 class="mt-0">Media heading</h5> 
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </div>
    </li>   
</ul>