bootstrap页面标题缩略图

关于作者：

• 郑云飞, 程序员Java（web前端，web后端，oracle数据库or mysql数据库）
• 艺名：天放
• weibo：@tianFang
• blog: zhengyunfei.iteye.com
• email: [email protected]

本文主要来讲解以下内容：1.大屏幕介绍；2.页面标题；3.缩略图；4.警示框；5.Well；6.总结。

大屏幕介绍

轻量，灵活的可选组件，扩展整个视角，展示您站点上的关键内容。要让大屏幕介绍是屏幕宽度，请别把它包括在.container。

如果需要让大屏幕介绍（jumbotron）占据全部宽度并且去掉圆角，只需将其放到所有.container外面，并在其内部添加一个.container。

这两种效果差不多，但是还有是有区别的。

页面标题

简单的h1样式，可以适当地分出空间且分开页面中的章节。像其它组件一样，它可以使用h1的默认small元素（添加了一些额外的样式）。

 

缩略图

用缩略图组件扩展Bootstrap的栅格系统，可以简单地显示栅格样式的图像，视频，文本，等等。

默认案例

Boostrap的缩略图的默认设计仅需最小的标记，就能展示带链接的图片。

当页面放缩到一定程度会变成

定制内容

用一点点额外的标记，可以把任何种类的HTML内容像标题，段落或按钮加入缩略图。

 

警示框

为典型的用户动作提供少数可用且灵活的反馈消息。

案例

为了得到基本的警告信息，把任何文本和可选的关闭按钮放入.alert和四种有意义的类中（例如，.alert-success）。

没有默认类

警告框没有默认类，只有基类和修饰类。默认的灰色警告框并没有多少意义。所以您要使用一种内容类。从成功，消息，警告或危险中任选其一。

可关闭的警告框

可以用一个可选的.alert-dismissable和关闭按钮。

确定在所有设备上的正确行为

一定要给data-dismiss="alert"属性用上。

警告框中的链接

用.alert-link工具类，可以快速提供在任何警告框中相符的颜色。

Well 

默认效果

把Well用在元素上，能有嵌入(inset)的的简单效果。

可选类

用这两种可选修饰类，可以控制内补（padding）和圆角。

总结

通过本文的学习，继续对Bootstrap Component其他组件的深入了解。