Bootstrap4学习笔记1
Bootstrap4 学习笔记1
初始模板
<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="static/bootstrap/css/bootstrap.css">
<title>BootstrapDemotitle>
head>
<body>
<h1>Hello, World!h1>
<script src="static/dist/jquery-3.2.1.js">script>
<script src="static/dist/popper.js">script>
<script src="static/bootstrap/js/bootstrap.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><section>code> //简短代码,注意特殊符号需要转义
<pre><code><section>code>pre> // 大块代码
<kbd><kbd>ctrlkbd>+<kbd>,kbd>kbd> // 快捷键样式，可以嵌套为多个
<samp>xxxxsamp> // 简单地原样输出，没有太多样式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">Firstth>
<th scope="col">Lastth>
<th scope="col">Handleth>
tr>
thead>
<tbody>
<tr>
<th scope="row">1th>
<td>Marktd>
<td>Ottotd>
<td>@mdotd>
tr>
<tr>
<th scope="row">2th>
<td>Jacobtd>
<td>Thorntontd>
<td>@fattd>
tr>
<tr>
<th scope="row">3th>
<td>Larrytd>
<td>the Birdtd>
<td>@twittertd>
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">×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">4span> // 圆角矩形
button>
<span class="badge badge-pill badge-success">Successspan> // 椭圆形breadcrumb: (面包屑/路径导航)
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Homea>li>
<li class="breadcrumb-item"><a href="#">Librarya>li>
<li class="breadcrumb-item active" aria-current="page">Datali>
ol>
nav>Buttons:
<button type="button" class="btn btn-primary">Primarybutton> // 默认填满颜色
<button type="button" class="btn btn-secondary btn-sm">Small buttonbutton>
<a class="btn btn-primary" href="#" role="button">Linka>
<button class="btn btn-primary" type="submit">Buttonbutton>
<input class="btn btn-primary" type="button" value="Input">
<button type="button" class="btn btn-outline-danger">Dangerbutton> // 只有边框有颜色
<button type="button" class="btn btn-primary btn-lg btn-block">Block level buttonbutton> // block, 占据一行
<button type="button" class="btn btn-secondary btn-lg" disabled>Buttonbutton> // 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">Leftbutton>
<button type="button" class="btn btn-secondary">Middlebutton>
<button type="button" class="btn btn-secondary">Rightbutton>
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">1button>
<button type="button" class="btn btn-secondary">2button>
<button type="button" class="btn btn-secondary">3button>
<button type="button" class="btn btn-secondary">4button>
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">1button>
<button type="button" class="btn btn-secondary">2button>
<button type="button" class="btn btn-secondary">3button>
<button type="button" class="btn btn-secondary">4button>
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">Titleh5>
<h6 class="card-subtitle mb-2 text-muted">subtitleh6>
<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 odioli>
<li class="list-group-item">Dapibus ac facilisis inli>
<li class="list-group-item">Vestibulum at erosli>
ul>
<div class="card-footer">Footerdiv> // 脚注标题
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 titleh5>
<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 agop>
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="#">Activea>
li>
<li class="nav-item">
<a class="nav-link" href="#">Linka>
li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disableda>
li>
ul>
div>
<div class="card-body">
<h5 class="card-title">Special title treatmenth5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.p>
<a href="#" class="btn btn-primary">Go somewherea>
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="#">Activea>
li>
<li class="nav-item">
<a class="nav-link" href="#">Linka>
li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disableda>
li>
ul>
div>
<div class="card-body">
<h5 class="card-title">Special title treatmenth5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.p>
<a href="#" class="btn btn-primary">Go somewherea>
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">Previousspan>
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">Nextspan>
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="#">Actiona>
<a class="dropdown-item" href="#">Another actiona>
<a class="dropdown-item" href="#">Something else herea>
<div class="dropdown-divider">div>
<a class="dropdown-item" href="#">Separated linka>
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">
div>
div>
// 可以把menu单独拿出来用
<div class="dropdown-menu">
<h6 class="dropdown-header">Dropdown headerh6>
<a class="dropdown-item active" href="#">Actiona> // 选中效果
<a class="dropdown-item disabled" href="#">Another actiona> // 禁用效果
div>Forms:(表单)
// http://getbootstrap.com/docs/4.0/components/forms/
// 基础款式
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email addresslabel>
<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">Passwordlabel>
<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 outlabel>
div>
<button type="submit" class="btn btn-primary">Submitbutton>
form>
<form>
<div class="form-group">
<label for="exampleFormControlInput1">Email addresslabel>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
div>
<div class="form-group">
<label for="exampleFormControlSelect1">Example selectlabel>
<select class="form-control" id="exampleFormControlSelect1">
<option>1option>
<option>2option>
<option>3option>
<option>4option>
<option>5option>
select>
div>
<div class="form-group">
<label for="exampleFormControlSelect2">Example multiple selectlabel>
<select multiple class="form-control" id="exampleFormControlSelect2">
<option>1option>
<option>2option>
<option>3option>
<option>4option>
<option>5option>
select>
div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Example textarealabel>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3">textarea>
div>
form>
<form>
<div class="form-group">
<label for="exampleFormControlFile1">Example file inputlabel>
<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">1label>
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">Passwordlabel>
<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 checkboxlabel>
<div class="invalid-feedback">Example invalid feedback textdiv>
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">Emaillabel>
<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">Passwordlabel>
<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">Radioslegend>
<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">Checkboxdiv>
<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 inbutton>
div>
div>
form>
//select menu
<select class="custom-select" multiple>
<option selected>Open this select menuoption>
<option value="1">Oneoption>
<option value="2">Twooption>
<option value="3">Threeoption>
select>
//custom-file
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose filelabel>
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 namespan>
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 morea>
p>
div>Listgroup:
<ul class="list-group"> // 添加list-group-flush，可以去除border和rounded corner
<li class="list-group-item disabled">Cras justo odioli>
<li class="list-group-item">Dapibus ac facilisis inli>
<li class="list-group-item">Morbi leo risusli> // 可以通过xx-primary 添加颜色
<li class="list-group-item">Porta ac consectetur acli>
<li class="list-group-item">Vestibulum at erosli>
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 ina>
<a href="#" class="list-group-item list-group-item-action">Morbi leo risusa>
<a href="#" class="list-group-item list-group-item-action">Porta ac consectetur aca>
<a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at erosa>
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">14span>
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">
<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">Homea>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profilea>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messagesa>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settingsa>
div>
<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 tabModel:(模式显示)
// http://getbootstrap.com/docs/4.0/components/modal/
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
button>
<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 titleh5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×span>
button>
div>
<div class="modal-body">
...
div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Closebutton>
<button type="button" class="btn btn-primary">Save changesbutton>
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="#">Activea>
li>
<li class="nav-item">
<a class="nav-link" href="#">Linka>
li>
<li class="nav-item">
<a class="nav-link" href="#">Linka>
li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disableda>
li>
ul>
<nav class="nav">
<a class="nav-link active" href="#">Activea>
<a class="nav-link" href="#">Linka>
<a class="nav-link" href="#">Linka>
<a class="nav-link disabled" href="#">Disableda>
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">Homea>
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">Profilea>
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">Contacta>
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="#">Navbara>
<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="#">Linka>
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="#">Actiona>
<a class="dropdown-item" href="#">Another actiona>
<div class="dropdown-divider">div>
<a class="dropdown-item" href="#">Something else herea>
div>
li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disableda>
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">Searchbutton>
form>
div>
nav>
// Brand
<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="#">Navbara>
<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="#">Featuresa>
li>
<li class="nav-item">
<a class="nav-link" href="#">Pricinga>
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="#">Actiona>
<a class="dropdown-item" href="#">Another actiona>
<a class="dropdown-item" href="#">Something else herea>
div>
li>
ul>
div>
nav>
// form
<nav class="navbar navbar-light bg-light justify-content-between">
<a class="navbar-brand">Navbara>
<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">Searchbutton>
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-topPagination:(页码)
<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">«span>
<span class="sr-only">Previousspan>
a>
li>
<li class="page-item disabled"><a class="page-link" href="#">1a>li>
<li class="page-item active"><a class="page-link" href="#">2a>li>
<li class="page-item"><a class="page-link" href="#">3a>li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">»span>
<span class="sr-only">Nextspan>
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>通用工具见下一篇。