十. 标签(.label类,label-xxx)

高亮一些标题部分。
1
2
3
4
5
6
<h1>HELLO<span class="label label-default">default</span></h1>
<h1>HELLO<span class="label label-primary">primary</span></h1>
<h1>HELLO<span class="label label-success">success</span></h1>
<h1>HELLO<span class="label label-info">info</span></h1>
<h1>HELLO<span class="label label-warning">warning</span></h1>
<h1>HELLO<span class="label label-danger">danger</span></h1>

标签本身不能控制大小,需要用其它样式进行控制。如果标签本身是连接元素(a,btn等),hover和focus时颜色比原来加深10%。

十一. 徽章(.badge)

徽章通常用于消息数的显示,无内容时自动消失。在不同风格组件下的badge类,具有反色的高亮显示效果。尽管如此,在个性化bootstrap的过程中,还是有必要自己定制一些类来显示badge的颜色。比如.badge-danger等等。

1
2
<p>Email me <span class="badge">33</span></p>
<button class="btn btn-danger">Email me <span class="badge">33</span></button>

 

十二.大屏幕展播(jumbotron,巨幕)

大屏幕网页可以说是当下的主流。banner也可以是使用.jumbotron来包装。
1
2
3
4
5
<div class="jumbotron">
            <h1>Hello World!</h1>
            <p>This is a simple jumbotron-style component.</p>
            <button type="button" class="btn btn-info">Learn more</button>
</div>

jumbotron内部的h元素和p元素样式也会稍微发生变化。你可以对巨幕的颜色等样式进行重写,但她是本质是一个容器。

 

十三. 页面标题(.page-header)

一个简洁的的页面header。
1
2
3
<div class="page-header">
    <h1>Understanding Bootstrap</h1>
</div>

 
 

十四. 缩略图(.thumbnail)

缩略图通常结合CSS-12栅格系统使用。可以理解为在栅格框内实现自适应变化的图片,顺便加上了圆角边框。使用时需要对图片的父级使用.thumbnail样式。

1
2
3
4
5
6
7
<div class="row">
    <div class="col-xs-4">
        <div class="thumbnail">
            <img src="img/1.jpg">
        </div>
    </div>
</div>

 thumbnail还可以额外地给略缩图添加描述信息。比如:
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="row">
    <div class="col-xs-4">
        <div class="thumbnail">
            <img src="img/1.jpg">
            <h3>Understanding Bootstrap</h3>
            <p>Describe</p>
            <p>
            <button class="btn btn-info"><span class="glyphicon glyphicon-shopping-cart"></span> Add</button>
            <button class="btn btn-danger"><span class="glyphicon glyphicon-qrcode"></span> Purchase</button>
            </p>
        </div>
    </div>
</div>
总结略缩图的结构:
 

十五.警告框(.alert)

js中最好用的警告框是alert,同时其用户体验之差,也是众所周知的。一个比较好的思路是通过自定义的组件来显示,根据情况允许用户关闭或者淡出。

一个警告框应有的结构是:

 

bootstrap定义在.alert类中定义了5种警告框的样式:

  如果alert框有一个a链接——可以给link加上alert-link类,那么内部的a标记颜色就会跟随主题色而变化:

【例4.4】

在右下角实现一个模拟弹窗,即使用户不点击也可以退出消失。
思路:在布局方面需要用到媒体对象。简单点说,就是一个左边头像,右边文字的布局。js主要考虑的是悬停动画控制stop()方法,定时器等。
html
1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="alert">
    <div class="alert alert-info alert-dismissable">
        <button type="button" data-dismiss="alert" class="close">&times;</button>
        <p>你的好友<strong>djtao</strong>已上线</p>
        <div class="media">
            <a class="pull-left" href="#">
                <img class="madia-project" src="img/logo.jpg">
            </a>
            <h5>DJTAO</h5>
            <p><strong>个性签名:</strong>来呀,喝最苦的酒,日最野的狗</p>
            </div>
    </div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
#alert{
    positionfixed;
    right4px;bottom:0;
    width300px;height150px;
    displaynone;
}
.alert{
    height150px
}
img{
    width70px;height70px;
}

jq

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(function(){
    var time1=setTimeout(function(){
        $('#alert').slideDown(3000);
    },1000);
    var time2=setTimeout(function(){
        $('#alert').slideUp(3000);
        $('#alert').hover(function(){
            $(this).stop();
        },function(){
            $(this).slideUp(3000);
        })
    },7000)
 
})

效果:

 改进:悬停时停在了一半,应该让它悬停时又往上走。可以在第8行代码附加.slideDown(300),效果更完美。

十六 .进度条(.progress .progress-bar)

.progress用于显示进度条容器的样式,.progress-bar限制进度条的进度。

1. 堆叠效果

 

