Bootstrap3.0学习第十五轮(大屏幕介绍、页面标题、缩略图、警示框、Well)
2013-11-11 11:18
633 查看
Bootstrap3.0学习第十五轮(大屏幕介绍、页面标题、缩略图、警示框、Well)
前言阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看/article/4711879.html
本文主要来讲解以下内容
1.大屏幕介绍
2.页面标题
3.缩略图
4.警示框
5.Well
6.总结
大屏幕介绍
轻量,灵活的可选组件,扩展整个视角,展示您站点上的关键内容。要让大屏幕介绍是屏幕宽度,请别把它包括在
.container。
<div class="jumbotron"> <h1>Hello, world!</h1> <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p> </div
![](http://images.cnitblog.com/blog/401119/201311/11043539-389cf1b43c72484db71963f9a64f41fc.png)
如果需要让大屏幕介绍(jumbotron)占据全部宽度并且去掉圆角,只需将其放到所有
.container外面,并在其内部添加一个
.container。
<div class="jumbotron"> <div class="container"> <h1>Hello, world!</h1> <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p> </div> </div>
这两种效果差不多,但是还有是有区别的。
页面标题
简单的
h1样式,可以适当地分出空间且分开页面中的章节。像其它组件一样,它可以使用
h1的默认
small元素(添加了一些额外的样式)。
<div class="page-header"> <h1>Example page header <small>Subtext for header</small></h1> </div>
![](http://images.cnitblog.com/blog/401119/201311/11044052-417008336d4648f59290bc3ea2c8eaea.png)
缩略图
用缩略图组件扩展Bootstrap的栅格系统,可以简单地显示栅格样式的图像,视频,文本,等等。
默认案例
Boostrap的缩略图的默认设计仅需最小的标记,就能展示带链接的图片。<div class="row"> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="http://placehold.it/600x460/78EB09/FFEB09/&text=Hello World" alt="..."> </a> </div> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="http://placehold.it/600x460/78EB09/FFEB09/&text=Hello World" alt="..."> </a> </div> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="http://placehold.it/600x460/78EB09/FFEB09/&text=Hello World" alt="..."> </a> </div> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="http://placehold.it/600x460/78EB09/FFEB09/&text=Hello World" alt="..."> </a> </div> </div>
![](http://images.cnitblog.com/blog/401119/201311/11045120-9e642fe252834aa992352d9d45740a3a.png)
当页面放缩到一定程度会变成
![](http://images.cnitblog.com/blog/401119/201311/11045211-005e13752ba54e789fa213e72b808a03.png)
定制内容
用一点点额外的标记,可以把任何种类的HTML内容像标题,段落或按钮加入缩略图。<div class="row"> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="http://placehold.it/300x200/78EB09/FFEB09/&text=Hello World" alt="..."> <div class="caption"> <h3>Thumbnail label</h3> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> </div> </div> </div> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="http://placehold.it/300x200/78EB09/FFEB09/&text=Hello World" alt="..."> <div class="caption"> <h3>Thumbnail label</h3> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> </div> </div> </div> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="http://placehold.it/300x200/78EB09/FFEB09/&text=Hello World" alt="..."> <div class="caption"> <h3>Thumbnail label</h3> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> </div> </div> </div> </div>
![](http://images.cnitblog.com/blog/401119/201311/11045548-4659e002e3344b5c9e53bdedc062ff9d.png)
警示框
为典型的用户动作提供少数可用且灵活的反馈消息。
案例
为了得到基本的警告信息,把任何文本和可选的关闭按钮放入.alert和四种有意义的类中(例如,
.alert-success)。
没有默认类
警告框没有默认类,只有基类和修饰类。默认的灰色警告框并没有多少意义。所以您要使用一种内容类。从成功,消息,警告或危险中任选其一。<div class="alert alert-success">Well done! You successfully read this important alert message.</div> <div class="alert alert-info">Well done! You successfully read this important alert message.</div> <div class="alert alert-warning">Well done! You successfully read this important alert message.</div> <div class="alert alert-danger">Well done! You successfully read this important alert message.</div>
![](http://images.cnitblog.com/blog/401119/201311/11050716-f9c7d6a57cdc4a7da3a40e940a986e8c.png)
可关闭的警告框
可以用一个可选的.alert-dismissable和关闭按钮。
<div class="alert alert-warning alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> <strong>Warning!</strong> Best check yo self, you're not looking too good. </div>
![](http://images.cnitblog.com/blog/401119/201311/11050930-cfb879e4e32244a6b2f176490a60193c.png)
确定在所有设备上的正确行为
一定要给data-dismiss="alert"属性用上
<button>。
警告框中的链接
用.alert-link工具类,可以快速提供在任何警告框中相符的颜色。
<div class="alert alert-success">Well done! <a href="#" class="alert-link">You successfully read this important alert message.</a></div> <div class="alert alert-info">Well done! <a href="#" class="alert-link">You successfully read this important alert message.</a></div> <div class="alert alert-warning">Well done! <a href="#" class="alert-link">You successfully read this important alert message.</a></div> <div class="alert alert-danger">Well done! <a href="#" class="alert-link">You successfully read this important alert message.</a></div>
![](http://images.cnitblog.com/blog/401119/201311/11051224-de7266a3dd1348dd9494d33fc893a220.png)
Well
默认效果
把Well用在元素上,能有嵌入(inset)的的简单效果。<div class="well">Look, I'm in a well!</div>
![](http://images.cnitblog.com/blog/401119/201311/11051536-e865081eaef243e69c4564defa193984.png)
可选类
用这两种可选修饰类,可以控制内补(padding)和圆角。<div class="well well-lg">...</div>
<div class="well well-sm">...</div>
总结
通过本文的学习,继续对Bootstrap Component其他组件的深入了解。
本文已更新至BootStrap3.0入门学习系列导航 /article/4711879.html
相关文章推荐
- Bootstrap3.0学习第十五轮(大屏幕介绍、页面标题、缩略图、警示框、Well)
- Bootstrap3.0学习14
- Bootstrap3.0学习第十四轮(分页、徽章)
- Bootstrap3.0学习第十三轮(导航条)
- Metronic – 超赞!基于 Bootstrap 的响应式后台管理模板
- (转)UI设计实战篇——利用Bootstrap框架制作查询页面的界面
- Bootstrap3.0学习第十二轮(导航、标签、面包屑导航)
- Bootstrap3.0学习第十一轮(输入框组)
- Bootstrap3 订制页面 加载已有配置 JS
- 基于Bootstrap里面的Button dropdown打造自定义select
- 利用Bootstrap框架制作查询页面的界面
- UI设计实战篇——利用Bootstrap框架制作查询页面的界面
- Bootstrap3.0学习第十轮(下拉菜单、按钮组、按钮式下拉菜单)
- 十九 Django 1.5.4 jquery ajax bootstrap
- PHP学习#bootstrap框架
- Bootstrap3.0学习第十轮(下拉菜单、按钮组、按钮式下拉菜单)
- Bootstrap3.0学习第九轮(CSS补充)
- Bootstrap3.0学习第九轮(CSS补充)
- Bootstrap.css 中请求googleapis.com/css?family 备忘录
- Bootstrap3.0学习第八轮