Bootstrap4学习笔记1

最新推荐文章于 2024-07-25 00:46:57 发布
最新推荐文章于 2024-07-25 00:46:57 发布
阅读量6k 收藏 10
点赞数 1
分类专栏： Web 文章标签： Bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bbdxf/article/details/79251934
版权

Bootstrap4 学习笔记1

初始模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- BootStrap CSS -->
    <link rel="stylesheet" href="static/bootstrap/css/bootstrap.css">

    <title>BootstrapDemo</title>
</head>
<body>

<h1>Hello, World!</h1>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="static/dist/jquery-3.2.1.js"></script>
<!-- bootstrap.bundle.js 包含了 popper 内容. -->
<script src="static/dist/popper.js"></script>
<script src="static/bootstrap/js/bootstrap.js"></script>
<!--<script src="static/dist/vue.js"></script>-->

</body>
</html>

统一风格：

盒子模型使用：border-box, 方便统一计算。
统一不同浏览器体验，使用 Reboot 修正。
所有的样式，必须使用`container / container-fluid`作为根包裹（只需要一个）。

默认的Z-index: 
$zindex-dropdown:          1000 !default;
$zindex-sticky:            1020 !default;
$zindex-fixed:             1030 !default;
$zindex-modal-backdrop:    1040 !default;
$zindex-modal:             1050 !default;
$zindex-popover:           1060 !default;
$zindex-tooltip:           1070 !default;

v4开始grid使用flexbox，不再仅限于原来的12栅格。

<div class="container">
  <div class="row">
    <div class="col-sm-9">
      Level 1: .col-sm-9
      <div class="row">
        <div class="col-sm">
          One of three columns
        </div>
        <!-- <div class="w-100"></div> -->
        <div class="col-sm">
          One of three columns
        </div>
      </div>
    </div>
  </div>
</div>

1. container提供一个固定宽度，居中的块。container-fluid使用了width:100%.
2. row 是列的包裹元素，每个列都有水平的padding(15px)。row拥有负值的marggin，以抵消列的padding.
3. col 是列的容器，也只有col可以作为row的子元素。
4. col 部分使用了flexbox布局，所以，col部分可以实现任意的均分和比列分隔。
5. col-xs-3 等价于 25%，以此类推。默认的widths是按照百分比（相对于父元素）。如果，col-xs-x相加超过12，则，换行。
6. col 之间的padding可以通过对 row 添加 no-gutters 去除row. 
7. xs(<576px,auto),sm(>576px,540),md(>768px,720),lg(>992px,960),xl(>1200px,1140) 来实现响应式视觉。小的默认覆盖大的。
8. row 附加 justify-content-xx-center 可以使得row宽度适应内容。
9. col-xx-auto 使得col宽度适应内容。
10. 在col同级元素之间插入一个拥有w-100(100%宽度的元素) class的div，可以使得内容换行。
11. 垂直对齐效果，row上添加，align-items-start 顶头对齐，align-items-center 垂直居中对齐，algin-items-end 底部对齐。 如果item需要自己定义，则使用对应的algin-self-xxx。
12. 水平对齐, row上添加 justify-content-start/center/end/around(均分)/between(两段对齐)。
13. order-1 ->12 打破原有顺序，按照数字指定。order-first,order-last对应头尾。 
14. offset-xx-3 偏移位置

常用范式记录

code:

<code>&lt;section&gt;</code> //简短代码,注意特殊符号需要转义
<pre><code>&lt;section&gt;</code></pre> // 大块代码
<kbd><kbd>ctrl</kbd>+<kbd>,</kbd></kbd> // 快捷键样式，可以嵌套为多个
<samp>xxxx</samp> // 简单地原样输出，没有太多样式

image: 

<img src="..." class="img-fluid" alt="Responsive image"> // 响应式，宽度100%，高度auto
<img src="..." alt="..." class="img-thumbnail"> // 圆角，相距1px的外边框
<img src="..." class="rounded float-right" alt="...">  // 圆角，靠右对齐
<img src="..." class="rounded mx-auto d-block" alt="..."> // 居中

table: 

<table class="table table-dark"> // table-striped 交替颜色效果。table-bordered 加边框效果。table-hover hover加亮效果。table-sm 压缩空间。
  <thead> //class thead-light or thead-dark 
    <tr> // table-primary...添加颜色效果
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

