bootstrap为移动优先前端框架，带有很多的样式，可以简化css的编写
开发bootstrap页面需要引入一下css、js
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title></title>
</head>
<body>
</body>
</html>
| 超小设备手机(<768px) | 小型设备平板电脑(>=768px) | 中型设备台式电脑(>=992px) | 大型设备台式电脑(>=1200px) |
|---|---|---|---|
| .col-xs- | .col-sm- | .col-md- | .col-lg- |
表格
基本结构
<table>
<thead>
<th></th>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
- table-striped:带条纹
- table-bordered:带边框
- table-hover:悬停带浅灰色背景
- table-condensed:精简表格
- 响应式表格
<div class="table-responsive"></div>
表单
form-horizontal:水平表单
- form元素添加class .form-horizontal
- 把标签和控件放在带有class .form-group的div中
- 向标签添加class .control-label
表单类型
- input: 输入框
- textarea：文本框
- checkbox：复选框
- radio：单选框
- select ：选择框
表单布局
可以使用col-sm-*来规定控件的大小
<form role="form">
<div>
<label class="col-sm-2">名称</label>
<div class="col-sm-6">
<input class="form-control" id="name" placeholder="请输入名称">
</div>
</div>
<form>
按钮
以下class属性可以用于a,button,input
- btn-default:默认
- btn-promary:原始
- btn-link:链接按钮
- btn-success:成功按钮
- btn-danger:危险按钮
- btn-warning:警告按钮
- btn-info：信息按钮
- btn-lg:制作大按钮
- btn-sm：制作小按钮
- btn-xs:制作超小按钮
- active:激活状态
- disabled:禁用
按钮组
div中使用.btn-group创建按钮组
- btn-group-lg|sm|xs：控制按钮组的大小
- btn-group-vertical:设置垂直方向的按钮
- btn-group-justified:设置自适应大小的按钮组
<div class="container">
<div class="col-sm-2 col-xs-1">
<div class="btn-group-vertical">
<a class="btn btn-primary">链接1</a>
<a class="btn btn-primary">链接2</a>
<a class="btn btn-primary">链接3</a>
<a class="btn btn-primary">链接4</a>
<div class="btn-group-vertical">
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown">链接5</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
</ul>
</div>
</div>
</div>
</div>
-- 下拉
<a class="dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
</ul>
下拉菜单
创建下拉菜单
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
主题<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation" class="dropdown-header">下拉菜单标题</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">java</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">java</a>
</li>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">下拉菜单标题</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">java</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">java</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">java</a>
</li>
</ul>
</div>
- dropdown-menu-right:下拉菜单右对齐
- dropdown-header:下拉菜单中添加标题
- dropup:指定向上弹出的下拉菜单
- disabled:下拉菜单中的禁用项
- divider:下拉菜单中的分割线
按钮
- btn-group:按钮组
- btn-toolbar:按钮工具栏
- btn-group-lg，btn-group-sm，btn-group-xs：调整按钮大小
- btn-group-vertical:垂直按钮
- spn.caret 下拉箭头
折叠
- data-toggle=“collapse” :添加到控制下拉的组件之中
- href或data-target: 添加到控制下拉的组件之中，它的值是子组件的id
- data-parent：把折叠面板（accordion）的id添加到要展开或折叠的组件的链接上
- collapse(options):激活内容为可折叠元素,$(‘selector’).collapse({toggle:false})
- collapse(‘toggle’):切换显示/隐藏可折叠元素,$(‘selector’).collapse(‘toggle’)
- collapse(‘show’):显示可折叠元素,$(‘selector’).collapse(‘show’)
- collapse(‘hide’):隐藏可折叠元素，$(‘selector’).collapse(‘hide’)
<button class="btn" data-toggle="collapse" data-target="#meun_one_sub">菜单一</button>
<div id="meun_one_sub" class="collapse in">
<a class="btn btn-primary col-sm-12" href="#">菜单一.1</a>
<a class="btn btn-primary col-sm-12" href="#">菜单一.2</a>
<a class="btn btn-primary col-sm-12" href="#">菜单一.3</a>
<a class="btn btn-primary col-sm-12" href="#">菜单一.4</a>
<a class="btn btn-primary col-sm-12" href="#">菜单一.5</a>
</div>
导航元素
创建一个标签式的导航菜单
- 以一个带有class.nav的无序列表开始
- 添加class.nav-tabs
- class.nav-pills替换nav-tabs :把标签改成胶囊的样式
- class.nav-stacked：同class.nav,.nav-pills同时使用，让胶囊垂直堆叠
- nav-justified:让标签或者胶囊式导航菜单与父元素等宽
- disabled：创建灰色链接，并禁用该链接的:hover状态
- 下拉菜单
- 以一个带有class.nav的无序列表开始
- 添加class.nav-tabs
- 添加带有.dropdown-menu class的无序列表
- 点击标签切换显示内容
- data-toggle=“tab”:放在需要切换的标签上
- .tab-content：放在展示的元素上
- .tab-pane:放在需要具体展示的元素上
<div class="container">
<h2>动态标签</h2>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">首页</a></li>
<li><a data-toggle="tab" href="#menu1">菜单一</a></li>
<li><a data-toggle="tab" href="#menu2">菜单二</a></li>
<li><a data-toggle="tab" href="#menu3">菜单三</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane active">
<h3>首页</h3>
<p>菜鸟教程 —— 学的不仅是技术，更是梦想！！！</p>
</div>
<div id="menu1" class="tab-pane">
<h3>菜单一</h3>
<p>这是菜单一显示内容</p>
</div>
<div id="menu2" class="tab-pane">
<h3>菜单二</h3>
<p>这是菜单二显示内容！！！</p>
</div>
<div id="menu3" class="tab-pane">
<h3>菜单三</h3>
<p>这是菜单三显示内容！！！</p>
</div>
</div>
</div>
导航栏
创建导航栏
- 向nav标签添加class.navbar，.navbar-default
- 向上面的元素添加role=“navigation”,有助于增加可访问性
- 向div元素添加一个标题class.navbar-header,内部包含了带有class navbar-brand的a元素
- 为了向导航栏添加链接，只需要简单的添加带有class.nav,.navbar-nav的无序列表即可
相关属性
- .navbar-form:导航栏表单
- navbar-button:导航栏按钮
- navbar-text:导航栏文本
- class glyphicon glyphicon-*来设置图标，放到span元素中
- .navbar-left或navbar-right向左或向右对齐
- .navbar-fixed-top ,navbar-fixed-bottom 固定到顶部或底部
- .navbar-static-top：创建能随着页面一起滚动的导航栏
- .navbar-inverse:创建带有黑色白色文本的反色导航栏
响应式导航栏
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">XXX系统</a>
</div>
<div class="collapse collapse-navbar" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">IOS</a></li>
<li><a href="#">SVN</a></li>
<li class="dropdown">
<a href="#" class="data-toggle" data-toggle="dropdown">JAVA<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">jmeter</a></li>
<li><a href="#">EJB</a></li>
<li><a href="#">Jasper Report</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
<li class="divider"></li>
<li><a href="#">另一个分离的链接</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
面包屑导航：.breadcrumb class的无序列表
分页
- .pagination
- 分页大小.pagination-*(pagination-lg pagination pagination-sm)
- “«” "»"分页左右的方向标
徽章：badges 放在span元素上
<h4>胶囊式导航中的激活状态</h4>
<ul class="nav nav-pills">
<li class="active">
<a href="#">首页
<span class="badge">42</span>
</a>
</li>
<li>
<a href="#">简介</a>
</li>
<li>
<a href="#">消息
<span class="badge">3</span>
</a>
</li>
</ul>
<br>
<h4>列表导航中的激活状态</h4>
<ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
<li class="active">
<a href="#">
<span class="badge pull-right">42</span>首页</a>
</li>
<li>
<a href="#">简介</a>
</li>
<li>
<a href="#">
<span class="badge pull-right">3</span>消息
</a>
</li>
</ul>
缩略图
缩略图创建步骤：
- 在图像周围添加带有class.thumbnail的标签
- 这会添加四个像素的内边距（padding）和一个灰色的边框
- 当鼠标悬停在图像上时，会动画显示出图像的轮廓
<div class="row">
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img decoding="async" src="img/风景1.jpg" alt="这是一个图片">
<div class="caption">
<h3>缩略图标签</h3>
<p>一些示列文本</p>
<button class="btn btn-default">按钮</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img decoding="async" src="img/风景1.jpg" alt="这是一个图片">
<div class="caption">
<h3>缩略图标签</h3>
<p>一些示列文本</p>
<button class="btn btn-default">按钮</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img decoding="async" src="img/风景1.jpg" alt="这是一个图片">
<div class="caption">
<h3>缩略图标签</h3>
<p>一些示列文本</p>
<button class="btn btn-default">按钮</button>
</div>
</div>
</div>
</div>
警告 .alert
- .alert-success,alert-info,alert-warning,alert-danger
- .alert-dismissable可取消警告
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert"
aria-hidden="true">
×
</button>
成功！很好地完成了提交。
</div>
<div class="alert alert-info alert-dismissable">
<button type="button" class="close" data-dismiss="alert"
aria-hidden="true">
×
</button>
信息！请注意这个信息。
</div>
<div class="alert alert-warning alert-dismissable">
<button type="button" class="close" data-dismiss="alert"
aria-hidden="true">
×
</button>
警告！请不要提交。
</div>
<div class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-dismiss="alert"
aria-hidden="true">
×
</button>
错误！请进行一些更改。
</div>
进度条 .progress
面板 class.panel 和class.panel-default
模态框（Modal）插件
用法：
- 通过data属性：在控制器元素（比如按钮或者链接）上设置属性data-toggle=“modal”,同时设置data-target=“#identifier"或href=”#identifier"来指定要切换的特定的模态框
- 通过JavaScript：调用带有id="identifier"的模态框 $(‘#identifier’).modal(options)
- show.bs.modal:在调用show方法后触发
- shown.bs.modal:当模态框对用户可见是触发
- hide.bs.modal:当调用hide实例方法时触发
- hidden.bs.modal：当模态框完全对用户隐藏时触发
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
</div>
<div class="modal-body">在这里添加一些文本</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">提交更改</button>
</div>
</div>
</div>
</div>
轮播
carousel是一种灵活的响应式的向站点添加滑块的方式
- data-interval,自动循环每个项目之间延迟的时间量。如果为false,轮播将不会自动循环。
- data-pause:鼠标进入时暂停轮播循环，鼠标离开时恢复轮播循环
- data-wrap：轮播是否连续循环
- .carousel(options):初始化轮播为可选的 options 对象，并开始循环项目。
- .carousel(‘cycle’):从左到右循环轮播项目
- .carousel(‘pause’):停止轮播循环项目
- .carousel(‘number’):循环轮播到某个特定的帧
- .carousel(‘prev’):循环轮播到上一个项目
- .carouse(‘next’):循环轮播到下一个项目
- slide.bs.carousel:当调用slide实例方法时立即触发该事件
- slide.bs.carousel:当轮播完成幻灯片过渡效果时触发该事件
<div id="myCarousel" class="carousel slide">
<!-- 轮播（carousel）指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- 轮播（carousel）项目 -->
<div class="carousel-inner">
<div class="item active">
<img decoding="async" src="img/风景1.jpg" alt="First slide"/>
<div class="carousel-caption">标题1</div>
</div>
<div class="item">
<img decoding="async" src="img/风景1.jpg" alt="First slide"/>
<div class="carousel-caption">标题1</div>
</div>
<div class="item">
<img decoding="async" src="img/风景1.jpg" alt="First slide"/>
<div class="carousel-caption">标题1</div>
</div>
</div>
<!-- 轮播（carousel）导航 -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
469
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
