基础样式
颜色
文字颜色以.text-*开头
背景颜色.bg-*
primary / seconday / success / danger / warning / info / muted / white / light / dark
文本样式
text-left / text-right / text-center
text-nowrap(文本一行显示) / text-truncate（文本一行显示，超出部分...）
text-lowercase / text-uppercase / text-capitalize (首字母大写)
font-weight-bold / font-weight-normal / font-weight-light / font-italic
text-hide
元素大小
w-25 -> widht:25%
w-50 / w-75 / w-100 / h-25 / h-50 / h-75 / h-100
mw-100 -> max-100%
mh-100 -> max-height:100%
间距
m(margin) / p(padding)
l(left) / t(top) / b(bottom) / r(right) / x(left|right) / y(top/bottom)
SIZE:0 / 1 / 2 / 3 / 4 / 5 / auto
case
mt-0 -> margin-top
mx-2 -> margin-left | margin-right
p-2 -> padding
定位
position-relative / position-absolute / position-fixed / position-static / position-sticky
fixed-top
fixed-bottom
sticky-top
Display
d-*
none / block / inline / inline-block / flex / inline-flex
浮动
clearfix
float-left / float-right / float-none
边框
border / border-top / border-right / border-bottom / border-left
border-0 / border-top-0 / border-right-0 / border-bottom-0 / border-left-0
border-primary / border-seconday / border-success / border-danger / border-warning / border-info / border-dark / border-light / border-white
rounded / rounded-circle / rounded-0
布局
container / container-fluid
col / col-sm / col-md / col-lg / col-xl
align-items-start/ align-items-center / align-items-end
align-selft-start / align-selft-center / align-selft-end
justify-content-start / justify-content-center / justify-content-end / justify-content-between / justify-content-around
导航
nav / nav-item / nav-link
<div className='nav'> <div className='nav-item'> <div className='nav-link'>HTML</div> </div> <div className='nav-item'> <div className='nav-link'>CSS</div> </div> <div className='nav-item'> <div className='nav-link'>JavaScript</div> </div> </div>
flex-column 垂直方向导航
justify-content-center / justify-content-start / justify-content-end
nav_tabs / nav-pills
nav-fill / nav-justified
导航栏
navbar / navbar-expand-lg
navbar-brand
navbar-nav / nav-item / nav-link
<div className='navbar navbar-expand-lg navbar-light bg-light'> <a className='navbar-brand'>微博</a> <ul className='navbar-nav'> <li className='nav-item'> <a className='nav-link active'>学习</a> </li> <li className='nav-item'> <a className='nav-link'>论坛</a> </li> </ul> </div>
导航栏切换
切换隐藏 collapse / navbar-collapse
切换按钮 navbar-toggler 属性 data-toggle / data-target
<div className='navbar navbar-expand-lg navbar-light bg-light'> <a className='navbar-brand'>微博</a> <button className='navbar-toggler' data-toggle='collapse' data-target='#navbar-content'> <span className='navbar-toggler-icon'></span> </button> <div className='collapse navbar-collapse' id='navbar-content'> <ul className='navbar-nav'> <li className='nav-item'> <a className='nav-link active'>学习</a> </li> <li className='nav-item'> <a className='nav-link'>论坛</a> </li> </ul> </div> </div>
导航位置
fixed-top / fixed-bottom / sticky-top
Alert组件
alert / alert-primary
alert-link
<div className='alert alert-primary'> <h2>标题</h2> hello ! <a className='alert-link'>more</a> </div>
可关闭的提示
alert-dismissble
属性 role / data-dismiss
<div className='alert alert-primary alert-dismissble' role='alert'> <h2>标题</h2> hello ! <a className='alert-link'>more</a> <button className='close' data-dismiss='alert'>×</button> </div>
Badges组件
badge / badge-secondary
<h1>hello~<span className='badge badge-secondary'>New</span></h1> <button className='btn btn-primary'>hello<span className='badge badge-light'>New</span></button>
Card组件
card / card-header / card-body / card-footer
card-title / card-subtitle / card-text / card-link
<div className='card'> <div className='card-header'> Featured </div> <div className='card-body'> <h2 className='card-title'>这是标题</h2> <div className='card-subtitle'>副标题</div> <p className='card-text'>This is some text within a card body</p> <p> <a href='#' className='card-link'>card link</a> <a href='#' className='card-link'>another link</a> </p> </div> <div className='card-footer'> Footer </div> </div>
card-img-top
<div className='card'> <img src={require('./1.jpg')} className='card-img-top'/> <div className='card-body'> <p className='card-text'>Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div>
list-group / list-group-flush / list-group-item
<div class="card" style=" 18rem;"> <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>
card-header-tabs / card-header-pills
<div className='card'> <div className='card-header'> <ul className='nav nav-tabs card-header-tabs'> <li className='nav-item'> <a href='#' className='nav-link active'>Active</a> </li> <li className='nav-item'> <a href='#' className='nav-link'>Link</a> </li> <li className='nav-item'> <a href='#' className='nav-link'>Disabled</a> </li> </ul> </div> <div className='card-body'> <h5 className='card-title'>Special title treatment</h5> <p className='card-text'>With supporting text below as a natural lead-in to additional content.</p> <a href='#' className='btn btn-primary'>Go somewhere</a> </div> </div>
图片
card-img-top / card-imt-bottom
car-img / card-img-overlay
<div className='card text-white'> <img className='card-img' src={require('./1.jpg')}/> <div className='card-img-overlay'> <h5 className='card-title'>Card title</h5> <p className='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 className='card-text'><small className='text-muted'>Last updated 3 mins ago</small></p> </div> </div> <div className='card'> <div className='card-body'> <h5 className='card-title'>Card title</h5> <p className='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 className='card-text'> <small className='text-muted'>Last updated 3 mins ago</small> </p> </div> <img className='card-img-bottom' src={require('./1.jpg')} /> </div>
Card分组
card-group / card-deck / card-columns
Button组件
btn / btn-primary / btn-outline-primary
btn-bock
btn-sm / btn-lg
Button Group
btn-group / btn-group-vertical
Carousel组件
carousel / carousel-inner / carousel-item
<div className='carousel slide' data-ride='carousel'> <div className='carousel-inner'> <div className='carousel-item active'> <img className='d-block w-100' src={require('./1.jpg')} /> </div> <div className='carousel-item'> <img className='d-block w-100' src={require('./2.jpg')} /> </div> <div className='carousel-item'> <img className='d-block w-100' src={require('./3.jpg')} /> </div> </div> </div>
控制元素
<a className='carousel-control-prev' href='#carouselDemo' data-slide='prev'> <span className='carousel-control-prev-icon'></span> </a> <a className='carousel-control-next' href='#carouselDemo' data-slide='next'> <span className='carousel-control-next-icon'></span> </a>
<ol className='carousel-indicators'> <li data-target='#carouselDemo' data-slide-to='0' className='active'></li> <li data-target='#carouselDemo' data-slide-to='1'></li> <li data-target='#carouselDemo' data-slide-to='2'></li> </ol>
调整样式
.carousel-style.carousel { .carousel-item { height: 300px; img { min-height: 300px; max-height: 400px; object-fit: cover; } } }
Collapse组件
collapse控制元素的显示隐藏
LINK属性 data-toggle / href
BUTTON属性 data-toggle / data-target
<a href='#collapseDemo' data-toggle='collapse' className='btn btn-primary'>Link with href</a> <button className='btn btn-primary' data-toggle='collapse' data-target='#collapseDemo'>Button with data-target</button> <div className='collapse' id='collapseDemo'> <div className='card card-body'> <p className='card-text'>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</p> </div> </div>
手风琴
data-parent
<div id='accordion'> <div className='card'> <div className='card-header'> <a className='' href='#collapse-1' data-toggle='collapse'>Collapsible Group Item #1</a> </div> <div className='card-body collapse' id='collapse-1' data-parent='#accordion'> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> <div className='card'> <div className='card-header'> <a href='#collapse-2' data-toggle='collapse'>Collapsible Group Item #2</a> </div> <div className='card-body collapse' id='collapse-2' data-parent='#accordion'> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> <div className='card'> <div className='card-header'> <a data-toggle='collapse' href='#collapse-3' data-parent='#accordion'>Collapsible Group Item #3</a> </div> <div className='collapse' id='collapse-3'> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div>
DropDown组件
dropdown / dropdown-menu / dropdown-header / dropdown-item / dropdown-divider
属性 data-toggle='dropdown'
<div className='dropdown'> <a href='#' className='btn btn-success dropdown-toggle' data-toggle='dropdown'>Dropdown</a> <div className='dropdown-menu'> <div className='dropdown-header'> <div className='dropdown-item'>HTML</div> <div className='dropdown-item'>CSS</div> <div className='dropdown-item'>JavaScript</div> <div className='dropdown-divider'></div> <a href='#' className='dropdown-item'>more</a> </div> </div> </div>
分离式下拉菜单
<div className='btn-group dropup mt-5'> <button className='btn btn-danger' data-toggle='dropdown'>Dropdown</button> <button className='btn btn-danger dropdown-toggle dropdown-toggle-split' data-toggle='dropdown' data-offset='0'> <span className='sr-only'>Toggle Dropdown</span> </button> <div className='dropdown-menu dropdown-menu-right'> <div className='dropdown-header'>Web Language</div> <div className='dropdown-item'>HTML</div> <div className='dropdown-item'>CSS</div> <div className='dropdown-item'>JavaScript</div> <div className='dropdown-divider'></div> <div className='dropdown-item'>more</div> </div> </div>
dropdown / dropup / dropright / dropleft
dropdown-menu-left
Jumbotron组件
<div class="jumbotron"> <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>
List group组件
list-group / list-group-item
active / disabled
list-group-item-action
<div className='list-group'> <a href='#' className='list-group-item '>HTML</a> <a href='#' className='list-group-item list-group-item-warning'>CSS</a> <a href='#' className='list-group-item list-group-item-action d-flex justify-content-between align-items-center'>JavaScript<span className='badge badge-primary'>12</span></a> </div>
<div className='list-group'> <a className='list-group-item list-group-item-action flex-column active'> <div className='d-flex w-100 justify-content-between align-items-center'> <h5 className='mt-1'>List group item heading</h5> <small>3 days ago</small> </div> <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <small>Donec id elit non mi porta.</small> </a> <a className='list-group-item list-group-item-action flex-column '> <div className='d-flex w-100 justify-content-between align-items-center'> <h5 className='mt-1'>List group item heading</h5> <small>3 days ago</small> </div> <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <small>Donec id elit non mi porta.</small> </a> <a className='list-group-item list-group-item-action flex-column '> <div className='d-flex w-100 justify-content-between align-items-center'> <h5 className='mt-1'>List group item heading</h5> <small>3 days ago</small> </div> <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <small>Donec id elit non mi porta.</small> </a> </div>
切换显示标签内容
属性data-toggle='list'
样式 tab-content / tab-pane
<div className='row'> <div className='col-md-4'> <div className='list-group'> <a href='#html' className='list-group-item list-group-item-action active' data-toggle='list'>HTML</a> <a href='#css' className='list-group-item list-group-item-action' data-toggle='list'>CSS</a> <a href='#js' className='list-group-item list-group-item-action' data-toggle='list'>JavaScript</a> </div> </div> <div className='col-md-8'> <div className='tab-content'> <div className='tab-pane fade active show' id='html'>HTML</div> <div className='tab-pane fade' id='css'>CSS</div> <div className='tab-pane fade' id='js'>JavaScript</div> </div> </div> </div>
Pagination组件
pagination / page-item / page-link
active
pagination-lg / pagination-sm
<div className='pagination justify-content-center'> <li className='page-item'> <a className='page-link' href='#'> <span className='sr-only'>Previous</span> <span>«</span> </a> </li> <li className='page-item active'> <a className='page-link' href='#'>1</a> </li> <li className='page-item'> <a className='page-link' href='#'>2</a> </li> <li className='page-item'> <a className='page-link' href='#'>3</a> </li> <li className='page-item'> <a className='page-link' href='#'> <span className='sr-only'>Next</span> <span>»</span> </a> </li> </div>
progress组件
progress / progress-bar / progress-bar-striped / progress-bar-animated
<div className='progress mt-1'> <div className='progress-bar'></div> </div> <div className='progress mt-1'> <div className='progress-bar progress-bar-striped progress-bar-animated bg-info' style={{'50%'}}></div> </div> <div className='progress mt-1'> <div className='progress-bar bg-danger' style={{'15%'}}></div> <div className='progress-bar bg-info' style={{'20%'}}></div> <div className='progress-bar bg-warning' style={{'10%'}}></div> </div>
Scrollspy组件
属性data-spy='scroll' data-target='#'
必须设置height 和overflow-y
<div className='row'> <div className='col-md-3'> <div id='scroll' className='nav nav-pills bg-light flex-column'> <div className='nav-item'> <a className='nav-link' href='#html'>HTML</a> </div> <div className='nav-item'> <a className='nav-link' href='#css'>CSS</a> </div> <div className='nav-item'> <a className='nav-link' href='#js'>JavaScript</a> </div> </div> </div> <div className='col-md-9'> <div data-spy='scroll' data-target='#scroll' style={{height:'300px',overflowY:'scroll'}} > <h4 id='html'>HTML</h4> <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.</p> <h4 id='css'>CSS</h4> <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.</p> <h4 id='js'>JavaScript</h4> <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.</p> </div> </div> </div>
<div className='row'> <div className='col-md-3'> <div id='scroll' className='list-group'> <a className='list-group-item list-group-item-action' href='#html'>HTML</a> <a className='list-group-item list-group-item-action' href='#css'>CSS</a> <a className='list-group-item list-group-item-action' href='#js'>JavaScript</a> </div> </div> <div className='col-md-9'> <div data-spy='scroll' data-target='#scroll' style={{height:'300px',overflowY:'scroll'}}> <h4 id='html'>HTML</h4> <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.</p> <h4 id='css'>CSS</h4> <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.</p> <h4 id='js'>JavaScript</h4> <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.</p> </div> </div> </div>
Tooltips组件
data-toggle='tooltip'
data-placement='top/bottom/left/right'
表单组件
form-control / form-text
<form> <label for='#email'>邮箱:</label> <input id='email' type='email' className='form-control' /> <small className='form-text text-muted'>请输入邮箱地址</small> </form>
form-control-lg / form-control-sm
属性readonly
input-group / input-group-prepend / input-group-append / input-group-text
<form className='form-row'> <div className='input-group'> <div className='input-group-prepend'> <span className='input-group-text'>@</span> </div> <input className='form-control' type='text' placeholder='请输入' /> <div className='input-group-append'> <span className='input-group-text bg-primary text-light' >Go</span> </div> </div> </form>