《深入理解bootstrap》读书笔记:第三章 CSS布局

2018-06-24 00:28:20来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

一. 概述一下理念

bootstrap基于H5开发。提倡移动先行(媒询声明是必须的),对浏览器支持面不是很广。
响应式图片:max-width:100% height:auto;
可以加上:.img-responsive类
排版方面的基本样式为:
body的margin为0,背景色为白色,行间距为20/14倍
使用Normalize.css库,使各个浏览器差别最小化
居中容器container有一个最大范围。(最大左右margin为auto,和设备有关)
 

二. 文字基础排版(全局设置)

1.标题(h标记和small标记)

1
2
3
4
5
6
<h1>header1<small>small标记的副标题</small></h1>
<h2>header2<small>small标记的副标题</small></h2>
<h3>header3<small>small标记的副标题</small></h3>
<h4>header4<small>small标记的副标题</small></h4>
<h5>header5<small>small标记的副标题</small></h5>
<h6>header6<small>small标记的副标题</small></h6>

所有标题元素里的<small>内容的字体颜色都是灰色(#999999),行间距都为1。

<small>内的文本字体在h1、h2、h3内是当前元素所对应字体大小的65%;而在h4、h5、h6下则是75%。

 

A. 字体大小为14px,间距为20px。p元素的margin-bottom为行间距一半(10px)。

B. 突出显示

当你有一段文字,想高亮显示,又不想获得和h标记一样的权重时,可以class="lead"

 

1
<span class="lead">email me</span>

如图.lead和h1的对比效果:


2. 强调文本

强调元素 表现

small

(可以直接套用.small类)

小号文本
strong 着重(加粗)
em 斜体
cite 引用来源,字体大小为85%
 

3. 缩略语abbr和.initialism

两者都可以实现下划虚线悬停手型效果 需要搭配title属性使用。

4. 地址address

用来包裹和联系方式有关的信息。样式差别是间距和底部样式稍微有点不同。

1
2
3
4
5
6
7
8
9
10
<address>
    <strong>Twitter, Inc.</strong><br>
    795 Folsom Ave, Suite 600<br>
    San Francisco, CA 94107<br>
    <abbr title="Phone">P:</abbr>(123) 456-7890
</address>
<address>
    <strong>汤姆大叔</strong><br>
    <a href="mailto:#">tomxu@outlook.com</a>
</address>

效果如图

5. 引用blockquote

引用的一般格式是

1
2
3
4
<blockquote>
    <p>爱情不是你想买想买就能买</p>
    <small>出自<cite>爱情买卖</cite></small>
</blockquote>

当然,small换成footer也是一样的效果。

默认是左对齐的,想要右对齐可以对blockquote使用.pull-right类。整体飘到了右边。

6. 列表

(1)ul-li无序列表

bootstrap下,普通列表的ul-li框架和默认基本是一样的。

A. ul-li列表的样式是由list-style决定的。在bootstrap框架使用.list-unstyle类。源码样式无非是padding-left:0;list-style:none。

注意:如果是列表嵌套列表,对祖父级的ul应用.list-unstyle类,孙代li是不会继承的。

B. 内联列表:正常的ul-li是竖着显示的。在很多场合,最典型的就是导航,需要把li打横排列。这时可以使用内联列表的.list-inline类

 

1
2
3
4
5
<ul class="list-inline">
            <li>home</li>
            <li>article</li>
            <li>about</li>
        </ul>


(2)有序列表ol-li

更换了字体,显示更加柔和

(3)dl-dt-dd定义列表

定义列表包括了描述信息,bootstrap下的dl-dt-dd定义列表通常也是纵向排列的。

1
2
3
4
5
6
7
8
<dl>
    <dt>标题1</dt>
    <dd>描述1</dd>
    <dt>标题2</dt>
    <dd>描述2</dd>
    <dt>标题3</dt>
    <dd>描述3</dd>
</dl>

我想在横向展示一个商品列表,包括描述信息。如果给dl加上class="dl-horizontal"

 

7. 代码

包括code单行代码,kbd用户输入代码和pre多行代码块。

代码样式的用法示例如下:

1
2
3
<code>&lt;body&gt;&lt;/body&gt;</code><br>
<kbd>&lt;body&gt;&lt;/body&gt;</kbd>
<pre>&lt;body&gt;&lt;/body&gt;</pre>

(1)code

code内联代码可以在行间引用。原理是给code标记定义背景色,文字颜色

(2)kbd

kbd表示需要用户输入,可以配合input元素使用。

1
请输入<kbd>ctrl+c</kbd>来复制代码,然后使用<kbd>ctrl+v</kbd>来粘贴代码

(3)多行代码块pre

pre是预编译的意思。bootstrap实现基本方法是背景-边框,高度,圆角,竖向滚动。

粘贴进去会有空格。

类似还有<samp>可以格式化代码。用较为标准的字体和行间距显示

8.其它H5标记补充

(1)<mark>,也可以使用.mark

 

1
<p class="mark">this is mark text</p>


(2)del标记和s标记

1
<del>I am delated.</del>

(3)ins标记和u标记

下划线,ins定义已经被插入文档中的文本。u标记语义和ins不同,如果文本不是超链接,就不要对其使用u标记

(4)对齐相关

——text-left
——text-center
——text-right
文本居左中右。
——text-justify:自己判断——齐行定义单词间的间隔对齐,跟避头尾法则类似。注意css3中也有相应的属性。
——text-nowrap:浏览器缩小时始终保持1行

(5)大小写相关:

text-lowercase小写
text-uppercase大写
text-capitalize首字母大小

【例3.1】文本排版练习

1
2
3
4
5
6
7
8
<div class="text-justify">
        <h3 class="text-center">I am afraid <small>William Shakespeare</small></h3>
        <p class="text-capitalize">you say that you love rain, but you open your umbrella when it rains.You say that you love the sun, but you find a shadow spot when the sun shines.You say that you love the wind, but you close your windows when wind blows.</p>
        <p><mark>This is why I am afraid, you say that u love me too.</mark></p>
        <ins><em>译文</em></ins>
        <p>你说烟雨微芒,兰亭远望;后来轻揽婆娑,深遮霓裳。你说春光烂漫,绿袖红香;后来内掩西楼,静立卿旁。你说软风轻拂,醉卧思量;后来紧掩门窗,漫帐成殇。</p>
        <p>你说情丝柔肠,如何相忘;我却眼波微转,兀自成霜。</p>
</div>

 

三. 表格相关css

表格实现是给table加上.table类

【例3.2】做一个5行5列的表格,记录信息

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<table>
                    <thead><tr>
                        <td>ID</td>
                        <td>TITLE</td>
                        <td>AUTHOR</td>
                        <td>PUBDATE</td>
                        <td>PRICE</td>
                    </tr></thead>
                     
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>西游记</td>
                            <td>吴承恩</td>
                            <td>10.99</td>
                            <td>2010-1-1</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>三国演义</td>
                            <td>罗贯中</td>
                            <td>20.99</td>
                            <td>2010-1-2</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>水浒传</td>
                            <td>施耐庵</td>
                            <td>30.99</td>
                            <td>2010-1-3</td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>红楼梦</td>
                            <td>曹雪芹</td>
                            <td>40.99</td>
                            <td>2010-1-4</td>
                        </tr>
                    </tbody>
                </table>

 

无任何class样式时显示:

1.table基础样式

(1) 给table标签加上class="table",效果就变为:

 秒变高富帅了有木有?

(2)隔行变色.table-striped

table-striped:斑马线

使用CSS3的:nth-child实现。

(3)添加边框

使用.table-bordered可以为所有单元格添加1px的边框。

(4)悬停高亮

使用.table:hover可以让当前行悬停高亮

(5)紧凑型表格

table-condensed:压缩,稍微小一点——减少单元格的内边距。全部应用后是这样的。


代码清单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<table class="table table-bordered table-striped table-hover table-condensed">
                    <thead><tr>
                        <td>ID</td>
                        <td>TITLE</td>
                        <td>AUTHOR</td>
                        <td>PUBDATE</td>
                        <td>PRICE</td>
                    </tr></thead>
                      
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>西游记</td>
                            <td>吴承恩</td>
                            <td>10.99</td>
                            <td>2010-1-1</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>三国演义</td>
                            <td>罗贯中</td>
                            <td>20.99</td>
                            <td>2010-1-2</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>水浒传</td>
                            <td>施耐庵</td>
                            <td>30.99</td>
                            <td>2010-1-3</td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>红楼梦</td>
                            <td>曹雪芹</td>
                            <td>40.99</td>
                            <td>2010-1-4</td>
                        </tr>
                    </tbody>
                </table>

2.行级元素tr的样式

(1).active

表示当前激活的信息。跟鼠标悬停.table-hover显示的样式一样(较深的灰色)

(2).success

1
2
3
4
5
6
7
<tr class="success">
                            <td>2</td>
                            <td>三国演义</td>
                            <td>罗贯中</td>
                            <td>20.99</td>
                            <td>2010-1-2</td>
                        </tr>

 

(3).info

如果给table添加info的class

(4).warning

warning显示为黄色

(5).danger

小结:如果table应用了table-hover当鼠标悬停时相应的颜色也会加深一点,如果应用了table-striped,在高亮行使用tr样式,原来的浅灰色会被覆盖。

 

3.响应式的表格

表格过宽时,一味地自适应是不现实的。

把table标签用一个容器包装,容器class命名为.table-responsive
加了之后在大屏幕显示有了1px solid black的边框。在屏幕小于768时消失,在768px时出现滚动条.(注在四大名著表格中是直到330px才出现滚动条。)

【例3.3】一个超简单布局练习——第一个bootstrap网页

如图实现布局。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<body class="container">
    <header>
        <h1>Bootstrap <em>Css </em><small>Type</small></h1>
    </header>
     
    <div class="row">
        <div class="col-sm-2">
            <div>
                <ul class="list-group">
                    <li class="list-group-item"><a href="#">link1</a></li>
                    <li class="list-group-item"><a href="#">link2</a></li>
                    <li class="list-group-item"><a href="#">link3</a></li>
                    <li class="list-group-item"><a href="#">link4</a></li>
                </ul>
                <!--列表组:list-group
                    list-group-item:单个列表元件-->
            </div>
 
        </div>
 
        <div class="col-sm-6">
            <blockquote>
                <p>Book List</p>
                <small>from <em>BookStore</em></small>
            </blockquote>
            <div class="table-responsive">
                <table class="table table-striped table-hover table-bodered">
                    <thead>
                        <tr><td>Id</td>
                            <td>Title</td>
                            <td>Author</td>
                            <td>Proce</td>
                            <td>PubDate</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>红楼梦</td>
                            <td>曹雪芹</td>
                            <td>30</td>
                            <td>2014</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>西游记</td>
                            <td>吴承恩</td>
                            <td>25</td>
                            <td>2013</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>水浒传</td>
                            <td>施耐庵</td>
                            <td>24</td>
                            <td>2012</td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>三国演义</td>
                            <td>罗贯中</td>
                            <td>35</td>
                            <td>2015</td>
                        </tr>
                         
                    </tbody>
                </table>
            </div>
        </div>
 
        <div class="col-sm-4">
            <dl><h2>Figure</h2>
                <dt>html
                    <dd>hyper text markup language</dd>
                </dt>
                <dt>javascript
                    <dd>ecmaScript dom bom</dd>
                </dt>
                <dt>bootstrap
                    <dd>basic css componment jsplugin</dd>
                </dt>
            </dl>
 
            <blockquote class="pull-right">
                <h4>From Djtao</h4>
                <footer>Form <em>Sublime</em></footer>
            </blockquote>
        </div>
    </div>
 
    <footer class="navbar-fixed-bottom text-center">
        <p>&copy;<abbr title="djtao.top/wordpress">DJTAO</abbr></p>
    </footer>
 
    <!--基于jQuery的脚本文件  -->
    <script src="scripts/jquery.min.js"></script>
    <!-- bootstrap的jq插件 -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <!--自定义脚本文件  -->
    <script src="scripts/js.js"></script>
</body>

【例3.4】进阶:购物单的模拟实现

任务描述:网站常见的购物车经常有删除操作。大于30元的货物以警告红显示,否则显示成功绿。网站根目录下一个json文件夹,里面的books.json文件包含下列信息:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
[
    {
        "Id"1,
        "Title""红楼梦",
        "Price"10.0
    }, {
        "Id"2,
        "Title""西游记",
        "Price"20.0
    }, {
        "Id"3,
        "Title""三国演义",
        "Price"30.0
    }, {
        "Id"4,
        "Title""水浒传",
        "Price"40.0
    }
]

从json读取数据,返回到表格中。制作一个如图所示的模拟删除效果。

 

先补充一点知识

Query中的$.getJSON( )方法函数主要用来从服务器加载json编码的数据,它使用的是GET HTTP请求。使用方法如下:

1
$.getJSON( url ,[ data ] ,[ success(data, textStatus, jqXHR) ] )

url是必选参数,表示json数据的地址;
data是可选参数,用于请求数据时发送数据参数;
success是可选参数,这是一个回调函数,用于处理请求到的数据。

获取json数据举例:

1
2
3
4
5
$.getJSON('test.json', function(data){
   for (var i = 0; i < data.rows.length; i++) {
      $('#test').append('<p>' + data.rows[i].realName + '</p>');
   }
});

(1)首先,需要获取json数据。

1
2
3
$.getJSON("json/books.json",null,function (data){
    ...
})

在获取json成功时执行回调函数。

(2)在html文档的body中创建一个div表格区。

1
2
3
<div id="divBookList" class="table-responsive">
                 
</div>

(3)思考下一个预想中的表格是怎样的。

1
2
3
4
5
6
7
8
9
10
11
<table class="table table-striped table-bodered tablel-hover">
    <thead>
      <tr><td></td></tr>
      ...
      <tr><td></td></tr>
    </thead>
    <tbody>
      <tr><td></td></tr>
      ...
      <tr><td></td></tr>
    <tbody></table>

根据这一思想创建表头。把它加进html文档中。

1
2
3
4
5
6
7
8
9
10
11
12
13
var $tbl=$('<table>')//创建表格
            .addClass('table table-hover table-striped');//创建表格基本样式
        var $theadTr=$('<tr>').addClass('success')
            //定义父元素<tr class='success'></tr>
                .append($('<td>').html('Id').addClass('danger'))
                //创建一个<td class="danger">Id</td>加到父元素中
                .append($('<td>').html('Title').addClass('warning'))
                //创建一个<td class="warning">Title</td>添加到父元素
                .append($('<td>').html('Price').addClass('info'));
                //创建一个创建一个<td class="info">Price</td>添加到父元素
        var $thead=$('<thead></thead>');
        $thead.append($theadTr);
        $tbl.append($thead);

(4)接下来要把json返回的data数据添加到tbody。

注意:按理来说,一个表格的tbody是必须创建的。如果在浏览器中查看livescript,你会发现除了thead,tfoot之外的表格主体全都包了一层tbody。但是这里就不创建了。心里清楚就好。

本例中books.json数据引入后,表述形式为data[0].Title=‘西游记’

一共有四组元素,需要遍历,用的是$.each(index,Obj)方法。需要说明的是$.each()是数组遍历的方法,两个参数不可省略,index表述索引值,Obj才是每组对象的主体。引用形式为:Obj[index].属性

 

1
$(data).each(function (index,book){}

(5)在each的函数内书写创建表格主体的代码

 

1
2
3
var $tr=$('<tr></tr>')//创建一行
   .append($("<td>").html(book.Id))        //添加编号列
   .append($("<td>").html(book.Title));    //添加标题列

通过这三行代码,除了price外所有的json元素都添加到表格中了。

价格是需要判断后才能给添加样式。超过30块的用红色背景,否则用绿色。

1
2
3
4
5
if(parseInt(book.Price)>=30){
                $tr.append($("<td>").html(book.Price).addClass("danger"));
            }else{
                $tr.append($("<td>").html(book.Price).addClass("success")); 
            }//添加价格列

 

(6)接下来处理按钮

 

新创建的一列按钮需要加以下内容:

            1.红色的button按钮,内容为remove;<button class="btn btn-danger"><apan>remove</apan></button>

            2.为按钮绑定id

            3.字体图标(class=glyphicon glyphicon-remove)

 

1
2
3
4
5
6
7
8
9
var $td=$('<td></td>');
            var $btn=$("<button>").attr('data-id',book.Id).addClass('btn btn-danger');
            //定义按钮btn的样式。
             
            var $span1=$('<span></span>').addClass("glyphicon glyphicon-remove");
            $btn.append($span1);//添加按钮的图标字体。
 
            var $span2=$($('<span>remove</span>'));
            $btn.append($span2);//添加按钮的文字内容

(7)点击事件

点击事件处理两个问题

a. 弹出当行id信息;b.当列消失。

1
2
3
4
5
6
$btn.click(function(){//配置按钮点击事件
                var id=$(this).attr("data-id");//获取按钮绑定的Id
 
                alert('您删除的书库编号为:'+id); //弹出id
 
                $(this).parent().parent().fadeOut(600);}//隐藏当前行

(8)点击函数结束后,添加表格主体到tbl中

1
2
$td.append($btn).appendTo($tr);
            $tbl.append($tr);

最后在回调函数最下面,把整个表格加到网页中表格区

1
$tbl.appendTo($('#divBookList'));

基本要求就算做完了。

【改进】有明显的问题需要改进,就是数字编号。删除之后没有重排。为此需要重新整理点击事件

思路:需要一点原生js的操作。

(1)用两个计数器,count1读取,count2写入

(2)通过count2来获取当前页面可见的行数,作为购物车的物品数。但是fadeout执行需要时间,如果马上判断,就会误把正在消失的那行计入count2

(3)解决思路是,让计数器程序等到删除行消失之后延迟一点点时间再执行。比如说删除行fadOut(600)消失时间是600ms,我就通过Timout延迟620ms执行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var oTab=document.getElementsByTagName('table')[0];
                var aRows=oTab.tBodies[0].rows;
                 
                var count1=$(this).parent().siblings().eq(0).html();
                // 把当前书籍序号加到count2上面
                // this.parentNode.parentNode.firstChild.innerHTML;
 
                alert('您删除的是购物车内第'+count1+'本书。书库编号为:'+id); //弹出id
                // $.post("url?id="+id,null,function(){
                //     //删除成功后处理的回调函数
                //      });)
                $(this).parent().parent().fadeOut(600);//隐藏当前行
                setTimeout(function(){
                     var count2=0;
                for(i=0;i<aRows.length;i++){
                    if(aRows[i].style.display!=='none'){
                        count2+=1;
                        aRows[i].cells[0].innerHTML=count2;
                    }}
                },620)

其它的改进:给表头第四列加一个内容名为“操作”

改进后的效果:

 

代码清单:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
$(function(){
    //创建json,不返回任何操作
    $.getJSON("json/books.json",null,function (data){
        //读取成功时的成功时的回调函数
        var $tbl=$('<table>')//创建表格
            .addClass('table table-hover table-striped');//创建表格基本样式
        var $theadTr=$('<tr>').addClass('success')
            //定义父元素<tr class='success'></tr>
                .append($('<td>').html('Id').addClass('danger'))
                //创建一个<td class="danger">Id</td>加到父元素中
                .append($('<td>').html('Title').addClass('warning'))
                //创建一个<td class="warning">Title</td>添加到父元素
                .append($('<td>').html('Price').addClass('info'))
                //创建一个创建一个<td class="info">Price</td>添加到父元素
                .append($('<td>').html('Operate').addClass('active'));
        var $thead=$('<thead></thead>');
        $thead.append($theadTr);
        $tbl.append($thead);
 
        $(data).each(function (index,book){
            var $tr=$('<tr></tr>')//创建一行
                .append($("<td>").html(book.Id))        //添加编号列
                .append($("<td>").html(book.Title));    //添加标题列
 
            if(parseInt(book.Price)>=30){
                $tr.append($("<td>").html(book.Price).addClass("danger"));
            }else{
                $tr.append($("<td>").html(book.Price).addClass("success")); 
            }//添加价格列
 
            /*新创建的一列需要加以下内容:
            1.红色的button按钮,内容为remove;<button class="btn btn-danger"><apan>remove</apan></button>
            2.字体图标(class=glyphicon glyphicon-remove)
            3.点击事件:(1)弹出删除信息;(2)当列消失。
            */
            var $td=$('<td></td>');
            var $btn=$("<button>").attr('data-id',book.Id).addClass('btn btn-danger');
            //定义按钮的样式。
             
            var $span1=$('<span></span>').addClass("glyphicon glyphicon-remove");
            $btn.append($span1);//添加按钮的图标字体。
 
            var $span2=$($('<span>remove</span>'));
            $btn.append($span2);//添加按钮的文字内容
 
             
            $btn.click(function(){//配置按钮点击事件
                var id=$(this).attr("data-id");//获取按钮绑定的Id
                var oTab=document.getElementsByTagName('table')[0];
                var aRows=oTab.tBodies[0].rows;
                 
                var count1=$(this).parent().siblings().eq(0).html();
                // 把当前书籍序号加到count2上面
                // this.parentNode.parentNode.firstChild.innerHTML;
 
                alert('您删除的是购物车内第'+count1+'本书。书库编号为:'+id); //弹出id
                // $.post("url?id="+id,null,function(){
                //     //删除成功后处理的回调函数
                //      });)
                $(this).parent().parent().fadeOut(600);//隐藏当前行
                setTimeout(function(){
                     var count2=0;
                for(i=0;i<aRows.length;i++){
                    if(aRows[i].style.display!=='none'){
                        count2+=1;
                        aRows[i].cells[0].innerHTML=count2;
                    }}
                },620)
            })
            $td.append($btn).appendTo($tr);
            $tbl.append($tr);
        })
 
         
        $tbl.appendTo($('#divBookList'));
    })


四. 表单

1.基础表单

基础表单和以前差不多,默认使用全局设置。多了一个form-group类。form-gronp提供了1个15px的margin-bottom。看起来更有层次感。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div>
            <form action="index.html" method="get">
            <!-- 电邮 -->
                <div class="form-group">
                    <label for="email" class="control-label">Email</label>
                    <input id="email" type="email" class="form-control" placeholder="Enter email" required>
                </div>
                <!-- 用户名 -->
                <div class="form-group">
                        <label for="username" class="control-label">UserName</label>
                        <input id="username" type="text" class="form-control" placeholder="Enter username" required>
                    </div>
                <!-- 密码 -->
                <div class="form-group">
                        <label for="password" class="control-label">Password</label>
                        <input id="password" type="password" class="form-control" placeholder="Enter password" required>
                </div>
            
            <!-- 功能按钮 -->
            <p class="text-right"><button type="submit" class="btn btn-primary">Submit</button>
            <button type="reset" class="btn btn-danger">Reset</button></p></form>
        </div>

required表示表示必填字段。

 

我想将表单加入注册条款等信息,同时要压缩表单到当前的一半。

就把上述代码加到如下容器中:

 

1
<div class="row"><div class="col-sm-6 col-offset-sm-3"></div></div>

效果更加简洁了。

 

2.内联表单form-inline

上述代码label和输入框不在一行,对form采用form-inline——

虽说目的达成,但是没对齐啊。这时可以再次使用栅格系统。让它们对齐。

 

3.横向表单:.form-horizontal

不能直接在form上面应用.form-horizontal,这样看不出什么效果,需要在内部对label和输入框使用栅格系统。但是不需要再套一个row了,因为.form-horizontal改变了.form-group的行为。

 

1
2
3
4
5
6
7
<form class="form-horizontal" action="index.html" method="get">
                        <!-- 电邮 -->
                        <div class="form-group">
                            <div class="col-sm-4"><label for="email" class="control-label">Email</label></div>
                            <div class="col-sm-8"><input id="email" type="email" class="form-control" placeholder="Enter email" required></div>
                        </div>
</form>

如果全部应用额系统,效果是这样的

注意input不能做栅格。如果要让e所有label右对齐,也不能直接在label上面做text-right或pullright

 

4.表单控件

(1)input

必须指定type类型。

(2)select-option下拉菜单

和原始样式一致

(3)文本域

textarea如果运用了form-control

正常情况下只要指定row,col不需要再定义了。默认100%显示

 

(4)多选(checkbox)和单选按钮(radio)

这俩控件经常出现和文本对齐不一致的情况。这时需要注意把所有input包起来,外面包装一个div,class为对应的type。

1
2
3
4
5
6
7
8
9
<div class="checkbox">
    <label><input type="checkbox" value="">是否想赚大钱?</label>
</div>
<div class="radio">
    <label><input type="radio" name="optionsRadios" value="female" checked>请确保,您喜欢女人?</label>
</div>
<div class="radio">
    <label><input type="radio" name="optionsRadios" value="male">请确保,您喜欢男人?</label>
</div>

    ——内联多选和单选框checkbox-inline、radio-inline也可以,包在一个label标签并对齐应用class。注意:这里是全部变成一行。

 

1
<label class="checkbox-inline"><input  type="checkbox" value="">是否想赚大钱?</label>

 

5.控件状态

(1)焦点状态

在jQuery的:focus选择器上,用box-shadow替代了jQuery的效果

(2)禁用状态——分为2种

a.文本框压根点不进去。鼠标悬停出现禁止符号。直接在标签内写上disabled。比如<input type="text" disabled>

b. readonly光标可以进去,但无法修改

 

(3)验证状态——成功(绿)警告(黄)失败(红)

a.成功绿——.has-success

b.警告黄——.has-error

c.失败红——.has-success

这三个都有类似的使用语境:

使用form-group、control-label、form-control标签进行分组,在form-group平级的div元素上应用has-***样式,然后在input元素上应用form-control样式,

 

继续最初的案例——登录框。对三个<div class="form-group">分别追加三种不同的验证状态。

此时效果为:

 


【例3-5】bootstrap下的表单校验

此时代码清单为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<div>
    <div class="row">
        <div class="col-sm-6 col-sm-offset-3">
            <form class="form-horizontal" action="index.html" method="get">
                <!-- 电邮 -->
                <div class="form-group has-success">
                    <div class="col-sm-3"><label for="email" class="control-label">Email</label></div>
                    <div class="col-sm-9">
                        <input id="email" type="email" class="form-control" placeholder="Enter email" required>
                    </div>
                </div>
                <!-- 用户名 -->
                <div class="form-group has-warning">
                        <div class="col-sm-3"><label for="username" class="control-label">UserName</label></div>
                        <div class="col-sm-9">
                            <input id="username" type="text" class="form-control" placeholder="Enter username" required>
                        </div>
                    </div>
                <!-- 密码 -->
                <div class="form-group has-error">
                        <div class="col-sm-3">
                            <label for="password" class="control-label">Password</label>
                        </div>
                        <div class="col-sm-9">
                            <input id="password" type="password" class="form-control" placeholder="Enter password"required>
                        </div>
                </div>
                 
 
                <!-- 功能按钮 -->
                <p class="text-right"><button type="submit" class="btn btn-primary">Submit</button>
                <button type="reset" class="btn btn-danger">Reset</button></p>
            </form>
             
        </div>
    </div>
     
</div>

 

(1)has-feedback

表示反馈的意思。用字体图标在反馈信息添加对应的小图标。

反馈图标:glyphicon-ok/warning-sign/remove frome-control-feedback

使用方法

a. 给每个form-group的div添加一个has-feedback的类。

b. 给input下面一个span标记,加上反馈图标类,预览以下效果比如:

1
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
form-control-feedback表示内嵌进input.

这套样式应通过jQuery给它动态的加上去。所以span的class全部清空。

(2)接下来就比较简单了

当字符段为空时,显示glyphicon glyphicon-remove form-control-feedback"

当密码不为6位,用户名不为6位是显示glyphicon glyphicon-warning-sign form-control-feedback

当都符合要求时,显示OK并允许提交。

事件——keyup

具体思想可以参照《锋利的jQuery》笔记第5章案例。此处不再复述。

【改进】颜色不是乱用的。应该让它在输入时根据输入情况随时变色。控制颜色属性的是输入框父级的父级,应该把最初用来预览效果的has-xxx属性移除。变为:(<div class="form-group  has-feedback"></div>)

默认是要移除has-success/warning/error,但是如果全部移除,原来的类也会移除掉。那么就在移除的同时再再加回去!

注意:button标签实质上还是会被input的选择器所控制。

1
$(this).parent().parent().removeClass().addClass('form-group  has-feedback').addClass('has-error');

最后效果如下:

 

代码清单

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<header class="page-header visible-sm visible-md visible-lg">
    <h1>form</h1>
</header>
 
<div>
    <div class="row">
        <div class="col-sm-6 col-sm-offset-3">
            <form class="form-horizontal" action="index.html" method="get">
                <!-- 电邮 -->
                <div class="form-group  has-feedback">
                <!-- 不需要再套row -->
                    <div class="col-sm-3"><label for="email" class="control-label">Email</label></div>
                    <div class="col-sm-9">
                        <input id="email" type="email" class="form-control" placeholder="Enter email" required>
                        <span class=""></span>
                    </div>
                </div>
                <!-- 用户名 -->
                <div class="form-group has-feedback">
                        <div class="col-sm-3"><label for="username" class="control-label">UserName</label></div>
                        <div class="col-sm-9">
                            <input id="username" type="text" class="form-control" placeholder="Enter username" required>
                            <span class=""></span>
                        </div>
                    </div>
                <!-- 密码 -->
                <div class="form-group has-feedback">
                        <div class="col-sm-3">
                            <label for="password" class="control-label">Password</label>
                        </div>
                        <div class="col-sm-9">
                            <input id="password" type="password" class="form-control" placeholder="Enter password"required>
                            <span class=""></span>
                        </div>
                </div>
                 
 
                <!-- 功能按钮 -->
                <p class="text-right"><button type="submit" class="btn btn-primary">Submit</button>
                <button type="reset" class="btn btn-danger">Reset</button></p>
            </form>
             
        </div>
    </div>

jq:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
$(function(){
    var bChecked=false;
    $('.col-sm-9 :input:not(#email)').keyup(function(){
        // 除了电邮一栏,其它两个input都用同一套规则
        if(this.value==''){
            $(this).next().removeClass().addClass('glyphicon glyphicon-remove form-control-feedback');
            $(this).parent().parent().removeClass().addClass('form-group  has-feedback').addClass('has-error');
        }else if(this.value.length<6){
            $(this).next().removeClass().addClass('glyphicon glyphicon-warning-sign form-control-feedback');
            $(this).parent().parent().removeClass().addClass('form-group  has-feedback').addClass('has-warning');
        }else if(this.value.length>=6){
            $(this).next().removeClass().addClass('glyphicon glyphicon-ok form-control-feedback');
            $(this).parent().parent().removeClass().addClass('form-group  has-feedback').addClass('has-success');
        }
         
        })
    // 电邮规则单独设置
    $('#email').keyup(function(){
 
        if(this.value==""){
            $(this).next().removeClass().addClass('glyphicon glyphicon-remove form-control-feedback');
            $(this).parent().parent().removeClass().addClass('form-group  has-feedback').addClass('has-error');
        }else if(( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) )){
            $(this).next().removeClass().addClass('glyphicon glyphicon-warning-sign form-control-feedback');
            $(this).parent().parent().removeClass().addClass('form-group  has-feedback').addClass('has-warning');
        }else{
            $(this).next().removeClass().addClass('glyphicon glyphicon-ok form-control-feedback') ;
            $(this).parent().parent().removeClass().addClass('form-group  has-feedback').addClass('has-success');
        }
 
    })
 
    $(':submit').click(function(){
        //$('.col-sm-9:input').trigger('keyup');
        //模拟按键事件,在bt框架下用不了
        if($('.glyphicon-remove').is(':visible')||$('.glyphicon-warning-sign').is(':visible')){
            alert('你有东西填错了或忘了填写')
  
            return false;
        }
    });
  
    $(':reset').click(function(){
        $('.col-sm-9 :input').next().removeClass();
    })
 
})

 

 (包div真是包的泪流满面啊。虽然样式完全不用写了。)

6. 控件大小*-sm/lg

 比方说input——有三个尺寸。较小(sm),中等(什么都不写)和较大(lg)。
通过分析源码:所谓较大较小只是改变高度,字体大小,内外边距而已,实际上不修改宽度(宽度100%)。如果需要修改宽度,需要栅格系统支持。
 

7.help-block

比如说<span class="help-block">自己独占一行或多行的块级帮助文本。</span>这里面的span是块级的。文本以浅灰色显示。
一般用来显示帮助。
 

六. 按钮

之前已经接触到多次按钮。

1.六色,七种按钮

包括自动(灰),主体(蓝),成功(绿),信息(浅蓝),危险(红)和链接(蓝文本)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>
 
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
 
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
 
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>
 
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>
 
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
 
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

动态规则(hover,activive,focus,disable)基本只是颜色的变化而已。

 

2.button按钮尺寸*-lg/sm/xs

和input输入框不一样的是,button是行级的。不能通过栅格系统变换宽度

而需要.btn-block类让它转为块级再定义宽度。

 

3.多标签支持——btn不再只是button元素

诸如,span,input-type=button a等等都可以套用.btn,使得它看上去更像个按钮。

但是,作者建议,无论如何都只给button元素上.btn样式。比如说火狐浏览器,就不能给input式的button设置行高。

 

4.激活状态

看某些网站小广告时,经常看到某个按钮反复被按下的情况。bootstrap也可以模拟。一般这种状态是通过伪类:active来实现的。

在class调用的时候,为active

 

5.禁用状态

(1)属性:disabled

(2)class="disabled"

都是可以的。但是disabled属性对浏览器支持较差。

 

七. 图像

圆角(.img-round)-圆形(.img-sircle)-带方框的圆角矩形(.img-thumbnail)

1
2
3
<img src="img/logo.jpg" class="img-rounded">
        <img src="img/logo.jpg" class="img-circle">
        <img src="img/logo.jpg" class="img-thumbnail">

thumbnail显示效果细节

 

八. 辅助样式

1.文本颜色

文本也有基于6主题色的样式。class名在前面加上text-xxx就可以实现。

 

2.辅助图标

(1)关闭图标.close

本质上是一个按钮。

1
<button class="close">close</button>

悬停时的放大效果是这样的

所以里面应该放换html实体&times;(x号)或者图标字体

这样的图标在按下去时没有交互,可以选用aria-hidden="true"属性

(2)向下箭头.caret

1
<span class="caret"></span>

3. pull-right/left;清理浮动.clearfix

本质上是浮动,居中用center-block

.clearfix清理浮动——把需要清理的第一个元素:before设置为display:table,再对:after设置clear both。

4. 显示隐藏

(1)display为none的显示隐藏。

通过.show 和 .hidden可以强制显示或隐藏任一页面元素(包括在屏幕阅读器上)。这两个class使用了!important以避免冲突,原因和快速浮动类似。这两个class只能做用于块级元素,也可以作为mixin使用。

(2) .invisible 

 .invisible类本质是把一个元素的visiblity设置为hidden, 意味着此元素的display属性不会被改动——因此,此元素还是会占位。

(3)文本透明——.text-hide

背景依然显示。

 

九. 响应式样式

响应式网页由大到小应该是做减法的过程。次要的页面元素不断被减去。用户在小屏幕手机上看到的将是最为主要的信息。

目前响应式样式只支持块级元素,表格,行级等都不支持。

阅读上表发现

和栅格系统的对比,.visible/.hidden是向小兼容的。

 

【后记】css布局是bootstrap三大核心内容的基础。

 



来自为知笔记(Wiz)



标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:网站换肤

下一篇:兼容性调试-- 在谷歌浏览器中,td 设置colspan的失效的问题