优化CSS样式

学习要点：

• 页面排版优化
• 表格优化设计
• 表单优化设计
• 外观风格
• 按钮
• 图片

一、页面排版优化
1) 标题和字体风格

<p class="lead">强调突出</p>

2)文本强调风格 强调类文本

<p>默认</p>
<p class="muted">提示 浅灰色</p>
<p class="text-warning">警告 黄色</p>
<p class="text-error">错误 红色</p>
<p class="text-info">通知 浅蓝</p>
<p class="text-success">成功 浅绿</p>
<small>正常文本85% 不强调的文本</small>

加粗和斜体文本

<strong>加粗</strong>
<em>斜体</em>

3)文本对齐风格

<p class="text-left">文本左对齐</p>
<p class="text-center">文本居中</p>
<p class="text-right">文本右对齐</p>

4)缩略语风格

<attr title="我是缩略语">缩略语</attr>  当鼠标移到文本上显示全部文本
<!-- initialism 缩略语字体缩小10% -->
<attr class="initialism" title="我是缩略语">abc</attr>

5)地址风格

<address>
    <a href="#">scryc@qq.com</a><br/>
    北京朝阳
</address>

6)引用风格

<!-- pull-right 引用向右移动对齐 -->
<blockquote class="pull-right">
    <p>欢迎来到我的博客</p>
    <small><cite titile="http://www.lamport.me"><a href="http://www.lamport.me" target="_blank">光明大神棍</a></cite></small>
</blockquote>

7)列表样式

<!-- unstyled 没有样式 -->
<!-- 行内样式 -->
<ul class="unstyled inline">
    <li>首页</li>
    <li>二手车</li>
    <li>二手市场</li>
    <li>二手房</li>
</ul>

<!-- dl-horizontal 词条和解释并排显示 -->
<dl class="dl-horizontal">
    <dt>人</dt>
    <ddt>person</ddt>
    <dt>物体</dt>
    <ddt>thing</ddt>
    <dt>好</dt>
    <ddt>good</ddt>
</dl>

8)代码风格

<!-- 行内代码 -->
<p>js中定义变量：<code>var i = 0;</code></p>
<!-- 代码块 -->
<!-- pre-scrollable 如果代码多的话，会出现一个Y轴滚动条-->
<pre class="pre-scrollable">
    &lt;p class="text-left"&gt;文本左对齐&lt;/p&gt;
    &lt;p class="text-center"&gt;文本居中&lt;/p&gt;
    &lt;p class="text-right"&gt;文本右对齐&lt;/p&gt;
</pre>

二、表格优化设计

<h2>华语九天榜</h2>
<!-- 添加table样式表 -->
<!-- table-striped 斑马纹风格 -->
<!-- table-bordered 圆角边框风格 -->
<!-- table-hover 鼠标悬浮风格 -->
<!-- table-condensed 紧凑型表格 padding减半 -->
<table class="table table-striped table-bordered table-hover table-condensed">
    <tr><th>排名</th> <th>歌曲名</th><th>歌手名</th></tr>
    <tr><td>1</td><td>我，一个人</td><td>付辛博</td> </tr>
    <!-- 成功 -->
    <tr class="success"><td>2</td><td>他们</td><td>张惠妹</td></tr>
    <tr><td>3</td><td>伤不起</td><td>郁可唯</td></tr>
    <!-- 错误 -->
    <tr class="error"><td>4</td><td>如果有如果</td><td>邓福如</td></tr>
    <tr><td>5</td><td>狂想曲</td><td>萧敬腾</td></tr>
    <tr><td>6</td><td>越来越想爱上你</td><td>SD5行堂</td></tr>
    <tr class="warning"><td>7</td><td>妈妈咪呀!</td><td>张靓颖</td></tr>
    <!-- 警告 -->
    <tr><td>8</td><td>除下吊带前</td><td>薛凯琪</td></tr>
    <!-- 信息风格 -->
    <tr class="info"><td>9</td><td>如梦令（电影《大武生》主题曲）</td><td>韩庚</td></tr> 
    <tr><td>10</td><td>因为爱情</td><td>陈奕迅</td></tr> 
