布局容器
<div class="container">
<div class="container-fluid">
栅格系统
实例:从堆叠到水平排列
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-6">.col-md-6</div>
<div class="row">
<div class="col-md-1">.col-md-1</div>
实例:流式布局容器
<div class="container-fluid">
<div class="row">
实例:移动设备和桌面屏幕
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6">.col-xs-6</div>
实例:手机、平板、桌面
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="clearfix visible-xs-block"></div>
实例:多余的列(column)将另起一行排列
<div class="col-xs-9">.col-xs-9</div>
<div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
<div class="row">
<div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
响应式列重置
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="clearfix visible-xs-block"></div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
Remove gutters
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6">.col-xs-6</div>
<div class="row row-no-gutters">
列偏移
<div class="col-md-4">.col-md-4</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
<div class="row">
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
<div class="col-xs-6 col-sm-4">
嵌套列
<div class="col-xs-8 col-sm-6">
<div class="row">
<div class="col-xs-4 col-sm-6">
<div class="row">
<div class="col-sm-9">
列排序
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
Less mixin 和变量
<div class="content-main">...</div>
<div class="content-secondary">...</div>
<div class="wrapper">
排版
标题
页面主体
<p class="lead">...</p>
内联文本元素
对齐
<p class="text-justify">Justified text.</p>
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-nowrap">No wrap text.</p>
<p class="text-right">Right aligned text.</p>
改变大小写
<p class="text-capitalize">Capitalized text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-lowercase">Lowercased text.</p>
缩略语
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
地址
引用
<blockquote class="blockquote-reverse">
列表
<ul class="list-unstyled">
<ul class="list-inline">
<dl class="dl-horizontal">
代码
表格
基本实例
<table class="table">
条纹状表格
<table class="table table-striped">
带边框的表格
<table class="table table-bordered">
鼠标悬停
<table class="table table-hover">
紧缩表格
<table class="table table-condensed">
状态类
<td class="info">...</td>
<tr class="active">...</tr>
<td class="success">...</td>
<tr class="info">...</tr>
<td class="active">...</td>
<tr class="danger">...</tr>
<td class="warning">...</td>
<td class="danger">...</td>
<tr class="success">...</tr>
<tr class="warning">...</tr>
响应式表格
<div class="table-responsive">
<table class="table">
表单
基本实例
<div class="form-group">
<div class="checkbox">
<p class="help-block">Example block-level help text here.</p>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
<button type="submit" class="btn btn-default">Submit</button>
内联表单
<div class="form-group">
<button type="submit" class="btn btn-default">Send invitation</button>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
<form class="form-inline">
<div class="form-group">
<div class="checkbox">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<button type="submit" class="btn btn-default">Sign in</button>
<input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
<form class="form-inline">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<div class="input-group-addon">$</div>
<div class="form-group">
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<button type="submit" class="btn btn-primary">Transfer cash</button>
<div class="input-group-addon">.00</div>
<form class="form-inline">
<div class="input-group">
水平排列的表单
<form class="form-horizontal">
<div class="form-group">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
<button type="submit" class="btn btn-default">Sign in</button>
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-offset-2 col-sm-10">
<div class="col-sm-10">
<div class="checkbox">
被支持的控件
<input type="text" class="form-control" placeholder="Text input">
<textarea class="form-control" rows="3"></textarea>
<div class="checkbox">
<div class="checkbox disabled">
<div class="radio">
<div class="radio disabled">
<label class="radio-inline">
<label class="checkbox-inline">
<div class="checkbox">
<div class="radio">
<select class="form-control">
<select multiple class="form-control">
静态控件
<form class="form-horizontal">
<div class="form-group">
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
<p class="form-control-static">email@example.com</p>
<label class="col-sm-2 control-label">Email</label>
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="form-group">
<button type="submit" class="btn btn-default">Confirm identity</button>
<p class="form-control-static">email@example.com</p>
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
<label class="sr-only">Email</label>
<label for="inputPassword2" class="sr-only">Password</label>
<form class="form-inline">
焦点状态
禁用状态
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
<button type="submit" class="btn btn-primary">Submit</button>
<div class="form-group">
<select id="disabledSelect" class="form-control">
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
<div class="checkbox">
只读状态
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
Help text
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
按钮
可作为按钮使用的标签或元素
<button class="btn btn-default" type="submit">Button</button>
<a class="btn btn-default" href="#" role="button">Link</a>
<input class="btn btn-default" type="submit" value="Submit">
<input class="btn btn-default" type="button" value="Input">
预定义样式
<button type="button" class="btn btn-primary">(首选项)Primary</button>
<button type="button" class="btn btn-warning">(警告)Warning</button>
<button type="button" class="btn btn-info">(一般信息)Info</button>
<button type="button" class="btn btn-success">(成功)Success</button>
<button type="button" class="btn btn-default">(默认样式)Default</button>
<button type="button" class="btn btn-danger">(危险)Danger</button>
<button type="button" class="btn btn-link">(链接)Link</button>
尺寸
<button type="button" class="btn btn-primary btn-lg">(大按钮)Large button</button>
<button type="button" class="btn btn-default btn-lg">(大按钮)Large button</button>
<button type="button" class="btn btn-primary">(默认尺寸)Default button</button>
<button type="button" class="btn btn-default">(默认尺寸)Default button</button>
<button type="button" class="btn btn-primary btn-xs">(超小尺寸)Extra small button</button>
<button type="button" class="btn btn-primary btn-sm">(小按钮)Small button</button>
<button type="button" class="btn btn-default btn-sm">(小按钮)Small button</button>
<button type="button" class="btn btn-default btn-xs">(超小尺寸)Extra small button</button>
<button type="button" class="btn btn-default btn-lg btn-block">(块级元素)Block level button</button>
<button type="button" class="btn btn-primary btn-lg btn-block">(块级元素)Block level button</button>
激活状态
<button type="button" class="btn btn-default btn-lg active">Button</button>
<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>
禁用状态
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
图片
响应式图片
<img src="..." class="img-responsive" alt="Responsive image">
图片形状
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-thumbnail">
辅助类
<p class="text-success">...</p>
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-warning">...</p>
<p class="text-info">...</p>
<p class="text-danger">...</p>
<p class="bg-success">...</p>
<p class="bg-primary">...</p>
<p class="bg-warning">...</p>
<p class="bg-info">...</p>
<p class="bg-danger">...</p>
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
<span class="caret"></span>
<div class="pull-right">...</div>
<div class="pull-left">...</div>
<div class="center-block">...</div>
<!-- Usage as a class -->
<div class="clearfix">...</div>
<div class="hidden">...</div>
<div class="show">...</div>
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
<h1 class="text-hide">Custom heading</h1>