第一章基本CSS样式

1.栅格系统

css样式：

.row {
   margin-bottom: 20px;

}

.row .row {
  margin-top: 10px;
  margin-bottom: 0;
}

[class*="col-"] {
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #eee;
  background-color: rgba(86,61,124,.15);
  border: 1px solid #ddd;
  border: 1px solid rgba(86,61,124,.5)
}

1.偏移 offset

<div class="row">
    <div class="col-md-4 col-md-offset-2">col-md-4</div>
</div>

col-md-offset-X表示偏移X个栅格

2.向前移push 向后移pull

<div class="row">
    <div class="col-md-4">col-md-4</div>
    <div class="col-md-8">col-md-8</div>
</div>

交换4， 8栅格的位置：

<div class="row">
    <div class="col-md-4 col-md-push-8">col-md-4</div>
    <div class="col-md-8 col-md-pull-4">col-md-8</div>
</div>

3.css3 新标签在bootstrap中的使用

bootstrap中对CSS3的一些标签给予了默认的样式：

<kbd>CMD</kbd>: 表示用户输入，Bootstrap中默认的为黑色背景，白色字体
<var>x</var> = <var>y</var> + <var>z</var>: 数学公式，斜体表示
<samp>hello world</samp>: 表示代码输出，字体不一样

还有pre,abbr等CSS3元素，bootstrap都给予了一些样式。

2.table

table常用class：

table: 添加到<table>中，即<table class="table">..
table-border: 给table添加一个边框，默认是没有边框的
table-striped: 给table下面的 tr 交替添加不同背景色
table-comdensed: 使table单元格更加紧凑
table-responsive: 在table外层包裹一个div,使table变为响应式<div class="table-responsive"><table class="table">...
table-hover: 添加滑过tr时颜色改变
常见的颜色类： success | warning | active | danger | info

如下：

<div class="table-responsive">
    <table class="table table-bordered table-hover">
        <thead>
            <tr>
                <th>Monday</th>
                <th>Tuesday</th>
                <th>Wesnday</th>
            </tr>
        </thead>
        <tbody>
            <tr class="success">
                <td>Madarine</td>
                <td>Maths</td>
                <td>Science</td>
            </tr>
            <tr class="waring">
                <td>PE</td>
                <td>English</td>
                <td>History</td>
            </tr>
        </tbody>
    </table>
</div>

3.form表单

表单元素比较多，所以下面的介绍也会比较长，bootstrap中表单元素外层一般会套一层div, class 为 form-group.

bootstrap 官网上的示例已经很详细了Forms,下面是重复的总结记忆以下。

1.基本表单, 辅助文字

form-control: 用于优化表单的样式,添加圆角，阴影等
form-group: 将表单元素input, textarea, select加上一层父元素
help-block: 辅助性文本，一般为 p 或 span 元素

例如：

<form role="form">
    <div class="form-group">
        <label for="email">Email</label>
        <!-- form-control 优化input样式 -->
        <input type="text" id="email" class="form-control">
    </div>

    <div class="form-group">
        <label for="password">Password</label>
        <input type="password" id="password" class="form-control">
    </div>
    
    <div class="form-group">        
        <label for="uploadFile">File</label>
        <input type="file" id="uploadFile"/>
        <!-- 辅助性文本 -->
        <p class="help-block">请选择您的文件</p>
    </div>
</form>

1.jpg

2.内联表单

内联表达是指，所有的表单元素都显示在一行上，有个要求就是，显示器宽度不小于768px,另外就是screen reader不添加label元素将出现问题，所以永远要加上label, 隐藏元素用 sr-only.

form-inline: 添加在 form 元素上，使之变为内联表单
sr-only: 多用于隐藏label，示例2会介绍
input-group: input元素和其他元素组合在一起
input-group-addon：和input组合的元素

示例1：

<!-- 内联表单 -->
<form class="form-inline">
    <div class="form-group">
        <label for="name">Name<label>
        <input type="text" id="name" class="form-control" placeholder="James Sawyer">
    </div>
    <div class="form-group">
        <label for="Email">Email<label>
        <input type="text" id="email" class="form-control" placeholder="JamesSawyer@163.com">
    </div>
    <button type="submit" class="btn btn-primary">发送邀请</button>
</form>

2.jpg

示例2：

<form class="form-inline">
    <div class="form-group">
        <label class="sr-only" for="amount">Amount(in dollars)</label>
        <div class="input-group">
            <div class="input-group-addon">$</div>
            <input type="text" class="form-control" id="amount" placeholder="总额">
            <div class="input-group-addon">.00</idv>
        </div>
    </div>
    <button type="submit" class="btn btn-primary">转账</button>