// 使得表格响应式
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

图表：

<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="简单的带有圆角的图表.">
  <figcaption class="figure-caption">图片的指示内容.</figcaption>
</figure>

alerts:

<div class="alert alert-primary" role="alert">
  含有url链接的alert. <a href="#" class="alert-link">点我</a>. 给一个特殊样式.
</div>
// 带有关闭按钮的alert
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

//js，事件参考 http://getbootstrap.com/docs/4.0/components/alerts/
$(".alert").alert('close'); // 关闭，'dispose' 销毁。

badge: (徽章) 

<button type="button" class="btn btn-primary">
  Notifications <span class="badge badge-light">4</span> // 圆角矩形
</button>
<span class="badge badge-pill badge-success">Success</span> // 椭圆形

breadcrumb: (面包屑/路径导航) 

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

Buttons: 

<button type="button" class="btn btn-primary">Primary</button> // 默认填满颜色
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<button type="button" class="btn btn-outline-danger">Danger</button> // 只有边框有颜色
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button> // block, 占据一行
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button> // disable

// http://getbootstrap.com/docs/4.0/components/button-group/
// 组合为 按钮组
<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>

// 并绑定radio
<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>

// 更复杂的组合
<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text" id="btnGroupAddon">@</div>
    </div>
    <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
  </div>
</div>

<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text" id="btnGroupAddon2">@</div>
    </div>
    <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
  </div>
</div>

Card: 

// http://getbootstrap.com/docs/4.0/components/card/
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="顶部图片"> // card-img-bottom 放在最底部
  <div class="card-body">
    <h5 class="card-title">Title</h5>
    <h6 class="card-subtitle mb-2 text-muted">subtitle</h6>
    <p class="card-text">内容...</p>
    <a href="#" class="btn btn-primary">底部附加内容</a>
  </div>
</div>

// text-white设置字体颜色，bg-primary 设置背景颜色, border-success 设置边框颜色 
<div class="card text-center text-white bg-primary border-success" style="width: 18rem;">
  <div class="card-header"> Featured </div> // 最顶部标题
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-footer">Footer</div> // 脚注标题
</div>

// 内容放在图片之上
<div class="card bg-dark text-white">
  <img class="card-img" src="..." alt="Card image">
  <div class="card-img-overlay"> // 重点是这个
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>

// 多个card组合
<div class="card-group"> // card-group 子之间无边距，card-deck 有边距。card-columns 特殊，它的子元素高度auto,所以不对齐。
  <div class="card">...</div>
  <div class="card">...</div>
  <div class="card">...</div>
</div>

// 延伸，与tab组合,导航1
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

// 延伸，与nav-pills组合,导航2
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Carousel:(图片轮播) 

// http://getbootstrap.com/docs/4.0/components/carousel/
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

// 如果图片上需要文字
<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</div>

Collapse:(可收缩) 

// http://getbootstrap.com/docs/4.0/components/collapse/
<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    方式1
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    方式2
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    可收缩区域的内容
  </div>
</div>

Dropdwon:(下拉弹出) 

<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

// 向上弹出
<div class="btn-group dropup"> // dropright 向右，dropleft 向左
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

// 可以把menu单独拿出来用
<div class="dropdown-menu">
  <h6 class="dropdown-header">Dropdown header</h6>
  <a class="dropdown-item active" href="#">Action</a> // 选中效果
  <a class="dropdown-item disabled" href="#">Another action</a> // 禁用效果
</div>

Forms:(表单) 

// http://getbootstrap.com/docs/4.0/components/forms/
// 基础款式
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

<form>
  <div class="form-group">
    <label for="exampleFormControlFile1">Example file input</label>
    <input type="file" class="form-control-file" id="exampleFormControlFile1">
  </div>
</form>

// 大小
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
// label单行
<div class="form-group row"></div>

// 表单单行
<form class="form-inline"></form>

// 控件checkbox
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>

// auto大小
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>

// 控件radio
<div class="form-check disabled">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

// 提示文本。给input添加 is-valid or is-invalid, 用于校验的提示
<form class="form-inline">
  <div class="form-group">
    <label for="inputPassword6">Password</label>
    <input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
    <small id="passwordHelpInline" class="text-muted">
      Must be 8-20 characters long.
    </small>
  </div>
</form>

