Bootstrap标签、徽章、大屏展播...
标签.label
1.新建一个web项目ch17,复制一下ch16里面的css文件、js文件等信息。
2.打开ch17里面的demo01.html,把上节课在<body>里面所写的东西删除掉,保留头文件。
3.有这四种标签样式实例(label-default、label-danger、label-info、label-warning)
<h1>我们学习<span class="label label-default">bootstrap</span></h1>
<h2>我们学习<span class="label label-danger">bootstrap</span></h2>
//注意:我们要特别强调的文本需要放在<span>标签里,再给它加个文本样式。
<h3>我们学习<span class="label label-info">bootstrap</span></h3>
<h4>我们学习<span class="label label-warning">bootstrap</span></h4>
4.运行效果
徽章 .badge
1.了解徽章
对于徽章,我们什么时候会用到呢?比如我们在做一些社交网络的时候,别人给你发了五条信息,在你的信息旁边就会显示一个5的样式。徽章经常用在我们的列表、菜单甚至有些按钮都会用到。
2.设置一个简单的徽章
<a href="#">消息<span class="badge">5</span></a>
<button type="button">大家好<span class="badge">89</span></button>
//在按钮上也可以使用徽章
<ul class="list-group">
//在这三个列表中使用徽章,显示消息数45
<li class="list-group-item"><a href="#">大家好</a><span class="badge">45</span></li>
<li class="list-group-item"><a href="#">大家好</a><span class="badge">45</span></li>
<li class="list-group-item"><a href="#">大家好</a><span class="badge">45</span></li>
</ul>
3.运行效果
大屏展播 .jumbotron
1.大屏展播实例
<div class="container">
//我们可以把它放在container里面,这样效果会美观一些
<div class="jumbotron">
//需要大屏显示信息的时候用
<h1>主要标题</h1>
<p>这里是想写的文本。。。。。</p>
<a href="#" class="btn btn-danger btn-lg">阅读更多</a>
//给<a>标签一个样式
</div>
</div>
2.运行效果
页面标题.page-header
1.页面标题实例
(同样将它放在container容器里面)
<div class="page-header">
<h1>大屏展播,很好用,,<small>小标题</small></h1>
</div>
2.运行效果