【学习笔记】Bootstrap常用组件整理

LYTtushuguan72 2016-09-11

展开全文

Bootstrap作为twitter推出的前端开发工具包，短时间内便红遍业界。确实它功能强大并且界面美观。

虽然在实际工作中较少会在非服务器端的项目中用到，但是bootsrap依然是值得我们在平常学习研究的优秀框架。

这里整理出了一些bootstrap的组件，供大家参考。

一、工具类：

[html] view plain copy

<span style="font-family:Arial;font-size:12px;"><!DOCTYPE html>
<html>
<head>
<title>Bootstrap 工具类</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../js/bootstrap-3.3.6/dist/css/bootstrap.css">
<style type="text/css">
* {
margin: 0
}
.divs {
text-align: center;
line-height: 75px;
font-family: "微软雅黑";
float: left;
margin: 10px;
width: 100px;
height: 75px;
background-color: #E3E3E3
}
</style>
</head>
<body>
<div class="divs div1">
<button type="button" class="close" aria-hidden="true">×</button> 关闭按钮
</div>
<div class="divs div2">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
</div>
<div class="divs pull-left">浮动pull-left</div>
<div class="divs pull-right">浮动pull-right</div>
<div class="divs show">show/hidden</div>
<div class="center-block" style="width: 150px;background-color: #E3E3E3;">居中center-block</div>
<div class="sr-only divs" href="#content">Skip to main content</div>
<script src="../js/jquery-2.1.4/jquery-2.1.4.js"></script>
<script src="../js/bootstrap-3.3.6/dist/js/bootstrap.js"></script>
</body>
</html></span>

截图：

二、组件

[html] view plain copy

