首页 > 代码库 > 网站前端_Bootstrap.基础入门.0002.排版/列表/表格/表单/按钮/图像?

网站前端_Bootstrap.基础入门.0002.排版/列表/表格/表单/按钮/图像?

通用技能:

# 文档类型


<!DOCTYPE html>
<html lang="zh-cn">
    <!-- Html Code -->
</html>

说明: 由于BootStrap基于HTML5,所以所有的HTML文件都需要在其顶部引用HTML5的DOCTYPE属性.

# 移动先行


<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

说明: 由于BootStrap以移动端优先,所以可通过一些viewport特性来设置移动端行为,如上可实现内容宽度与设备宽度1:1,最大缩放为屏幕宽度,且禁用用户缩放功能,防止用户触发缩放而导致出现滚动条

# 响应图片


<img class="img-responsive" src="http://www.mamicode.com/img/screen.jpg" >

说明: 为了实现容器内图片大小缩放自适应,BootStrap3中只需为图片加img-responsive类即可,其实实现方式非常简单只要设置了max-width: 100%;和height: auto;即可

# 居中容器


<div class="container"></div>

说明: 一个页面或元素要居中显示,可以在外部容器上简单应用.container类即可,它其实由一个max-width属性来限制删栏系统的最大宽度,默认容器左右内边距15px,当然都可以后期重载覆盖这些值


排版技能:

# 标题相关


<h1>有上下边距的h1 <small>小号有上下边距的h1</small></h1>
<h2>有上下边距的h1 <small>小号有上下边距的h2</small></h2>
<h3>有上下边距的h1 <small>小号有上下边距的h3</small></h3>
<h4>有上下边距的h1 <small>小号有上下边距的h4</small></h4>
<h5>有上下边距的h1 <small>小号有上下边距的h5</small></h5>
<h6>有上下边距的h1 <small>小号有上下边距的h6</small></h6>
<span class="h1">无上下边距的h1 <small>小号无上下边距的h1</small></span> <br>
<span class="h2">无上下边距的h1 <small>小号无上下边距的h1</small></span> <br>
<span class="h3">无上下边距的h1 <small>小号无上下边距的h1</small></span> <br>
<span class="h4">无上下边距的h1 <small>小号无上下边距的h1</small></span> <br>
<span class="h5">无上下边距的h1 <small>小号无上下边距的h1</small></span> <br>
<span class="h6">无上下边距的h1 <small>小号无上下边距的h1</small></span> <br>

