bootstrap(上)

1 <meta name = "viewport" content = " width = device-width , initial-scale = 1 ">
2 div container => div jumbotron 超大屏幕<=>[div container获得占全部宽度且不带圆角]=>div jumbotron
		=> div row => div col-sm-4  *3
3 div container => div table-responsive(响应式布局 小于768px滚动条) => table table table-striped table-bordered
4 img img-responsive img-circle  图标: 云   glyphicon glyphicon-cloud
				       信件 glyphicon glyphicon-envelope
				       搜索 glyphicon glyphicon-search
				       打印 glyphicon glyphicon-print
				       下载 glyphicon glyphicon-download
5 <!--[if lt IE 9]> 兼容IE8 支持HTML5元素和媒体查询 
	<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  <![end if]-->
6 col-xs-/sm-/md-/lg-  visible-xs-/sm-/md-/lg-  hidden-*   col-*-offset-12   col-*-pull-/push-
7 dom:h1 small strong em abbr address blockquote[class="pull-right"]=>small=>cite == blockquote-reserve    class:text-left/center/right lead 突出   help-block
8 list-unstyled   list-inline   dl[class="dl-horizontal"]=>dt&dd   dom:var kbd pre .pre-scrollable pre可滚动 samp code
9 table[table table-striped table-bordered table-hover table-condensed] tr th td[active success info warning danger]
10 form[role="form" class="form-inline/form-horizontal"]=>div[class="form-group"]=>label["sr-only control-label == {...;text-align:left;}(inlie情况下，horizontal则右对齐)" ]
						       				 =>div[col-*-]=>input["form-control"]
11 <textarea rows="5"/> <label class="checkbox-inline/radio-inline"><input /></label>  <select multiple class="form-control">   p[form-control-static]放置纯文本
12 <fieldset disabled>包含的所有控件disabled属性  [has-sucess/error/warning]   [input-lg/sm]控制大小
13 button a input [btn btn-default btn-primary btn-success/info/warning/danger btn-lg/sm-xs btn-block(延至父元素）disabled active]100%)]
14 img-rounded/circle(IE8不支持) -thumbnall缩略图 -responsive自适应  text/bg-success/...  pull-left/right center-block clearfix show hidden(display=none) sr-only(visibily=hidden)  container container-fluid区别
15 div[dropdown/dropup]=>button[close]=>span=>&times;/ [caret]插入符    [btn-group]=>button[btn btn-primary dropdown-toggle] data-toggle="dropdown"=>span[caret]
							        		  =>ul[dropdown-menu] role="menu"=>li*6[dropdown-header]
16 [btn-toolbar]=>[btn-group (dropdown) btn-group-vertical]=>[btn btn-lg/*]
							   =>[btn dropdown-toggle]
							   =>ul
17 form=>[input-group]=>span[input-group-addon]=>[checkbox/radio]    
		      =>input[form-control] 			     
   =>span[input-group-btn dropdown]=>[btn dropdown-toggle]*n data-toggle="dropdown" & ul	      
   =>input[form-control]
18 ul[nav nav-tabs/nav-pills nav-stacked(垂直) nav-justified(nav对齐)]=>li[active disabled btn-group dropdown]=>a[href="#name"] data-toggle="tab" [dropdown-toggle]=>[caret]&[dropdown-menu]
   div[tab-content]=>id="name" [tab-pan fade(in active)]
19 nav navbar navbar-default=>div container-fluid=>div navbar-header=>a navbar-brand (nav navbar navbar-inverse)
      [nav-fixed-top/bottomnav-static-top不要求body添加内边距50px]  =>button navbar-toggle data-toggle="collapse" data-target="#example-navbar-collapse"=>span sr-only
				      															=>span icon-bar*3
						 =>div=>ul nav navbar-nav navbar-left/right=>li*n active dropdown=>a dropdown-toggle data-toggle="dropdown"=>b caret
											       =>ul dropdown-menu=>li divider=>a
						      =>form navbar-form navbar-left/right=>div form-group=>input form-control
												          =>button btn btn-default
						      =>button btn btn-default navbar-btn navbar-left/right
						      =>p navbar-text navbar-left/right
						      =>ul nav navbar-nav navbar-right=>li*n=>a=>span glyphicon glyphicon-user/log-in
20 ol breadcrumb=>li active=>a
21 ul pagination pagination-lg/sm=>li active disabled *n=>a
   ul pager=>li previous左/next右 active disabled *n=>a
22 span label label-default/primary/success/info/warning/danger
23 ul nav nav-pills nav-stacked=>li*n active=>a=>span badge pull-right
24 div page-header=>h1=>small
25 a悬浮边框/div thumbnail=>img p ...
26 div alert alert-success/info/warning/danger alert-dismissable=>button close data-dismiss="alert" aria-hidden="true" (&times;)
								=>a alert-link
27 div progress progress-striped active=>div progress-bar progress-bar-success/...*n aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="50%"
28 ul media-list=>li*n media=>a pull-left=>img media-object
			    =>div media-body=>h4
					    =>div media=>...
29 div/ul list-group=>a/li*n list-group-item active=>h4 list-group-item-heading
						   =>p list-group-item-text
						   =>span badge pull-left
30 div panel panel-default/...=>div panel-heading=>h3 panel-title
			      =>div panel-body
			      =>div panel-footer
			      =>table table/list-group
31 div well well-lg/sm

 

转载于:https://my.oschina.net/u/3318803/blog/850558