Bootsrap之全局CSS样式 -

yumo12

浏览: 18527 次
性别:
来自: 北京

最近访客更多访客>>

u012363178

月五好你

suncong1024

原笑尘-7ye

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Bootsrap之全局CSS样式

博客分类：

Bootstrap

boostrap 栅格系统 css 响应式

一、概览

1、HTML5文档类型

<!DOCTYPE html>

<html lang="zh-CN">

</html>

2、移动设备优先

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>

</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="initialism"></abbr>---首字母缩略语（font-sizes稍微小些）

8、地址：每行末尾加<br>

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 table-striped">…</table>（IE8不支持）

2、带边框的表格：<table class="table table-bordered">…</table>

3、鼠标悬停：<table class="table-hover"></table>

4、紧缩表格：<table class="table-condensed"></table>（使表格更紧凑，单元格中的内补padding都会减半）

5、状态类：为行或单元格设置颜色

.active（鼠标悬停的颜色） / .success（成功或积极的动作） /

.info（普通的提示信息或动作） / .warning / .danger

6、响应式表格：将.table包裹在.table-responsive元素内，会在小屏幕设备上水平滚动

</div>

六、表单

1、基本实例

（1）所有设置了.form-control的input/select/textarea：width:100%;

（2）<div class="form-group">

<表单控件放在这 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>

</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="form-control-static"></p>

6、焦点状态

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="help-block"></span>

七、按钮

btn 样式大小块级尽可能使用<button>元素

1、预定义样式

class="btn btn-default/primary/success/info/warning/danger/link"

2、尺寸

.btn-block：100%宽度，变成块级元素

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="img-responsive" alt="" />

2、图片形状：<img class="img-rounded/circle/thumbnail" alt="" />

九、辅助类

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

2、Contextual backgrounds：<p class="bg-primary/success/info/warning/danger"></p> 有时需放在带这种class的div里

3、关闭按钮：

<span class="sr-only">Close</span>

</button>

4、三角符号：使元素有下拉菜单功能

5、快速浮动：

（1）<div class="pull-left"></div> <div class="pull-right"></div>

.pull-left{float:left !important;} .pull-right{float:right !important;}

.element{.pull-left();} .another-element{.pull-right();}

（2）在导航条中，使用.navbar-left .navbar-right

6、Center content blocks

.center-block{display:block; margin-left:auto; margin-right:auto;}

.element{.center-block();}

7、Clearfix

.clearfix(){……}

8、Showing and hiding content

9、Screen reader content

<a class="sr-only sr-only-focusable" href="#"></a>联合使用，聚焦时显示

10、Image replacement

<h1 class="text-hide"></h1> 用背景图替换文字

十、响应式工具

1、可用的类

	手机	平板	>=992px	>=1200px
.visible-xs/sm/md/lg-*	xs可见	sm可见	md可见	lg可见
.hidden-xs		可见	可见	可见
.hidden-sm	可见		可见	可见
.hidden-md	可见	可见		可见
.hidden-lg	可见	可见	可见

xs：.visible-xs-block、visible-xs-inline、visible-xs-inline-block

2、打印类（不建议使用）

.visible-print-block/inline/inline-block对打印机可见

.hidden-print对浏览器可见

3、测试用例

十一、使用Less

Bootstrap 的 CSS 文件是通过 Less 源码编译出来的。Less 是一门预处理语言，支持变量、mixin、函数等额外功能

十二、使用Sass

分享到：

JS一起学06：数组操作、JSON、getElementsB ... | JS一起学05：Date对象、封闭空间、函数传参 ...

2014-11-20 18:33
浏览 2609
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Bootsrap之全局CSS样式

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Bootsrap之全局CSS样式

评论

发表评论

相关推荐

Bootsrap之组件

最近访客更多访客>>