BootStrap
介绍
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
入门:
下载: 完整的bootstrap
快速使用
<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>文件名称</title> <!-- Bootstrap --> <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css"> <!--[if lt IE 9]> <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script> <![endif]--> </head> <body> <h1>你好，世界！</h1> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --> <script src="./js/jquery.min.js"></script> <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> <script src="./bootstrap/js/bootstrap.min.js"></script> </body> </html>
容器
容器 全页面所有内容的盒子
.container 在页面中间有1200px
.container-fluid 占满全页面
自带左右15px的内边距
<div class="container">固定</div> <div class="container-fluid">流式</div>
响应式图片
<div class="container"> <img src="../day18/小u课堂/img/index/tbanner1.png" class="img-responsive" alt="Responsive image"> <p> <img src="../day12/p.jpg" alt="..." class="img-rounded"> <img src="../day12/p.jpg" alt="..." class="img-circle"> <img src="../day12/p.jpg" alt="..." class="img-thumbnail"> </p> </div>
栅格系统
使用
\1. 写行 row
\2. 列: col--
第一个: 屏幕尺寸
lg 超大屏幕: > 1200
md 中等屏幕: 992 < x < 1200
sm 小屏幕: 768 < x < 992
xs 超小屏幕: < 768
第二个: 占得比例 1-12
在当前尺寸以上 使用堆叠的布局方式 在当前尺寸以下 水平排布
<div class="container"> <!-- 1. 写行 row--> <div class="row"> <!-- 2. 列: col-*-* 第一个: 屏幕尺寸 lg 超大屏幕: > 1200 md 中等屏幕: 992 < x < 1200 sm 小屏幕: 768 < x < 992 xs 超小屏幕: < 768 第二个: 占得比例 1-12 在当前尺寸以上 使用堆叠的布局方式 在当前尺寸以下 水平排布 --> <div class="col-lg-1">col-lg-1</div> <div class="col-lg-1">col-lg-1</div> <div class="col-lg-1">col-lg-1</div> <div class="col-lg-1">col-lg-1</div> <div class="col-lg-1">col-lg-1</div> <div class="col-lg-1">col-lg-1</div> <div class="col-lg-1">col-lg-1</div> <div class="col-lg-1">col-lg-1</div> <div class="col-lg-1">col-lg-1</div> <div class="col-lg-1">col-lg-1</div> <div class="col-lg-1">col-lg-1</div> <div class="col-lg-1">col-lg-1</div> </div> <div class="row"> <div class="col-lg-5">col-lg-5</div> <div class="col-lg-7">col-lg-7</div> </div> <div class="row"> <div class="col-md-1">col-md-1</div> <div class="col-md-1">col-md-2</div> <div class="col-md-1">col-md-3</div> <div class="col-md-1">col-md-4</div> <div class="col-md-1">col-md-5</div> <div class="col-md-1">col-md-6</div> <div class="col-md-1">col-md-7</div> <div class="col-md-1">col-md-8</div> <div class="col-md-1">col-md-9</div> <div class="col-md-1">col-md-10</div> <div class="col-md-1">col-md-11</div> <div class="col-md-1">col-md-12</div> </div> <div class="row"> <div class="col-sm-1">col-sm-1</div> <div class="col-sm-1">col-sm-2</div> <div class="col-sm-1">col-sm-3</div> <div class="col-sm-1">col-sm-4</div> <div class="col-sm-1">col-sm-5</div> <div class="col-sm-1">col-sm-6</div> <div class="col-sm-1">col-sm-7</div> <div class="col-sm-1">col-sm-8</div> <div class="col-sm-1">col-sm-9</div> <div class="col-sm-1">col-sm-10</div> <div class="col-sm-1">col-sm-11</div> <div class="col-sm-1">col-sm-12</div> </div> <div class="row"> <div class="col-xs-1">col-xs-1</div> <div class="col-xs-1">col-xs-2</div> <div class="col-xs-1">col-xs-3</div> <div class="col-xs-1">col-xs-4</div> <div class="col-xs-1">col-xs-5</div> <div class="col-xs-1">col-xs-6</div> <div class="col-xs-1">col-xs-7</div> <div class="col-xs-1">col-xs-8</div> <div class="col-xs-1">col-xs-9</div> <div class="col-xs-1">col-xs-10</div> <div class="col-xs-1">col-xs-11</div> <div class="col-xs-1">col-xs-12</div> </div> </div>
兼容
兼容不同尺寸的栅格布局:
可以给一个元素添加多个栅格系统类名 在显示的时候就会根据不同尺寸的样式进行显示
<div class="row"> <!-- 1200以上 占 3个格子 992以上 占4个格子 768以上 占6个 768以下 占所有 --> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">测试</div> </div>
offset
当前列需要在原来的位置上 向后推移几个位置 不会换行
col--offset-
第一个: 屏幕尺寸
lg 超大屏幕: > 1200
md 中等屏幕: 992 < x < 1200
sm 小屏幕: 768 < x < 992
xs 超小屏幕: < 768
第二个: 占得比例 1-12
<div class="row"> <div class="col-lg-3 col-md-4 col-sm-6 col-lg-offset-3 col-md-offset-1">col-lg-3</div> <div class="col-lg-3 col-md-4 col-sm-6 col-lg-offset-12">col-lg-31</div> </div>
pull/push
push: 向后推几个格子
pull: 向前前进几个格子
col--push/pull-
<div class="row"> <div class="col-lg-3 col-md-4 col-sm-5">左</div> <div class="col-lg-9 col-md-8 col-sm-7">右</div> </div> <div class="row"> <div class="col-lg-3 col-md-4 col-sm-5 col-lg-push-9 col-md-push-8 col-sm-push-7">左</div> <div class="col-lg-9 col-md-8 col-sm-7 col-lg-pull-3 col-md-pull-4 col-sm-pull-5">右</div> </div>
列嵌套
每一个列中可以再包一个行 将当前列作为行 继续划分12格
<div class="row"> <div class="col-xs-6"> col-xs-6 <div class="row"> <div class="col-xs-1">col-xs-1</div> <div class="col-xs-1">col-xs-1</div> <div class="col-xs-1">col-xs-1</div> <div class="col-xs-1">col-xs-1</div> <div class="col-xs-1">col-xs-1</div> <div class="col-xs-1">col-xs-1</div> <div class="col-xs-1">col-xs-1</div> <div class="col-xs-1">col-xs-1</div> <div class="col-xs-1">col-xs-1</div> <div class="col-xs-1">col-xs-1</div> <div class="col-xs-1">col-xs-1</div> <div class="col-xs-1">col-xs-1</div> </div> <div class="row"> <div class="col-xs-4">col-xs-4</div> <div class="col-xs-4">col-xs-4</div> <div class="col-xs-4">col-xs-4</div> </div> </div> <div class="col-xs-6">col-xs-6</div> </div>
表单
垂直表单
<form>
<div class="form-group">
<label for="userName">姓名</label>
<input type="text" class="form-control" id="userName" placeholder="张">
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" class="form-control" id="password" placeholder="密码">
</div>
<div class="form-group">
<label for="file">头像</label>
<input type="file" id="file">
<p class="help-block">帮助说明.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 点击同意
</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
内联表单
<form class="form-inline">
<div class="form-group">
<label for="user">Name</label>
<input type="text" class="form-control" id="user" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="jane.doe@example.com">
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
水平表单
<form class="form-horizontal">
<div class="form-group">
<label for="email" class="col-sm-2 control-label">邮箱</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="two" class="col-sm-2 control-label">确认密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="two" placeholder="请再次输入密码">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> 记住我
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">登录</button>
</div>
</div>
</form>
尺寸大小
.input-lg .input-sm 以及 栅格系统列的大小控制
<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">
<select class="form-control input-lg">
<option value="bj">北京</option>
</select>
<select class="form-control">
<option value="bj">北京</option>
</select>
<select class="form-control input-sm">
<option value="bj">北京</option>
</select>
<div class="row">
<div class="col-lg-3">
<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">
<select class="form-control input-lg">
<option value="bj">北京</option>
</select>
<select class="form-control">
<option value="bj">北京</option>
</select>
<select class="form-control input-sm">
<option value="bj">北京</option>
</select>
</div>
</div>
按钮尺寸
role: 以什么样的样式显示
<!-- role: 以什么样的样式显示 -->
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
<br>
<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>
</div>
icons
Glyphicons: 免费使用
<div class="container">
<!-- 跟iconfont类似 写一个空标签 添加类名 -->
<i class="glyphicon glyphicon-ok"></i>
<i class="glyphicon glyphicon-bold"></i>
</div>
导航条
默认导航条
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<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="#">Brand</a>
</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=""><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li class="active"><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Dropdown <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">
<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" role="button" aria-haspopup="true"
aria-expanded="false">Dropdown <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><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
反色导航条
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<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="#">Brand</a>
</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=""><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li class="active"><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Dropdown <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">
<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" role="button" aria-haspopup="true"
aria-expanded="false">Dropdown <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><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
模态框
data-toggle: 以什么样的方式进行切换
data-target: 触发的模态框的id是谁
role aria-labelledby: 用于指向模态框的标题栏
data-dismiss: 操作隐藏
<!--
Button trigger modal
data-toggle: 以什么样的方式进行切换
data-target: 触发的模态框的id是谁
-->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!--
Modal
role aria-labelledby: 用于指向模态框的标题栏
data-dismiss: 操作隐藏
-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
具体的模态框的显示的内容
具体的模态框的显示的内容
具体的模态框的显示的内容
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
下拉菜单
使用
.dropdown: 下拉菜单
.dropup: 上拉菜单
data-toggle: 以什么样的方式进行切换
aria-labelledby: 指向标题
<div class="dropdown" id="myDropDown">
<button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown trigger
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dLabel">
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
</ul>
</div>
<div class="dropup">
<a id="dLabel" data-target="#" href="http://example.com/" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown trigger
<span class="caret"></span>
</a>
<ul class="dropdown-menu" aria-labelledby="dLabel">
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
</ul>
</div>
事件和方法
// $('.dropdown-menu').dropdown('toggle');
// 显示动画一开始
$('#myDropDown').on('show.bs.dropdown', function (e) {
console.log('show');
});
// 显示动画结束
$('#myDropDown').on('shown.bs.dropdown', function (e) {
console.log('shown');
});
// 隐藏动画一开始
$('#myDropDown').on('hide.bs.dropdown', function (e) {
console.log('hide');
});
// 隐藏动画结束
$('#myDropDown').on('hidden.bs.dropdown', function (e) {
console.log('hiden');
});
标签页
使用
Nav tabs
nav nav-tabs 使用标签页导航条的样式
role: 以什么样的样式展示
aria-controls：控制的标签
data-toggle: 以什么样的方式切换
<div id="myTabs">
<!--
Nav tabs
nav nav-tabs 使用标签页导航条的样式
role: 以什么样的样式展示
aria-controls：控制的标签
data-toggle: 以什么样的方式切换
-->
<ul class="nav nav-tabs" role="tablist">
<!-- href: #id 锚链接 显示对应的id的区域 -->
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab"
data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab"
data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab"
data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab"
data-toggle="tab">Settings</a></li>
</ul>
<!--
Tab panes 标签页所显示的具体的内容所在
.tab-pane active 默认显示隐藏切换
.fade .in 以透明度渐变方式切换
-->
<!-- <div class="tab-content">
<div role="tabpanel" class="tab-pane fade active in" id="home">home</div>
<div role="tabpanel" class="tab-pane fade" id="profile">profile</div>
<div role="tabpanel" class="tab-pane fade" id="messages">message</div>
<div role="tabpanel" class="tab-pane fade" id="settings">settings</div>
</div> -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">home</div>
<div role="tabpanel" class="tab-pane" id="profile">profile</div>
<div role="tabpanel" class="tab-pane" id="messages">message</div>
<div role="tabpanel" class="tab-pane" id="settings">settings</div>
</div>
</div>
事件和方法
$('#myTabs a[href="#profile"]').tab('show');
// 显示动画一开始
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
console.log('show');
});
// 显示动画结束
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
console.log('shown');
});
// 隐藏动画一开始
$('a[data-toggle="tab"]').on('hide.bs.tab', function (e) {
console.log('hide');
});
// 隐藏动画结束
$('a[data-toggle="tab"]').on('hidden.bs.tab', function (e) {
console.log('hiden');
});
轮播图
使用
<button>上一张</button><button>下一张</button>
<button>2</button>
<!--
data-target: 触发轮播图的id是谁
data-ride: carousel轮播
data-slide: 跳转到上/下一张图
-->
<div id="slideDiv" class="carousel slide" data-ride="carousel">
<!--
Indicators: 小圆点所在的位置
data-slide-to: 表示切换到第几张轮播图
-->
<ol class="carousel-indicators">
<li data-target="#slideDiv" data-slide-to="0" class="active"></li>
<li data-target="#slideDiv" data-slide-to="1"></li>
<li data-target="#slideDiv" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<!-- 显示的图片 -->
<img src="../day17/小u课堂/img/index/tbanner1.png" alt="...">
<div class="carousel-caption">
当前轮播图上的内容板块1
</div>
</div>
<div class="item">
<img src="../day17/小u课堂/img/index/tbanner2.png" alt="...">
<div class="carousel-caption">
当前轮播图上的内容板块2
</div>
</div>
<div class="item">
<img src="../day17/小u课堂/img/index/tbanner3.png" alt="...">
<div class="carousel-caption">
当前轮播图上的内容板块3
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#slideDiv" 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="#slideDiv" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
事件和方法
// 动画时间
$('.carousel').carousel({
interval: 2000
});
// 外部元素控制轮播图
$('button').eq(0).click(function () {
$('.carousel').carousel('prev');
});
$('button').eq(1).click(function () {
$('.carousel').carousel('next');
});
$('button').eq(2).click(function () {
$('.carousel').carousel(2);
});
$('button').eq(0).hover(function () {
$('.carousel').carousel('pause');
}, function () {
$('.carousel').carousel('cycle');
});
巨幕
<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 class="container">
容器
</div>
</div>
1162
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
