第一章基本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

最后编辑于：2017.12.04 07:15:24

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 199,393评论 5赞 467
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 83,790评论 2赞 376
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 146,391评论 0赞 330
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 53,703评论 1赞 270
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 62,613评论 5赞 359
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,003评论 1赞 275
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,507评论 3赞 390
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,158评论 0赞 254
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,300评论 1赞 294
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,256评论 2赞 317
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,274评论 1赞 328
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 32,984评论 3赞 316
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,569评论 3赞 303
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,662评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,899评论 1赞 255
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,268评论 2赞 345
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 41,840评论 2赞 339

第一章 基本CSS样式

1.栅格系统

2.table

3.form表单

推荐阅读更多精彩内容

第一章基本CSS样式