<span style="font-family:Arial;font-size:12px;"><!DOCTYPE html>
<html>
<head>
<title>Bootstrap 组件</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../js/bootstrap-3.3.6/dist/css/bootstrap.css">
<style type="text/css">
* {
margin: 0
}
#span1 {
display: inline-block;
margin-left: 2px;
vertical-align: middle;
/*border-top: 4px dashed;*/
border-right: 4px solid transparent;
border-left: 4px solid transparent;
border-bottom: 4px solid;
}
body {
padding-top: 50px;
}
.part {
float: left;
margin: 10px;
box-shadow: 1px 1px 3px #E8E8E8;
}
.table .tableHead {
color: white;
background-color: #737373
}
</style>
</head>
<body>
<div class="part" style="width: 100%;">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">网站Logo</a>
</div>
<!—这里设置网站的链接 -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">链接<span class="sr-only">(current)</span></a>
</li>
<li>
<a href="#">链接</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">下拉菜单<span class="caret"></span></a>
<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 role="separator" class="divider"></li>
<li>
<a href="#">Separated link</a>
</li>
<li role="separator" 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">搜索</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">链接</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">下拉菜单<span class="caret"></span></a>
<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 role="separator" class="divider"></li>
<li>
<a href="#">Separated link</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<h3>头部导航</h3>
</div>
<div class="part">
<h3>表格</h3>
<table class="table table-striped table-bordered table-hover">
<thead>
<tr class="tableHead">
<th>商品编号</th>
<th>商品名称</th>
<th>商品描述</th>
<th>商品种类</th>
<th>操作</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>macbook air</td>
<td>苹果最新超薄笔记本</td>
<td>笔记本</td>
<td>
<a href="#">修改</a>
</td>
<td>
<a href="#">删除</a>
</td>
</tr>
<tr class="winBlue">
<td>2</td>
<td>ipad pro</td>
<td>苹果最新平板电脑</td>
<td>平板电脑</td>
<td>
<a href="#">修改</a>
</td>
<td>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td>3</td>
<td>iphone6s plus</td>
<td>苹果最新大屏手机</td>
<td>手机</td>
<td>
<a href="#">修改</a>
</td>
<td>
<a href="#">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="part">
<h3>胶囊式导航条</h3>
<ul class="nav nav-pills">
<li class="active">
<a href="#">Home</a>
</li>
<li>
<a href="#">SVN</a>
</li>
<li>
<a href="#">iOS</a>
</li>
<li>
<a href="#">VB.Net</a>
</li>
<li>
<a href="#">Java</a>
</li>
<li>
<a href="#">PHP</a>
</li>
</ul>
</div>
<div class="part" style="width: 100px;">
<h3>垂直胶囊导航条</h3>
<ul class="nav nav-pills nav-stacked">
<li class="active">
<a href="#">Home</a>
</li>
<li>
<a href="#">SVN</a>
</li>
<li>
<a href="#">iOS</a>
</li>
<li>
<a href="#">VB.Net</a>
</li>
<li>
<a href="#">Java</a>
</li>
<li>
<a href="#">PHP</a>
</li>
</ul>
</div>
<div class="part" style="width: 300px;">
<h3>面包屑导航条</h3>
<ul class="breadcrumb">
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">资料库</a>
</li>
<li>
<a href="#">数据</a>
</li>
</ul>
</div>
<div class="part dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">选项一</a>
</li>
<li>
<a href="#">选项二</a>
</li>
<li>
<a href="#">选项三</a>
</li>
<li class="divider"></li>
<li>
<a href="#">选项四</a>
</li>
</ul>
</div>
<div class="part" style="width: 20px;height: 20px;">
<h3>箭头</h3>
<span id="span1">
</span>
</div>
<div class="btn-group part">
<h3>按钮组</h3>
<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>
<input type="button" class="btn btn-default" value="点我" />
</div>
<div class="btn-group part btn-group-vertical ">
<h3>垂直按钮组</h3>
<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>
<input type="button" class="btn btn-default" value="点我" />
</div>
<div class="part">
<h3>两端对齐按钮组</h3>
<div class="btn-group btn-group-justified">
<a class="btn btn-default">Left</a>
<a class="btn btn-default">Middle</a>
<a class="btn btn-default">Right</a>
</div>
</div>
<div class="part">
<h3>嵌套按钮组</h3>
<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 class="btn-group">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">选项一</a>
</li>
<li>
<a href="#">选项二</a>
</li>
<li>
<a href="#">选项三</a>
</li>
<li class="divider"></li>
<li>
<a href="#">选项四</a>
</li>
</ul>
</div>
</div>
</div>
<div class="part">
<h3>input控件组搜索框</h3>
<div class="input-group" style="width:500px;margin:0px auto;">
<input type="text" class="form-control" />
<span class="input-group-btn">
<input type="button" name="search" value="search" class="btn btn-default"/>
</span>
</div>
</div>
<div class="part">
<h3>搜索框2 带下拉菜单</h3>
<div class="input-group" style="width:500px;margin:0px auto;">
<input type="text" class="form-control" />
<span class="input-group-btn">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">选项一</a>
</li>
<li>
<a href="#">选项二</a>
</li>
<li>
<a href="#">选项三</a>
</li>
<li class="divider"></li>
<li>
<a href="#">选项四</a>
</li>
</ul>
</div>
</span>
</div>
</div>
<div class="part">
<h3>搜索框—+文字</h3>
<div class="input-group" style="width:500px;margin:0px auto;">
<input type="text" class="form-control" />
<span class="input-group-addon">
输入完成后回车
</span>
</div>
</div>
<div class="part">
<h3>列表组件</h3>
<div style="width:100px;">
<ul class="list-group">
<li class="list-group-item">
<a href="">选项一</a>
</li>
<li class="list-group-item">
<a href="">选项二</a>
</li>
<li class="list-group-item">
<a href="">选项三</a>
</li>
<li class="list-group-item">
<a href="">选项四</a>
</li>
</ul>
</div>
</div>
<div class="part">
<h3>用列表组件将内容分成列表的样式</h3>
<div class="list-group " style="width:200px; ">
<a href="# " class="list-group-item active ">
<h4 class="list-group-item-heading ">英格兰战胜威尔士</h4>
<p>最新欧洲杯战况英格兰2:1战胜威尔士....</p>
</a>
<a href="# " class="list-group-item ">
<h4 class="list-group-item-heading ">乌克兰对北爱尔兰</h4>
<p>乌克兰对北爱尔兰....</p>
</a>
<a href="# " class="list-group-item ">
<h4 class="list-group-item-heading ">德国对波兰</h4>
<p>德国队波兰....</p>
</a>
</div>
</div>
<div class="part">
<h3>列表后面加徽章 badge</h3>
<div style="width:150px;">
<ul class="list-group">
<li class="list-group-item">
<span class="badge">52</span>
<a href="">中国队金牌</a>
</li>
<li class="list-group-item">
<span class="badge">48</span>
<a href="">美国队金牌</a>
</li>
<li class="list-group-item">
<span class="badge">41</span>
<a href="">俄罗斯队金牌</a>
</li>
</ul>
</div>
</div>
<div class="part">
<h3>分页</h3>
<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="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">5</a>
</li>
<li>
<a href="#">?</a>
</li>
</ul>
<div class="part">
<h3>更大或更小的分页 pagination-lg pagination-sm</h3>
<ul class="pagination pagination-lg">
<li class="disabled">
<a href="#">?</a>
</li>
<li class="active">
<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>
</div>
<div class="part">
<h3>上下页</h3>
<ul class="pager">
<li>
<a href="#">上一页</a>
</li>
<li>
<a href="#">下一页</a>
</li>
</ul>
</div>
<div class="part">
<h3>加previous next 两端对齐</h3>
<ul class="pager">
<li class="previous">
<a href="#">上一页</a>
</li>
<li class="next">
<a href="#">下一页</a>
</li>
</ul>
</div>
</div>
<div class="part">
<h3>各种标签</h3>
<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>
</div>
<div class="part">
<h3>提示信息</h3>
<button class="btn btn-primary">
未读信息
<span class="badge">4</span>
</button>
</div>
<div class="part">
<h3>面板</h3>
<div class="panel panel-default">
<div class="panel-body">基础面板示例</div>
</div>
<div class="panel panel-default" style="width:500px;">
<div class="panel-heading">面板页头</div>
<div class="panel-body">面板内容省略...</div>
<div class="panel-footer">面板页脚</div>
</div>
<div class="part">
<h3>面板配色同标签</h3>
<div class="panel panel-default">…</div>
<div class="panel panel-primary">…</div>
<div class="panel panel-success">…</div>
<div class="panel panel-info">…</div>
<div class="panel panel-warning">…</div>
<div class="panel panel-danger">…</div>
</div>
</div>
<div class="part">
<h3>进度条</h3>
<div class="progress" style="width:500px;">
<div class="progress-bar" style="width:60%;"></div>
</div>
<h3>进度条颜色命名规律同标签</h3>
<div class="progress " style="width:500px;">
<div class="progress-bar progress-bar-success" style="width:60%;"></div>
</div>
<h3>加斜条纹效果 progress-bar-striped</h3>
<div class="progress" style="width:500px;">
<div class="progress-bar progress-bar-info progress-bar-striped" style="width:60%;"></div>
</div>
</div>
<script src="../js/jquery-2.1.4/jquery-2.1.4.js "></script>
<script src="../js/bootstrap-3.3.6/dist/js/bootstrap.js "></script>
</body>
</html></span>

