Bootstrap学习--CSS

1.容器（container）：用于包裹页面元素，也是固定页面大小并支持响应式布局的样式，有了该样式，才能保证页面元素不变形。contaner类在大屏幕上默认的width=1170px；页面的左右边距将自适应，保证整体页面居中。如果你希望页面占据整个窗口。你可以使用.container-fluid类，该类的width=100%；

.container {
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto
}

.container被称为响应式布局，.container-fluid被成为流式布局。

2.网络系统

Bootstrap将页面划分为了12分等宽的部分，其网络系统是通过组合这12分网格来实现的。

基本的网格结构为：

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

使用网络布局必须遵循以下规则：

  a.行必须放置在 .container 或.container-fluid类中，以便获得适当的对齐（alignment）和内边距（padding）。

  b.使用行来创建列的水平组(class="row")，因为row类可用来抵消container的内边距设置。

  c.内容应该放置在列内，且唯有列可以是行的直接子元素。

  d.预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。

  e.列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .row 上的外边距（margin）取负抵消了.container的外边距而间接抵消了列的padding。

  f.网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。

列的前缀：

.col-xs-   手机设备   最大列宽auto

.col-sm-  平板设备   最大列宽60px

.col-md-  中型台式   最大列宽78px

.col-lg-    大型台式   最大列宽95px

注意：bootstrap的列宽是根据初始屏幕大小决定的，而不是当前页面大小，即说如果设置了.container那么col的宽度是按1170的百分比算的，无论缩不缩放。

3.排版

类	描述	实例
.lead	使段落突出显示
.small	设定小文本 (设置为父文本的 85% 大小)
.text-left	设定文本左对齐
.text-center	设定文本居中对齐
.text-right	设定文本右对齐
.text-justify	设定文本对齐,段落中超出屏幕部分文字自动换行
.text-nowrap	段落中超出屏幕部分不换行
.text-lowercase	设定文本小写
.text-uppercase	设定文本大写
.text-capitalize	设定单词首字母大写
.initialism	显示在 <abbr> 元素中的文本以小号字体展示
.blockquote-reverse	设定引用右对齐
.list-unstyled	移除默认的列表样式，列表项中左对齐 ( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)
.list-inline	将所有列表项放置同一行
.dl-horizontal	该类设置了浮动和偏移，应用于 <dl> 元素和 <dt> 元素中，具体实现可以查看实例
.pre-scrollable	使 <pre> 元素可滚动 scrollable

.table-bordered                           为所有表格的单元格添加边框
.table                                          为任意 <table> 添加基本样式 (只有横向分隔线)

.table-condensed                         让表格元素更紧凑

.table-responsive                          响应式表格，需用该样式包裹.table

为了适用多分辨率的屏幕，bootstrap允许预定义多个列样式，例如：

<div class="row">
	<div class="col-xs-8 col-lg-2">
		你好！
	</div>
	<div class="col-xs-12 col-lg-10">
		my friends!
	</div>
</div>

第一列在小屏幕上占8网格，在大屏幕上占2网格，第二列在小屏幕上占12网格，在大屏幕上占8网格。

其实bootstrap的列是通过向左浮动来实现排版的，而当你需要清除这个浮动效果，即是它说的响应式重置则可使用class="clearfix"来实现。

为了满足更好的体验，bootstrap设置了.col-*-offset-*样式，该样式用于设置列偏移，即是将列向右移动多少个网格。如：

<div class="col-lg-2 col-lg-offset-4">
	你好！
</div>

上面是将你好！这一列向右移动了4个网格。

.col-*-push-*和.col-*pull-*是用来列排序的，可以调整列显示顺序。

4.页面排版

<small>用来标记副标题，文字会比主标题小一些</small>

<p>段落只有margin-bottom：行高的一半</p>

<mark>内联文本</mark>

<del>被删除的文本</del>

<s>无用的文本</s>

<em>斜体</em>

<ins>插入的文本(带有下划线)</ins>

<u>下划线</u>

<strong>着重加粗</strong>

<footer>表名引入来源</footer>

<cite>来源名称</cite>

<kbd>标记用户通过键盘输入的内容</kbd>

<var>变量</var>

5.表单

创建表单的步骤：

  a.向父 <form> 元素添加 role="form"。

  b.把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。

  c.向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。

  d.当需要内联表单所有元素都向左靠齐，需为表单添加class="form-inline"。

  e.水平表单的创建需向表单添加class="form-horizontal",需向标签添加：class="control-label"。

例如：

<div class="container">
	<form class="form-horizontal" role="form">
	<div class="form-grop">
		<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
   		<div class="col-sm-10">
      			<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
   		</div>
	</div>
	</form>
</div>

注意每个输入控件必须有label标签，否则bootstrap不能正确识别。如果你不需要显示label标签可以使用.sr-only隐藏该标签内容。label标签可以被title、area-label、area-labelledby属性代替。

控件的禁用可使用disabled属性

为输入控件添加.input-*可调解输入框高度，如：

<input type="email" class="form-control input-lg" id="inputEmail3" placeholder="Email">

6.按钮

类	描述	实例
.btn	为按钮添加基本样式
.btn-default	默认/标准按钮
.btn-primary	原始按钮样式（未被操作）
.btn-success	表示成功的动作
.btn-info	该样式可用于要弹出信息的按钮
.btn-warning	表示需要谨慎操作的按钮
.btn-danger	表示一个危险动作的按钮操作
.btn-link	让按钮看起来像个链接 (仍然保留按钮行为)
.btn-lg	制作一个大按钮
.btn-sm	制作一个小按钮
.btn-xs	制作一个超小按钮
.btn-block	块级按钮(拉伸至父元素100%的宽度)
.active	按钮被点击
.disabled	禁用按钮

注意导航和导航栏只支持button元素，不支持<a>标签的按钮

6.辅助类

类	描述	实例
.pull-left	元素浮动到左边
.pull-right	元素浮动到右边
.center-block	设置元素为 display:block 并居中显示
.clearfix	清除浮动
.show	强制元素显示
.hidden	强制元素隐藏
.sr-only	除了屏幕阅读器外，其他设备上隐藏元素
.sr-only-focusable	与 .sr-only 类结合使用，在元素获取焦点时显示(如：键盘操作的用户)
.text-hide	将页面元素所包含的文本内容替换为背景图
.close	显示关闭按钮
.caret	显示下拉式功能