您的位置：首页 > Web前端 > BootStrap

BootStrap3.0学习--全局 CSS 样式

2014-12-25 15:31 513 查看
设置全局 CSS 样式；基本的 HTML 元素均可以通过 class 设置样式并得到增强效果；还有先进的栅格系统。


HTML5 文档类型

<!DOCTYPE html>
<html lang="zh-CN">
...
</html>



移动设备优先

Bootstrap是移动设备优先哒

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">


1.为了确保适当的绘制和触屏缩放，需要在 
<head>
 之中添加 viewport 元数据标签。

2.width=device-width告诉浏览器页面的宽度应该等于设备的宽度

3.initial-scale=1页面将是原本尺寸展示，如果后面是2.0的话，就是是将页面放大两倍

4.maximum-scale=1最大放大至原先大小

5.user-scalable=no可以禁用其缩放（zooming）功能。


布局容器

容器类为包裹页面内容和栅格系统哒。由于 
padding
等属性的原因，以下两种容器类不能互相嵌套。

.container
 类用于固定宽度并支持响应式布局的容器。

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。


栅格系统

相应式的网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

工作原理
行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
使用行来创建列的水平组。
内容应该放置在列内，且唯有列可以是行的直接子元素。
预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
通过为“列”设置 padding 属性，从而创建列与列之间的间隔。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行”所包含的“列”抵消掉了padding。
网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。


栅格参数

通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

 超小屏幕 手机 (<768px)小屏幕 平板 (≥768px)中等屏幕 桌面显示器 (≥992px)大屏幕 大桌面显示器 (≥1200px)
栅格系统行为总是水平排列开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
.container
 最大宽度		自动750px970px1170px
类前缀
.col-xs-
.col-sm-
.col-md-
.col-lg-
列（column）数12
最大列（column）宽自动~62px~81px~97px
槽（gutter）宽30px （每列左右均有 15px）
可嵌套是
偏移（Offsets）是
列排序是
注：.
1.col-md-offset-*可以使列向右偏移
2.col-md-push-* 和 .col-md-pull-* 类就可以改变列的顺序。

排版

1.主标题副标题<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
2.Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。
3..lead 类可以让段落突出显示。
<p class="lead">...</p>


4.被删除的文本<del>delete text.</del>
5.无用文本
<s>text.</s>

6.额外插入的文本使用 
<ins>
 标签。
7.为文本添加下划线，使用 
<u>
 标签。
8.小号字体用<small>标签，被包裹其内的文本将被设置为父容器字体大小的 85%。
9.着重字体使用 <strong> 标签。
10.字体倾斜用 <em> 标签
11.文本对齐用如下类
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

12.改变字体的大小写，首字母大写
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

13.缩写语用<abbr>标签，用title标出完整词汇
<abbr title="attribute">attr</abbr>

14.无序列表
<ul>
<li>...</li>
</ul>

15.有序列表
<ol>
<li>...</li>
</ol>

16.无样式列表
<ul class="list-unstyled">
<li>...</li>
</ul>

17.内联列表：并添加少量的内补（padding），将所有元素放置于同一行。
<ul class="list-inline">
<li>...</li>
</ul>

18.带有描述的短语列表
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>

19.水平排列描述列表
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>
text-overflow
 属性可以将左侧长的部分截断显示
[/code]

代码

1.内联代码需要<code>标签。
　　
For example, <code><section></code>

2.用户输入用 
<kbd>
 标签标记用户通过键盘输入的内容。
3.代码块用<pre>标签。
<pre><p>Sample text here...</p></pre>

4.用
<var>
 标签标记变量。
　　例如：y = mx + b
　<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

5.程序输出，通过 <samp> 标签来标记程序输出的内容。

表格

1.基本表格，用
<table>
 标签添加 
.table
 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。
<table class="table">
...
</table>

2.条纹状表格，通过 
.table-striped
 类可以给 
<tbody>
 之内的每一行增加斑马条纹样式。（是依赖 
:nth-child
 CSS
选择器实现的，而这一功能不被 Internet Explorer 8 支持。）
<table class="table table-striped">
...
</table>

3.带边框的表格，通过添加.
table-bordered类来实现的。

<table class="table table-bordered">
...
</table>

4.鼠标悬停，通过添加.table-hover类实现的。
<table class="table table-bordered">
...
</table>

