Bootsrap之全局CSS样式
一、概览
1、HTML5文档类型
<!DOCTYPE html>
<html lang="zh-CN">
</html>
2、移动设备优先
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
3、排版与链接
background-color:#fff; @font-family-base、@font-size-base、@line-height-base、@link-color、:hover
4、使用了Normalize.css
5、布局容器
.container---固定宽度，并支持响应式布局
.container-fluid---100%宽度，占全部窗口
二、栅格系统
1、媒体查询
@media(min-width:@screen-sm-min){…}) //md lg 分别对应小、中、大屏幕
也可以包含max-width限定更准确些：
@media(max-width:@screen-xs-max){…}
@media(min-width: @screen-sm/md-min) and (max-width:@screen-sm/md-max){…}
@media(max-width:@screen-lg-max){…}
2、栅格参数
.col-xs- .col-sm- .col-md- .col-lg-
<=62px <=81px <=97px
例子：
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
3、多余的列将另起一行排列
4、列偏移 .col-md-offset- 将列向右侧偏移。
5、嵌套列：row----col-xs-4----row---col-xs-2
6、列排序
.col-md-push-* 向右移动*列
.col-md-pull-* 向左移动*列
7、Less mixin和变量
三、排版
1、标题：标签<h1>~<h6>
.h1~.h6为了给行内元素赋予标题样式
<small>标签或 .small 类 ---副标题
2、页面主体：全局font-size:14px; line-height:1.428;
<p>margin-bottom:10px;
段落突出显示：.lead 类
3、使用Less工具构建：variables.css文件 @font-size-base @line-height-base
4、内联文本：<mark></mark>标签高亮
<del></del>被删除的文本
<s></s>无用文本
<ins>额外插入的文本</ins>
<u></u>带下划线的文本
<small></small>小号文本
强调文本<strong></strong> <em></em>
5、对齐
.text-left/center/right
.text-justify/nowrap
6、改变大小写------.text-lowercase/uppercase/capotalize
7、缩略语：<abbr title="attribute"></abbr>---基本
<abbr class="9、引用：
<blockquote>-------引用样式
<p></p>-------直接引用
</blockquote>
10、列表：无序列表（ul、li）
有序列表（ol、li）
无样式列表（<ul class="list-unstyled">针对直接子元素）
内联列表（<ul class="list-inline"> display:inline-block;）
描述式短语列表（dl、dt、dd）---水平排列的描述（<dl class="dl-horizontal">）
11、自动截断：text-overflow属性
四、代码
1、内联代码 <code></code>
2、用户输入 <kbd></kbd>
3、代码块 <pre></pre>用于多行代码，注意尖括号要进行转义处理
<pre><p>Sample text here</p></pre>
4、变量 var
5、程序输出 <samp></samp>
五、表格
1、条纹状：<table class="table .info（普通的提示信息或动作） / .warning / .danger
6、响应式表格：将.table包裹在.table-responsive元素内，会在小屏幕设备上水平滚动
<div class="table-responsive">
<table class="table"></table>
</div>
六、表单
1、基本实例
（1）所有设置了.form-control的input/select/textarea：width:100%;
（2）<div class="form-group">
<label for=""></label>
<表单控件放在这 class="form-control">
</div>
（3）不要将表单组和输入框组混合使用，建议将输入框组嵌套到表单组中
2、内联表单：
（1）<form class="form-line"></form>
（2）用在>=768px宽度，可以使多个控件在一行显示
（3）元素{width:auto;}
（4）要添加<label>标签，可<label class="sr-only"></label>将其隐藏
3、水平排列的表单
<form class="form-horizontal"></form>并配合使用栅格类，可将标签和控件组水平布局
如：<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2" for="">邮箱：</label>
<div class="col-sm-10">
<input type="email" placeholder="Email" />
</div>
</div>
</form>
4、被支持的控件
（1）输入框：text、password、datetime、datetime-、local、date、month、time、week、number、email、url、search、tel、color（都必须设置type属性）
（2）文本域：textarea
（3）单选多选框：可设置disabled属性 如果联合使用的<label>也禁止点击，就把disabled类给.radio、.radio-inline（内联单选）、checkbox、checkbox-inline、<fieldset>
（4）下拉列表：同时显示多个选项----<select multiple class="form-control"></select>或使用默认选项
5、静态控件
纯文本和<label>同一行：<p class="7、禁用状态：
（1）<input type="text" disabled /> 防止输入并能改变外观
（2）<fieldset>设置disabled，<a>链接功能不受影响，但是IE中的<fieldset>不完全支持disabled属性
8、只读状态：<input type="text" readonly />
9、校验状态：
（1）.has-warning .has-error .has-success
如果设置了上面的类，其中的.control-label、.form-control、.help-block都接受上面的样式
（2）添加额外图标
设置has-feedback类（必须是class="form-control"）
为水平排列的表单和内联表单设置可选图标
如果<label class="sr-only"></label>，将会自动调整图标的位置
10、控件尺寸
（1）.input-lg/sm-----高度 .col-lg-* 类似的类-----宽度
（2）水平排列的表单组的尺寸：外层div用.form-group-lg/sm 内层id="formGroupInputLarge/Small"
（3）列尺寸：col-xs-4
11、辅助文本
针对块级辅助文本：<span class=" btn 样式 大小 块级 尽可能使用<button>元素
1、预定义样式
class="btn warning/danger/link"
2、尺寸
<button type="button: class="btn btn-primary 3、激活状态：button和a都可加 .active 类
4、禁用状态
<button disabled="disabled"></button>
<a class="btn btn-primary btn-lg disabled"></a>---兼容性问题
5、按钮类
type="submit/button"
八、图片
1、响应式图片：<img class="2、图片形状：<img class="九、辅助类
1、Contextual colors：<p class="
<button type="button" class="close">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
4、三角符号：使元素有下拉菜单功能
<span class="
（1）<div class=" .element{.pull-left();} .another-element{.pull-right();}
（2）在导航条中，使用.navbar-left .navbar-right
6、Center content blocks
<div class=" .element{.center-block();}
7、Clearfix
<div class="8、Showing and hiding content
<div class="
<a class="10、Image replacement
<h1 class="
1、可用的类
手机
平板
>=992px
>=1200px
.visible-xs/sm/md/lg-*
相关推荐
pigsmall 2020-11-19
SXIAOYI 2020-09-16
linuxprobe0 2013-04-01
83560193 2013-06-25
kidneybeans 2013-06-17
加菲猫园 2013-06-16
年轻就要对味 2014-07-11
稻草人的高粱地 2014-07-02
smilebestSun 2014-06-12
xusong 2014-05-17
zfszhangyuan 2013-09-12
80183053 2013-09-12
gaozhlzh 2013-09-11
87453169 2014-01-17
Tom天天 2013-07-12
ebuild 2013-05-14
Ladyseven 2020-07-25
whileinsist 2020-06-24