5, 布局组件
字体图标
依赖文件
bootstrap/fonts/glyphicons-halfings-regular.eot
bootstrap/fonts/glyphicons-halfings-regular.svg
bootstrap/fonts/glyphicons-halfings-regular.ttf
bootstrap/fonts/glyphicons-halfings-regular.woff
字体图标列表
用法
<span class="glyphicon glyphicon-search"></span>
实例-带字体图标的导航栏
css js
<!--[if lt IE 9]>
<script src="https://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
div.navbar.navbar-fixed-top.navbar-inverse[role=navigation]
div.container
div.navbar-header
button.navbar-toggle[type=button][data-toggle=collapse][data-target=.navbar-collapse]
span.sr-only{Toggle navigation}
span.icon-bar
span.icon-bar
span-icon-bar
a.navbar-brand[href=#]{Project name}
div.collapse.navbar-collapse
ul.nav.navbar-nav
li.active>a[href=#]
span.glyphicon.glyphicon-home^{Home}
li>a[href=#shop]
span.glyphicon.glyphicon-shopping-cart^{Shop}
li>a[href=#support]
span.glyphicon.glyphicon-hradphones^{Support}
---
#### 下拉菜单
```
div.dropdown
button#dropdownMenu1.btn.dropdown-toggle[data-toggle=dropdown]
{主题}
span.caret
ul.dropdown-menu
li.dropdon-header{下拉菜单标题}
li
a[tabindex=-1][href=#]
{Java}
li
a[tabindex=-1][href=#]
{数据挖掘}
li
a[tbaindex=-1][href=#]
{数据通信/网络}
li.divider
li.diveider{下拉菜单标题}
li
a[tabindex=-1][href=#]分离的链接
-------
可添加标题：li>dropdown-header
```
div.dropdown
button#dropdownMenu1.btn.dropdown-toggle[data-toggle=dropdown]
...
...
ul.dropdown-menu.pull-right
li>a
li>a...
---------------
向右对齐下拉菜单：ul.pull-right
按钮组
btn-toolbar > btn-group > btn btn-default
#通过按钮组调整组内按钮大小
.btn-group.btn-group-lg
嵌套
div.btn-group
button.btn.btn-default{按钮1}
button.btn.btn-default{按钮2}
div.btn-group
button.btn.btn-primary.dropdown-toggle[data-toggle=dropdown]
{下拉}
span.caret
ul.dropdown-menu
li>a[tabindex=-1][href=#]{下拉链接1}
li>a[tabindex=-1][href=#]{下拉链接2}
------------
#垂直的按钮组
div.btn-group-vertical
div.btn-group-vertical
按钮插件-实现不同效果
- 加载状态
data-loaing-text="Loading..."
css js
------------------
button.btn.btn-primary[data-loading-text=Loading...][type=button]{加载状态}
script>
$(function(){
$(".btn").click(function(){
$(this).button('loading').delay(1000).queue(function(){
$(this).button('reset');
$(this).dequeue();
});
});
});
- 单个切换
data-toggle=button
button.btn.btn-primary[type=button][data-toggle=button]{单个切换}
- 复选框
data-toggle=buttons
div.btn-group[data-toggle=buttons]
label.btn.btn-primary
input[type=checkbox]
{选项1}
label.btn.btn-primary
input[type=checkbox]
{选项2}
label.btn.btn-primary
input[type=checkbox]
{选项3}
- 单选按钮
data-toggle=buttons
div.btn-group[data-toggle=buttons]
label.btn.btn-primary
input[type=radio][name=options][id=option1]
{选项1}
label.btn.btn-primary
input[type=radio][name=options][id=option2]
{选项2}
- 折叠？ ```data-toggle=collapse
*. 启用插件
tooggle loading reset [string]
按钮下拉菜单
分割的按钮下拉菜单
div.btn-group
button.btn.btn-primary[type=button]{默认}
button.btn.btn-default.dropdown-toggle[type=button][data-toggle=dropdown]
span.caret
ul.dropdown-menu
li>a[href=#]{功能}
li.divider
li>a[href=#]{分离的链接}
##### 按钮下拉菜单大小
```
button.btn.btn-default.btn-lg.dropdown-toggle
```
按钮上拉菜单
div.btn-group ==>> div.btn-group.dropup
输入框组
扩展自表单控件。
基本的输入框组(前缀与后缀)
div[style=padding:100px 100px 10px;]
form
div.input-group
span.input-group-addon{@}
input.form-control[type=text][placeholder=twitterhandle]
<br>
div.input-group
input.form-control[type=text]
span.input-group-addon{.00}
<br>
div.input-group
span.input-group-addon{$}
input.form-control[type=text]
span.input-group-addon{.00}
输入框组大小
form
div.input-group.input-group-lg
...
...
带有 复选框和单选插件 的输入组
div
form
div.row
div.input-group
span.input-group-addon
input[type=chekbox]
input.form-control[type=text]
div.row
div.input-group
span.input-group-addon
input[type=radon]
input.form-control[type=text]
------------------------
div.input-group>span.input-group-adddon
带有 按钮插件 的输入组
div[style=padding:100px 100px 10px]
form
div.row
div.input-group
span.input-group-btn
button.btn.btn-default[type=button]{Go}
input.form-control[type=text]
--------------------
div.input-group>span.input-group-btn
带有 下拉菜单按钮 的输入组
div
form
div.row
div.input-group
div.input-group-btn
button.btn.btn-default.dropdown-toggle[type=button][data-toggle=dropdown]
{下拉菜单}
span.caret
ul.dropdown-menu
li>a
li>a
------------------
div.input-group>div.input-group-btn
导航元素
标签式导航菜单
div.container
ul.nav.nav-tabs
li.active
a[href=#home]{首页}
li>a[data-toggle=tab][href=#menu1]{菜单1}
li>a[data-toggle=tab][href=#menu2]{菜单2}
...
div.tab-content
div#home.tab-pane.fade.in.active
h3{首页}
p{一堆话}
div#menu1.tab-pane.fade
h3{菜单1}
p{有一堆话}
-------------
fade 内容逐渐消失
in 初始化时，tab-pane显示的内容
胶囊式导航菜单
div.container
ul.nav.nav-pills
li.active
a[data-toggle=pill][href=#home]{主页}
li
a[data-toggle=pill][href=#menu1]{菜单1}
...
div.tab-content
div#home.tab-pane.fade.in.active
h3{首页}
p{一堆话}
div#menu1.tab-pane.fade
h3{菜单1}
p{又一堆话}
-------------
ul.nav.nav-pills
a[data-toggle=pill][href=#home]
-------------
#垂直的胶囊式导航菜单
ul.nav.nav-pills.nav-stacked
两端对齐的导航
ul.nav.nav-tabs.nav-justified
----------------------
ul.nav.nav-pills.nav-justified
----------------------
在屏幕宽度大于768px时，表现为 ul.nav.nav-tabs;
小于时，表现为 ul.nav.nav-tabs.nav-stacked
禁用链接
li.disabled
.disable 只会改变外观,不会改变功能,s需要自定义js来禁用链接
导航菜单里有下拉菜单
ul.nav.nav-tabs
li.active
a[href=#]{HOME}
li
a[href=#]{SVN}
li.dropdown
a.dropdown-toggle[data-toggle=dropdown][href=#]
{Java}
span.caret
ul.dropdown-menu
li
a[href=#]{Swing}
li
a[href=#]{jMeter}
li
...
--------------------------
li.dropdown
a.dropdown-toggle[data-toggle=dropdown]
li.dropdown-menu
导航栏
默认的导航栏
nav.navbar.navbar-default[role=navigation]
div.container-fluid
div.navbar-header
a.navbar-brand[href=#]{HEADER}
div
ul.nav.navbar-nav
li.actice
a[href=#]{IOS}
li>a[href=#]{SVN}
li.dropdown
a.dropdown-toggle[href=@=#][data-toggle=dropdown]
Java
b.caret
ul.dropdown-menu
li>a[href=#]{jmeter}
li>a[href=#]{EJB}
---------------------
nav.navbar.navbar-default
div.navbar-header
a.navbar-brand
div
ul.nav.navbar-nav
响应式的导航栏(小于一定宽度,右上角出现汉堡按钮)
nav.navbar.navbar-default
div.container-fluid
div.navbar-header
button.navbar-toggle[data-toggle=collapse][data-target=#example-navbar-collapse][type=button]
span.sr-only{切换导航}
span.icon-bar
span.icon-bar
span.icon-bar
a.navbar-brand[href=#]{HEADER}
div#example-navbar-collapse.collapse.navbar-collapse
ul ..
li .... 同上
导航中的表单、按钮
nav.navbar.navbar-default[role=navigation]
div.container-fluid
div.navbar-header
a.navbar-barand[href=#]{HEADER}
div
form.navbar-form.navbar-left[role=search]
div.form-group
input.form-control[type=text][placeholder=Search]
button.btn.btn-default.submit{提交}
button.btn.btn-primary.navbar-btn[type=button]{导航栏-按钮}
div
p.navbar-text{导航栏-文本}
导航链接
汉堡图标!
nav.navbar.navbar-default[role=navigation]
div.container-fluid
div.navbar-header
button.navbar-toggle[data-toggle=collapse][data-target=#example-collapse][type=button]
span.icon-bar
span.icon-bar
span.icon-bar
a.navbar-brand[href=#]{菜鸟教程}
div#example-collapse.collapse.navbar-collapse
ul.nav.navbar-nav.navbar-right
li>a[href=#]
span.glyphicon.glyphicon-user
{注册｝
li>a[href=#]
span.glyphicon.glyphicon-log-in
{登录}
组件定位方式
nav.nav.navbar-default
div.contaoner-fluid
div.navbar-header
a.navbar-brand[href=#]{HEADER}
div
<!--向左对齐-->
ul.nav.navbar-nav.navbar-left
li...
...
form.navbar-form.navbar-left
button...
p.navbar-text.navbar-left{向左对齐}
<!--向右对齐-->
ul.nav.navbar-nav.navbar-right
....
form....
p.....
=========================
.navbar-left .navbar-right
导航栏固定到顶部、底部、反色
?
body[style=padding=50px]
nav.navbar.navbar-inverse.navbar-fixed-top
div.container-fluid
...
------------
navbar-fixed-top 固定在页面顶部(随着页面滚动)
navbar-fixed-bottom 固定在页面底部(随着页面滚动)
navbar-static-top 静态的顶部(不需要padding , 默认为此样式？)
navbar-inverse || navbar-default
面包屑导航
css
js
ul.breadcrumb
li>a[href=#]{Home}
li>a[href=#]{2019}
li.active{十一月}
分页
分页(Pagination)
css
js
ul.pagination
li>a[href=#]{«}
li[class=active]>a[href=#]{1}
li[class=disabled]>a[href=#]{2}
li>a[href=#]{3}
li>a[href=#]{4}
li>a[href=#]{5}
li>a[href=#]{»}
----
pagination pagination-lg pagination-sm 大小
li.active
li.disabled
翻页(Pager)
ul.pager
li.previous>a[href=#]{←Older}
li.next>a[href=#]{New→}
li>a[href="#"]{active}
li.disabled>a[href=#]{disabled}
----------
li.previous li.next
li.disabled
标签
h4{Example Heading}>span.label.label-default{Label}
span.label.label-default{默认标签}
span.label.label-primary{主要标签}
span.label.label-success{成功标签}
span.label.label-info{信息标签}
span.label.label-warning{警告标签}
span.label.label-danger{危险标签}
徽章(相较于标签，边角更加圆滑)
h4{胶囊式导航中的激活状态}
ul.nav.nav-pills
li.active
a[href=#]{首页}>span.badge{42}
li
a[href=#]{简介}
li
a[href=#]{消息}>span.badge{3}
h4{列表导航中的激活状态}
ul.nav.nav-pills.nav-stacked
li.active
a[href=#]{首页}>span.badge.pull-right{42}
li
a[href=#]{简介}
li
a[href=#]{消息}>span.badge.pull-right
-----
span.badge 空时自动折叠
页面标题与子标题
div.page-header
h1{页面标题实例}
small{子标题}
p{示例文本。。。。。。}
浙公网安备 33010602011771号