Bootstrap框架
Bootstrap介绍
Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。
它是为实现快速开发Web应用程序而设计的一套前端工具包。
它支持响应式布局，并且在V3版本之后坚持移动设备优先。
响应式Web设计(Responsive Web design)的理念是：
页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。
Bootstrap：各种命名都统一并且规范化。 页面风格统一，画面和谐。
下载：
官方地址：https://getbootstrap.com
中文地址：http://www.bootcss.com/
Bootstrap中文文档：https://v3.bootcss.com/getting-started/
bootstrap的导入
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面。-->
<meta name="viewport" content="width=device-width, initial-scale=1"> <!--移动端适配(手机)-->
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- 导入Bootstrap样式 -->
<link href="bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<h1>你好，世界！</h1>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="jquery.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="bootstrap-3.3.7/js/bootstrap.js"></script>
</body>
</html>
布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。提供了两个作此用处的类。
注意，由于 padding 等属性的原因，这两种容器类不能互相嵌套。
.container 类用于固定宽度并支持响应式布局的容器。
<div class="container">
...
</div>
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
<div class="container-fluid">
...
</div>
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局
工作原理：
“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
通过“行（row）”在水平方向创建一组“列（column）”。
你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-* 不存在， 也影响大屏幕设备。
媒体查询
是界面为了适应不同屏幕大小而存在的，在栅格系统中，在 Less 文件中使用以下媒体查询（media query）来创建关键的分界点阈值。
超小屏幕（手机，小于 768px）
没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？）
小屏幕（平板，大于等于 768px）
@media (min-width: @screen-sm-min) { ... }
中等屏幕（桌面显示器，大于等于 992px）
@media (min-width: @screen-md-min) { ... }
大屏幕（大桌面显示器，大于等于 1200px）
@media (min-width: @screen-lg-min) { ... }<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">
<style>
body {
margin: 0;
}
.c1 {
background: red;
height: 100px;
}
/*媒体查询-当你的屏幕小与700px时就会变成蓝色*/
@media screen and (max-width:700px){
.c1 {
background-color: deepskyblue;
}
}
</style>
</head>
<body>
<div class="c1"></div>
<!--下面是导入的js-->
<script src="jquery.js"></script>
<script src="bootstrap-3.3.7/js/bootstrap.js"></script>
</body>
</html>
栅格参数：
row表示行，必须放在container或container-fluid中(.container(固定宽度).container-fluid(100%宽度))
row被均分成12列， 列的语法是col-xx-**
xx的取值范围：xs->sm->md->lg
**的取值范围：1~12
只有列能作为行的直接子元素
列偏移
col-xx-offset-**
列嵌套
任意一列，都可以在内部在定义row,均分成12份
列排序
col-xx-push-** 把左边的推到右边
col-xx-pull-** 把右边的拉到左边
屏幕大小排序：lg(大桌面显示器)>md(桌面显示器，电脑)>sm(平板)>xs(手机)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">
</head>
<body>
<div class="container-fluid" style="height: 1000px;background-color: blue">
<!--建立的容器，类型是100%宽，1000高，背景颜色蓝色-->
<div class="row">
<!--row表示行,col表示列，66开-->
<div class="col-md-6" style="background-color: orange;height: 100px;"></div>
<div class="col-md-6" style="background-color: pink;height: 100px;"></div>
</div>
<div class="row">
<!--row表示行,col表示列，2 10开-->
<div class="col-md-2" style="background-color: orange;height: 100px;"></div>
<div class="col-md-10" style="background-color: pink;height: 100px;"></div>
</div>
<div class="row">
<!--row表示行,col表示列，28开，剩下的2为背景颜色-->
<div class="col-md-2" style="background-color: orange;height: 100px;"></div>
<div class="col-md-8" style="background-color: pink;height: 100px;"></div>
</div>
<div class="row">
<!--row表示行,col表示列，分为12份-->
<div class="col-md-1" style="background-color: orange;height: 100px;"></div>
<div class="col-md-1" style="background-color: pink;height: 100px;"></div>
<div class="col-md-1" style="background-color: orange;height: 100px;"></div>
<div class="col-md-1" style="background-color: pink;height: 100px;"></div>
<div class="col-md-1" style="background-color: orange;height: 100px;"></div>
<div class="col-md-1" style="background-color: pink;height: 100px;"></div>
<div class="col-md-1" style="background-color: orange;height: 100px;"></div>
<div class="col-md-1" style="background-color: pink;height: 100px;"></div>
<div class="col-md-1" style="background-color: orange;height: 100px;"></div>
<div class="col-md-1" style="background-color: pink;height: 100px;"></div>
<div class="col-md-1" style="background-color: orange;height: 100px;"></div>
<div class="col-md-1" style="background-color: pink;height: 100px;"></div>
</div>
<div class="row">
<!--row表示行,col表示列，10 10的话分两行显示，后面的表示在手机端的显示效果-->
<div class="col-md-10 col-xs-6" style="background-color: orange;height: 100px;"></div>
<div class="col-md-10 col-xs-6" style="background-color: pink;height: 100px;"></div>
</div>
<div class="row">
<!--row表示行,col表示列，超过12不认识，不认识即12-->
<div class="col-md-13" style="background-color: orange;height: 100px;"></div>
<div class="hhhh" style="background-color: pink;height: 100px;"></div>
</div>
<div class="row">
<!--row表示行,col表示列，offset列偏移，即列间距 左边空出多少列-->
<div class="col-md-4 col-md-offset-4 col-xs-offset-4" style="background-color: green;height: 100px"></div>
</div>
<div class="row">
<!--row表示行,col表示列，push表示往左边推8列，pull表示往右边拉四列-->
<div class="col-md-4 col-md-push-8" style="background-color: deeppink;height: 100px"></div>
<div class="col-md-8 col-md-pull-4" style="background-color: orange;height: 100px"></div>
</div>
</div>
<script src="jquery.js"></script>
<script src="bootstrap-3.3.7/js/bootstrap.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">
</head>
<body>
<div class="container">
<h1>段友出征<small>寸草不生</small></h1>
<!--使用<small>标签包裹,其内的文本将被设置为父容器字体大小的85%-->
<p>清风拂杨柳，敢问是段友。啤酒小龙虾，段友是一家。</p>
<p class="lead">清风<strike>拂</strike>杨柳，敢问是<strong>段友</strong>。啤酒小龙虾，<mark>段友</mark>是一家。</p>
<!--lead主题，字体变大。strike表示删除，strong表示加粗，mark表示加亮-->
<p class="text-lowercase">Twgdh Ydrwm</p>
<p class="text-uppercase">Twgdh Ydrwm</p>
<p class="text-capitalize">Twgdh ydrwM</p>
<!--text-lowercase文本全部小写,uppercase全部大写,capitalize首字母大写-->
<address>
<strong>重金求子</strong><br>
东京村 世外桃源<br>
日本省,4444<br>
<abbr title="Phone">Tel:</abbr>(123)456-789
</address>
<!--address地址,abbr缩略语 点击后显示title内容-->
<address>
<strong>王sir</strong>
<a href="mailto:#">wangsir@police.com</a>
</address>
<blockquote class="blockquote-reverse">
<p>打工是不可能打工的,这辈子都不可能打工的。</p>
<footer>周大哥</footer>
</blockquote>
<!--名人名言系列，blockquote-reverse增加效果-->
<ul class="list-unstyled">
<li>一</li>
<li>二</li>
</ul>
<ul class="list-inline">
<li>一</li>
<li>二</li>
</ul>
<!--list-unstyled竖着正常显示无序列表，list-inline一行显示-->
<code><div></code>
<!--正常显示div的方法，大于小于特殊写-->
<p>按住<kbd>shift</kbd>进入加速模式！</p>
<!--通过 <kbd> 标签标记用户通过键盘输入的内容-->
<pre>
print('Hello world')
fmt.Print('Hello World')
</pre>
<!--<pre>正确展示代码块-->
</div>
<script src="jquery.js"></script>
<script src="bootstrap-3.3.7/js/bootstrap.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">
</head>
<body>
<div class="container"> <!--容器-->
<table class="table table-striped table-bordered table-hover table-condensed">
<thead> <!--增加斑马条纹样式，增加边框，让每一行对鼠标悬停状态作出响应，让表格更加紧凑-->
<tr>
<th>#</th>
<th>姓名</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr class="active"> <!--鼠标悬停在行或单元格上时所设置的颜色-->
<td>1</td>
<td>小明</td>
<td>男</td>
</tr>
<tr class="success"> <!--绿色-->
<td>2</td>
<td class="danger">小一</td> <!--红色-->
<td>男</td>
</tr>
<tr class="info"> <!--蓝色-->
<td>1</td>
<td class="warning">小二</td> <!--黄色-->
<td>男</td>
</tr>
</tbody>
</table>
</div>
<hr>
<img src="james.png" class="img-rounded"> <!--圆角矩形-->
<img src="james.png" class="img-circle"> <!--圆形-->
<img src="james.png" class="img-thumbnail"> <!--矩形-->
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">
<style>
body {
background-color: #eeeeee;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4" style="margin-top: 77px;">
<h2 class="text-center">欢迎登录</h2>
<form>
<div class="form-group"> <!--将label元素和前面提到的控件包裹在.form-group中可以获得最好的排列-->
<label for="exampleInputEmail1">邮箱</label> <!--如果你没有为每个输入控件设置label标签，屏幕阅读器将无法正确识别-->
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
<!--所有设置了.form-control类的<input>、<textarea>和<select>元素都将被默认设置宽度属性为width:100%-->
<span class="help-block"></span>
</div>
<div class="form-group">
<label for="exampleInputEmail1">密码</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
<!--采取placeholder属性将内联表单隐藏-->
<span class="help-block"></span>
</div>
<div class="checkbox">
<label>
<input type="checkbox">记住
</label>
</div>
<button type="submit" id="login-btn" class="btn btn-success btn-block">登录</button>
</form>
</div>
</div>
</div>
<script src="jquery.js"></script>
<script>
$('#login-btn').click(function () {
var flag=true;
$('form input').each(function () {
var value=$(this).val();
if (value.length===0){
var errMsg=$(this).prev().text()+'不能为空';
$(this).next().text(errMsg);
$(this).parent().addClass('has-error');
flag = false;
return false;
}
});
return flag
});
$('form input').focus(function () {
$(this).next().text('');
$(this).parent().removeClass('has-error');
})
</script>
</body>
</html>
<!-- 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>
<p>
<button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
<button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
<button type="button" class="btn btn-default">（默认尺寸）Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
<button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
<button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
</p>
文本颜色
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>
背景颜色
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>
关闭按钮
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
下拉三角
<span class="caret"></span>
快速浮动
<div class="pull-left">...</div>
<div class="pull-right">...</div>
内容块居中
<div class="center-block">...</div>
清除浮动
<!-- Usage as a class -->
<div class="clearfix">...</div>
显示与隐藏
<div class="show">...</div>
<div class="hidden">...</div>
清风深知杨柳意，啤酒龙虾难相聚。
浙公网安备 33010602011771号