2.Bootstrap 组件
Bootstrap组件是Bootstrap框架的核心之一。可以利用Bootstrap组件构建出绚丽的页面
常用的组件:Icon图标(Glyphicon)、下拉菜单(Dropdown)、输入框(Input group)、导航(Nav)、导航条(Navbar)、缩略图(Thumbnail)、媒体对象(Media object)、列表组(Listgroup)、分页导航(Pagination)
小图标
图标(icon)是一个优秀网站不可缺少的一组元素,小图标的点缀可以使网站瞬间提升一个档次
Bootstrap给我们提供了250种小图标,这些小图标可以作用在内联元素上,给网页增加更多活力
小图标应用注意事项:
图标类不能和其他组件直接联合使用
不能在同一个元素上与其他类同存在
创建一个嵌套的span元素,并将图标应用到这个span上
只对内容为空的元素起作用
对引入的图标位置有规定
图标字体全部位于…/fonts/目录内,相对于预编译版CSS文件的应该是同级目录
下拉菜单
在网页交互的时候经常会需要上下文菜单或者隐藏/展开菜单
下拉菜单的 JavaScript 插件能让它具有交互性
<div class="dropdown open"> <!-- open控制菜单收缩展开-->
<button class="btn btn-default" data-toggle="dropdown" >
Dropdown <span class="caret"></span> <!-- 向下小三角-->
</button>
<ul class="dropdown-menu">
<li class="active"><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li class="divider"></li> <!-- 分界线-->
</ul>
</div>
分离式按钮下拉菜单
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" >
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
</ul>
</div>
输入框
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<br/>
<div class="input-group">
<input type="text" class="form-control" placeholder="请输入要搜索的内容" >
<span class="input-group-addon" >百度一下</span>
</div>
使用输入框须知:
请避免在select元素上使用该功能,因为Webkit浏览器不完全支持input-group组件的特性
不要直接将.input-group和.form-group混合使用,因为.input-group是一个独立的组件
不要将表单组件或栅格列类直接和输入框混合使用,而是将输入框组件嵌套到表单组件或栅格相关元素的内部
按钮作为addon
<div class="input-group">
<input type="text" class="form-control" placeholder="请输入要搜索的内容">
<span class="input-group-btn"> <!-- 容易出错点:写成input-group-addon-->
<button class="btn btn-primary" type="button">百度一下</button>
</span>
</div>
导航
导航(Nav)是网站最重要的组成部分,可以便于用户查找网站所提供的各项功能服
Bootstrap中导航组件都依赖一个.nav类,状态也是公共的
常见的导航类型
选项卡导航(nav-tabs)
<ul class="nav nav-tabs ">
<li class="active"><a href="#">主页</a></li>
<li><a href="#">微博</a></li>
<li><a href="#">图书</a></li>
<li><a href="#">关于我们</a></li>
</ul>
胶囊式选项卡导航(nav-pills)
<ul class="nav nav-pills ">
<li class="active"><a href="#">主页</a></li>
省略其他li项
</ul>
自适应导航(nav-justified)
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">主页</a></li>
省略其他li项
</ul>
二级导航
<ul class="nav nav-pills ">
<li class="active"><a href="#">首页</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">其他
<span class="caret"></span>
</a>
<ul class="dropdown-menu ">
<li><a href="#">收藏 </a></li>
</ul>
</li>
</ul>
导航条
导航和导航条是一样的吗?
导航条是网站中作为导航页头的响应式基础组件。他们在移动设备上可以折叠(并且可开可关),会随着浏览器宽度增加而逐渐变为水平展开模式
常见的导航条应用
基础条航条
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a href="#" class="navbar-brand">LOGO</a>
</div>
<ul class="nav navbar-nav ">
<li class="active"><a href="#">主页</a></li>
<li><a href="#">微博</a></li>
<li><a href="#">图书</a></li>
</ul>
</nav>
导航条中的表单
<nav class="navbar navbar-default" role="navigation" >
<!--此处省略了导航的内容-->
<form class="navbar-form navbar-right " role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-primary">搜索</button>
</form>
</nav>
导航条中的按钮、文本、链接
导航条中,还可以引入文本(navbar-text)、按钮(navbar-btn)和普通链接(navbar-link)
<div class="nav navbar-nav">
<button class="btn btn-default navbar-btn">button</button>
<button class="btn bg-primary navbar-text">button</button>
<button class="btn btn-success navbar-link">button</button>
</div>
顶部固定或底部固定
<!--顶部固定-->
<nav class="navbar navbar-default navbar-fixed-top">…</nav>
<!--底部固定-->
<nav class="navbar navbar-default navbar-fixed-bottom">…</nav>
响应式导航条
<nav class="nav navbar-inverse ">
<button class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse" >
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navbar-left">...</div>
</nav>
缩略图
<div class=" col-md-3 col-xs-6">
<div class="thumbnail">
<img src="image/img1.jpg" alt="">
<div class="caption">
<h3>左耳</h3>
<p>放肆青春掀全民追忆</p>
<p>
<a href="#" class="btn btn-primary" role="button">播放</a>
<a href="#" class="btn btn-default" role="button">下载</a>
</p>
</div>
媒体对象
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="image/pic-samll.jpg" alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">谁在制造下跌,散户何去何从</h4>
<p>大盘分时…</p>
<small>5分钟前/ 股市</small>
<small> 评论 | 分享 </small>
</div>
列表组
列表组是灵活又强大的组件
大部分列表都是使用ul/li来实现的
基础列表
<ul class="list-group">
<li class="list-group-item active ">同桌的你
<!--徽章图标-->
<span class="badge">12</span>
</li>
<!--list-group-item-success 带有样式的列表-->
<li class="list-group-item list-group-item-success">花样年华
<span class="badge">5</span>
</li>
</ul>
分页导航
网页内容很多的时候都会使用分页显示。比如新闻列表、订单记录等
一个用户体验良好的分页组件会使网页的level提高一个等级,Bootstrap为大家提供了两种分页组件
带多个页面的翻页组件
<ul class="pagination">
<li class="disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href=“#”>2</a></li>……
<li><a href="#">»</a></li>
</ul>
只有上一页和下一页的翻页组件
<ul class="pager">
<li><a href="#">上一页</a></li>
<li><a href="#">下一页</a></li>
</ul>