</form>

3.jpg

3.水平表单

水平表达是指一行一行的输出，常用栅格系统col-xx-z来控制表单的样式，对于label直接添加到label上， input一般外层包裹一层div,将栅格添加到div上.

form-horizontal: 用于生成水平表单
control-label: 对label元素添加样式
checkbox: 一般给checkbox外层套一层div,即<div class="checkbox"><input type="checkbox">...

示例：

<form class="form-horizontal">
    
    <div class="form-group">
        <!-- label上添加control-label 和 栅格 -->
        <label for="email" class="control-label col-sm-2">Email<label>
        <!-- input外层嵌套一层div -->
        <div class="col-sm-5">
            <input type="text" id="email" class="form-control" placeholder="Email">
        </div>  
    </div>
    <div class="form-group">
        <label for="password" class="control-label col-sm-2">Password<label>
        <div class="col-sm-5">
            <input type="password" id="email" class="form-control" placeholder="Password">
        </div>
    </div>

    <div class="form-group">
        <!-- 使用col-sm-offset-对元素进行偏移对齐 -->
        <!-- 注意checkbox外层也包裹了一层form-group -->
        <div class="col-sm-offset-2 col-sm-7">
            <div class="checkbox">
                <label for="remember">
                    <input type="checkbox" id="remember">Remeber me
                </label>
            </div>
         </div>
    </div>
    
    <!-- button需要使用栅格进行定位时，一般也会套在父类div上 -->
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-7">
            <button type="submit" class="btn btn-default">登陆</button>
        </div>
    </div>

</form>

5.jpg

4.静态控制

就是只放纯文本。

form-control-static: 在 p 元素中添加此类

示例：

<form class="form-horizontal">
    <div class="form-group">
        <label for="email" class="control-label col-sm-2">Email<label>
        <div class="col-sm-5">
            <p class="form-control-static">email@example.com</p>
        </div>
    </div>
    <div class="form-group">
        <label for="password" class="control-label col-sm-2">Password<label>
        <div class="col-sm-5">
            <input type="password" id="email" class="form-control" placeholder="Password">
        </div>
    </div>
</form>

7.jpg

5.验证状态

has-success | has-warning | has-error: 任何含有 .contorl-label | form-control | help-block 的元素都会收到验证样式

示例：

<div class="has-warning">
    <div class="checkbox">
        <label>
            <input type="checkbox" id="checkboxWarning" value="option1">
            Checkbox with warning
        </label>
    </div>
</div>
<div class="has-error">
    <div class="checkbox">
        <label>
            <input type="checkbox" id="checkboxWithError" value="option1">
            Checkbox with error
        </label>
    </div>
</div>

8.jpg

6.带图标的验证

图标一般使用 glyphicon,并且只对 <input class="form-control">元素有效。

has-feedback:在input等表单外部元素嵌套一层div上添加此类
form-control-feedback: 在图标所在的元素上添加,表示对input元素的反馈

示例：

<div class="form-group has-success has-feedback">
    <label class="control-label sr-only" for="inputGroupSuccess">
        Input group with success</label>
    <div class="input-group">
        <div class="input-group-addon">@</div>
        <input type="text" class="form-control" id="inputGroupSuccess">
    </div>
    <span class="glyphicon glyghicon-ok form-control-feedback"></span>
</div>

9.jpg

7.控制尺寸

设置input和select元素高度使用input-lg | input-sm,正常则不需要添加
设置水平表单组尺寸： form-group-lg | form-group-sm
水平使用栅格系统来控制

示例1：

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

10.jpg

示例2：

<form class="form-horizontal">
    <div class="form-group form-group-lg">
        <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
    </div>
    <div class="col-sm-10">
        <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>
    <div class="form-group form-group-sm">
        <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
        <div class="col-sm-10">
            <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
        </div>
  </div>
</form>

11.jpg

示例3：

<div class="row">
    <div class="col-xm-2">
        <input tpye="text" class="form-control">
    </div>
    <div class="col-xm-3">
        <input tpye="text" class="form-control">
    </div>
    <div class="col-xm-4">
        <input tpye="text" class="form-control">
    </div>
</div>

12.jpg

8.disabled

当 disabled 添加到 fieldset 上时，里面的所有元素都被disabled
单独给元素添加disabled时，会出现禁止的图标

总结

今天大致了解了bootstrap的栅格系统，table，表单，目前为止，bootstrap通过class来改变元素的样式，使用起来也是很方便，通过查文档即可上手操作。

2016/11/4 0:53:40

第一章基本CSS样式