您的位置：首页 > Web前端 > BootStrap

2016年6月1日下午（传智Bootstrap笔记（Bootstrap标签、徽章、超大屏幕））

2016-06-01 15:52 459 查看

Bootstrap 标签

　　本章将讲解 Bootstrap 标签。标签可用于计数、提示或页面上其他的标记显示。使用.label 来显示标签，如下面的实例所示：

　　 <h1>Example Heading <span class="label label-default">Label</span></h1>
<h2>Example Heading <span class="label label-danger">Label</span></h2>
<h3>Example Heading <span class="label label-warning">Label</span></h3>
<h4>Example Heading <span class="label label-info">Label</span></h4>




　　可以使用修饰的 class label-default、label-primary、label-success、label-info、label-warning、label-danger 来改变标签的外观，如下面的实例所示：

<span class="label label-default">默认标签</span>
<span class="label label-primary">主要标签</span>
<span class="label label-success">成功标签</span>
<span class="label label-info">信息标签</span>
<span class="label label-warning">警告标签</span>
<span class="label label-danger">危险标签</span>




Bootstrap 徽章（Badges）

　　本章将讲解 Bootstrap 徽章（Badges）。徽章与标签相似，主要的区别在于徽章的边角更加圆滑。

　　徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要把 <span class="badge"> 添加到链接、Bootstrap 导航等这些元素上即可。下面的实例演示了这点：

激活导航状态

您可以在激活状态的胶囊式导航和列表导航中放置徽章。通过使用 <span class="badge"> 来激活链接，如下面的实例所示：

<body style="padding:50px; background-color:#ccc;height:1000px" >
<!--标签-->
<span class="label label-warning">警告标签</span>
<span class="label label-danger">危险标签</span>
<!--徽章-->
<a href="#">Mailbox <span class="badge">50</span></a>
<!--激活导航状态-->
<h4 class="page-header">胶囊式导航中的激活状态</h4>
<ul class="nav nav-pills">
<li class="active"><a href="#">首页 <span class="badge">42</span></a></li>
<li><a href="#">简介</a></li>
<li><a href="#">消息 <span class="badge">3</span></a></li>
</ul>
<br>
<h4 class="page-header">列表导航中的激活状态</h4>
<ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
<li class="active">
<a href="#">
<span class="badge pull-right">42</span>
首页
</a>
</li>
<li><a href="#">简介</a></li>
<li>
<a href="#">
<span class="badge pull-right">3</span>
消息
</a>
</li>
</ul>
</body>




Bootstrap 超大屏幕（Jumbotron）

本章将讲解 Bootstrap 支持的另一个特性，超大屏幕（Jumbotron）。顾名思义该组件可以增加标题的大小，并为登陆页面内容添加更多的外边距（margin）。使用超大屏幕（Jumbotron）的步骤如下：

创建一个带有.jumbotron. 的容器 <div>。

除了更大的 <h1>，字体粗细 font-weight 被减为 200px。

下面的实例演示了这点：

为了获得占用全部宽度且不带圆角的超大屏幕，请在所有的 .container class 外使用 .jumbotron class，如下面的实例所示：

<body style="padding:50px; background-color:#ccc;height:1000px" >
<div class="container">
<div class="jumbotron">
<h1>欢迎登陆页面！</h1>
<p>这是一个超大屏幕（Jumbotron）的实例。</p>
<p><a class="btn btn-primary btn-lg" role="button">
学习更多</a>
</p>
</div>
</div>

<div class="jumbotron">
<div class="container">
<h1>欢迎登陆页面！</h1>
<p>这是一个超大屏幕（Jumbotron）的实例。</p>
<p><a class="btn btn-primary btn-lg" role="button">
学习更多</a>
</p>
</div>
</div>
</body>


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航