组件
一、Glyphicons 字体图标
务必在图标和文本之间添加一个空格
<span class="glyphicon glyphicon-search"></span> 搜索
二、下拉菜单
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
标题
<li class="dropdown-header">header</li>
分割线
<li class="divider">divider</li>
禁用
<li class="disabled"><a href="#">Something else here</a></li>
三、按钮组
基本 .btn-group > .btn
<div class="btn-group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
多个按钮组组成工具栏,之间隔以小空格 .btn-toolbar > .btn-group > .btn
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">...</div>
<div class="btn-group">...</div>
<div class="btn-group">...</div>
</div>
尺寸
<div class="btn-group btn-group-lg">...</div>
<div class="btn-group">...</div>
<div class="btn-group btn-group-sm">...</div>
<div class="btn-group btn-group-xs">...</div>
嵌套
想要把下拉菜单混合到一系列按钮中,只须把 .btn-group 放入另一个 .btn-group 中。
<div class="btn-group">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>
垂直排列
<div class="btn-group-vertical">
...
</div>
两端对齐,占满父元素宽度
注意:必须将每个按钮包裹进一个按钮组中
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
四、按钮式下拉菜单
单按钮下拉菜单 文字与下拉箭头在一起
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
分裂式按钮下拉菜单 文字与下拉箭头间隔以一条竖线
<!-- Split button -->
<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>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
向上弹出式菜单
给父元素添加 .dropup 类
<div class="btn-group dropup">
...
</div>
五、输入框组
在文本输入框 <input> 两边加上文字或按钮
注意:只支持文本输入框 <input>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
作为额外元素的多选框和单选框
<div class="input-group">
<span class="input-group-addon"> //此时是.input-group-addon
<input type="checkbox"> //将文字换成checkbox或radio
</span>
<input type="text" class="form-control">
</div>
作为额外元素的按钮
<div class="input-group">
<span class="input-group-btn"> //注意此时是.input-group-btn
<button class="btn btn-default" type="button">Go!</button> //此处换成button
</span>
<input type="text" class="form-control">
</div>
作为额外元素的(分裂式)按钮下拉菜单
<div class="input-group">
<div class="input-group-btn"> //发现按钮统一为.input-group-btn,可换div包裹
<!-- Button and dropdown menu -->
</div>
<input type="text" class="form-control">
</div>
六、导航
标签页
注意 .nav-tabs 类依赖 .nav 基类。
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
胶囊式标签页
垂直方向堆叠排列,添加 .nav-stacked 类
<ul class="nav nav-pills nav-stacked" role="tablist">
...
</ul>
两端对齐的标签页,占满父元素宽度
<ul class="nav nav-pills nav-justified" role="tablist">
...
</ul>
禁用的链接
给禁用的项添加.disabled
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
带下拉菜单的(胶囊式)标签页
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
...
</ul>
</li>
七、导航条
<nav class="navbar navbar-default" role="navigation"> //为了增强可访问性,务必给每个导航条加上 role="navigation" 属性。
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header"> //button为移动端(窄屏)右边出现的按钮
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span> //按钮上横杠数(3条)
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a> //可将a标签内容替换为<img alt="Brand" src="...">,以图片代之
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav"> //导航栏
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown"> //带下拉菜单的导航项
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu"> //下拉项
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search"> //检索表单项
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right"> //靠右的导航栏
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
表单
为输入框添加 label 标签,否则屏幕阅读器将会遇到问题,可添加类sr-only隐藏label内容
按钮
对于不包含在 <form> 中的 <button> 元素,加上 .navbar-btn 后,可以让它在导航条里垂直居中。
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
非导航的链接
<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
//.navbar-text保证有正确的行距和颜色 .navbar-right靠右排列 .navbar-link让链接有正确的默认颜色和反色设置
固定在顶部 .navbar-fixed-top
注意:此时导航条会遮住页面上部分内容(导航条默认高度为50px),需要设置
body { padding-top: 70px; }
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
...
</nav>
固定在底部 .navbar-fixed-bottom
注意:此时导航条会遮住页面上部分内容(导航条默认高度为50px),需要设置
body { padding-bottom: 70px; }
静止在顶部
<nav class="navbar navbar-default navbar-static-top" role="navigation"> //推荐这种方法,不用设置内边距,注意此时.navbar-collapse左右padding为0,默认的为15px,即如果有靠右的导航栏项目,则顶边
<div class="container">
...
</div>
</nav>
反色的导航条,即黑色,默认是白色 .navbar-inverse
<nav class="navbar navbar-inverse" role="navigation">
...
</nav>
八、路径导航 .breadcrumb
各路径间的分隔符已经自动通过 CSS 的 :before 和 content 属性添加了。
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
九、分页
<nav>
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</nav>
可以将 active 或 disabled 状态应用于 <span> 标签,即替换 <a> 标签,这样就可以让其保持需要的样式并移除点击功能
<nav>
<ul class="pagination">
<li class="disabled"><span>«</span></li>
<li class="active"><span>1 <span class="sr-only">(current)</span></span></li>
...
</ul>
</nav>
尺寸
<nav><ul class="pagination pagination-lg">...</ul></nav> //large
<nav><ul class="pagination">...</ul></nav> //default
<nav><ul class="pagination pagination-sm">...</ul></nav> //small
翻页,以两个按钮来实现上一页&下一页功能
<nav>
<ul class="pager"> //默认两个按钮是居中对齐
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>
<nav>
<ul class="pager"> //两端对齐
<li class="previous"><a href="#">← Older</a></li> //左浮动
<li class="next"><a href="#">Newer →</a></li> //右浮动
</ul>
</nav>
十、标签
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
十一、徽章
可以很醒目的展示新的或未读的信息条目。
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
十二、巨幕
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
十三、页头 .page-header
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
十四、缩略图
结合栅格系统控制宽度,展示带链接的图片
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail"> //.thumbnail
<img data-src="holder.js/100%x180" alt="...">
</a>
</div>
...
</div>
可以把任何类型的 HTML 内容,例如标题、段落或按钮,加入缩略图组件内。
<div class="row">
<div class="col-xs-6 col-md-3">
<div class="thumbnail">
<a href="#">
<img src="bootstrap/img/glyphicons-halflings.png" alt="...">
</a>
<div class="caption"> //自定义部分.caption
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
</div>
十五、警告框
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>
可关闭的警告框
<div class="alert alert-warning alert-dismissible" role="alert"> //需添加.alert-dismissible
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> //参考辅助类中关闭按钮,注意button添加data-dismiss="alert"以保证所有设备上的行为正确
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
警告框中的链接 .alert-link
<div class="alert alert-success" role="alert">
<a href="#" class="alert-link">...</a>
</div>
十六、进度条
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
进度数值较低时:
建议为进度标签添加一个 min-width: 20px; 属性。
多种颜色
默认深蓝色,.progress-bar-success 绿 .progress-bar-info 浅蓝 .progress-bar-warning 黄 .progress-bar-danger 红
条纹效果
.progress-bar-striped
动画效果
.progress-bar-striped & .active
堆叠效果
多个.progress-bar置于同一个.progress中
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% Complete (success)</span>
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
<span class="sr-only">20% Complete (warning)</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
<span class="sr-only">10% Complete (danger)</span>
</div>
</div>
十七、媒体对象
允许在一个内容块的左边或右边展示一个多媒体内容(图像、视频、音频)(就像博客评论或 Twitter 消息等)。
<div class="media"> //媒体对象
<a class="media-left media-middle" href="#"> //左边的多媒体 位置.media-middle .media-bottom
<img src="..." alt="...">
</a>
<div class="media-body"> //右边的内容
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>
媒体对象列表
<ul class="media-list">
<li class="media">
<a class="media-left" href="#">
<img src="..." alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</li>
</ul>
十八、列表组
<ul class="list-group">
<li class="list-group-item"><span class="badge">14</span>Cras justo odio</li> //徽章排版时自动置于右边
<li class="list-group-item"><span class="badge">14</span>Dapibus ac facilisis in</li>
<li class="list-group-item"><span class="badge">14</span>Morbi leo risus</li>
<li class="list-group-item"><span class="badge">14</span>Porta ac consectetur ac</li>
<li class="list-group-item"><span class="badge">14</span>Vestibulum at eros</li>
</ul>
链接
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
情境类
.list-group-item-success .list-group-item-info .list-group-item-warning .list-group-item-danger
定制内容
列表组中的每个元素都可以是任何 HTML 内容
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">...</p>
</a>
</div>
十九、面板
<div class="panel panel-info"> //.panel-info .etc可带有情景效果
<div class="panel-heading">Panel heading without title</div> //.panel-heading 标题
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div> //.panel-footer 脚注,不会从情景中继承颜色效果
</div>
二十、Well
把 Well 用在元素上,能有嵌入(inset)的的简单效果。
<div class="well">...</div>
<div class="well well-lg">...</div>
<div class="well well-sm">...</div>
Bootstrap学习笔记之组件(二)
最新推荐文章于 2022-03-02 22:28:53 发布