截图：

三、js

[html] view plain copy

<span style="font-family:Arial;font-size:12px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>bootstrap js特效</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="../js/bootstrap-3.3.6/dist/css/bootstrap.css" type="text/css" rel="stylesheet"></link>
<style type="text/css">
.part {
float: left;
margin: 10px;
box-shadow: 1px 1px 3px #E8E8E8;
}
</style>
</head>
<body>
<div class="part">
<h2>创建模模态对话框（Modal）</h2>
<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>
</div>
<div class="part">
<h3>标签页</h3>
<ul class="nav nav-tabs" id="myTab">
<li class="active">
<a href="#intro" data-toggle="tab">商品介绍</a>
</li>
<li>
<a href="#parameter" data-toggle="tab">规格参数</a>
</li>
<li>
<a href="#qingdan" data-toggle="tab">包装清单</a>
</li>
<li>
<a href="#pingjia" data-toggle="tab">商品评价</a>
</li>
<li>
<a href="#shouhou" data-toggle="tab">售后保障</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="intro">我是商品介绍</div>
<div class="tab-pane" id="parameter">我是规格参数</div>
<div class="tab-pane" id="qingdan">我是包装清单</div>
<div class="tab-pane" id="pingjia">我是商品评价</div>
<div class="tab-pane" id="shouhou">我是售后保障</div>
</div>
</div>
<div class="part">
<h3>tooltip</h3>
<a href="#" id="myTooltip" data-toggle="tooltip" data-placement="right" title="在右侧显示提示内容" class="btn btn-primary">工具提示</a>
</div>
<div class="part">
<h3>弹出框</h3>
<a href="javascript:void(0);" id="myPopover" class="btn btn-lg btn-danger" data-toggle="popover" data-content="采用了点击事件触发,相比Tooltip可以显示更多、更正式的内容,并且可以配置更多样式." data-original-title="弹出框的应用">点击了解更多</a>
</div>
<div class="part">
<h3>提示信息</h3>
<div id="my-alert" class="alert alert-danger fade in" style="width:400px;">
警告,服务器挂了!
<a href="#" class="close" data-dismiss="alert">X</a>
</div>
</div>
<script src="../js/jquery-2.1.4/jquery-2.1.4.js"></script>
<script src="../js/bootstrap-3.3.6/dist/js/bootstrap.js"></script>
</body>
<script type="text/javascript">
$("#myTooltip").tooltip();
$("#myPopover").popover();
$("#my-alert").bind('closed.bs.alert',function(){
alert('关闭了!');
})
</script>
</html></span>