bootstrap常⽤的类名
⼀、常⽤类
1、container
居中的内容展⽰
2、row  ⾏内容显⽰
3、col 列内容显⽰，列必须在row 中
xs 宽度⼩于768 ，sm宽度⼩于990 ⼤于768 ,md 宽度⼤于990，⼩于1200， lg宽度⼤于1200
col-xs-4 代表⼩屏下显⽰为4列，
col-xs-4 col-md-2  代表⼩屏下占4列，⼤屏下占2列
<</span>div class="container"> <</span>h1>Hello, world!</</span>h1> <</span>div class="row"><</span>div class="col-xs-
4"> <</span>h2 class="page-header">区域⼀</</span>h2><</span>p>Bootstrap has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</</span>p></</span>div> <</span>div class="col-xs-
4"> <</span>h2 class="page-header">区域⼆</</span>h2><</span>p>If you work with Bootstrap's uncompiled source code, you need to compile the LESS files to produce usable CSS files. For compiling LESS files into CSS, we only officially support Recess, which is Twitter's CSS hinter based on less.js.</</span>p> </</span>div> <</span>div class="col-xs-4"> <</span>h2 class="page-header">区域三</</span>h2> <</span>p>Within the download you'll find the following directories and files, logically grouping common resources and providing both compiled and minified
variations.</</span>p> </</span>div> </</span>div> </</span>div>\ 4、h1-H6  排版 5、pageHeader  6
、small ⼩⼀号的深灰⾊，⽤作副标题。 7、
lead  处理⼀个段落的⽂字，让其显⽰效果显著。 8、⽂字class <</span>h1>强调Class</</span>h1> <</span>p class="text-muted">Maecenas sed diam eget risus varius blandit sit amet non magna.</</span>p> <</span>p class="text-primary">Maecenas sed diam eget risus varius blandit sit amet
non magna.</</span>p> <</span>p class="text-success">.Maecenas sed diam eget risus varius blandit sit amet non
magna.</</span>p> <</span>p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna..</</span>p> <</span>p class="text-warning">Maecenas sed diam eget risus varius blandit sit amet non magna..</</span>p> <</span>p class="text-danger">.Maecenas sed diam eget risus varius blandit sit amet non magna.</</span>p><</span>h1></</span>h1>
9、list-unstyled  ⽆样式的列表 10、list-inline 横向⽔平列表  11、table 基本使⽤⼀致。table-hover 某⾏⿏标变⾊；table-condensed 表格紧缩，实际padding减半。
.table
包裹在
.table-responsive
中即可创建响应式表格，其会在⼩屏幕设备上（⼩于768px）⽔平滚动。当屏幕⼤于768px宽度时，⽔平滚动条消失。 12、form
<</span>form role="form"> <</span>div class="form-group"> <</span>label for="exampleInputEmail1">Email
address</</span>label> <</span>input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter
email"> </</span>div> <</span>div class="form-
group"> <</span>label for="exampleInputPassword1">Password</</span>label> <</span>input type="password" class="form-
control" id="exampleInputPassword1" placeholder="Password"></</span>div> <</span>div class="form-
group"> <</span>label for="exampleInputFile">File input</</span>label> <</span>input type="file" id="exampleInputFile"> <</span>p class="help-block">Example block-level help text
here.</</span>p> </</span>div> <</span>div class="checkbox"><</span>label> <</span>input type="checkbox"> Check me
input标签placeholder属性out </</span>label> </</span>div><</span>button type="submit" class="btn btn-default">Submit</</span>button> </</span>form> class="form-inline"  将表单内容横向紧缩排列。 input  class="form-control" id="disabledInput" type="text" placeholder="Disabled "disabled>  设为不可⽤。Bootstrap对表单控件的校验状态，如error、warning和success状态，都定义了样式。使⽤时，添加
.has-warning
、
.has-error
.has-error
或
.has-success
到这些控件的⽗元素即可。任何包含在此元素之内的
.control-label
、
.form-control
和
.help-block
都将接受这些校验状态的样式。div class="form-group has-success"> class="control-label" for="inputSuccess">Input with success "text" class="form-control" id="inputSuccess">
、按钮
placehold.it/150x150" alt="..."class="img-circle">
"img-thumbnail  img
为图⽚赋予了
属性，可以让图⽚按⽐例缩放，不超过其⽗元素的尺⼨通过单独或联合使⽤以下列出的class，可以针对不同屏幕尺⼨隐藏或显⽰页⾯内容。
打印class
和常规的响应式class⼀样，使⽤下⾯的class可以针对打印机隐藏或显⽰某些内容。
"presentation">
改为右对齐⾥⾯有个.dropdown-header的样式类。
使⽤下拉菜单
Example heading class="label label-default">New 4. class="active">Data

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。