注意:宽度百分百设置必须合理,否则不显示。

如果像显示数字,可以在两个div的中间写:80%。

2. 颜色样式

包括信息蓝,成功绿,警告黄和危险红(progress-bar-success/info/danger/success)

3. 条纹和动画

progress-bar-striped

1
2
3
<div class="progress">
    <div class="progress-bar progress-bar-striped" style="width:60%;"></div>
</div>

 同样的效果:可以给父级容器div设置<div class="progress progress-striped">

以上只是静态的效果,需要对progress-bar设置.active样式,那进度条就有动画的效果了。

动画需要较高版本浏览器支持。

【例4.5】

有一个空的进度条,一个按钮,点击按钮,由0增长到100%。

思路:用定时器来做。

html

1
2
3
4
<div class="progress progress-striped">
    <div class="progress-bar active"></div>
</div>
<button class="btn btn-info">Load Now!</button>

jq

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(function(){
    $('button').click(function(){
        var num=0;
        var times=setInterval(function(){
            num+=1; 
            $('.active').get(0).style.width=num+'%'
            $('.active').html(num+'%');
            if(num==100){
                clearInterval(times)
            }
             
        },60);
    })
})

 从设计的角度来说,还可以判断不同宽度下设置不一样的颜色。

十七. 媒体对象(.media)

媒体对象具有在文本内左对齐和右对齐的图片。类似图文混排,默认样式是在内容区左侧或右侧浮动一个媒体对象(图、视频、音频)

1.默认样式

常用的有四个类,.media包在最外边,媒体容器决定左浮动还是右浮动,与图片容器平级的还有一个mediabody,下面可以套media-heading,还可以继续套媒体对象。

2. 媒体列表:

如果有多个媒体内容,可以采用ul-li体系,所有li class="media"上面套一个ul class="media-list"
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
<ul class="media-list">
    <li class="media">
        <div class="pull-left">
            <div class="thumbnail">
                <img src="img/logo.jpg" class="media-object">
            </div>
        </div>
         
        <div class="media-body">
            <h4 class="media-heading">Media-heading</h4>
            <p>描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息</p>
            <div class="media">
                <div class="pull-left">
                    <div class="thumbnail">
                        <img src="img/logo.jpg" class="media-object">
                    </div>
                </div>
                <div class="media-body">
                    <h5 class="media-heading">我是二级描述标题</h5>
                    <p>二级描述信息</p>
                </div>
            </div>
        </div>
         
    </li>
     
    <li class="media">
        <div class="pull-left">
            <div class="thumbnail">
                <img src="img/logo.jpg" class="media-object">
            </div>
        </div>
         
        <div class="media-body">
            <h4 class="media-heading">Media-heading</h4>
            <p>描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息</p>
        </div>
         
    </li>
     
    <li class="media">
        <div class="pull-right">
            <div class="thumbnail">
                <img src="img/logo.jpg" class="media-object">
            </div>
        </div>
         
        <div class="media-body">
            <h4 class="media-heading">右浮动Media-heading</h4>
            <p>描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息</p>
        </div>
         
    </li>
</ul>

 

十八.列表组(.list-group)

列表组又是一个重点组件,但是基本列表组涉及的类只有两个,对ul加list-group,对li加list-grop-item。

 
最简单的列表组结构:
1
2
3
4
5
6
<ul class="list-group">
    <li class="list-group-item">周华健</li>
    <li class="list-group-item">李宗盛</li>
    <li class="list-group-item">罗大佑</li>
    <li class="list-group-item">张震岳</li>
</ul>

 

1. 应用徽章标记和导航箭头

列表组很像联系人列表,根据此可以应用徽章。徽章是自动浮动到右边的。
1
2
3
4
<li class="list-group-item">
    张震岳
    <span class="badge">1</span>
</li>
 
联系人列表中右方可以应用字体图标,不过在3.x版中已经删除了字体图标右浮动。一定要用的话,可以添加样式——
1
2
3
4
5
6
7
8
9
10
11
.list-group-item>.glyphicon-chevron-right{
    floatright;
    margin-right5px;
}
.list-group-item>.glyphicon-chevron-down{
    floatright;
    margin-right5px;
}
.list-group-item>.glyphicon+.badge{
    margin-right5px;
}

或者对图标字体添加pull-right的class。

2.可连接的列表组

把ul-li体系的列表组换成div-a体系

3.自定义列表组

(1)list-group-item-xxx可以指定颜色。
list-group-item-success/danger/warning/info
 
(2)list-group-item-heading/text
用于li单位内的内容,相应标题和内容会有主次之分:

 

十九.面板(.panel)

所谓面板就是一个圆角矩形。通常用于实现网站板块。一个相对基础的面板包括:

 三个部分想加就加。五种颜色样式分别为:

 
 嵌套表格的应用:
 

 
 为什么不把表格放进panel-body呢?因为会有15px的内间距。如果喜欢内距,可以放到panel-body中。
