Bootstrap 3之美05-排版、Button、Icon、Nav和NavBar、List、Table、Form

王朝学院·作者佚名  2016-05-24
窄屏简体版  字體: 小  |  中  |  大  |  超大  

Bootstrap 3之美05-排版、Button、Icon、Nav和NavBar、List、Table、Form本篇主要包括:

■ 排版■ Button■ Icon■ Nav和NavBar■ List■ Table■ Form

排版

● 斜体:<em>● 加粗体:<strong>● 突出段落:class="lead"● 字体颜色:class="text-success",class="text-muted",class="text-success",class="text-PRimary",class="text-warning"

<h1>新浪体育讯</h1>

<p class="text-success">这里是副标题</p>

<p class="lead">在2014赛季亚冠联赛的<em>一场1/4决赛首回合比赛中</em>,<strong>广州恒大客场0-1负于西悉尼流浪者</strong>。比赛中,出现了包括张琳芃、郜林领到红牌在内的多次争议判罚。裁判专家张大樵在接受天津体育频道采访时表示拉罗卡对张琳芃的犯规比较严重,应该领到一张黄牌,而张琳芃打了拉罗卡的脸则属于严重犯规,主裁判哈桑向他出示红牌没有问题。哈桑张冠李戴,对萨巴犯规的是刘健,却向郜林出示了红牌。另外,张大樵认为哈桑在上半场漏判了恒大队的一个点球。</p>

Button

在<button>或<a>标签下,可以这样设置按钮的样式:● 一般按钮:class="btn"● 按钮颜色:class="btn btn-primary"● 按钮尺寸:class="btn btn-primary btn-lg"

Icon

→打开网站:http://getbootstrap.com/→点击components菜单项,在打开的页面中将看到所有的Icon以及对应class名

要应用这些Icons,只需要给span加上合适的class名:

<button class="btn btn-primary btn-lg"><span class="glyphicon glyphicon-star"></span>菜单</button>

Nav和NavBar

<div id="menu" class="navbar navbar-default">

<div class="navbar-header">

<button class="btn btn-primary btn-lg"><span class="glyphicon glyphicon-star"></span>菜单</button>

<div id="logo">

<a href='.'>

<h3>新浪体育</h3>

</a>

</div>

</div>

<ul class="nav navbar-nav navbar-right">

<li class="nav active"><a href="#">主页</a></li>

<li class="nav"><a href="#">关于我们</a></li>

<li class="nav"><a href="#">联系我们</a></li>

</ul>

</div>

</header>

不仅如此,导航也是自适应的,当把页面宽度缩小到一定程度,导航呈竖直排列。

也可以设置:当页面宽度缩小到一定程度,让导航消失。在ul外层包裹上一个class="navbar-collapse collapes"的div。

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航