5.紧缩表格，是通过添加table-condensed 类实现的。单元格中的内补白（padding）均会减半。
<table class="table table-condensed">
...
</table>

6.状态类，通过这些状态类可以为行或单元格设置颜色。可以添加在<tr>上，也可添加在<td>上。
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>

7.响应式表格。将任何 
.table
 元素包裹在 
.table-responsive
 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。
<div class="table-responsive">
<table class="table">
...
</table>
</div>

表单

 1.基本实例： 
.form-control
 类的 
<input>
、
<textarea>
 和 
<select>
 元素都将被默认设置宽度属性为 
width:
100%;
。 将 
label
 元素和前面提到的控件包裹在 
.form-group
 中可以获得最好的
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
</form>

 2.内联表单：.form-inline，视口宽度再小的话就会使表单折叠；在内联表单，我们将这些元素的宽度设置为 
width: auto;；
一定要添加 label 标签，如果你没有为每个输入控件设置 label 标签，屏幕阅读器将无法正确识别。对于这些内联表单，你可以通过为 label 设置
.sr-only 类将其隐藏。
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">@</div>
<input class="form-control" type="email" placeholder="Enter email">
</div>
</div>

</from>[/code]
 3.水平排列的表单，通过为表单添加 
.form-horizontal
 类，并联合使用 Bootstrap 预置的栅格类，可以将 
label
 标签和控件组水平并排布局。这样做将改变 
.form-group
 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 
.row
 了。
4.被支持的控件。包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件：
text
、
password
、
datetime
、
datetime-local
、
date
、
month
、
time
、
week
、
number
、
email
、
url
、
search
、
tel
 和 
color
。
 1)输入框：
<input type="text" class="form-control" placeholder="Text
input">

 2)文本域：<textarea class="form-control" rows="3"></textarea>
 3)多选和单选框：
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
Option two is disabled
</label>
</div>

<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that—be sure to include why it's great
</label>
</div>

10.只读输入框，用 readonly 属性
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

11.被禁用输入框，用 
disabled 属性

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

12.被禁用的为fieldset，
<fieldset>
 设置 
disabled
 属性,可以禁用 
<fieldset>
 中包含的所有控件。
13.验证状态：Bootstrap 对表单控件的校验状态，如 error、warning 和 success 状态，都定义了样式。使用时，添加 
.has-warning
、
.has-error
 或 
.has-success
 类到这些控件的父元素即可。任何包含在此元素之内的 
.control-label
、
.form-control
 和 
.help-block
 元素都将接受这些校验状态的样式。
<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control" id="inputSuccess1">
</div>

14.控件的尺寸：通过 
.input-lg
 类似的类可以为控件设置高度，通过 
.col-lg-*
 类似的类可以为控件设置宽度。
15.水平排列的表单组的尺寸：通过添加 
.form-group-lg
 或 
.form-group-sm
 类，为 
.form-horizontal
 包裹的 
label
 元素和表单控件快速设置尺寸。
16.辅助文本：针对表单控件的“块（block）”级辅助文本。

按钮

1.预定义样式：
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn btn-success">Success</button>

<button type="button" class="btn btn-info">Info</button>

<button type="button" class="btn btn-warning">Warning</button>

<button type="button" class="btn btn-danger">Danger</button>

<button type="button" class="btn btn-link">Link</button>

2.尺寸：使用 
.btn-lg
、
.btn-sm
 或 
.btn-xs
 可以获得不同尺寸的按钮。
3. 通过给按钮添加 
.btn-block
 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>

4.激活状态：
<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>

5.禁用状态：
<a href="#" class="btn
btn-default btn-lg disabled" role="button">Link</a>

6.按钮类：为 
<a>
、
<button>
 或 
<input>
 元素应用按钮类。注：虽然按钮类可以应用到 
<a>
 和 
<button>
 元素上，但是，导航和导航条只支持 
<button>
 元素。

图片

1.响应式图片：
.img-responsive
 类可以让图片支持响应式布局。其实质是为图片设置了 
max-width: 100%;
 和 
height:
auto;
 属性，从而让图片在其父元素中更好的缩放。
<img src="..." class="img-responsive" alt="Responsive image">

2.图片的形状：
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

辅助类

1.Contextual colors：
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

2. Contextual backgrounds
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

3.关闭按钮：
<button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>

4.三角符号：
<span class="caret"></span>

5.快速浮动：
<div class="pull-left">...</div>
<div class="pull-right">...</div>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航