说明: BootStrap重定义h1~h6可直接使用,也可以作为非标题元素的类,但前者默认有上下外边距,而后者没有,常常配合使用的是在内部使用<small></small>,以便显示稍微小一点儿的字体,且字体颜色被设置为灰色(#999999)

# 页面主题


<p>下外边距为10px的p</p>
<p class="lead">突出显示下外边距为10px的p</p>

说明: BootStrap默认全局设置字体大小14px,行高20px,p元素段落会有一个额外的下外边距,大小为行间距的一半,10px,如果想让一个段落突出显示,可加lead类,会增大字体大小,粗细,行间距,和下外边距

# 强调文本


<strong>字体加粗效果</strong> <br>
<em>字体倾斜效果</em> <br>
<cite>字体引用效果</cite> <br>
<small>小号字体效果</small> <br>
<div class="text-left">文本左对齐效果</div>
<div class="text-right">文本右对齐效果</div>
<div class="text-center">文本居中对齐效果</div>
<div class="text-justify">文本平均分布效果</div>

说明: BootStrap将默认的文本强调元素<small></small> <strong></strong> <em></em> <cite></cite>以及文本对齐都进行了轻量级的实现.

# 缩略语句


<abbr class="initialism" title="自动化运维开发">DEVOPS</abbr>

说明: BootStrap在abbr元素上实现了缩略词功能,鼠标移动到缩略词上时缩略词下有虚横线且显示声明的title的属性值,光标变帮助,另一种是通过添加initialism类,但是似乎只是字体小一点儿.

# 地址元素


<div class="container">
    <footer>
        <address class="text-center">
            <h5><a href="http://www.mamicode.com/#">在线反馈</a></h5>
        </address>
        <address class="text-center">
            <h4><small>Copyright 2016 版权所有</small></h4>
        </address>
        <address class="text-center">
            <h4><small>ICP证粤B2-20090191,京公网安备 11000002000013号</small></h4>
        </address>
    </footer>
</div>

说明: BootStrap在address元素上实现了简单通用的样式,设置下外边距20px,行高20px,非常方便的加个样式实现火狐中文网的底部版权样式.

# 引用内容


<div class="container">
    <header>
        <blockquote>
            <small>主机信息</small>
        </blockquote>
    </header>
    <section>
        信息页面
    </section>
</div>

说明: BootStrap在blockquota元素上实现了引用,可以引用任意HTML内容,但一般推荐使用<p></p>,在内部使用<small></small>文字前面会加-作为注释,常常配合<small></small>和<em></em>和<cite></cite>一起使用,当然还可以配合text-right/pull-right来右对齐,以适应不同的排版方式

# 普通列表


<ul>
    <li>个人信息:
        <ul>
            <li>姓名: 李满满</li>
            <li>性别: 男</li>
            <li>年龄: 25</li>
        </ul>
    </li>
</ul>

说明: BootStrap在ul/ol和li元素上做了细微的优化,ul上外边距设为0px,除了最后一个ul,所有的ul下外边距默认设置为10px.

# 有序列表


<ol>
    <li>构建自动化运维平台</li>
    <li>设计RESTful API</li>
</ol>

# 去点列表


<ul class="list-unstyled">
    <li>个人信息:
        <ul>
            <li>姓名: 李满满</li>
            <li>性别: 男</li>
            <li>年龄: 25</li>
        </ul>
    </li>
</ul>

说明: BootStrap的list-unstyled类只会去除当前被选择的元素列表项前面的圆点,而不会作用于其子元素,其实设置的是ul的padding-left: 0;list-style: none;所以要注意ul的内左边距被设置为0px.

# 内联列表


<div class="container">
    <header>
        <ul class="list-inline">
            <li><a href="http://www.mamicode.com/#">主页</a></li>
            <li><a href="http://www.mamicode.com/#">日志</a></li>
            <li><a href="http://www.mamicode.com/#">照片</a></li>
        </ul>
    </header>
</div>

说明: BootStrap的list-inline类用于实现内联样式表,也就是将列表项水平显示,常用于菜单,默认设置ul的padding-left: 0;list-stype:none;子li除了第一个设置了padding-left:0;其它的都默认左右各5px,所以很多时候做菜单需要我们自定义覆盖该默认样式.

# 定义列表


<dl>
    <dt>个人信息:</dt>
    <dd>姓名: 李满满</dd>
    <dd>性别: 男</dd>
    <dd>年龄: 25</dd>
</dl>

说明: BootStrap对默认的dl定义列表也做了一些轻微的调整,主要是dl设置margin-top: 0;margin-bottom: 20px;对于dd设置margin-left: 0;导致dt和dd内容左对齐,所以常常需要自定义覆盖样式.

# 水平定义


<dl class="dl-horizontal">
    <dt>姓名:</dt>
    <dd>李满满</dd>
    <dt>年龄:</dt>
    <dd>25</dd>
    <dt>性别:</dt>
    <dd>男</dd>
</dl>

说明: BootStrap的dl-horizontal类默认使得dl下的dt和dd列表水平显示,但由于对dt设置width: 160px;text-align:right;对dd设置margin-left: 180px;所以dt和dd并排显示且中间间隔20px,但是dt的内容右对齐导致左边可能出现大片空白区,所以可能需要自定义覆盖样式

# 内联代码


<code>&lt;div id="container"&gt;&lt;div&gt;</code> <br> <br>

说明: BootStrap对默认的code设置了浅红背景和其内部深红字体

# 输入代码


<kbd>&lt;div id="container"&gt;&lt;div&gt;</kbd> <br> <br>

说明: BootStrap对默认的kbd设置了深黑色背景和内部白颜色字体

# 多行代码

<pre class="pre-scrollable">
import os

if __name__ == ‘__main__‘:
    if os.path.exists(‘/etc/passwd‘):
        print ‘found notice: passwd file is exists!‘
    else:
        print ‘found errors: passwd file no exists!‘
</pre> <br> <br>

说明: BootStrap默认对可显示大块代码段,并保证原有格式不变,另外可在pre元素上应用.pre-scollable样式,则可控制该区域最大高度为340像素,并可在y轴方向滚动.

# 基础表格


<table class="table">
    <thead>
        <tr>
            <th>#</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>职业</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>李满满</td>
            <td>25</td>
            <td>运维开发工程师</td>
        </tr>
    </tbody>
</table>

说明: BootStrap默认提供表格的基础样式table类,默认table设置margin-bottom:20px;th和td设置padding: 8px;border-top: 1px solid #ddd;使得table下外边距20px,所有的th/td内边距8px且拥有一个1px的上边框,最后对于thead中的th设置border-bottom: 2px solid #ddd;使其有一个2px的粗边框.

# 条纹表格


<table class="table table-striped">
    <thead>
        <tr>
            <th>#</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>职业</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>李满满</td>
            <td>25</td>
            <td>运维开发工程师</td>
        </tr>
        <tr>
            <td>2</td>
            <td>刘珍珍</td>
            <td>24</td>
            <td>前端开发工程师</td>
        </tr>
    </tbody>
</table>

说明: BootStrap的table-striped类在table类的基础上利用css3的.table-striped > tbody > tr: nth-child(odd) {background-color: #f9f9f9;},常常需要自定义覆盖样式

# 边框表格


<table class="table table-bordered">
    <thead>
        <tr>
            <th>#</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>职业</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>李满满</td>
            <td>25</td>
            <td>运维开发工程师</td>
        </tr>
    </tbody>
</table>

说明: BootStrap的table-bordered类在table类的基础上设置了整体表格和单元格的边框,不再附加圆角效果,简洁许多.

# 高亮表格


<table class="table table-hover">
    <thead>
        <tr>
            <th>#</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>职业</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>李满满</td>
            <td>25</td>
            <td>运维开发工程师</td>
        </tr>
    </tbody>
</table>

说明: BootStrap的table-hover类在table类的基础上使用css3设置.table-hover > tbody> tr:hover {background-color: #f5f5f5;},常常需要自定义覆盖样式

# 紧凑表格


<table class="table table-condensed">
    <thead>
        <tr>
            <th>#</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>职业</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>李满满</td>
            <td>25</td>
            <td>运维开发工程师</td>
        </tr>
    </tbody>
</table>

说明: BootStrap的table-condensed类在table类的基础上减少了单元格的默认8px为5px

# 表行样式


<table class="table table-condensed">
    <thead>
        <tr>
            <th>#</th>
            <th>主机</th>
            <th>状态</th>
        </tr>
    </thead>
    <tbody>
        <tr class="active">
            <td>1</td>
            <td>1.1.1.1</td>
            <td>active</td>
        </tr>
        <tr class="success">
            <td>2</td>
            <td>2.2.2.2</td>
            <td>success</td>
        </tr>
        <tr class="info">
            <td>3</td>
            <td>3.3.3.3</td>
            <td>info</td>
        </tr>
        <tr class="warning">
            <td>4</td>
            <td>4.4.4.4</td>
            <td>warning</td>
        </tr>
        <tr class="danger">
            <td>5</td>
            <td>5.5.5.5</td>
            <td>danger</td>
        </tr>
    </tbody>
</table>

说明: BootStrap为表格tr元素提供了5种额外样式,控制tr的背景颜色,active类表示当前活动的信息,success类表示成功或者正确的行为,warning类表示警告需要特别注意,.danger类表示危险或可能错过的原因,需要注意的是当要和table-hover类一起使用的时候,也设置了响应的鼠标悬停高亮颜色,所以自定义覆盖时需要注意.

# 响应表格


<div class="table-responsive">
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>选中</th>
                <th>#</th>
                <th>主机</th>
                <th>状态</th>
            </tr>
        </thead>
        <tbody>
            <tr class="active">
                <td><input type="checkbox" name="row"></td>
                <td>1</td>
                <td>1.1.1.1</td>
                <td>active</td>
            </tr>
        </tbody>
    </table>
</div>

说明: BootStrap通过在t表格外部套一层table-responsive类容器即可创建响应式表格,在小于768px时容器会自动出现水平滚动条,大于768px时水平滚动条消失,还有一点儿是对外部容器添加了一个边框的同时去掉了内部table的table-bordered边框,防止重叠

# 基础表单


<div class="container">
    <form action="">
        <fieldset>
            <legend>用户登录</legend>
            <div class="form-group">
                <label for="user">账户</label>
                <input type="email" id="user" name="user" class="form-control" placeholder="email">
            </div>
            <div class="form-group">
                <label for="pass">密码</label>
                <input type="password" id="pass" name="pass" class="form-control" placeholder="pass">
            </div>
            <div class="form-group">
                <input type="checkbox" id="is_remember" name="is_remember"> 记住密码
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-default">登陆</button>
            </div>
        </fieldset>
    </form>
</div>

说明: BootStrap对基础表单并没做太多的定制化效果设计,默认都使用全局设置,只是对表单内的fieldset/legend/label标签进行了设定,select/input/textarea元素上应用form-control样式显示的宽度会变为100%,并且placeholder的颜色会变为#999999;通常实际使用中会将label和input元素放在一个样式为form-group的div里,form-group默认设置margin-bottom: 15px来保证清晰的看到每一组控件.

# 内联表单


<div class="container">
    <form action="" class="form-inline">
        <fieldset>
            <legend>用户登录</legend>
            <div class="form-group">
                <label for="user">账户</label>
                <input type="email" id="user" name="user" class="form-control" placeholder="email">
            </div>
            <div class="form-group">
                <label for="pass">密码</label>
                <input type="password" id="pass" name="pass" class="form-control" placeholder="pass">
            </div>
            <div class="checkbox">
                <label><input type="checkbox" id="is_remember" name="is_remember"> 记住密码</label>
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-default">登陆</button>
            </div>
        </fieldset>
    </form>
</div>

说明: BootStrap的form-inline类使得所有表单都在一行,其实是设置了所有的form-group的display: inline-block;当然如果你想隐藏label标签的话可直接给label加一个sr-only将其隐藏

# 横向表单


<div class="container">
    <form action="" class="form-horizontal" role="form">
        <fieldset>
            <legend>用户登录</legend>
            <div class="form-group">
                <label for="user" class="col-sm-1 control-label">账户</label>
                <div class="col-sm-11">
                    <input type="email" id="user" name="user" class="form-control" placeholder="email">
                </div>
                
            </div>
            <div class="form-group">
                <label for="pass" class="col-sm-1 control-label">密码</label>
                <div class="col-sm-11">
                    <input type="password" id="pass" name="pass" class="form-control" placeholder="pass">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-1 col-sm-11">
                    <label><input type="checkbox" id="is_remember" name="is_remember"> 记住密码</label>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-1 col-sm-11">
                    <button type="submit" class="btn btn-default">登陆</button>
                </div>
            </div>
        </fieldset>
    </form>
</div>

说明: BootStrap横向表单和内联表单使用方式不太一样,使用form的form-horizontal类不止是简单的设置control-label等的padding-top:7px;text-align:right;保证标签相对于输入框垂直居中,如果使用text-right则会靠顶部,还需要配合预置删栏系统以便将label和控件水平并排布局

# 表单控件


<div class="container">
    <section id="login">
        <form action="" class="form-horizontal">
            <fieldset>
                <legend>注册邮箱帐号</legend>
                <div class="form-group">
                    <label for="email" class="col-sm-2 control-label">邮箱帐号</label>
                    <div class="col-sm-10">
                        <input type="email" class="form-control" id="email" name="email">
                    </div>
                </div>
                <div class="form-group">
                    <label for="name" class="col-sm-2 control-label">昵称</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="name" name="name">
                    </div>
                </div>
                <div class="form-group">
                    <label for="password" class="col-sm-2 control-label">密码</label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control" id="password" name="password">
                    </div>
                </div>
                <div class="form-group">
                    <label for="confirm_password" class="col-sm-2 control-label">确认密码</label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control" id="confirm_password" name="confirm_password">
                    </div>
                </div>
                <div class="form-group">
                    <label for="sex" class="col-sm-2 control-label">性别</label>
                    <div class="col-sm-10">
                        <label class="radio-inline">
                            <input type="radio" name="sex" id="sex" checked="checked">男
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="sex" id="sex">女
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <label for="hobby" class="col-sm-2 control-label">爱好</label>
                    <div class="col-sm-10">
                        <label class="checkbox-inline">
                            <input type="checkbox" name="hobby"> 写代码
                        </label>
                        <label class="checkbox-inline">
                            <input type="checkbox" name="hobby"> 看电影
                        </label>
                        <label class="checkbox-inline">
                            <input type="checkbox" name="hobby"> 看妹纸
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">梦想</label>
                    <div class="col-sm-2">
                        <div class="checkbox">
                            <label><input type="checkbox">全栈开发</label>
                        </div>
                        <div class="checkbox">
                            <label><input type="checkbox">桌球达人</label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">生日</label>
                    <div class="col-sm-1">
                        <select name="rl" id="rl" class="form-control">
                            <option value="http://www.mamicode.com/公历">公历</option>
                        </select>
                    </div>
                    <div class="col-sm-2">
                        <select name="nf" id="nf" class="form-control">
                            <option value="http://www.mamicode.com/2000年">2000年</option>
                        </select>
                    </div>
                    <div class="col-sm-1">
                        <select name="yf" id="yf" class="form-control">
                            <option value="http://www.mamicode.com/1月">1月</option>
                        </select>
                    </div>
                    <div class="col-sm-1">
                        <select name="ts" id="ys" class="form-control">
                            <option value="http://www.mamicode.com/1日">1日</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">所在地</label>
                    <div class="col-sm-1">
                        <select name="gj" id="gj" class="form-control">
                            <option value="http://www.mamicode.com/中国">中国</option>
                        </select>
                    </div>
                    <div class="col-sm-1">
                        <select name="sf" id="sf" class="form-control">
                            <option value="http://www.mamicode.com/浙江">浙江</option>
                        </select>
                    </div>
                    <div class="col-sm-1">
                        <select name="qy" id="qf" class="form-control">
                            <option value="http://www.mamicode.com/杭州">杭州</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="desc" class="col-sm-2 control-label">个人简介</label>
                    <div class="col-sm-10">
                        <textarea name="desc" id="desc" rows="5" class="form-control" ></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">验证码</label>
                    <div class="col-sm-10">
                        <input type="image" src="http://www.mamicode.com/img/auth.png" name="auth" id="auth">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button class="btn btn-default">完成注册</button>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <label for="agreen" class="checkbox-inline">
                            <input type="checkbox" name="agree" id="agree" checked="checked">
                            我已阅读并同意相关服务条款和隐私政策
                            <span class="glyphicon glyphicon-chevron-down" style="font-size: 10px;"></span>
                        </label>
                    </div>
                </div>
            </fieldset>
        </form>
    </section>
</div>

说明: BootStrap的form-horizontal类和删栏系统配合实现了横向表单,input/select/textarea用法基本不变,当对它们附加form-control类时,宽度将变为100%,所以此时就无需设置textarea的cols值,radio/checkbox比较特殊,支持通过外部附加一个拥有radio/checkbox类的div实现竖向单选/多选,也可通过对它们label附加radio-inline/checkbox-inline实现横向单选/多选.

# 控件状态


<div class="container">
    <fieldset disabled="disabled">
        <legend>平台登录</legend>
        <form action="" class="form-horizontal">
            <div class="form-group has-warning has-feedback">
                <label for="uname" class="col-sm-2 control-label">账户: </label>
                <div class="col-sm-10">
                    <input type="text" name="uname" id="uname" class="form-control">
                    <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
                </div>
            </div>
            <div class="form-group has-success has-feedback">
                <label for="upass" class="col-sm-2 control-label">密码: </label>
                <div class="col-sm-10">
                    <input type="text" name="upass" id="upass" class="form-control">
                    <span class="glyphicon glyphicon-ok-sign form-control-feedback"></span>
                </div>
            </div>
            <div class="form-group has-error">
                <div class="col-sm-offset-2 col-sm-10">
                    <label for="" class="checkbox-inline"><input type="checkbox" name="is_remember" id="is_remember"> 是否记住密码?</label>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button class="btn btn-default">登录</button>
                </div>
            </div>
        </form>
    </fieldset>
</div>

说明: BootStrap控件状态分为焦点状态,禁用状态,验证提示状态,焦点状态其实是在:focus上设置outline为0然后添加了一个柔和的box-shadow,而对于radio/checkbox使其更加圆润,禁用状态用法不变,一旦对fieldset设置了disabled,那么内部所有的表单都会被disabled,且background-color: #eee;验证提示通过对附加form-group的div附加has-success/has-warning/has-error来改变label的和边框的颜色实现对成功/警告/错误信息的提示.有时候在验证状态的时候提供小图标提示,可通过继续附加feedback类,.has-feedback {position: relative;} .has-feedback .form-control {padding-right: 42.5px} .has-feedback .form-control-feedback {position: absolute;top: 25px;right: 0;}其实就是先将表单父类容器设置为相对定位,然后把附加form-control-feedback的元素绝对定位到右边来实现小图标提示效果.

# 控件大小


<div class="container">
    <fieldset>
        <legend>平台登录</legend>
        <form action="" class="form-horizontal">
            <div class="form-group">
                <label for="uname" class="col-sm-2 control-label">账号: </label>
                <div class="col-sm-10">
                    <input type="text" class="form-control input-lg" name="uname" id="uname">
                </div>
            </div>
            <div class="form-group">
                <label for="upass" class="col-sm-2 control-label">密码: </label>
                <div class="col-sm-10">
                    <input type="text" name="upass" id="upass" class="form-control input-sm" placeholder="密码">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <label for="" class="checkbox-inline"><input type="checkbox" name="is_remember" id="is_remember"> 是否记住密码?</label>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button class="btn btn-default">登录</button>
                </div>
            </div>
        </form>
    </fieldset>
</div>

说明: BootStrap默认为input/select/textarea分别提供了input-lg和input-sm附加类,前者高度和行高被设置到46px,字体和边框都稍有调整,后者高度和行高被设置为30px,字体和边框稍有修改,可以很方便的按照规则定义其它的样式如.input-mini.

# 显示帮助


<div class="container">
    <fieldset>
        <legend>平台登录</legend>
        <form action="" class="form-horizontal">
            <div class="form-group">
                <label for="uname" class="col-sm-2 control-label">账号: </label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" name="uname" id="uname">
                    <span class="help-block">只能包含字母数字下划线</span>
                </div>
            </div>
            <div class="form-group">
                <label for="upass" class="col-sm-2 control-label">密码: </label>
                <div class="col-sm-10">
                    <input type="text" name="upass" id="upass" class="form-control" placeholder="密码">
                    <span class="help-block">必须包含字母数字下划线</span>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <label for="" class="checkbox-inline"><input type="checkbox" name="is_remember" id="is_remember"> 是否记住密码?</label>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button class="btn btn-default">登录</button>
                </div>
            </div>
        </form>
    </fieldset>
</div>

说明: BootStrap默认还为我们提供了一个help-block类,用于在表单中显示块儿级的帮助信息,其实就是display: block;margin-top: 5px; margin-bottom: 10px; color: #737373;如果要将帮助信息显示在一行可设置一个.help-inline {display: inline-block; padding-left: 5px;color:#737373;}实现.

# 按钮样式


<div class="container">
    <form action="">
        <div class="form-group">
            <button class="btn btn-default">标准按钮</button>qw
            <button class="btn btn-primary">重要按钮</button>
            <button class="btn btn-success">成功按钮</button>
            <button class="btn btn-info">提示按钮</button>
            <button class="btn btn-warning">警告按钮</button>
            <button class="btn btn-danger">错误按钮</button>
            <button class="btn btn-link">链接按钮</button>
        </div>
    </form>
</div>

说明: BootStrap默认提供了7种样式的按钮风格,分别btn-default/btn-primary/btn-success/btn-info/btn-warning/btn-danger/btn-link,基于btn基础样式,也对默认的:foucs/:active/:hover/:disabled定义了相关变化.

# 按钮大小


<div class="container">
    <form action="">
        <div class="form-group">
            <button class="btn btn-default btn-lg">标准大按钮</button>
            <button class="btn btn-default btn-sm">标准中按钮</button>
            <button class="btn btn-default btn-xs">标准小按钮</button>
            <button class="btn btn-default btn-block">标准宽按钮</button>
        </div>
    </form>
</div>

说明: BootStrap默认为按钮提供了btn-lg/btn-sm/btn-xs附加类,分别表示大/中/小按钮,主要差别就是padding/font-size/line-height/border-radius,但有时我们并不需要按钮拥有padding和margin,希望宽度100%,好在BootStrap还为我们提供了一个block级的样式btn-block,它不以文本多少自动伸缩,宽度由父容器决定.且多个btn-block之间还有5px的间隔.

# 活动状态


<div class="container">
    <button class="btn btn-default">激活的button按钮</button>
    <br>
    <a href="" class="btn btn-default active">激活的a按钮</a>
    <br>
    <a href="" class="btn btn-default disabled">禁用的a按钮</a>
</div>

说明: BootStrap的btn相关的类,不仅支持普通button按钮,还支持a元素,也能显示同样的效果,但强烈建议使用button防止跨浏览器兼容问题,对于活动状态active其实就是background-image: none;outline: 0;而disabled其实就是opacity: 65%;并不禁止按钮的默认行为,需要JS代码来阻止,当然可通过disabled属性来一次性达到你想要的效果.

# 图像形状


<div class="row">
    <div class="col-sm-1">
        <img src="http://www.mamicode.com/img/100.jpg" alt="girl" class="img-thumbnail">
        <img src="http://www.mamicode.com/img/100.jpg" alt="girl" class="img-circle">
        <img src="http://www.mamicode.com/img/100.jpg" alt="girl" class="img-rounded">
    </div>
</div>

说明: BootStrap为图片默认提供了3个附加类img-rounded为圆角方形,img-circle为圆,img-thumbnail小型方块缩略图,但是都没有控制图片显示大小,所以需要额外应用样式或限制父元素大小来控制图片显示大小.

# 辅助样式


<div class="container">
    <!-- 文本字体颜色 -->
    <div class="row">
        <p class="text-muted">柔和灰</p>
        <p class="text-primary">主要蓝</p>
        <p class="text-success">成功绿</p>
        <p class="text-info">信息蓝</p>
        <p class="text-warning">警告黄</p>
        <p class="text-danger">危险红</p>
    </div>
    <!-- 文本背景颜色 -->
    <div class="row">
        <p class="bg-primary">主要蓝</p>
        <p class="bg-success">成功绿</p>
        <p class="bg-info">信息蓝</p>
        <p class="bg-warning">警告黄</p>
        <p class="bg-danger">危险红</p>
    </div>
    <!-- 辅助图表 -->
    <div class="row">
        <!-- 关闭图标 -->
        <div class="row">
            <button class="close">&times;</button>
        </div>
        <div class="row">
            <a href="javascript:;" class="close">&times;</a>
        </div>
        <!-- 下拉图标 -->
        <div class="row">
            <span class="caret"></span>
        </div>
    </div>
    <!-- 内容浮动 -->
    <div class="row">
        <img src="http://www.mamicode.com/img/100.jpg"  class="img-circle pull-left">
        <img src="http://www.mamicode.com/img/100.jpg"  class="img-circle pull-right">
        <div class="clearfix"></div>
        <img src="http://www.mamicode.com/img/100.jpg"  class="img-circle center-block">
    </div>
    <!-- 显示隐藏 -->
    <div class="row">
        <p style="border: solid 1px red;" class="show">显示</p>
        <p style="border: solid 1px red;" class="invisible">隐藏,但占据文档流</p>
        <p style="border: solid 1px red;" class="hidden">隐藏,但不占据文档流</p>
    </div>
</div>

说明: BootStrap默认还提供了一些细小的辅助样式,文字颜色text-*类,文字背景颜色bg-*类,关闭图标close类,下拉图表caret类,左浮动pull-left类,右浮动pull-right类,清除浮动clearfix类,显示show类,隐藏hidden类和invisiable类,前者是隐藏并不占文档流,后者是隐藏但占据文档流.


本文出自 “满满李 - 运维开发之路” 博客,请务必保留此出处http://xmdevops.blog.51cto.com/11144840/1881480

网站前端_Bootstrap.基础入门.0002.排版/列表/表格/表单/按钮/图像?