Bootstrap

Bootstrap4

1.添加Bootstrap的引用

    <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap-theme.css">
	<!--因为Bootstrap依赖jQuery,所以要在bootstrap.js前引用jQuery-->
    <script src="../jquery34/jquery-3.4.0.min.js"></script>
    <script src="../bootstrap-3.3.7-dist/js/bootstrap.js"></script>

2.容器

2.1流体容器

宽度不固定，随页面变化而变化

<div class="container-fluid">
</div>

2.2固定容器

<div class="container">
</div>

阈值	width(px)
>=1200(.col-xl-)	1140
>=992(.col-lg-)	960
>=768(.col-md-)	720
>=576(.col-sm-)	540
<576(.col-)	auto

2.3栅格系统

2.3.1基本样式

    <div class="container">
        <div class="row"><!--定义一行-->
            <div class="col-3"><!--定义行内的一列，长度为3/12-->
                <!--因为这样的样式下，一行最多是12-->
            </div>
        </div>
    </div>

• 等宽列：class=“col”
• 自动宽度：class=“col-auto”(宽度随内容改变)

2.3.2混合布局

<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-6 col-sm-12">

        </div>
        <div class="col-lg-4 col-md-6 col-sm-12">

        </div>
        <div class="col-4 col-md-6 col-sm-12">

        </div>
    </div>
</div>

对不同的屏幕尺寸呈现不同的效果

2.3.3垂直对齐

<!--对整行起作用,顶部/居中/底部垂直对齐-->
<div class="row align-items-start/center/end">
    
</div>
<!--对某一列起作用-->
<div class="col align-self-start/center/end">
    
</div>

2.3.4水平对齐

<!--对整行起作用,左/居中/右/等距/两端水平对齐-->
<div class="row justify-content-start/center/end/around/between">
    
</div>

2.3.5间隙沟槽清除

<div class="row no-gutters">
    
</div>

2.3.6添加优先级

.order-[1-12]/first:数字越小优先级越高，first代表-1

<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-6 col-sm-12 order-1">

        </div>
        <div class="col-lg-4 col-md-6 col-sm-12 order-first">

        </div>
        <div class="col-4 col-md-6 col-sm-12 order-2">

        </div>
    </div>
</div>

2.3.7列偏移

.offset-[1-12]

2.3.8响应式的分界点

为布局和界面创建自适应的分界点，这些分界点主要是基于视口宽度的最小值，并且当窗口视图改变时允许元素缩放。

  
<style>
        @media (min-width: 576px) {
            .xxx{
                font: xxx;
                background-color: #xxx;
            }
        }
        @media (min-width: 768px) {

        }
        @media (min-width: 992px) {

        }
        @media (min-width: 1200px) {

        }
</style>

3.排版

3.1标题

• 标题：h1-h6或class=“h[1-6]”
• 辅助标题文本:small标签

<div class="container">

    <h1>Title<small class="text-muted">Small Title</small></h1>
    <h2>Title</h2>
    <h3>Title</h3>
    <h4>Title</h4>
    <h5>Title</h5>
    <h6>Title</h6>

    <p class="h1">Title</p>
    <p class="h2">Title</p>
    <p class="h3">Title</p>
    <p class="h4">Title</p>
    <p class="h5">Title</p>
    <p class="h6">Title</p>

</div>

3.2显式标题

一种更大型、鲜明的标题样式

<div class="container">

    <h1 class="display-1">Title<small class="text-muted">Small Title</small></h1>
    <h1 class="display-2">Title<small class="text-muted">Small Title</small></h1>
    <div class="display-3">Title<small class="text-muted">Small Title</small></div>
    <div class="display-4">Title<small class="text-muted">Small Title</small></div>
    
</div>

3.3文本样式

<div class="container">

    <p>abc<mark>高亮</mark></p>
    <p>abc<span class="mark">高亮</span></p>

    <p>abc<small>小号字</small></p>
    <p>abc<span class="small">小号字</span></p>

    <p>abc<del>删除线</del></p>
    <p>abc<s>删除线</s></p>

    <p>abc<ins>下划线</ins></p>
    <p>abc<u>下划线</u></p>

    <p>abc<strong>粗体</strong></p>
    <p>abc<b>粗体</b></p>

    <p>abc<em>斜体</em></p>
    <p>abc<i>斜体</i></p>

</div>