后端小白的Bootstrap笔记

栅格系统

什么是栅格体统?

<div class="container-fluid">
    <!--.row限制一行-->
    <div class="row">
        <div class="col-xl-3 col-lg-6" style="background: #ff6262">炽焰</div>
        <div class="col-xl-3 col-lg-6" style="background: #5b9df9">冰蓝</div>
        <div class="col-xl-3 col-lg-6" style="background: #2c7d59">青草</div>
        <div class="col-xl-3 col-lg-6" style="background: #8E2DE2">江户</div>
    </div>
</div>

• class=row 表示一行
• class=col 表示一个单元格

<div class="container-fluid">
    <!--.row限制一行-->
    <div class="row">
        <div class="col-xl-3 col-lg-8" style="background: #ff6262">炽焰</div>
        <div class="col-xl-3 col-lg-6" style="background: #5b9df9">冰蓝</div>
        <div class="col-xl-3 col-lg-6" style="background: #2c7d59">青草</div>
        <div class="col-xl-3 col-lg-6" style="background: #8E2DE2">江户</div>
    </div>
</div>

<div class="container-fluid">
    <!--.row限制一行-->
    <div class="row">
        <div class="col-3 " style="background: #ff6262">炽焰</div>
        <div class="col-3 " style="background: #5b9df9">冰蓝</div>
        <div class="col-3 " style="background: #2c7d59">青草</div>
        <div class="col-3 " style="background: #2c7d59">青草</div>
    </div>
</div>

等宽布局 col

<div class="container-fluid">
    <!--.row限制一行-->
    <div class="row">
        <div class="col" style="background: #ff6262">炽焰</div>
        <div class="col" style="background: #5b9df9">冰蓝</div>
        <div class="col" style="background: #2c7d59">青草</div>
        <div class="col" style="background: #8E2DE2">江户</div>
        <div class="col" style="background: #2c7d59">青草</div>
    </div>
</div>

单独设置一列的宽度: col-6

<div class="container-fluid">
    <!--.row限制一行-->
    <div class="row">
        <div class="col" style="background: #ff6262">炽焰</div>
        <div class="col-6" style="background: #5b9df9">冰蓝</div>
        <div class="col" style="background: #2c7d59">青草</div>
        <div class="col" style="background: #8E2DE2">江户</div>
    </div>
</div>

设置可变宽度:col-auto

<div class="container-fluid">
    <!--.row限制一行-->
    <div class="row">
        <div class="col" style="background: #ff6262">炽焰</div>
        <div class="col-auto" style="background: #5b9df9">冰蓝</div>
        <div class="col" style="background: #2c7d59">青草</div>
        <div class="col" style="background: #8E2DE2">江户</div>
    </div>
</div>

可变宽度+断点

<div class="container-fluid">
    <!--.row限制一行-->
    <div class="row">
        <div class="col" style="background: #ff6262">炽焰</div>
        <div class="col-xl-auto" style="background: #5b9df9">冰蓝</div>
        <div class="col" style="background: #2c7d59">青草</div>
        <div class="col" style="background: #8E2DE2">江户</div>
    </div>
</div>

class = col-xl-auto
# 相当于下面的累加
class = col  # 等宽布局
class = col-xl # 当浏览器的可视区域大于1200px时生效
class = col-auto # 可变宽度

**垂直对齐: **

    <!--.row限制一行-->
    <div class="row align-items-start" style="border:3px solid;height: 100px">
        <div class="col" style="background: #ff6262">炽焰</div>
        <div class="col" style="background: #5b9df9">冰蓝</div>
        <div class="col" style="background: #2c7d59">青草</div>
        <div class="col" style="background: #8E2DE2">江户</div>
    </div>

