一、BootStrap介绍
1.简介
BootStrap是当前比较流行的CSS框架之一,他是Twitter推出的一个用于前端开发的开源工具包。
2.为什么要学习BootStrap
(1)企业开发多使用某种CSS框架,其中以BootStrap为目前使用居多
(2)本课程后面的web界面为了统一将使用bootstrap作为统一的前端框架
(3)有利于学习和理解其它框架
eg:第一个BootStrap程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap_01</title>
<link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3" style="background-color: red">col-md-3</div>
<div class="col-md-9" style="background-color: yellow">col-md-9</div>
</div>
</div>
</body>
</html>
二 、BootStrap基本样式-栅格
12列的布局介绍
1、栅格基本使用方式:
使用.container( 1170 px)或container-fluid包裹
列应当包含在行”row”中
列的基本格式: (col-屏幕大小-数字)
<div class="container">
<div class="row">
<div class="col-md-3" style="background-color: #ddd">col-3</div>
<div class="col-md-9" style="background-color: red">col-9</div>
</div> </div>
2、栅格基本使用方式(二)
(1)当一列多于12列时会自动换行
(2)列偏移
.col-md-offset-n:向右偏移N列
(3)嵌套列
在一个col下再使用row产生一个或多个行
3、排版
(1)基本HTML标签样式
h1-h6、p、strong、mark、del
(2)文本对齐
text-left、text-right、text-center、text-nowrap(文本不换行)
(3)列表
list-unstyled:去掉标记
list-inline:列表项显示在一行
三、表格样式
1、Table:基本样式
table-striped:条纹表格
table-bordered:带边框表格
table-hover:鼠标悬停
table-condensed:紧缩表格
2、状态类,可以给单元格设置颜色:
.active
.success
.info
.warning
.danger
3、响应式表格:table-responsive
四、表单样式
1、表单基本样式
Form-control:表单元素的宽度属性为100%
input-group:表单分组(使用表单分组时无需添加row)
checkbox-inline:在一行显示checkbox
Radio-inline:在一行显示radio
Disabled:禁用
Readonly:只读
.has-warning、.has-error 或 .has-success:表单校验
添加图标: has-feedback
控件尺寸:input-lg ,input-sm
表单其他样式:
Form-inline:内联表单
form-horizontal: 水平标签
2、按钮
Btn:显示为一个按钮,用于button元素或其它元素
颜色: btn-default, btn-primary, btn-success, btn-info, btn-warning, btn-danger, btn-link
尺寸: btn-lg,btn-sm,btn-xs,btn-block
Disabled:禁用
图片
响应式图片: img-responsive
图片形状: img-rounded, img-circle, img-thumbnail
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8">
<table class="table table-responsive">
<tr>
<th>学生</th>
<th>姓名</th>
<th>年龄</th>
<th>成绩</th>
</tr>
<tr>
<td class="success">aa</td>
<td class="info">11</td>
<td class="warning">aa</td>
<td class="danger">11</td>
</tr>
<tr>
<td class="active">aa</td>
<td>11</td>
<td>aa</td>
<td>11</td>
</tr>
<tr>
<td>aa</td>
<td>11</td>
<td>aa</td>
<td class="bg-info">11</td>
</tr>
</table>
</div>
<div class="col-md-12">
<form name="form1" role="form" class="form-inline" >
<div class="form-group">
<label for="name" class="text-danger">姓名</label>
<input type="text" id="name" class="form-control" value="1" />
</div>
<div class="form-group">
<label for="mima">密码:</label>
<input type="password" id="mima" class="form-control" value="1"/>
</div>
<button type="button" class="btn btn-default">保存</button>
</form>
</div>
</div>
</div>
</body>
</html>
五、辅助工具
1、颜色
(1)文字颜色
text-muted
text-primary
text-success
text-info
text-warning
text-danger
(2)背景颜色
bg-muted
bg-primary
bg-success
bg-info
bg-warning
bg-danger
2、位置
(1)浮动
pull-xx: right:xxx%
push-xx:left: xxx%
clearfix
(2)内容居中
center-block
(3)显示或隐藏
show
hidden
(4)响应式工具
visible-xs-* 可见
hidden-xs 隐藏
六、BootStrap组件
1、下拉菜单
dropdown
dropdown-menu
dropdown-header:不可点击的菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<!--[if lt IE 9]>
<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/html5shiv.min.js"></script>
<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/jquery.min.js"></script>
<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<title>下拉菜单</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="dropdown">
<button type="button" class="btn btn-default" data-toggle="dropdown">下拉菜单
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="aa">菜单1</a></li>
<li><a href="aa">菜单2</a></li>
<li><a href="aa">菜单3</a></li>
</ul>
</div>
</div>
<div class="col-md-12">
<div class="button-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>
</div>
</div>
</div>
</body>
</html>
2、按钮组
button-group
btn-group-vertical:垂直排列
3、导航
nav
nav-tabs:标签式导航
nav-pills:胶囊式导航
4、导航条
navbar
navbar-brand:品牌图标
navbar-btn:导航按钮
navbar-text:导航文本
navbar-left/navbar-right:元素居左/居右
navbar-fixed-top:固定在顶部
navbar-fixed-bottom:固定在底部
navbar-default:反色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<!--[if lt IE 9]>
<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/html5shiv.min.js"></script>
<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/jquery.min.js"></script>
<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<title>导航栏</title>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand">网站名称</a>
</div>
<ul class="nav navbar-nav">
<li><a href="#">首页</a></li>
<li><a href="#">公司简介</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">
产品列表
</a>
<ul class="dropdown-menu">
<li><a href="#">产品1</a></li>
<li><a href="#">产品2</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<input type="text" name="name" class="form-control" placeholder="请输入关键字" />
<button type="button" class="btn btn-default">搜素</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">登录</a></li>
</ul>
</div>
</div>
</nav>
</body>
</html>
分页
Pagination:
路径导航
Breadcrumb:
标签
Label
label-default
label-primary
label-success
label-info
label-warning
label-danger
徽章
badge
巨幕
jumbotron :
缩略图
thumbnail :
列表
list-group:
list-group-item:列表项
list-group-item-heading
list-group-item-text
面板
Panel
panel-heading
panel-title
panel-body:
panel-footer
panel-primary
panel-success
panel-info
panel-warning
panel-danger
Panel和其它元素的组合
七、JavaScript插件
模态框
下拉菜单
滚动监听
标签页
工具提示
弹出框
手风琴组件
图片轮播组件
1、模态框
data方式调用<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
js方式调用
$('#myModal').modal(options)
2、标签页
data方式调用
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
js方式调用
$('#someTab').tab('show')
事件
show.bs.tab 显示前触发(2)
shown.bs.tab 显示后触发(4)
hide.bs.tab 隐藏前触发(1)
hidden.bs.tab 隐藏后触发(3)
3、轮播图
data方式调用
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"></div>
js方式调用
$('.carousel').carousel()