Bootsrap之全局CSS样式

阅读更多

一、概览

1、HTML5文档类型

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

例子：

   

.col-xs-12 .col-md-8

   

.col-xs-6 .col-md-4

   

.col-xs-6 .col-md-4

   

.col-xs-6 .col-md-4

   

.col-xs-6 .col-md-4

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为了给行内元素赋予标题样式    

               标签或 .small 类 ---副标题

2、页面主体：全局font-size:14px; line-height:1.428;     

                       

margin-bottom:10px;

                       段落突出显示：.lead 类

3、使用Less工具构建：variables.css文件   @font-size-base     @line-height-base

4、内联文本：标签高亮

                       被删除的文本

                       无用文本

                       额外插入的文本

                       带下划线的文本

                       小号文本

                       强调文本  

5、对齐

           .text-left/center/right

           .text-justify/nowrap

6、改变大小写------.text-lowercase/uppercase/capotalize

7、缩略语：attribute">---基本

                   initialism">---首字母缩略语（font-sizes稍微小些）

8、地址：每行末尾加

9、引用：

-------引用样式

   

-------直接引用

10、列表：无序列表（ul、li）

                  有序列表（ol、li）

                  无样式列表（

针对直接子元素）

                  内联列表（

 display:inline-block;）

                  描述式短语列表（dl、dt、dd）---水平排列的描述（

）

11、自动截断：text-overflow属性

四、代码

1、内联代码  

2、用户输入  

3、代码块    

用于多行代码，注意尖括号要进行转义处理

                     

<p>Sample text here</p>

4、变量  var

5、程序输出  

五、表格

1、条纹状： table-striped">…（IE8不支持）

2、带边框的表格：table-bordered">…

3、鼠标悬停：table-hover">

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

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

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

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

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

   

六、表单

1、基本实例

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

（2）

             

             <表单控件放在这  class="form-control">

       

（3）不要将表单组和输入框组混合使用，建议将输入框组嵌套到表单组中

2、内联表单：

（1）

（2）用在>=768px宽度，可以使多个控件在一行显示

（3）元素{width:auto;}

（4）要添加标签，可将其隐藏

3、水平排列的表单

并配合使用栅格类，可将标签和控件组水平布局

如：

           

                 邮箱：

                 

                       

                 

           

       

4、被支持的控件

（1）输入框：text、password、datetime、datetime-、local、date、month、time、week、number、email、url、search、tel、color（都必须设置type属性）

（2）文本域：textarea

（3）单选多选框：可设置disabled属性    如果联合使用的也禁止点击，就把disabled类给.radio、.radio-inline（内联单选）、checkbox、checkbox-inline、

（4）下拉列表：同时显示多个选项----multiple class="form-control">或使用默认选项

5、静态控件

纯文本和同一行：

form-control-static">

6、焦点状态

7、禁用状态：

（1） disabled /> 防止输入并能改变外观

（2）

设置disabled，链接功能不受影响，但是IE中的

不完全支持disabled属性

8、只读状态：readonly />

9、校验状态： 

 （1）.has-warning          .has-error         .has-success

           如果设置了上面的类，其中的.control-label、.form-control、.help-block都接受上面的样式

 （2）添加额外图标

         设置has-feedback类（必须是class="form-control"）

         为水平排列的表单和内联表单设置可选图标

         如果，将会自动调整图标的位置

10、控件尺寸

 （1）.input-lg/sm-----高度         .col-lg-*  类似的类-----宽度

 （2）水平排列的表单组的尺寸：外层div用. form-group-lg/sm   内层id="formGroupInputLarge/Small"

 （3）列尺寸：col-xs-4

11、辅助文本

针对 块级辅助文本：help-block">

七、按钮

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

1、预定义样式

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

2、尺寸

btn-lg/sm/xs">

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

3、激活状态：button和a都可加   .active 类

4、禁用状态

< button  disabled="disabled">

< a  class="btn btn-primary btn-lg  disabled">---兼容性问题

5、按钮类

type=" submit/button"

八、图片

1、响应式图片：img-responsive" alt="" />

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

九、辅助类

1、 Contextual colors：

text-muted/primary/success/info/warning/danger">

2、Contextual backgrounds：

bg-primary/success/info/warning/danger">

有时需放在带这种class的div里

3、关闭按钮：

class="close">

    aria-hidden="true">×

    Close

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

        class= " caret " >

5、快速浮动：

（1）

pull-left">

 

pull-right">

         .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">

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

   .element{.center-block();}

7、Clearfix

   

clearfix">

   .clearfix(){……}

8、Showing and hiding content

   

show/hidden">

9、Screen reader content

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

10、Image replacement

text-hide">

 用背景图替换文字

十、响应式工具

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