</table>

三、表单优化设计 1) 输入框

<input type="text" placeholder="请输入姓名">

2) 文本区域

<textarea rows="3"></textarea>

3) 单选按钮和复选框

<!-- inline 行内样式 -->
<!-- 复选框样式 -->
<label class="checkbox inline">
    <input type="checkbox" value="zhang">复选框
</label>
<!-- 单选框样式 -->
<label class="radio inline">
    <input type="radio" name="sex" value="male" checked>男
</label>
<label class="radio inline">
    <input type="radio" name="sex" value="female">女
</label>

4) 下拉框

您来自的城市：

潍坊 青岛 信阳 郑州 洛阳 5) 修饰文本框

<div class="input-prepend">
    <span class="add-on">电子邮件</span>
    <input type="text" class="span2" placeholder="scryc@qq.com">
    <span class="add-on">@qq.com</span>
</div>
<!-- input-prepend和input-append把子组件都绑定 -->
<div class="input-prepend input-append">
    <!-- btn 按钮类 -->
    <input type="button" class="btn" value="用户名">
    <input type="text">
    <button class="btn">注册</button>
</div>

6) 分段按钮下拉菜单

<!-- input-prepend和input-append把子组件都绑定 -->
<div class="input-prepend input-append">
    <!-- btn 按钮类 -->
    <input type="button" class="btn" value="用户名">
    <input type="text">
    <!-- btn-group 按钮下拉菜单 -->
    <div class="btn-group">
        <button class="btn">@163.com</button>
        <!-- 辅助标签  -->
        <button class="btn" data-toggle="dropdown">
            <span class="caret" tabindex="-1"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">@126.com</a></li>
            <li><a href="#">@sohu.com</a></li>
            <li><a href="#">@qq.com</a></li>
            <li><a href="#">@sina.com</a></li>
        </ul>
    </div>
    <button class="btn">登录</button>
</div>

7) 搜索框

<form class="form-search">
    <div class="input-append">
        <input type="text" class="span3">
        <button type="submit" class="btn">快速搜索</button>
    </div>
</form>

8) 一个注册表单

<!-- 表单的水平布局 -->
<h3>用户登录</h3>
<form action="" method="post" class="form-horizontal">

    <div class="control-group">
        <div class="control-label">
            <label for="username">用户名：</label>
        </div>
        <div class="controls">
            <input type="text" id="username">
        </div>
    </div>
    <div class="control-group">
        <div class="control-label">
            <label for="pass">密   码：</label>
        </div>
        <div class="controls">
            <input type="password" id="pass">
        </div>
    </div>
    <div class="control-group">
        <div class="control-label">
            <label for="validate">验证码：</label>
        </div>
        <div class="controls">
            <input type="text" id="validate">
            <img src="img/getcode.jpg">
        </div>
    </div>
    <div class="control-group">
        <div class="controls">
            <label for="keepLogin">
            <input type="checkbox" id="keepLogin">
            记住我的登录信息</label>
        </div>
    </div>
    <div class="control-group">
        <div class="controls">
            <button type="sumbit">登录</button>
            <a href="#" class="reg">用户注册</a>
        </div>
    </div>
</form>

9) 圆角搜索框 四、外观风格 1) 定制大小

<label><input type="text" class="input-mini" placeholder="input-mini"></label>
<label><input type="text" class="input-small" placeholder=".input-small"></label>
<label><input type="text" class="input-medium" placeholder=".input-medium"></label>
<label><input type="text" class="input-large" placeholder=".input-large"></label>
<label><input type="text" class="input-xlarge" placeholder=".input-xlarge"></label>
<label><input type="text" class="input-xxlarge" placeholder=".input-xxlarge"></label>
<!-- 块状显示，100% -->
<label><input type="text" class="input-block-level" placeholder=".input-block-level"></label>