// valid提示，当不满足条件时显示
<div class="custom-control custom-checkbox mb-3">
  <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
  <label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
  <div class="invalid-feedback">Example invalid feedback text</div>
</div>

// 当in/valid提交时，tooltip提示
<div class="valid-tooltip"> // or invalid-tooltip
  Looks good!
</div>

// 综合常见的form
<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <fieldset class="form-group">
    <div class="row">
      <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
          <label class="form-check-label" for="gridRadios1">
            First radio
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
          <label class="form-check-label" for="gridRadios2">
            Second radio
          </label>
        </div>
        <div class="form-check disabled">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
          <label class="form-check-label" for="gridRadios3">
            Third disabled radio
          </label>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-2">Checkbox</div>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>

//select menu
<select class="custom-select" multiple>
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

//custom-file
<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

InputGroup: 

// http://getbootstrap.com/docs/4.0/components/input-group/
<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text" id="">First and last name</span>
  </div>
  <input type="text" class="form-control">
  <input type="text" class="form-control">
</div>

Jumbotron:(超大屏幕) 

<div class="jumbotron jumbotron-fluid">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <hr class="my-4">
  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <p class="lead">
    <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
  </p>
</div>

Listgroup: 

<ul class="list-group"> // 添加list-group-flush，可以去除border和rounded corner
  <li class="list-group-item disabled">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li> // 可以通过xx-primary 添加颜色
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
  <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
</div>

// 与badge组合
<li class="list-group-item d-flex justify-content-between align-items-center">
  Cras justo odio
  <span class="badge badge-primary badge-pill">14</span>
</li>

// 更复杂的组合
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
  <div class="d-flex w-100 justify-content-between">
    <h5 class="mb-1">标题</h5>
    <small>右上角小字</small>
  </div>
  <p class="mb-1">内容</p>
  <small>底部小字</small>
</a>

// 简易导航 or nav
<div class="row">
  <div class="col-4">
    <!-- List group -->
    <div class="list-group" id="myList" role="tablist">
      <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
      <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
      <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
      <a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a>
    </div>

    <!-- Tab panes -->
    <div class="tab-content">
      <div class="tab-pane active" id="home" role="tabpanel">...</div>
      <div class="tab-pane" id="profile" role="tabpanel">...</div>
      <div class="tab-pane" id="messages" role="tabpanel">...</div>
      <div class="tab-pane" id="settings" role="tabpanel">...</div>
    </div>
  </div>
</div>

// js
$('#myList a').on('click', function (e) {
  e.preventDefault()
  $(this).tab('show')
})
$('#myList a[href="#profile"]').tab('show') // Select tab by name
$('#myList a:first-child').tab('show') // Select first tab
$('#myList a:last-child').tab('show') // Select last tab
$('#myList a:nth-child(3)').tab('show') // Select third tab

Model:(模式显示) 

// http://getbootstrap.com/docs/4.0/components/modal/
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document"> // 添加 modal-dialog-centered 居中
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Nav:(导航)

// http://getbootstrap.com/docs/4.0/components/navs/
// 基础款式
<ul class="nav"> // justify-content-center 居中， flex-column 垂直方向， nav-tabs 拥有tab效果，nav-pills 类似按钮效果，
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

<nav class="nav">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#">Disabled</a>
</nav>

// tab与内容关联
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

NavBar:(导航条) 

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

// Brand
<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</nav>

// Nav with brand and dropdown
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

// form
<nav class="navbar navbar-light bg-light justify-content-between">
  <a class="navbar-brand">Navbar</a>
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

// text
<nav class="navbar navbar-light bg-light">
  <span class="navbar-text">
    Navbar text with an inline element
  </span>
</nav>

// other
主题色 navbar-light,navbar-dark，手工设置bgcolor ...
父元素： container, 不是必须
固定位置： fixed-top/bottom,sticky-top

Pagination:(页码) 

<nav aria-label="Page navigation example">
  <ul class="pagination pagination-sm justify-content-center">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
        <span class="sr-only">Previous</span>
      </a>
    </li>
    <li class="page-item disabled"><a class="page-link" href="#">1</a></li>
    <li class="page-item active"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
        <span class="sr-only">Next</span>
      </a>
    </li>
  </ul>
</nav>

Popover:

// http://getbootstrap.com/docs/4.0/components/popovers/
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

Progress: 

