手记

《深入理解Bootstrap》学习笔记(四)

第三章 CSS布局
——3.1 概述
——3.2 基础排版
——3.3 代码
——3.4 表格
——3.5 表单
——3.6 按钮
——3.7 图像
——3.8 辅助样式
——3.9 响应式样式

从本章开始进入bootstrap代码的学习,建议下载bootstrap压缩文件,根据源码学习,将每一个bootstrap定义的类的样式弄明白。
3.1 概述
内容略
3.2 基础排版
标题:h1 h2 h3 h4 h5 h6元素 .h1 .h2 .h3 .h4 .h5 .h6样式 small元素 .small样式,查看源码,注意相同点和不同点。
页面主体:bootstrap全局设置font-size为14px,line-height为字体大小的1.428倍,见源码关于body的设置。
另外对于文本段落设置了margin-bootom,为段落添加类名.lead可以改变字体样式。
强调文本:元素small(字体变为父元素大小的85%)、b,strong(字体加粗)、em,i,cite(斜体)。文本对齐方式.text-left(向左对齐)、.text-center(居中)、.text-right(向右对齐)、.text-justify(两端对齐)。
缩略语:Bootstrap在abbr元素上实现了缩略词的功能,即鼠标移动到缩略词上时,就显示声明在title里的属性值。<abbr></abbr>,也可定义class="initialism"让字体小一些。
地址元素:address元素,HTML5标签
引用: blockquote元素,HTML5标签,一般在标签对内加p元素。

<blockquote>
    <p>三人行必有我师</p>
    <!--small和footer的效果是一样的,都可做引用出处的标签-->
    <small>出自<cite class="《论语》">论语</cite></small>
    <footer>出自<cite class="《论语》">论语</cite></footer>
</blockquote>

也可以给blockquote标签加class="pull-right"让引用右对齐。
列表
Bootstrap提供了6种形式的列表,分别是:普通列表、 有序列表、 去点列表、 内联列表、 描述列表和水平描述列表。
.list-unstyled:bootstrap特地设定了一个为列表去除列表前面的小黑点的class属性。
.list-inline:实现将列表项水平显示,给每个li设定display:inline-block。
.dl-horizontal:实现将定义列表dl水平显示,给dt进行左浮动同时设置宽度160px,而且如果内容过长的话会被隐藏,因为也设定了text-overflow,dd设置margin-left:180px。
3.3 代码
内联代码:code标签,bootstrap为code标签设定了背景颜色和文字颜色,以及圆角属性。
用户输入代码:kbd标签,元素包含的内容是表示该内容需要用户键盘输入。
多行代码块输入:pre标签,一般显示大段代码,并且格式不变。另外可以在pre元素上应用.pre-scrollable样式,则可以控制区域最大高度为340像素,并可以在y方向滚动。
3.4 表格
在表格组件里,Bootstrap提供了1种基础.table样式、 4种附加样式(.table-striped、 .table-bordered、 .table-hover、 .tablecondensed)以及一个支持响应式布局的.table-responsive容器样式,每种附加特效都是在.table样式的基础上联合应用才生效的。
基础样式:.table样式的作用有三个,增加单元格的内边距,为thead底部加一条2px的边框,为每行顶部加一条1px的边框。
带背景条纹的表格:就是在现有.table样式的基础上再应用一个.table-striped样式,其添加了隔行加背景色的设置。
带边框的表格:在现有.table样式的基础上再应用一个.table-bordered样式,在该特效下,Bootstrap为表格所有的单元格提供了1条1像素宽的边框。
鼠标悬停高亮的表格:在现有.table样式的基础上再应用一个.table-hover样式,当鼠标移上去时tr td均显示背景颜色(可更改设置)。
紧凑型表格:在现有.table样式的基础上再应用一个.table-condensed样式,减小单元格的内边距,让表格变得紧凑。
行级元素样式:bootstrap为行tr设定了5种背景颜色,.active、.info、.danger、.success、.warning,表示不同的信息行为。
响应式表格:Bootstrap为表格也提供了一个响应式设计的容器(.table-responsive样式),将.tableresponsive样式包装在.table样式外部即可创建响应式表格。
3.5 表单
基础表单:.forrm-control样式,针对select input textarea设置样式。.form-group样式,将几个表单元素进行分组,一起设置样式(主要设置margin-bottom)。
内联表单:在form元素上应用一个.form-inline样式,即可将表单内的元素设置为内联样式,但.form-inline样式只能在大于768像素的浏览器上才能应用。此处要灵活运用form-inline form-control form-group样式和label标签。

    <form class="form-inline">
        <div class="form-group">
            <label for="username">用户名:</label>
            <input type="text" class="form-control" placeholder="请输入用户名" id="username" />
        </div>
        <div class="form-group">
            <label for="password">密码:</label>
            <input type="text" class="form-control" placeholder="请输入密码" id="password"/>
        </div>
    </form>