当然,再强调一次,脚注和信息列表都不一定是必须的。总之怎么好看怎么放。
 
panel结合列表组——百叶窗效果的实现:

【例4.6】

制作一个面板结合列表组的百叶窗效果。(类似案例在《锋利的jquery》已经出现过一次了)
前面已经提到,在list-group中应用靠右的箭头图标需要一点自定义样式的支持。
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
<div class="panel panel-info">
    <div class="panel-heading">
        乐团专辑
    </div>
    <ul class="list-group">
        <li class="list-group-item level1">
            <span class="glyphicon glyphicon-chevron-right"></span>
            周华健
            <ul class="list-group level2">
                <li class="list-group-item">最近比较烦</li>
                <li class="list-group-item">雨人</li>
                <li class="list-group-item">有没有那么一首歌</li>
            </ul>
        </li>
        <li class="list-group-item">
            <span class="glyphicon glyphicon-chevron-right"></span>
            李宗盛
            <ul class="list-group level2">
                <li class="list-group-item">明明白白我的心</li>
                <li class="list-group-item">凡人歌</li>
                <li class="list-group-item">我终于失去了你</li>
            </ul>
        </li>
        <li class="list-group-item">
            <span class="glyphicon glyphicon-chevron-right"></span>
            罗大佑
            <ul class="list-group level2">
                <li class="list-group-item">恋曲1980</li>
                <li class="list-group-item">恋曲1990</li>
                <li class="list-group-item">恋曲2000</li>
            </ul>
        </li>
        <li class="list-group-item">
            <span class="glyphicon glyphicon-chevron-right"></span>
            张震岳
            <ul class="list-group level2">
                <li class="list-group-item">一起哈啤</li>
                <li class="list-group-item">公路</li>
                <li class="list-group-item">爱的初体验</li>
            </ul>
        </li>
    </ul>
</div>
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.list-group-item>.glyphicon-chevron-right{
    floatright;
    margin-right5px;
}
.list-group-item>.glyphicon-chevron-down{
    floatright;
    margin-right5px;
}
.list-group-item>.glyphicon+.badge{
    margin-right5px;
}
.level2{
    displaynone;
}

jq

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(function(){
    var bCheck=false;
    $('.list-group-item').css('cursor','pointer')
        .click(function(){
            $(this).children().eq(1).slideToggle();
            bCheck=!bCheck;
            if(bCheck){
                $(this).children().eq(0).removeClass().addClass('glyphicon glyphicon-chevron-down')
            }else{
                $(this).children().eq(0).removeClass().addClass('glyphicon glyphicon-chevron-right')
            }
        })
    $('.level2>li').hover(function(){
        $(this).addClass('active');
    },function(){
        $(this).removeClass('active');
    })
})

效果丑了点,但还是符合结构原则的:

二十. 洼地 (.well)

洼地效果和大屏幕jumbotron展播效果类似,不同点在于洼地有边框。同时自适应文本高度

  1. <divclass="well">
  2. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  3. <blockquote>如果你不明白FQ对一个人成长的重要性,请去看电影《肖申克的救赎》</blockquote>
  4. </div>

 洼地的尺寸主要由内边距和圆角衡量。为此提供了well-sm和well-lg两种额外的尺寸样式。
 

 
 

二十一. 主题

主题文件在bootstrap-theme.css中,是对原有bootstrap样式的增强。本身不提供什么功能。

【后记】

本章看到后半部分的时候,突然觉得思维导图是理顺结构的好办法。下一章为bootstrap核心之三:js插件。内容总量大约和第4章的相仿。根据网站分类,可能会发到jq区。代码敲完之后,也就相当于把api文档看完了。

因为第四章混乱的文字和排版以及笔记丢失,不得不花费了大量时间排版,接下来的笔记应该会换用markdown来写,不得不说markdown的主题代码色真是丑的令人发指。那配色让人想到腐败的茄子。尽管如此,md还是当下记笔记的最佳选择。

以后不会再用为知笔记了。

