1. 云栖社区>
  2. >
  3. 正文

Bootstarp学习教程(14) 其他相关组件(2)

作者:用户 来源:互联网 时间:2018-09-10 15:06:23

bootstrap学习教程

Bootstarp学习教程(14) 其他相关组件(2) - 摘要: 本文讲的是Bootstarp学习教程(14) 其他相关组件(2),  页面标题:简单的h1样式,可以适当地分出空间且分开页面中的章节。像其它组件一样,它可以使用h1的默认small元素 <div class="page-header"> &



页面标题:简单的h1样式,可以适当地分出空间且分开页面中的章节。像其它组件一样,它可以使用h1的默认small元素

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>


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

Bootstarp学习<a href=教程(14) 其他相关组件(2)">

Bootstarp学习教程(14) 其他相关组件(2)


警告框:为典型的用户动作提供少数可用且灵活的反馈消息。要用关闭功能,请使用jQuery警告框插件.

<div class="container">
		<div class="row">
			<ul class="nav nav-pills nav-justified ">
				<li class="active"><a href="#">主页</a></li>
				<li><a href="#">简介</a></li>
				<li><a href="#">信息</a></li>
			</ul>
		</div>
		<br/>
	<div class="alert alert-success">111111111111111111111111</div>
	<div class="alert alert-info">2222222222222222222222</div>
	<div class="alert alert-warning">33333333333333333</div>
	<div class="alert alert-danger">444444444444444444444</div>

	</div>

Bootstarp学习教程(14) 其他相关组件(2)

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

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


进度条:提供工作或动作的实时反馈,只用简单且灵活的进度条。

Bootstarp学习教程(14) 其他相关组件(2)

Bootstarp学习教程(14) 其他相关组件(2)

Bootstarp学习教程(14) 其他相关组件(2)

Bootstarp学习教程(14) 其他相关组件(2)

Bootstarp学习教程(14) 其他相关组件(2)

媒体对象:这是一个抽象的样式,用以构建不同类型的组件,这些组件都具有在文本内容的左或右对齐的图片(就像blog内容或Tweets等)。

Bootstarp学习教程(14) 其他相关组件(2)

Bootstarp学习教程(14) 其他相关组件(2)


以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索bootstrap 学习教程 ,以便于您获取更多的相关知识。

弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率

40+云计算产品,6个月免费体验

现在注册,免费体验40+云产品,及域名优惠!

云服务器9.9元/月,大学必备
Kubernetes上基于Istio体验云原生应用实践 资料下载