Bootstrap4入门

基础样式

颜色

文字颜色以.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'>&times;</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>

View Code

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>

View Code

切换显示标签内容

属性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>

View Code

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>&laquo;</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>&raquo;</span>
    </a>
  </li>
</div>

View Code

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>

View Code

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>

View Code

<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>

View Code

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>

View Code

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>

View Code