<div class="container-fluid">
    <!--.row限制一行-->
    <div class="row align-items-xl-center" style="border:3px solid;height: 100px">
        <div class="col" style="background: #ff6262">炽焰</div>
        <div class="col" style="background: #5b9df9">冰蓝</div>
        <div class="col" style="background: #2c7d59">青草</div>
        <div class="col" style="background: #8E2DE2">江户</div>
    </div>
</div>

<div class="container-fluid">
    <!--.row限制一行-->
    <div class="row align-items-xl-center" style="border:3px solid;height: 100px">
        <div class="col" style="background: #ff6262">炽焰</div>
        <div class="col align-self-end" style="background: #5b9df9">冰蓝</div>
        <div class="col" style="background: #2c7d59">青草</div>
        <div class="col" style="background: #8E2DE2">江户</div>
    </div>
</div>

水平对齐:

<div class="container">
    <!--.row限制一行-->
    <div class="row justify-content-end" style="border:3px solid;height: 100px">
        <div class="col-3" style="background: #ff6262">炽焰</div>
        <div class="col-3" style="background: #5b9df9">冰蓝</div>
        <div class="col-3" style="background: #2c7d59">青草</div>
    </div>
</div>

<div class="container">
    <!--.row限制一行-->
    <div class="row justify-content-xl-end" style="border:3px solid;height: 100px">
        <div class="col-3" style="background: #ff6262">炽焰</div>
        <div class="col-3" style="background: #5b9df9">冰蓝</div>
        <div class="col-3" style="background: #2c7d59">青草</div>
    </div>
</div>

换行

<div class="container-fluid">
    <!--.row限制一行-->
    <div class="row">
        <div class="col" style="background: #ff6262">炽焰</div>
        <div class="col" style="background: #5b9df9">冰蓝</div>
        <div class="w-100"></div>
        <div class="col" style="background: #2c7d59">青草</div>
        <div class="col" style="background: #8E2DE2">江户</div>
        <div class="col" style="background: #2c7d59">青草</div>
    </div>
</div>

间距沟槽的清除

<div class="container">
    <!--.row限制一行-->
    <div class="row justify-content-end">
        <div class="col" style="background: #ff6262">炽焰</div>
        <div class="col" style="background: #5b9df9">冰蓝</div>
        <div class="col" style="background: #2c7d59">青草</div>
        <div class="col" style="background: #8E2DE2">江户</div>
    </div>
</div>

    <div class="row no-gutters">

重排列

<div class="container">
    <!--.row限制一行-->
    <div class="row no-gutters">
        <div class="col order-0" style="background: #ff6262">炽焰</div>
        <div class="col" style="background: #5b9df9">冰蓝</div>
        <div class="col order-2" style="background: #2c7d59">青草</div>
        <div class="col" style="background: #8E2DE2">江户</div>
    </div>
</div>

偏移

<div class="container">
    <!--.row限制一行-->
    <div class="row no-gutters">
        <div class="col order-0" style="background: #ff6262">炽焰</div>
        <div class="col offset-3" style="background: #5b9df9">冰蓝</div>
        <div class="col " style="background: #2c7d59">青草</div>
    </div>
</div>

布局

<div class="container">
    <!--.row限制一行-->
    <div class="row no-gutters">
        <div class="col-3 " style="background: #ff6262">炽焰</div>
        <div class="col-3 ml-auto" style="background: #5b9df9">冰蓝</div>
        <div class="col-3 " style="background: #2c7d59">青草</div>
    </div>
</div>

列嵌套

<div class="container">
    <!--.row限制一行-->
    <div class="row no-gutters">
        <div class="col-3 " style="background: #ff6262">炽焰</div>
        <div class="col-3 " style="background: #5b9df9">冰蓝</div>
        <div class="col-3 " style="background: #2c7d59">青草</div>
        <div class="col-3 " style="background: #2c7d59">
            <div class="row" >
                <div class="col-xl-8" style="background: #8E2DE2">江户</div>
                <div class="col-xl-4" style="background: #5b9df9">冰蓝</div>
            </div>
        </div>
    </div>
