Introduction: The
world's most popular front-end component library, used to develop responsive layout, mobile device-first WEB projects
目前最新版本为V4：
放弃了低版本的支持 IE10+
flexbox将成为Bootstrap 4的默认布局选项
栅格系统和多个组件现在使用flexbox构建
源码是采用 Sass 语言编写，
使用了rem为单位（除了部分的margin和padding使用px）结合百分比的写入方式
Public utility:
border border/border-0 no border/border-top-0 none above, others have
rounded corners/rounded-top top rounded corners/rounded-circle round/rounded-0 no rounded corners
clearfix clear float/float -left floating/float-right floating
text-scene text color text-white
display display mode d-display mode d-sm/md/lg/xl-display mode.d
-none invisible.d
-inline
inline.d- inline-block inline
block.d-block
block.d-flex flex box mode
Flexible box
d-flex flex-row horizontal flex-sm/md/lg/xl-row
d-flex flex-row-reverse horizontal flashback
d-flex flex-column vertical flex-sm/md/lg/xl-column
alignment Content justify horizontal align-items vertical
d-flex justify-content-start/center/end/between/around horizontal left/center/right/two measuring tops evenly divided/non-two measuring tops evenly divided
justify-content-xm/ md/lg/xl-start
align items vertically
d-flex align-items-start/center/end/baseline/stretch stretch stretch
align-items-sm-start
align self
d-flex align-self-start/center/end /baseline/stretch stretch stretch
align-self-sm-start
d-flex flex-nowrap no line break
d-flex flex-wrap line break
d-flex flex-wrap-reverse line break
order-1 to 12 sort
Position
fixed-top fixed-bottom fixed-bottom sticky-top ceiling
Dimension
w-25 Relative to parent's width 25% h-25 Height 25/50/75/100
mw-50 Maximum width mh-50 Maximum height
Spacing
m == margin p==padding is used to adjust the grid with p, otherwise it will wrap
t, b, l, r up and down, left and right mt-0, clear the top margin number 0-5
x, y horizontal and vertical mx-auto horizontal center px-3 horizontal inner margin is 3
Layout tool:
inner and outer margins: Five-level scale based on 1rem value mr-n n=1-5 mr=margin-right
Text text-sm-left
text-left/center/right/justify
text-truncate Ellipsis text-nowrap does not wrap
text-lowercase/text-uppercase/text-capitalize
font-weight-bold bold font-italic italic
Vertical alignment of inline elements. align
-baseline/align-top top/align-middle middle/align-bottom bottom/align-text-bottom text bottom/align-text-top text top
Read the document
Download
Dependencies (Dependencies)
Bootstrap js requires jq support
Layout
Responsive fixed-width container Responsive to breakpoints 576px/768px/992px/1200px
Fluid width container-fluid spans the entire width of the viewport
Grid system row>col
12-column grid
content should be placed in columns, only columns may be direct sub-grid layers of rows based on the minimum width, which means they apply to this layer and all layers above it
nested col inside Set row>col
row>col column
col-sm applicable sm md lg xl
无（自动/指定） 540px 720像素 960像素 1140px
.col/.col-n .col-sm-n .col-md-n .col-lg-n .col-xl-n n 代表数字1-12
设置一列的宽度，并使兄弟列自动调整大小 col col-6 col 当前列6，其他均分
col-{breakpoint}-auto类 根据其内容的自然宽度来对列进行大小调整
跨多行等宽列 <div class="w-100"></div> 相对父宽的百分比
垂直对齐（操作row or col)
操作row align-items-start/center/end 行 上start 中center 下end
操作col align-self-start/center/end 行 上start 中center 下end
水平对齐（操作row)
操作row justify-content-start/center/end/around/between around均分 between两边
列之间的沟槽可以被删除(操作row)
no-gutters 只作用一级子列 相当于mx-0
排序
.order-n 控制您的内容的可视化顺序 n 1-12
抵消列
ml-auto、mr-auto 左、右边距自动，只要有空间就做成margin
Title, body, list: ------------------1~2
Title:
-
or .h1-.h6
Subscript: or .small
list: list-inline remove ul dots and indents, list-inline-item li changes to a line to display text-truncate truncated display ellipsis text
code must avoid HTML angle brackets
code : Represents a piece of code
pre: represents a code block
var: represents the variable
kbd: represents the key that the user needs to press
samp: represents the code output
Picture----------------3
img-fluid Responsive
img-thumbnail thumbnail with a border line on the edge
Table----------------4
add base class.table to any class
table-inverse reverse color
thead-inverse, thead-default header effects
.table-striped streak line
table-bordered add a border cell of all aspects of the
table-hover hovering state
table-sm table more compact
Context Context class table-
active activity, default default, primary primary, secondary times, success success, danger danger, warning warning, info message, light highlighting
attention inverse color table context bg- context to achieve
.table-responsive response table lateral scroll bar will appear
Title image-------------5
figure tag+figure class>img+figure-img class+img-fluid/figcaption tag+figcaption class
Button button a-------------6
btn btn-context btn-link
btn-outline-context border
button.btn-lg .btn-sm size btn-block block-level
active active disabled disabled Button for attributes, a for class
Checkboxes and radio buttons need jquery popper
data-toggle=“buttons” + .btn-group> .btn + checkbox/radio
Card----------------7~10
card card container
card-header header
card-img-top top image
card-body/card-img-overlay on the card body/picture Card body
card-title title
card-subtitle sub-label
card-text text
card-link link
list-group list group
list-group-item list item
card-img-bottom bottom image
card-footer footer
card group card-group>card One set of borderless one row card
card-deck>card One set of bordered row card One set of
waterfall flow card column card-columns>card All cards one set
Carousel Picture-----------------11 swiper
carousel
carousel-indicators indicator
carousel-inner
carousel content carousel-item active current
carousel item (required) carousel-item
img img-fluid picture responsive
carousel-caption text description
carousel-control-prev previous
carousel-control-prev-icon previous icon
carousel-control-next
features: the picture width is adaptive, the maximum height needs to be set for carousel+ carousel-item
The drop-down menu --------------------12 is
built on the third-party library Popper.js
dropdown/dropup drop-down/pull
- up dropdown-toggle/dropdown-toggle-split button/ Split button data-toggle="dropdown" trigger (required)
dropdown-menu/dropdown-menu-right menu/right-align
dropdown-header title
dropdown-item/disabled menu item/disable
dropdown-divider divider
Form ---------------------13
form-inline form operation form
form-group/form-group row form group/horizontal form
form-control/readonly for form Element appearance, focus state, formatting/read-only attributes
form-control-lg/sm Formatting the size of form elements
form-text description
form-check/disabled/form-check-inline checkbox container/disabled/check inline
form-check-label/col-form-label data label/horizontal form need to add
form-check-input check box
List group ----------------------- 14
list-group
list-group-item/list-group-item-action list item/press action
d- flex/justify-content-between/align-items-center flex positioning/internal justification/internal vertical centering
badge badge-primary badge-pill badge/primary/pill
Modal box ---------------- 15
does not support nested mode, the modal HTML is placed at the top level
fade in
bd-example-modal-lg/sm>modal-lg/sm size
Navigation--------------------16
nav/justify-content-center/justify-content-end/flex-column/nav-tabs/nav-pills/nav- fill
navigation/center/right/vertical/tab/pill/extended fill
nav-item/nav-link/active/disabled navigation item/link/activate/disable
nav flex-column flex-sm-row sm size starts to be horizontal, Vertically arranged
Navigation bar------------------------17
Navbars need to be packaged.navbar and .navbar-expand-sm are used for responsive folding
Navbars and their contents use flexbox Build
support a small number of sub-components
navbar-brand for your company, product or project name, LOGO
navbar-nav for light navigation
navbar-toggler for small screen navigation
navbar-toggler-icon small screen navigation icon
form-inline any form control
navbar-text adds a vertically centered text string.
collapse .navbar-collapse hides the content of the navigation bar on a small screen
Pagination------------------------18
nav tag
pagination/pagination-lg/sm/justify-content-center center alignment
page-item/disabled/active Page number item
page-link link