1、bootstrap 常用类名(2014-09-12 15:15:21)转 载 标签： it分类： bootstrap一、 常用类1、container居中的内容展示2、row 行内容显示3、col 列内容显示， 列必须在 row 中xs 宽度小于 768 ，sm 宽度小于 990 大于 768 ,md 宽度大于 990，小于 1200， lg 宽度大于 1200col-xs-4 代表 小屏下显示为 4 列，col-xs-4 col-md-2 代表小屏下占 4 列，大屏下占 2 列div class=“container“ h1Hello, world!h1 div class=“row“div
2、 class=“col-xs-4“ h2 class=“page-header“区域一h2pBootstrap 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.pdiv div class=“col-xs-4“ h2 class=“page-header“区域二h2pIf you work with Bootstraps uncom
3、piled 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 Twitters CSS hinter based on less.js.p div div class=“col-xs-4“ h2 class=“page-header“区域三h2 pWithin the download youll find the following
4、directories and files, logically grouping common resources and providing both compiled and minified variations.p div div div4、h1-H6 排版5、pageHeader 6、small 小一号的深灰色 ，用作副标题。7、lead 处理一个段落的文字，让其显示效果显著。8、文字 classh1强调 Classh1 p class=“text-muted“Maecenas sed diam eget risus varius blandit sit amet non magn
5、a.p p class=“text-primary“Maecenas sed diam eget risus varius blandit sit amet non magna.p p class=“text-success“.Maecenas sed diam eget risus varius blandit sit amet non magna.p p class=“text-info“Maecenas sed diam eget risus varius blandit sit amet non magna.p p class=“text-warning“Maecenas sed di
6、am eget risus varius blandit sit amet non magna.p pclass=“text-danger“.Maecenas sed diam eget risus varius blandit sit amet non magna.ph1h19、list-unstyled 无样式的列表10、list-inline 横向水平列表 11、table 基本使用一致。table-hover 某行鼠标变色；table-condensed 表格紧缩，实际 padding减半。.table包裹在.table-responsive 中即可创建响应式表格，其会在小屏幕设备上（
7、小于 768px）水平滚动。当屏幕大于 768px宽度时，水平滚动条消失。12、form form role=“form“ div class=“form-group“ labelfor=“exampleInputEmail1“Email addresslabel input type=“email“ class=“form-control“ id=“exampleInputEmail1“ placeholder=“Enter email“ div div class=“form-group“ label for=“exampleInputPassword1“Passwordlabel inp
8、uttype=“password“ class=“form-control“ id=“exampleInputPassword1“ placeholder=“Password“div div class=“form-group“ label for=“exampleInputFile“File inputlabel input type=“file“ id=“exampleInputFile“p class=“help-block“Example block-level help text here.p div div class=“checkbox“label input type=“che
9、ckbox“ Check me out label divbutton type=“submit“ class=“btn btn-default“Submitbutton formclass=“form-inline“ 将表单内容横向紧缩排列 。input class=“form-control“ id=“disabledInput“ type=“text“ placeholder=“Disabled input here.“disabled 设为不可用。Bootstrap对表单控件的校验状态，如 error、warning 和 success状态，都定义了样式。使用时，添加.has-warn
10、ing、.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“class=“form-group has-warning“ class=“control-label“ fo
11、r=“inputWarning“Input with warning “text“ class=“form-control“ id=“inputWarning“class=“form-group has-error“ class=“control-label“ for=“inputError“Input with error “text“ class=“form-control“ id=“inputError“13、按钮btn-lg、.btn-sm、.btn-xs 大中小三种按钮尺寸active 激活状态disabled=“disabled“ 不可用状态button type=“button“
12、 class=“close“ aria-hidden=“true“span class=“caret“class=“center-block“ 居中并 display:blockclass=“clearfix“ 清除浮动14 img “http:/placehold.it/150x150“ alt=“.“ class=“img-rounded“ “http:/placehold.it/150x150“ alt=“.“ class=“img-circle“ “http:/placehold.it/150x150“ alt=“.“ class=“img-thumbnailimg src=“.“ c
13、lass=“img-responsive“ alt=“Responsive image“为图片赋予了 max-width: 100%;和 height: auto;属性，可以让图片按比例缩放，不超过其父元素的尺寸通过单独或联合使用以下列出的 class，可以针对不同屏幕尺寸隐藏或显示页面内容。打印 class和常规的响应式 class 一样，使用下面的 class 可以针对打印机隐藏或显示某些内容。15 下拉菜单 dropdownclass=“dropdown“ class=“btn dropdown-toggle“ type=“button“ id=“dropdownMenu1“ data-
14、toggle=“dropdown“ Dropdown class=“caret“ class=“dropdown-menu“ role=“menu“ aria-labelledby=“dropdownMenu1“ “presentation“menuitem“ tabindex=“-1“ href=“#“Action “presentation“menuitem“ tabindex=“-1“ href=“#“Another action “presentation“menuitem“ tabindex=“-1“ href=“#“Something else here “presentation
15、“ class=“divider“ “presentation“menuitem“ tabindex=“-1“ href=“#“Separated link改为右对齐 class=“dropdown-menu text-right“ role=“menu“ aria-labelledby=“dropdownMenu1“下拉菜单class=“dropdown“ class=“btn dropdown-toggle“ type=“button“ id=“dropdownMenu1“ data-toggle=“dropdown“ Dropdownclass=“caret“o class=“dropd
16、own-menu text-right“ role=“menu“ aria-labelledby=“dropdownMenu1“ “presentation“ class=“dropdown-header“Dropdown header “presentation“menuitem“ tabindex=“-1“ href=“#“Action “presentation“menuitem“ tabindex=“-1“ href=“#“Another action “presentation“menuitem“ tabindex=“-1“ href=“#“Something else here “
17、presentation“ class=“divider“ “presentation“ class=“dropdown-header“Dropdown header “presentation“menuitem“ tabindex=“-1“ href=“#“Separated link主要是添加了 Dropdown header 里面有个 .dropdown-header 的样式类。16 、 导航 navBootstrap 中可用的导航有相似的标记，用基类.nav 开头，这是相似的部分。改变修饰类可以改变样式。1、标签页注意.nav-tabs 类需要.nav 基类。 class=“nav n
18、av-tabs“ class=“active“#“Home “#“Profile “#“Messages在这里暂时只进行探讨简单的样式。2、胶囊式标签页用相同的 HTML 标记，但要用.nav-pills 代替。 class=“nav nav-pills“ class=“active“#“Home “#“Profile “#“MessagesPills 可以竖直堆叠。只要加上 .nav-stacked。使用下拉菜单 class=“nav nav-tabs“ class=“dropdown“ class=“dropdown-toggle“ data-toggle=“dropdown“ href=
19、“#“Dropdown class=“caret“ class=“dropdown-menu“ “#“Home “#“Profile “#“Messages “#“Home “#“Profile “#“Messages6、带下拉菜单的胶囊式标签页 class=“nav nav-pills“ class=“dropdown active“ class=“dropdown-toggle“ data-toggle=“dropdown“ href=“#“Dropdown class=“caret“ class=“dropdown-menu“ “#“Home “#“Profile “#“Messages “#“Home “#“Profile
