Bootstrap3-CSS通用样式

目录

板式

强调

使得文本显示不同颜色以表示强调

<p class="text-muted">.text-muted：提示，浅灰色</p>
<p class="text-primary">.text-primary：主要，蓝色</p>
<p class="text-success">.text-success：成功，浅绿色</p>
<p class="text-info">.text-info：通知信息，浅蓝色</p> 
<p class="text-warning">.text-warning：警告，浅黄色</p>
<p class="text-danger">.text-danger：危险，浅红色</p> 

缩略语

当鼠标悬停在缩写词上时会显示完整内容

<p><abbr title="Cascading Style Sheets">CSS</abbr>是英语层叠样式表单的缩写，它是一种用来表现HTML或XML等文件样式的计算机语言。
</p>

表格

个性风格

table-striped 斑马纹风格
table-bordered 边框风格
table-hover 鼠标指针悬停风格
table-condensed 紧凑单元风格

<table class="table table-striped table-bordered table-hover table-condensed">
    <tr>
        <td></td>
        <th>Chrome</th>
        <th>Firefox</th>
        <th>Internet explorer</th>
        <th>Opera</th>
        <th>Safari</th>
    </tr>
    <tr>
        <th scope="row">Android</th>
        <td>支持</td>
        <td>支持</td>
        <td>N/A</td>
        <td>不支持</td>
        <td>N/A</td>
    </tr>
    <tr>
        <th scope="row">iOS</th>
        <td>支持</td>
        <td>N/A</td>
        <td>N/A</td>
        <td>不支持</td>
        <td>支持</td>
    </tr>
    <tr>
        <th scope="row">Mac os x</th>
        <td>支持</td>
        <td>支持</td>
        <td>N/A</td>
        <td>支持</td>
        <td>支持</td>
    </tr>
    <tr>
        <th scope="row">windows</th>
        <td>支持</td>
        <td>支持</td>
        <td>支持</td>
        <td>支持</td>
        <td>不支持</td>
    </tr>
</table>

表单

表单控件

单独的表单控件会自动被Bootstrap3.0自动赋予一些全局样式。

<form method="post" action="">
    <div class="form-group">
        <label for="userName">用户名：</label>
        <input type="text" id="userName" class="form-control" />
    </div>
    <div class="form-group">
        <label for="userPsw">密　码：</label>
        <input type="password" id="userPsw" class="form-control" />
    </div>
    <div class="form-group">
        <label for="validate">验证码：</label>
        <input type="text" id="validate" class="form-control" />
        <img src="images/getcode.jpg" alt="验证码：3731" /> </div>
    <div class="form-group">
        <label for="keepLogin">
            <input type="checkbox" id="keepLogin"  />
            记住我的登录信息</label>
    </div>
    <div class="form-group">
        <button type="submit" class="btn_login">登 陆</button>
        <a href="#" class="reg">用户注册</a> </div>
</form>

行内布局

通过form标签引入form-inline类，可以设计整个表格结构以行内显示。

水平布局

引入form-horizontal类。

<form method="post" action="" class="form-horizontal">
    <div class="form-group">
        <label for="userName" class="col-sm-2 text-right">用户名：</label>
        <div class="col-sm-10">
            <input type="text" id="userName" class="form-control col-sm-8" />
        </div>
    </div>
    <div class="form-group">
        <label for="userPsw" class="col-sm-2 text-right">密　码：</label>
        <div class="col-sm-10">
            <input type="password" id="userPsw" class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <label for="validate" class="col-sm-2 text-right">验证码：</label>
        <div class="col-sm-10">
            <input type="text" id="validate" class="form-control col-sm-8" />
            <img src="images/getcode.jpg" alt="验证码：3731" /> </div>
    </div>
    <div class="form-group">
        <div class="col-sm-11 col-sm-offset-1">
            <label for="keepLogin">
                <input type="checkbox" id="keepLogin"  />
                记住我的登录信息</label>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-11 col-sm-offset-1">
            <button type="submit" class="btn_login">登 陆</button>
            <a href="#" class="reg">用户注册</a> </div>
    </div>
</form>

这种布局相当于栅格系统

按钮

定制风格

<button type="button" class="btn btn-default">默认</button>
<button type="button" class="btn btn-primary">主要</button>
<button type="button" class="btn btn-success">成功</button>
<button type="button" class="btn btn-info">信息</button>
<button type="button" class="btn btn-warning">警告</button>
<button type="button" class="btn btn-danger">危险</button>
<button type="button" class="btn btn-link">链接</button>