Bootstarp总结
Bootstrap
Bootstrap，一个前端的开发框架， 来自Twitter，基于HTML、CSS、JavaScript，方便前端开发。css
是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。html
固然，这个主用于响应式网页的开发。前端
响应式布局
响应式和自适应的区别？
响应式：1套代码
示例网站：https://www.intel.cn/content/www/cn/zh/homepage.html
https://worktile.com/
自适应：多套代码，根据不一样的设备加载不一样的代码
示例网站：大部分的网站都有，由于如今的人用手机太多了html5
响应式网页的不足：
内容不宜过多，只适合一些展现类网站，代码量变大了，复杂了。不能有过于复杂的动画jquery
响应式/自适应网页的测试：
1.浏览器自带的模拟器
优势：简单方便
缺点：结果要进一步肯定
2.真实物理设备测试
iphone 4 4s 5 5s 5c 6 6p 6s 6sp 7 7p 8 x xr xs
安卓 同样买一个
pad ipad 同样买一个
windows
winphonecss3
优势：测试真实可靠
缺点：成本高，测试任务量极大
3.电脑上自带的手机模拟器效果bootstrap
响应式网站如何编写：
1.必须声明viewport（重点重点）
<meta name="viewport" content="width=device-width,initial-scale=1.0">
2.使用流式布局
float:left , display:inline-block
3.文字，图片，容器...使用相对尺寸（70%，em，rem），不要使用绝对尺寸（px）
em是一个相对单位，相对父元素
rem是一个相对单位，相对于页面的根元素，即html
谷歌浏览器的最小号字体为12px，若是不足12，所有显示为12，别的浏览器没有限制
font-size: 62.5%; 大部分浏览器的默认字体为16px，62.5就是10pxwindows
font-size: 100px;
4.最重要的原则：媒体查询技术 css3中的内容 media query
写响应式的时候通常不须要去管高度，高度让其本身去变化，响应式确定是不会有横向的滚动条，纵向就不必定了浏览器
css3中的媒体查询
根据不一样的设备，查询到不一样的代码，而后执行，不须要刷新前端框架
全局css样式
网格系统
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增长，系统会自动分为最多12列。
工做原理：
行必须放置在 .container class 内，以便得到适当的对齐（alignment）和内边距（padding）。
使用行来建立列的水平组。
内容应该放置在列内，且惟有列能够是行的直接子元素。
预约义的网格类，好比 .row 和 .col-xs-4，可用于快速建立网格布局。LESS 混合类可用于更多语义布局。
列经过内边距（padding）来建立列内容之间的间隙。该内边距是经过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
网格系统是经过指定您想要横跨的十二个可用的列来建立的。例如，要建立三个相等的列，则使用三个 .col-xs-4。
步骤：
定义容器，至关于HTML的table，容器分为container（有固定的宽度）、container-fluid（100%的宽度）
定义行，至关于HTML的tr，样式：row
定义元素，指定该元素在不一样的设备上占用的格子数，样式：col-设备代号-格子数目
xs：超小屏幕，手机，如，col-xs-12
sm：小屏幕，平板
md：中等屏幕，桌面显示器
lg：大屏幕，大桌面显示器
<!DOCTYPE html>
<!-- 1.指定语言的类型 -->
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<!-- 2.设置meta标签，为了兼容老版本的IE -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 3.必须项，设置视口 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>栅格系统</title>
<!-- 4.引入bootstrap的主文件 -->
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.css">
<!-- 5.处理兼容性的js文件
cssHack 条件注释法 -->
<!--[if lt IE 9]>
<script src="bootstrap-3.3.5-dist/js/html5shiv.min.js"></script>
<script src="bootstrap-3.3.5-dist/js/respond.min.js"></script>
<![endif]-->
<style>
div{
border: 1px solid #000;
}
</style>
</head>
<body>
<!-- “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中 -->
<div class="container">
<!-- 一行中有一列 -->
<div class="row">
<div class="col-md-1">col-md-1</div>
</div>
<div class="row">
<div class="col-md-2">col-md-2</div>
</div>
<div class="row">
<div class="col-md-3">col-md-3</div>
</div>
<div class="row">
<div class="col-md-4">col-md-4</div>
</div>
<div class="row">
<div class="col-md-5">col-md-5</div>
</div>
<div class="row">
<div class="col-md-6">col-md-6</div>
</div>
<div class="row">
<div class="col-md-7">col-md-7</div>
</div>
<div class="row">
<div class="col-md-8">col-md-8</div>
</div>
<div class="row">
<div class="col-md-9">col-md-9</div>
</div>
<div class="row">
<div class="col-md-10">col-md-10</div>
</div>
<div class="row">
<div class="col-md-11">col-md-11</div>
</div>
<div class="row">
<div class="col-md-12">col-md-12</div>
</div>
<!-- 一行中有多列 -->
<div class="row">
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
</div>
<div class="row">
<div class="col-md-2">col-md-2</div>
<div class="col-md-2">col-md-2</div>
<div class="col-md-2">col-md-2</div>
<div class="col-md-2">col-md-2</div>
<div class="col-md-2">col-md-2</div>
<div class="col-md-2">col-md-2</div>
</div>
<!-- 针对不一样的屏幕进行设计 -->
<div class="row">
<div class="col-lg-3">col-lg-3</div>
</div>
<div class="row">
<div class="col-md-3">col-md-3</div>
</div>
<div class="row">
<div class="col-sm-3">col-sm-3</div>
</div>
<div class="row">
<div class="col-xs-3">col-xs-3</div>
</div>
<!-- 变宽 -->
<!-- 大屏幕的时候占一份 -->
<!-- 中等屏幕的时候占三分 -->
<!-- 小屏幕的时候占六分 -->
<!-- 超小屏幕的时候占十分 -->
<div class="row">
<div class="col-lg-1 col-md-3 col-sm-6 col-xs-10">宽度是能够变化的</div>
</div>
<!-- 列的偏移 使用的是margin-->
<div class="row">
<div class="col-md-2">LOGO</div>
<!-- <div class="col-md-3"></div> -->
<div class="col-md-3 col-md-offset-7">
<input type="text" style="width: 100%" placeholder="请输入你想搜索的内容">
</div>
</div>
<!-- 列的排序 使用的是相对定位中的left，是不会影响其余的列的-->
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
<!-- 列的显示和隐藏 -->
<div class="row">
<div class="col-xs-5 hidden-xs">col-xs-5</div>
</div>
</div>
<!--
.col-xs- 超小屏幕 手机 (<768px)
.col-sm- 小屏幕 平板 (≥768px)
.col-md- 中等屏幕 桌面显示器 (≥992px)
.col-lg- 大屏幕 大桌面显示器 (≥1200px) -->
<!-- 6.引入jquery，由于bootstrap是依赖于jquery，因此jquery必须放在前面先加载 -->
<!-- 最好使用bootstrap本身带的jquery -->
<script src="bootstrap-3.3.5-dist/js/jquery-1.11.3.js"></script>
<!-- 7.引入bootstrap中所须要用到的JavaScript插件 -->
<script src="bootstrap-3.3.5-dist/js/bootstrap.js"></script>
</body>
</html>
排版
Bootstrap 使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 做为其默认的字体栈。
使用 Bootstrap 的排版特性，您能够建立标题、段落、列表及其余内联元素。
代码
第一种是 <code> 标签。若是您想要内联显示代码，那么您应该使用 <code> 标签。
第二种是 <pre> 标签。若是代码须要被显示为一个独立的块元素或者代码有多行，那么应该使用 <pre> 标签
确保使用 <pre> 和 <code> 标签时，开始和结束标签使用了 unicode 变体： < 和 >。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 代码</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<p><code><header></code> 做为内联元素被包围。</p>
<p>若是须要把代码显示为一个独立的块元素，请使用 <pre> 标签：</p>
<pre>
<article>
<h1>Article Heading</h1>
</article>
</pre>
</body>
</html>
表格
Bootstrap 提供了一个清晰的建立表格的布局。下表列出了 Bootstrap 支持的一些表格元素：
| 标签 | 描述 |
|---|---|
| <table> | 为表格添加基础样式。 |
| <thead> | 表格标题行的容器元素（<tr>），用来标识表格列。 |
| <tbody> | 表格主体中的表格行的容器元素（<tr>）。 |
| <tr> | 一组出如今单行上的表格单元格的容器元素（<td> 或 <th>）。 |
| <td> | 默认的表格单元格。 |
| <th> | 特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在 <thead> 内使用。 |
| <caption> | 关于表格存储内容的描述或总结。 |
表格类
下表样式可用于表格中：
| 类 | 描述 |
|---|---|
| .table | 为任意 <table> 添加基本样式 (只有横向分隔线) |
| .table-striped | 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持) |
| .table-bordered | 为全部表格的单元格添加边框 |
| .table-hover | 在 <tbody> 内的任一行启用鼠标悬停状态 |
| .table-condensed | 让表格更加紧凑 |
<tr>, <th> 和 <td> 类
下表的类可用于表格的行或者单元格：
| 类 | 描述 |
|---|---|
| .active | 将悬停的颜色应用在行或者单元格上 |
| .success | 表示成功的操做 |
| .info | 表示信息变化的操做 |
| .warning | 表示一个警告的操做 |
| .danger | 表示一个危险的操做 |
表单
Bootstrap 提供了下列类型的表单布局：
垂直表单（默认）
内联表单
水平表单
全部设置了 .form-control类的<input> 、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。
将 label 元素和前面提到的控件包裹在 .form-group 中能够得到最好的排列。
内联表单：为 <form> 元素添加 .form-inline 类可以使其内容左对齐，表单元素在一行排列。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。
必定要添加 label 标签
水平排列表单 ： 为表单添加 .form-horizontal 类，能够将 label 标签和控件组水平并排布局。
输入框：括大部分表单控件、文本输入域控件，还支持全部 HTML5。
类型的输入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。（只有正确设置了type、属性的输入控件才能被赋予正确的样式）
文本域：<textarea class="form-control" rows="3"></textarea> 能够经过改变 row 属性值改变文本域大小。
多选框和单选框：默认堆叠排列。经过将 .checkbox-inline或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可使这些控件排列在一行。
下拉列表：为 <select>添加类 .form-control ，能够显示Bootstrap设置的默认样式。对于标记了 multiple属性的 <select>控件来讲，默认显示多选项。
静态控件：若是须要在表单中将一行纯文本和 label 元素放置于同一行，为<p> 元素添加 .form-control-static 类。
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." autofocus>
禁用状态：
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
被禁用的 filedset ：为<fieldset>设置 disabled 属性,能够禁用 <fieldset> 中包含的全部控件。
只读状态：
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
状态检验：状态包括 error ,warning , success 状态。Bootstrap为这些状态都定义了默认样式。使用时，.has-warning、.has-error 或 .has-success 类到这些控件的父元素便可。任何包含在此元素以内的 .control-label、.form-control 和.help-block元素都将接受这些校验状态的样式.
添加额外的图标: 设置相应的.has-feedback 类并添加正确的图标.
控件尺寸：经过 .input-lg 相似的类能够为控件设置高度，经过.col-lg-* 相似的类能够为控件设置宽度。经过添加 .form-group-lg 或 .form-group-sm类，为.form-horizontal 包裹的 label 元素和表单控件快速设置尺寸。
按钮
如下样式可用于<a>, <button>, 或 <input> 元素上：
| 类 | 描述 |
|---|---|
| .btn | 为按钮添加基本样式 |
| .btn-default | 默认/标准按钮 |
| .btn-primary | 原始按钮样式（未被操做） |
| .btn-success | 表示成功的动做 |
| .btn-info | 该样式可用于要弹出信息的按钮 |
| .btn-warning | 表示须要谨慎操做的按钮 |
| .btn-danger | 表示一个危险动做的按钮操做 |
| .btn-link | 让按钮看起来像个连接 (仍然保留按钮行为) |
| .btn-lg | 制做一个大按钮 |
| .btn-sm | 制做一个小按钮 |
| .btn-xs | 制做一个超小按钮 |
| .btn-block | 块级按钮(拉伸至父元素100%的宽度) |
| .active | 按钮被点击 |
| .disabled | 禁用按钮 |
下表列出了得到各类大小按钮的 class：
| Class | 描述 |
|---|---|
| .btn-lg | 这会让按钮看起来比较大。 |
| .btn-sm | 这会让按钮看起来比较小。 |
| .btn-xs | 这会让按钮看起来特别小。 |
| .btn-block | 这会建立块级的按钮，会横跨父元素的所有宽度。 |
下表列出了让按钮元素和锚元素呈禁用状态的 class：
| 元素 | Class |
|---|---|
| 按钮元素 | 添加 disabled 属性 到 <button> 按钮。 |
| 锚元素 | 添加 disabled class 到 <a> 按钮。 |
图片
.img-rounded：添加 border-radius:6px 来得到图片圆角。
.img-circle：添加 border-radius:50% 来让整个图片变成圆形。
.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。
如下类可用于任何图片中。
| 类 | 描述 |
|---|---|
| .img-rounded | 为图片添加圆角 (IE8 不支持) |
| .img-circle | 将图片变为圆形 (IE8 不支持) |
| .img-thumbnail | 缩略图功能 |
| .img-responsive | 图片响应式 (将很好地扩展到父元素) |
响应式图片
经过在 <img> 标签添加 .img-responsive 类来让图片支持响应式设计。 图片将很好地扩展到父元素。
.img-responsive 类将 max-width: 100%; 和 height: auto; 样式应用在图片上：
辅助类
如下不一样的类展现了不一样的文本颜色。若是文本是个连接鼠标移动到文本上会变暗：
| 类 | 描述 |
|---|---|
| .text-muted | "text-muted" 类的文本样式 |
| .text-primary | "text-primary" 类的文本样式 |
| .text-success | "text-success" 类的文本样式 |
| .text-info | "text-info" 类的文本样式 |
| .text-warning | "text-warning" 类的文本样式 |
| .text-danger | "text-danger" 类的文本样式 |
插件概览
在前面 布局组件 章节中所讨论到的组件仅仅是个开始。Bootstrap 自带 12 种 jQuery 插件，扩展了功能，能够给站点添加更多的互动。即便您不是一名高级的 JavaScript 开发人员，您也能够着手学习 Bootstrap 的 JavaScript 插件。利用 Bootstrap 数据 API（Bootstrap Data API），大部分的插件能够在不编写任何代码的状况下被触发。
站点引用 Bootstrap 插件的方式有两种：
- 单独引用：使用 Bootstrap 的个别的 *.js 文件。一些插件和 CSS 组件依赖于其余插件。若是您单独引用插件，请先确保弄清这些插件之间的依赖关系。
插件弹出框
<div class="container">
<button type="button" class="btn btn-lg btn-danger" data-trigger="hover" data-toggle="popover" data-content="And here's some amazing content. It's very engaging. Right?" >点我弹出/隐藏弹出框</button>
</div>
插件收放效果
<div class="container">
<a href="#Mytarget" data-toggle="collapse">展开和收起</a>
<button data-toggle="collapse" data-target="#Mytarget">展开/收起</button>
<div class="collapse" id="Mytarget">
<div class="well">
<p>HTML</p>
<p>css</p>
<p>JavaScript</p>
</div>
</div>
</div>
模态框
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" 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>
方法
modal(options)
将页面中的某块内容做为模态框激活。接受可选参数object。
$('#myModal').modal({
keyboard: false
})
modal('toggle')
//手动打开或关闭模态框。在模态框显示或隐藏以前返回到主调函数中（也就是，在触发shown.bs.modal或hidden.bs.modal事件以前） $('#myModal').modal('toggle')
.modal('show')
手动打开模态框。在模态框显示以前返回到主调函数中（也就是，在触发shown.bs.modal事件以前）。
$('#myModal').modal('show')
.modal('hide')
//手动隐藏模态框。在模态框隐藏以前返回到主调函数中（也就是，在触发hidden.bs.modal事件以前）。 $('#myModal').modal('hide')
轮播图
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- 指示符 -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- 轮播图片 -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg">
</div>
<div class="carousel-item">
<img src="https://static.runoob.com/images/mix/img_nature_wide.jpg">
</div>
<div class="carousel-item">
<img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg">
</div>
</div>
<!-- 左右切换按钮 -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
- 1. BootStarp
- 2. Vue中引入jquery bootstarp bootstarp-table (vue 2.0)
- 3. Bootstarp-table入门
- 4. 初探bootstarp
- 5. bootstarp-select 级联
- 6. BootStarp模版
- 7. bootstarp后台皮肤
- 8. Bootstarp栅格布局
- 9. bootstarp modal 宽度设置
- 10. BootStarp制作导航条demo
- 更多相关文章...
- • Docker 资源汇总 - Docker教程
- • XML 总结 下一步学习什么呢？ - XML 教程
- • 算法总结-双指针
- • 算法总结-回溯法
-
每一个你不满意的现在，都有一个你没有努力的曾经。