横向表单:要实现横向表单,不仅要应用form-horizontal样式,还要使用Bootstrap预置的栅格类,以便将label和控件水平并排布局。 此处要灵活运用form-horizontal form-control control-label form-group样式和栅格系统。

    <form class="form-horizontal" role="form">
        <div class="form-group">
            <label for="username" class="col-md-2 control-label">用户名:</label>
            <div class="col-md-10">
                <input type="text" class="form-control" placeholder="请输入用户名" id="username" />
            </div>
        </div>
        <div class="form-group">
            <label for="password" class="col-md-2 control-label">密码:</label>
            <div class="col-md-10">
                <input type="text" class="form-control" placeholder="请输入密码" id="password"/>
            </div>
        </div>
    </form>

表单控件:input、select、textarea、checkbox、radio标签 .checkbox、.radio、.checkbox-inline、.radio-inline、.multiple样式
空间状态:Bootstrap提供了3种状态的样式可供使用,分别是:焦点状态、 禁用状态、 验证提示状态。焦点状态和禁用状态都分别设定了表现样式。验证状态提供了has-warning、 .has-error、 .has-success三种样式用于分别表示警告(黄色)、 错误(红色)、 成功(绿色)语境的内容,改变字体和边框颜色,需要和form-group平级使用。也可以加对应图标验证,需使用has-feedback、form-control-feedback样式。

       <form role="form">
        <div class="form-group has-warning has-feedback">
            <label class="control-label" for="inputWarning">输入长度不够!</label>
            <input type="text" class="form-control" id="Text1">
            <span class="glyphicon glyphicon-ok form-control-feedback"></span>
        </div>
    </form>

控件大小:bootstrap为表单控件大小设置了三种样式,.input-lg、普通、.input-sm,改变padding font-size border-radius的值,input、select、textarea元素均适用。
其他:.help-block样式用于将内联元素改为块级元素。
3.6 按钮
按钮样式:bootstrap定义了7种按钮样式。也定义了active、hover、disabled、focus等行为样式。

    <button type="button" class="btn btn-default">default</button>
    <button type="button" class="btn btn-primary">primary</button>
    <button type="button" class="btn btn-info">info</button>
    <button type="button" class="btn btn-success">success</button>
    <button type="button" class="btn btn-warning">warning</button>
    <button type="button" class="btn btn-danger">danger</button>
    <button type="button" class="btn btn-link">link</button>

按钮大小:bootstrap提供了四种按钮大小样式大型(.btn-lg)普通(.btn)小型(.btn-sm)超小型(.btn-xs)改变按钮的内边距、行高、字体大小、圆角。也提供了将按钮变为块级元素的样式.btn-block,使按钮宽度为100%。
多标签支持:a input button标签都可以产生按钮效果,但强烈建议任何时候都使用button标签左按钮。
活动状态:active伪类和.active样式。
禁用状态:disabled属性和.disabled样式。
3.7 图像
.img-rounded、.img-circle、.img-thumbnail三种样式,分别产生圆角、圆形、加边框样式效果。
3.8 辅助样式
文本样式及背景样式:bootstrap提供了6种文本颜色柔和灰(text-muted)、主要蓝(text-primary)、成功绿(text-success)、信息蓝(text-info)、警告黄(text-warning)、危险红(text-danger)适用于各种文本。提供了5种背景颜色主要蓝(bg-primary)、成功绿(bg-success)、信息蓝(bg-info)、警告黄(bg-warning)、危险红(bg-danger)。
辅助图标:关闭图标、向下箭头

<span>&times;</span>
<span class="caret"></span>

内容浮动:左浮动(pull-left)、右浮动(pull-right)、居中对齐(center-block)、清除浮动(clearfix)。
隐藏与显示:显示(show)、不占用文档流的隐藏(hidden)、占用文档流的隐藏(invisible)、特殊隐藏(sr-only)。
3.9 响应式样式
内容略。

14人推荐
随时随地看视频
慕课网APP