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>&lt;p&gt;Sample text here&lt;/p&gt;</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">&times;</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

相关推荐