<div class="controls-row">
    <input type="text" class="span1" placeholder=".span1">
    <input type="text" class="span6" placeholder=".span6">
    <input type="text" class="span5" placeholder=".span5">
</div>

2) 定制不可编辑的样式控件

<!-- uneditable-input 不可编辑的控件 -->
<input type="text" class="span4 uneditable-input" placeholder=".span4" disabled="disabled">
<label class="span4 uneditable-input">不可编辑的</label>

3) 定制帮助文本

<input type="text"><span class="help-inline">同行显示 .help-inline</span><br/>
<input type="text"><span class="help-block">换行显示 .help-block</span>

4) 定制表单行为

<!-- form-actions 定制表单行为-->
<form class="form-actions form-horizontal">
    <div class="control-group">
        <div class="control-label">
            <label for="username">用户名：</label>
        </div>
        <div class="controls">
            <input type="text" id="username">
        </div>
    </div>
    <div class="control-group">
        <div class="control-label">
            <label for="pass">密码：</label>
        </div>
        <div class="controls">
            <input type="password" id="pass">
        </div>
    </div>
    <div class="control-group">
        <div class="controls">
            <button class="btn">取消</button>
            <button class="btn btn-primary">确定登录</button>
        </div>
    </div>
</form>

五、按钮 1) 定制按钮

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

2) 大小

<button class="btn btn-info btn-large">信息</button>
<button class="btn btn-info">信息</button>
<button class="btn btn-info btn-small">信息</button>
<button class="btn btn-info btn-mini">信息</button>

3) 块状元素

<button class="btn btn-info btn-block">信息</button>

六、图片 1) 图片风格

<div class="row-fluid">
    <div class="span3 text-center">
        <img src="img/1.png">
        <h3>正常效果</h3>
    </div>
    <div class="span3 text-center">
        <img src="img/1.png" class="img-rounded" title="圆角图片">
        <h3>圆角效果</h3>
    </div>
    <div class="span3 text-center">
        <img src="img/1.png" class="img-circle" title="圆形图片">
        <h3>圆形图片</h3>
    </div>
    <div class="span3 text-center">
        <img src="img/1.png" class="img-polaroid" title="镶边图片">
        <h3>镶边图片</h3>
    </div>
</div>

2) 图标风格

<i class="icon-search"></i>
<!-- icon-white 反色图标 -->
<i class="icon-search icon-white"></i>

模仿视频播放

<div class="btn-toolbar">
    <div class="btn-group">
        <a class="btn" href="#"><i class="icon-play"></i></a>
        <a class="btn" href="#"><i class="icon-pause"></i></a>
        <a class="btn" href="#"><i class="icon-stop"></i></a>
        <a class="btn" href="#"><i class="icon-backward"></i></a>
        <a class="btn" href="#"><i class="icon-forward"></i></a>
    </div>
</div>

<!-- 导航图标 -->
<ul class="nav nav-pills">
    <li class="active"><a href="#"><i class="icon-home icon-white"></i> 首页</a></li>
    <li><a href="#"><i class="icon-book"></i> 资料</a></li>
    <li><a href="#"><i class="icon-pencil"></i> 写日志</a></li>
    <li><a href="#"><i class="icon-film"></i> 视频<a></li>
</ul>

<!-- 表单图标 -->
<form class="form-actions form-horizontal">
    <div class="control-group">
        <label class="control-label" for="email">邮箱</label>
        <div class="controls">
            <div class="input-prepend">
                <span class="add-on"><i class="icon-envelope"></i></span>
                <input type="text" class="span2" id="email">
            </div>
        </div>
        <label class="control-label" for="pass">密码</label>
        <div class="controls">
            <div class="input-prepend">
                <span class="add-on"><i class="icon-lock"></i></span>
                <input type="text" class="span2" id="pass">
            </div>
        </div>
    </div>
</form>