《深入理解bootstrap》读书笔记:第4章 CSS组件(下)的更多相关文章

  1. 《Linux内核设计与实现》第八周读书笔记——第四章 进程调度

    <Linux内核设计与实现>第八周读书笔记——第四章 进程调度 第4章 进程调度35 调度程序负责决定将哪个进程投入运行,何时运行以及运行多长时间,进程调度程序可看做在可运行态进程之间分配 ...

  2. 《Linux内核分析》读书笔记(四章)

    <Linux内核分析>读书笔记(四章) 标签(空格分隔): 20135328陈都 第四章 进程调度 调度程序负责决定将哪个进程投入运行,何时运行以及运行多长时间,进程调度程序可看做在可运行 ...

  3. 《Linux内核设计与实现》第五周读书笔记——第十一章

    <Linux内核设计与实现>第五周读书笔记——第十一章 20135301张忻 估算学习时间:共2.5小时 读书:2.0 代码:0 作业:0 博客:0.5 实际学习时间:共3.0小时 读书: ...

  4. 《Linux内核设计与实现》读书笔记——第五章

    <Linux内核设计与实现>读书笔记--第五章 标签(空格分隔): 20135321余佳源 第五章 系统调用 操作系统中,内核提供了用户进程与内核进行交互的一组接口.这些接口让应用程序受限 ...

  5. SQL Server2012 T-SQL基础教程--读书笔记(1-4章)

    SQL Server2012 T-SQL基础教程--读书笔记(1-4章) SqlServer T-SQL 示例数据库:点我 Chapter 01 T-SQL 查询和编程背景 1.3 创建表和定义数据的 ...

  6. 《Linux内核设计与分析》第六周读书笔记——第三章

    <Linux内核设计与实现>第六周读书笔记——第三章 20135301张忻估算学习时间:共2.5小时读书:2.0代码:0作业:0博客:0.5实际学习时间:共3.0小时读书:2.0代码:0作 ...

  7. 《Linux内核设计与实现》 第八周读书笔记 第四章 进程调度

    20135307 张嘉琪 第八周读书笔记 第四章 进程调度 调度程序负责决定将哪个进程投入运行,何时运行以及运行多长时间,进程调度程序可看做在可运行态进程之间分配有限的处理器时间资源的内核子系统.只有 ...

  8. 《LINUX内核设计与实现》第三周读书笔记——第一二章

    <Linux内核设计与实现>读书笔记--第一二章 20135301张忻 估算学习时间:共2小时 读书:1.5 代码:0 作业:0 博客:0.5 实际学习时间:共2.5小时 读书:2.0 代 ...

  9. 《Linux内核设计与实现》第四周读书笔记——第五章

    <Linux内核设计与实现>第四周读书笔记--第五章 20135301张忻 估算学习时间:共1.5小时 读书:1.0 代码:0 作业:0 博客:0.5 实际学习时间:共2.0小时 读书:1 ...

  10. # linux读书笔记(3章)

    linux读书笔记(3章) 标签(空格分隔): 20135328陈都 第三章 进程管理 3.1 进程 进程就是处于执行期的程序(目标码存放在某种存储介质上).但进程并不仅仅局限于一段可执行程序代码( ...

随机推荐

  1. 理解MySQL数据库覆盖索引

    话说有这么一个表: CREATE TABLE `user_group` ( `id` int(11) NOT NULL auto_increment, `uid` int(11) NOT NULL, ...

  2. 【日常笔记】mybatis 处理 in 语句的使用

    在Mybatis的xml配置中使用集合,主要是用到了foreach动态语句. foreach的参数:foreach元素的属性主要有 item,index,collection,open,separat ...

  3. 关于mysql数据库行级锁的使用(一)

    项目上一个业务需要对某条数据库记录加锁,使用的是mysql数据库 因此做了一个关于mysql数据库行级锁的例子做测试 package com.robert.RedisTest; import java ...

  4. sql insert into select语句写法-将查询结果直接插入到表中

    insert into month_gpcj_info(idStr,zszrmygpsl,xyzrmygpsl,mycje,mycjl,month_date,dataCompiledDate) sel ...

  5. awk中可以使用system来执行复杂的shell命令

    在awk中可以直接执行shell命令. zoer@ubuntu:~$ touch a zoer@ubuntu:~$ touch b zoer@ubuntu:~$ cat a.txt a b zoer@ ...

  6. 【HDU 5858】Hard problem

    边长是L的正方形,然后两个半径为L的圆弧和中间半径为L的圆相交.求阴影部分面积. 以中间圆心为原点,对角线为xy轴建立直角坐标系. 然后可以联立方程解出交点. 交点是$(\frac{\sqrt{7} ...

  7. php验证登录

    <html><head> <title></title> <meta charset="utf-8"></head ...

  8. IE/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight

    IEdocument.documentElement.scrollHeight  浏览器所有内容高度 ,document.body.scrollHeight  浏览器所有内容高度document.do ...

  9. 【matlab】设定函数默认参数

    C++/java/python系列的语言,函数可以有默认值,通常类似如下的形式: funtion_name (param1, param2=default_value, ...) 到了matlab下发 ...

  10. asp.net使用signalr实现集群集群下面的消息推送

    1.选用Signalr的原因 Signalr内部给我们做了很多封装.当服务器或者浏览器不支持websoket协议的时候就使用长连接方式  不支持长连接再选用轮询的方式获取消息 websoket:与服务 ...