0
点赞
收藏
分享

微信扫一扫

bootstrap页面标题缩略图


关于作者:

  • 郑云飞, 程序员Java(web前端,web后端,oracle数据库or mysql数据库)

本文主要来讲解以下内容: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其他组件的深入了解。

举报

相关推荐

0 条评论