</div>

响应式的分界点

  <!--.row限制一行-->
    <div class="row no-gutters">
        <div id="myP">Bootstrap</div>
    </div>

        /*当min-width大于768px时生效*/
        @media (min-width: 768px) {
            #myP{
                font-size: 32px;
                color: #ffc107;
            }
        }

        @media all {  }
        @media (min-width: 576px)and(max-width: 767px) {  }
        @media (min-width: 768px)and(max-width: 991px) {  }
        @media (min-width: 992px)and(max-width: 1199px) { }
        @media (min-width: 1200px) { }

排版

<div class="container">
    <!--.row限制一行-->
    <div class="no-gutters">
        <div class="h1">Bootstrap</div>
        <h1>Bootstrap</h1>
    </div>
</div>

• 自定义标题和副标题

<div class="container">
    <!--.row限制一行-->
    <div class="no-gutters">
        <div class="h1">
            Bootstrap
            <small class="text-muted">Bootstrap</small>
        </div>
    </div>
</div>

更大的标题

    <div class="no-gutters">
        <div class="h1">Bootstrap</div>
        <div class="h2">Bootstrap</div>
        <div class="h3">Bootstrap</div>
        <div class="h4">Bootstrap</div>
        <div class="display-1">Bootstrap</div>
        <div class="display-2">Bootstrap</div>
        <div class="display-3">Bootstrap</div>
        <div class="display-4">Bootstrap</div>
    </div>

    <div class="no-gutters">
        <div>Bootstrap</div>
        <div class="lead">Bootstrap</div>
        <div>Bootstrap</div>
        <div>Bootstrap</div>
    </div>

文本内联元素

  <div class="no-gutters">
        <p><mark>Bootstrap</mark></p>
        <p class="mark">Bootstrap</p>
        <p><small>小号字体</small></p>
        <p><del>删除线</del></p>
        <p><s>删除线</s></p>
        <p><ins>下划线</ins></p>
        <p><u>下划线</u></p>
        <p><strong>加粗</strong></p>
        <p><b>加粗</b></p>
        <p><em>斜体</em></p>
        <p><i>斜体</i></p>
    </div>

缩略语

    <div class="no-gutters">
        <p><abbr title="this is Bootstrap"></abbr>Bootstrap</p>
    </div>

引用类型

<div class="no-gutters">
<blockquote  class="blockquote text-right">
    <p class="mb-0"> 自己不能胜任的事情，切莫轻易答应别人，一旦答应了别人，就必须实践自己的诺言。</p>
    <footer class="blockquote-footer">某出版社 <cite title="Source Title">华盛顿</cite></footer>
</blockquote>
</div>

列表

     <ul class="list-unstyled">
         <li>Bootstrap</li>
         <li>Bootstrap</li>
         <li>Bootstrap</li>
     </ul>

列表的分行和多行并排

<ul class="list-inline">
    <li class="list-inline-item">Bootstrap</li>
    <li class="list-inline-item">Bootstrap</li>
    <li class="list-inline-item">Bootstrap</li>
</ul>

水平表格

    <dl class="row">
        <dt class="col-sm-4">标题</dt>
        <dd class="col-sm-8">内容</dd>

        <dt class="col-sm-4 text-truncate">我的标题我的标题我的标题我的标题我的标题我的标题我的标题</dt>
        <dd class="col-sm-8">内容</dd>

        <dd class="col-sm-8">
            <dl class="row">
                <dt class="col-sm-4">姓名</dt>
                <dd class="col-sm-8">张三</dd>
            </dl>
        </dd>
    </dl>

代码块

    <div class="row">
        <pre>
            <code>
                Hello
                ...
                world
            </code>
        </pre>
    </div>

Var变量

 y= mx+b <br>
<var>y</var> = <var>mx</var> + <var>b</var>

标识键盘输入事件

      <kbd>cd</kbd>
      <kbd>ctrl</kbd>