<div class="progress">
  <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> // bg-success,bg-info...背景色,progress-bar-striped 添加条纹效果，progress-bar-animated 动画效果
</div>
<div class="progress" style="height: 10px;">
  <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
</div>

// 多段组合
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Scrollspy:(滚动监控)

http://getbootstrap.com/docs/4.0/components/scrollspy/

ToolTips:

// http://getbootstrap.com/docs/4.0/components/tooltips/
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>

通用工具见下一篇。

笨笨D幸福
关注
  • 1
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap4 Jumbotron
shengyin714959的博客
08-17 69
Jumbotron（超大屏幕）会创建一个大的灰色背景框，里面可以设置一些特殊的内容和信息。Jumbotron 里头可以放一些 HTML标签，也可以是 Bootstrap 的元素。
Bootstrap4学习
Suxiaomowang的博客
08-25 854
btn 按钮 btn 按钮没有边框和背景 btn-xxxx 设置按钮背景 btn-outline-primary 设置按钮边框颜色鼠标进入后修改背景颜色 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt.
Bootstrap 导航/滑动门（nav）
weixin_44543412的博客
05-28 3813
Bootstrap 导航/滑动门（nav） 开发工具与关键技术：Visual Studio 前端 作者：盘子 撰写时间：2019年5 月27 日 .nav导航/滑动门(nav) 1、基本导航样式 Bootstrap中提供的导航可共享通用标记和样式，从基础.nav样式类到活动与禁用状态。交换class选择符以在每种样式之间切换。 基础.nav组件采用Flexbox弹性布局构建，并为构建所有类型的导航...
Bootstrap系列之巨幕（Jumbotron）
老__L的博客
06-14 1204
巨幕（Jumbotron）
Vue2 Bootstrap4 Web 开发（二）
最新发布
龙哥盟
07-25 912
在本章中，我们应用了设计应用程序用户界面的基本原则。我们进行了头脑风暴，定义了我们的角色并编写了用户故事，从这些故事中提取了名词和动词，并最终为我们的应用程序设计了一些不错的模型。在下一章中，我们将开始实现我们的 ProFitOro。我们将使用 Vue.js 来搭建应用程序并将其拆分为重要的组件。因此，在下一章中我们将做以下事情：使用webpack模板使用 vue-cli 搭建 ProFitOro 应用程序将应用程序拆分为组件并为应用程序创建所有必要的组件。
深入理解BootStrap Item10 -- 导航（nav）
热门推荐
小平果的欢乐谷
11-15 1万+
1、导航（基础样式）导航对于一位前端人员来说并不陌生。可以说导航是一个网站重要的元素组件之一，可以便于用户查找网站所提供的各项功能服务。导航的制作方法也是千奇百怪，五花八门。在这一节中将向大家介绍如何使用Bootstrap框架制作各式各样的导航。在Bootstrap框架将导航独立出来成为一个导航组件，根据不同的版本，可以找到对应的源码：☑ LESS版本：对应的源文件是navs.less☑ Sass版
Bootstrap4 学习笔记
hjyp的博客
02-14 370
布局 1 .container .container { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } 排版 1.文字对齐 <div class="container"> <h2>排版</h2> <p cl...
bootstrap4学习
Suxiaomowang的博客
08-26 679
Bootstrap4 导航栏 用.navbar类来创建一个标准的导航栏 .navbar-expand-xl|lg|md|sm类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。 用ul元素并添加class="navbar-nav"类。 然后在li元素上添加.nav-item类，a元素上使用.nav-link类: 删除.navbar-expand-xl|lg|md|sm类来创建垂直导航栏 bg-primary,.bg-success,.bg-info,...
bootstrap4学习笔记（一）
02-08
bootstrap4学习笔记，中文的，适用于初学者学习，知识点配合案例的。
Bootstrap3.0学习笔记之表格相关
09-22
Bootstrap3.0是世界上最受欢迎的前端开发框架之一，它提供了丰富的预定义样式，使得构建美观且响应式的网页变得更加容易。本篇文章将详细讲解Bootstrap3.0中的表格组件，包括其不同类型的表格及其应用场景。 首先，...
第一次记录Bootstrap table学习笔记（1）
01-19
第一次使用Bootstrap-table这个表格插件，记录一下使用过程中遇到的问题。 |引入CSS文件 <link rel=stylesheet href=bootstrap.min.css> <link rel=stylesheet href=bootstrap-table.css> |引入相关...
bootstrap4随书笔记
11-10
通过一个月的学习，手动敲了一遍代码，并做好索引和笔记，以及一些参考网站资料信息都做了记录，先分享给大家，喜欢就给个好评
center-aligning-jumbotron:React-bootstrap Jumbotron 将儿童水平和垂直居中
07-16
居中对齐超大屏幕 这是一个 react-bootstrap Jumbotron，它的子项在水平和垂直方向上居中对齐。 使用 Flexbox 实现垂直对齐 使用text-align实现水平text-align 这种样式是使用内联style属性实现的 import CenterAligningJumbotron from 'center-aligning-jumbotron' ; < CenterAligningJumbotron> < h1> Centered! < / h1 > < p> Yay Yay Yay Yay Yay Yay Yay Yay Yay Yay Yay Yay Yay Yay < / p > < / CenterAligningJumbotron > fluid性 默认情况下，此组件返回的 Jumbotron 内部有一个<div class
Bootstrap源码学习笔记之bootstrap进度条
08-31
border-radius: 4px; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); } ``` 而`.progress-bar`类则设置了实际进度条的样式，包括宽度（通过`width`...
Bootstrap入门（导航条&栅格系统）
Bugxiu_fu的博客
05-06 1284
在这里小编给各位友友们道个歉；这段时间小编偷懒，不过，后续会慢慢给大家补上，感谢一直在背后支持着小编的家人们。 那么接下来，老规矩，咱们先来看看今天内容的思维导图。 一、Bootstrap是一个前端开发框架。简单点说就是别人写好的效果封装起来。 1、Bootstrap是2011年Twitter团队为了方便维护PC端和手机端二研发的一个响应式前端框架。 ​ 2、用于快速开发Web应用程序和网站的前端框架 ​ 3、Bootstrap是基于HTML、CSS、JS的，简介灵活，使W...
【详解】提示框（tooltip）的使用 - bootStrap4常用CSS笔记
weixin_30699235的博客
05-15 1930
tooltip (提示框) 是一个小小的弹窗，在鼠标移动到元素上显示，鼠标移到元素外就消失。 属性 常用的功能，可以通过以下属性来设置： data-toggle = "tooltip" 指明这是一个tooltip组件对象，其实可以省略 title = "这里设置展示的文字" 提示框显示的内容。 data-trigger = "{click | hover ...
bootstrap gutter 详解
jiaoqi6132的博客
07-02 3089
1.首先 gutter 是针对的是padding 他是grid 的封装 当我们一拿到这样的代码的时候，在row里面，我们一定会存在一些的疑问，那就是这是啥。 px-lg-2 这是什么 mx-lg-2这是什么。 1.p对应的是padding 2.m对应的是margin x和y 分辨对应是左右 上下 不同dom的设置对应它自己， lg 就是视图的大小 目前对于5.0中的g*开头的，4.5中是没有的详细的教程请查看 https://www.orchome.com/...
BootStrap4布局系列之栅格系统
爱喝水的qdy的博客
11-24 1011
目录文档地址设置列宽colcol-[n]col-[breakpoint]可变宽度col-autocol-[breakpoint]-auto列间无间隙混合排列列对齐水平对齐垂直对齐整体对齐单个元素对齐列嵌套列排序order-[n]order-[breakpoint]-[n]order-first & order-last列拆分自动拆分手动拆分响应式拆分列偏移响应式offset工具类margi...
bootstrap使用入门（bootstrap4.2.1版本）
老练
02-12 7437
一、什么是bootstrap? bootstrap是一个前端开发时使用的框架。前端开发主要写HTML5、css3、JavaScript。而bootstrap框架主要为我们提供两个最重要的文件：bootstrap.min.css和bootstrap.min.js。为什么没有.min.html呢？不知道，或许有一天会有吧~ 在bootstrap4.x版本中，bootstrap.min.js需要依赖...
bootstrap学习笔记
05-28
以下是一些 Bootstrap 学习笔记： 1. 开始使用 Bootstrap 要开始使用 Bootstrap，你需要在你的 HTML 文件中引入 Bootstrap 的 CSS 和 JavaScript 文件。你可以在 Bootstrap 的官方网站上下载这些文件，或者通过 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值