Bootstrap从入门到精通（全）_码农研究僧的博客-程序员宅基地
技术标签： css html bootstrap 框架 javascript
前言
在了解这篇文章的时候
需要提前知道这些知识点
可看我之前的文章
这篇文章的学习主要通过
2021最新完整版Bootstrap教程（最给力的前端框架）bootstrap框架讲解-快速上手,最适合后端开发人员的bootstrap保姆级使用教程
以及参照了一些知识点的补充
Boorstrap教程网址
通过我的这篇文章可以基本了解Bootstrap的简单使用以及如何套用更加精通
关于Bootstrap的主要作用
- 是⼀套现成的 CSS 样式集合
- ⽤于开发响应式布局、移动设备优先的 WEB 项⽬
特点：
- html、css、javascript ⼯具集
- ⾃定义 JQuery 插件，完整的类库。丰富的组件
- 响应式布局设计,让⼀个⽹站可以兼容不同分辨率的设备
1. 下载安装
具体下载通过官网进行下载
之后对应什么格式引用什么文件
- 拷⻉ dist/css 中的 bootstrap.min.css 到项⽬ css 中
- 拷⻉ dist/js 中的 bootstrap.min.js 到项⽬的 js 中
html模板如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--使用X-UA-Compatible来设置IE浏览器兼容模式 最新的渲染模式-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
viewport表示用户是否可以缩放页面；
width指定视区的逻辑宽度；
device-width指示视区宽度应为设备的屏幕宽度；
initial-scale指令用于设置Web页面的初始缩放比例
initial-scale=1则将显示未经缩放的Web文档
-->
<title>Bootstrap 模板</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入 Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- 或者
<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">-->
<!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
也可以通过官网的cdn进行在线引入，但是前提每次都要联网
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
- viewport 标记⽤于指定⽤户是否可以缩放Web⻚⾯
- width 和 height 指令分别指定视区的逻辑宽度和⾼度。他们的值要么是以像素为单位的数字，要么是⼀个特殊的标记符号。
- width 指令使⽤ device-width 标记可以指示视区宽度应为设备的屏幕宽度。
- height 指令使⽤ device-height 标记指示视区⾼度为设备的屏幕⾼度。
- initial-scale 指令⽤于设置Web⻚⾯的初始缩放⽐例。默认的初始缩放⽐例值因智能⼿机浏览器的不同⽽有所差异。通常情况下设备会在浏览器中呈现出整个Web⻚⾯，设为1.0则将显示未经缩放的Web⽂档
2. 布局容器和栅格网格系统
2.1 布局容器
- container 类⽤于固定宽度并⽀持响应式布局的容器
<div class="container">
...
</div>
- container-fluid类⽤于100% 宽度，占据全部视⼝（viewport）的容器
<div class="container-fluid">
...
</div>
2.2 栅格网格系统
随着屏幕或视⼝（viewport）尺⼨的增加，系统会⾃动分为最多12列。栅格系统⽤于通过⼀系列的⾏（row）与列（column）的组合来创建⻚⾯布局，你的内容就可以放⼊这些创建好的布局中
具体设备根据如下配置
| 功能 | 超小设备手机（<768px） | 小型设备平板电脑（≥768px） | 中型设备台式电脑（≥992px） | 大型设备台式电脑（≥1200px） |
|---|---|---|---|---|
| 网格行为 | 一直是水平的 | 以折叠开始，断点以上是水平的 | 以折叠开始，断点以上是水平的 | 以折叠开始，断点以上是水平的 |
| 最大容器宽度 | None (auto) | 750px | 970px | 1170px |
| Class 前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| 列数量和 | 12 | 12 | 12 | 12 |
| 最大列宽 | Auto | 60px | 78px | 95px |
| 间隙宽度 | 30px（一个列的每边分别 15px） | 30px（一个列的每边分别 15px） | 30px（一个列的每边分别 15px） | 30px（一个列的每边分别 15px） |
| 可嵌套 | Yes | Yes | Yes | Yes |
| 偏移量 | Yes | Yes | Yes | Yes |
| 列排序 | Yes | Yes | Yes | Yes |
- 数据⾏(.row)必须包含在容器（.container）中，以便为其赋予合适的对⻬⽅式和内距(padding)。
- 在⾏(.row)中可以添加列(.column), 只有列（column）才可以作为⾏容器(.row)的直接⼦元素，但列数之和不能超过平分的总列数，⽐如12。如果⼤于12,则⾃动换到下⼀⾏
列组合
<div class="container">
<div class="row">
<div class="col-md-4">4列</div>
<div class="col-md-8">8列</div>
</div>
</div>
列偏移
<div class="container">
<div class="row">
<div class="col-md-1">1列</div>
<div class="col-md-1">2列</div>
<div class="col-md-1 col-md-offset-8">11列</div>
<div class="col-md-1">12列</div>
</div>
</div>
列排序
<div class="container">
<div class="row">
<div class="col-md-1 col-md-push-10">1列</div>
<div class="col-md-1 col-md-pull-1">1列</div>
</div>
</div>
3. 常用样式
标题
- 提供 .h1~.h6的样式名，标签设置对应的样式名则会有对应的标题效果
- 提供 .small的样式名，有副标题的效果。
<h1>h1. Bootstrap heading<small>副标题</small></h1>
<div class="h1">Bootstrap标题1<span class="small" >副标题</span></div>
段落
- 通过.lead 来突出强调内容(其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。
<small>:小号字
<b><strong>:加粗
<i><em>:斜体
<p>以后的你会感谢现在努力的你</p>
<p class="lead">以后的你会感谢现在努力的你</p>
<p class="lead"><small>以后的</small><b>你</b>会<i>感谢</i>现在<em>努力</em>的<strong>你</strong></p>
强调
强调
.text-muted：提示，使用浅灰色（#999）
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用黄色（#8a6d3b）
.text-danger：危险，使用褐色（#a94442）
对齐
对齐效果
Bootstrap通过定义四个类名来控制文本的对齐风格：
.text-left：左对齐
.text-center：居中对齐
.text-right：右对齐
.text-justify：两端对齐
关于列表
列表
- 去点列表
class=“list-unstyled” - 内联列表
class=“list-inline” - 定义列表
使用样式 class=“dl-horizontal” 制作水平定义列表 : 当标题宽度超过160px时，将会显示三个省略号
关于表格
基础样式
1）.table：基础表格
附加样式
-
.table-striped：斑马线表格
-
.table-bordered：带边框的表格
-
.table-hover：鼠标悬停高亮的表格
-
table-condensed：紧凑型表格，单元格没内距或者内距较其他表格的内距小
还有一些警告的颜色信息
<table class="table table-bordered table-striped table-hover table-condensed">
<tr class="info">
<th>JavaSE</th>
<th>数据库</th>
<th>JavaScript</th>
</tr>
<tr class="active">
<td>面向对象</td>
<td>oracle</td>
<td>json</td>
</tr>
<tr class="danger" >
<td>数组</td>
<td>mysql</td>
<td>ajax</td>
</tr>
<tr class="warning">
<td>面向对象</td>
<td>oracle</td>
<td>json</td>
</tr>
<tr class="success">
<td>数组</td>
<td>mysql</td>
<td>ajax</td>
</tr>
</table>
最后显示如下
4. 表单
4.1 控件
表单控件
- .form-control(适中)
- .input-lg（较大）
- .input-sm（较小）
- 输入框 text
演示代码如下
<div class="container">
<!-- 文本框 -->
<div class="row">
<div class="col-sm-3">
<input type="text" name="" id="" />
<input type="text" name="" id="" class="form-control" />
<input type="text" name="" id="" class="form-control input-lg" />
<input type="text" name="" id="" class="form-control input-sm" />
</div>
</div>
</div>
关于复选框 checkbox
- 垂直显示：
.checkbox - 水平显示：
.checkbox-inline
代码显示
<div class="row">
<input type="checkbox" >游戏
<input type="checkbox" >学习
<br>
<!-- 垂直显示 -->
<div>
<div class="checkbox">
<label><input type="checkbox" >游戏</label>
</div>
<div class="checkbox">
<label><input type="checkbox" >学习</label>
</div>
</div>
<!-- 水平显示 -->
<div>
<label class="checkbox-inline">
<input type="checkbox" >游戏
</label>
<label class="checkbox-inline">
<input type="checkbox" >学习
</label>
</div>
</div>
代码如同，就不给出演示了
单选框 radio
- 垂直显示：
.radio - 水平显示：
.radio-inline
关于按钮框
使用 button 实现
基础样式： btn
附加样式：btn-primary，btn-info ， btn-success， btn-warning ，btn-danger， btn-link，btn-default
按钮大小：使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮
示意代码如下
<div class="row">
<button>按钮</button>
<hr>
<button class="btn">按钮</button>
<button class="btn btn-primary">按钮</button>
<button class="btn btn-info">按钮</button>
<button class="btn btn-danger">按钮</button>
<button class="btn btn-warning">按钮</button>
<button class="btn btn-success">按钮</button>
<button class="btn btn-link">按钮</button>
<hr>
<button class="btn btn-primary btn-xs">按钮</button>
<button class="btn btn-info btn-sm">按钮</button>
<button class="btn btn-danger btn-lg">按钮</button>
<hr>
<a href="##" class="btn btn-info">a标签按钮</a>
<span class="btn btn-success">span标签按钮</span>
<div class="btn btn-warning">div标签按钮</div>
<br>
<!-- 按钮禁用-->
<!-- 样式上禁用 -->
<button class="btn btn-warning disabled" onclick="alert(1)">按钮</button>
<!-- 禁用 -->
<button class="btn btn-success" disabled="disabled" onclick="alert(1)">按钮</button>
</div>
- 文本域
textarea
4.2 布局
水平表单
- 向⽗元素添加 role=“form”
- 把标签和控件放在⼀个带有 class .form-group 的中。这是获取最佳间距所必需的
具体role的作用是
role是无障碍阅读，是给有阅读障碍的人设置的属性，有阅读障碍的人可以用读屏软件来解析，跟正常人没多大关系。可以不设置，不设置的话读屏软件就无法解析，有阅读障碍的人也就"看"不了
属性role的存在，是为了告诉Accessibility类应用（比如屏幕朗读程序，为盲人提供的访问网络的便利程序），这是一个按钮。在html5元素内，标签本身就是有语义的，因此role是不必添加的，至少是不推荐的，但是bootstrap的案例内很多都是有类似的属性和声明的，目的是为了兼容老版本的浏览器（用户代理），如果你的代码使用了html5标签，并且不准备支持老版本的浏览器，不妨不使用role标签。
内联表单
- 将表单的控件都在⼀⾏内显示form-inline
- 注意label不会显示，存在的意义：如果没有为输⼊控件设置label标签，屏幕阅读器将⽆法正确识别。
5. 插件
5.1 导航框
class 为
nav nav-tabs标签式的导航菜单nav nav-pills基本的胶囊式导航菜单pagination分页导航pager翻页导航breadcrumb面包屑导航
导航中如果有默认选中的多一个这个属性class="active"
示意代码
<ul class="nav nav-tabs">
<li> <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 class="active"><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
5.2 下拉菜单
1、使用一个类名为dropdown 或btn-group的div 包裹整个下拉框:
<div class="dropdown"></div>
2、默认向下dropdown，向上弹起加入 . dropup 即可
3、使用button作为父菜单，使用类名: dropdown-toggle 和自定义data-toggle属性
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"></button>
4、在button中 使用font 制作下拉箭头
5、下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu
6、分组分割线: <li>添加类名“divider”来实现添加下拉分隔线的功能
7、分组标题: li 添加类名 “dropdown-header” 来实现分组的功能
8、对齐方式:
1)、dropdown-menu-left 左对齐 默认样式
2)、dropdown-menu-right 右对齐
9、激活状态（.active）和禁用状态（.disabled）
具体测试代码如下
<div class="dropdown">
<!-- 按钮 -->
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
喜欢的频道
<!-- 下拉箭头的图标 -->
<span class="caret"></span>
</button>
<!-- 下拉菜单列表 -->
<ul class="dropdown-menu">
<li class="dropdown-header">——综艺——</li>
<li><a href="#">乘风破浪的姐姐们</a></li>
<li><a href="#">奇葩说</a></li>
<li><a href="#">中国有嘻哈</a></li>
<li class="divider"></li>
<li class="dropdown-header">——电影——</li>
<li><a href="#">姜子牙</a></li>
<li><a href="#">肖生克的救赎</a></li>
<li><a href="#">杀手不太冷</a></li>
</ul>
</div>
智能推荐
浙江省计算机三级网络技术2012秋,浙江省计算机三级网络技术历年真题_完整版(含答案)(2005年到2012年)..._极客有车的博客-程序员宅基地
2005年秋浙江省高等学校计算机等级考试试卷(三级，网络技术)一、计算机网络基础(本题21分)1、调制解调技术主要用于下列(1)种通信方式中。(1)A．模拟信号传输数字数据 B．模拟信号传输模拟数据C．数字信号传输数字数据 D．数字信号传输模拟数据2、在下列多路复用技术中，(2)具有动态分配时隙的功能。(2)A．同步时分多路复用 B．统计时分多路复用C．频分多路复用D．波分多路复用3、下面属于数据...
汇编学习笔记->数组的冒泡排序_dw定义数组_霜降z-的博客-程序员宅基地
编译环境:emu8086附：汇编常用跳转指令及其检测位https://blog.csdn.net/c529283955/article/details/103015482使用冒泡排序算法对数组进行升序排序由于数组中有负数，因此比较两数大小时，应当使用带符号的跳转指令。数组用dw定义时，要取下一个数的位置时，应使用bx+2，因为1个字(word)=2个字节(byte)（一）数组用db定义...
Netty傻瓜教程（四）：bossGroup, workGroup?_weixin_33978016的博客-程序员宅基地
2019独角兽企业重金招聘Python工程师标准>>> ...
软工实践结对作业-黄紫仪_王爷的大房子的博客-程序员宅基地
一：代码：git代码（exe文件还没折腾出来QAQ）二：结对：031502313黄紫仪(0.0是的没错单刷了……)三：代码相关注释相关代码：部门类public class Department { private int tId; private String tName; //部门名 private int sectionMax; //区间最大值 private ...
mysql-workbench双击后无法启动解决方案_Huuuuuui的博客-程序员宅基地
好久没更新了 这个问题我遇到了两次，一次是腾讯云服务器上，一次是我的电脑上，都是安装后点mysql-workbench没有任何反应。网上别的解决方案我就不说了，要是好使你们也不会找到这里。**很简单！你们首先去mysql-workbench得安装目的地哪里，找到这个东西**双击它！看看是不是这个结果然后去下载这个.dll文件之后把这个文件放到C:\Windows\System32 ...
随便推点
Ubuntu16.04 Anaconda安装GPU版caffe教程_ruolyn的博客-程序员宅基地
一、首先快捷键打开终端，然后创建新的虚拟环境：conda create --name caffe python=2.7二、激活caffe虚拟环境，安装caffesource activate caffeconda install caffe-gpu三、测试是否安装成功caffepythonimport caffe出新错误解决方法参照：https://blog.csdn....
c语言递归算法求解迷宫问题,c语言迷宫问题的求解(栈和递归)_仙乔的博客-程序员宅基地
迷宫问题的求解(栈和递归)实验报告【实验名称】项目一迷宫问题的求解【实验目的】1.了解栈的基本操作以及充分理解栈的特点。熟悉掌握栈的基本操作和结构体的运用。2.学会用栈或者递归方法解决迷宫问题。【实验原理】1.本次实验中，以二维数组maze[row][col]表示迷宫，0表示通路，1表示墙，在构建迷宫时，为了清晰显示，在最外层添加一圈墙。2.算法的核心思想是利用栈后进先出的特点，对迷宫进行探索，如...
Ubuntu 14.04安装bugzilla_ubuntu下bugzilla汉化_鹏城发哥的博客-程序员宅基地
1.安装apache2sudo apt-get install apache2如报错请：sudo apt-get update安装结束后：产生的启动和停止文件是：/etc/init.d/apache2启动：sudo apache2ctl -k start停止：sudo apache2ctl -k stop重新启动：sudo apache2ctl -k ...
HyperLedger Fabric中fabric-samples 安装_weixin_30820151的博客-程序员宅基地
官网文档：https://hyperledger-fabric.readthedocs.io/en/release-1.0/samples.html版本：v1.01.下载fabric-samples选择文件位置，下载fabric-samplesgit clone https://github.com/hyperledger/fabric-samples.gitcd fabr...
吴恩达机器学习 - 神经网络_snow神经网络_wangdunyi的博客-程序员宅基地
原 吴恩达机器学习 - 神经网络 2018年06月19日 21:27:17 离殇灬孤狼 阅读数：97 &amp;lt;/div&amp;gt; &amp;lt;div class=&quot;operating&quot;&amp;gt; ...
运输问题_青烟绕指柔!的博客-程序员宅基地
题目乱码。题目链接：P 4015费用流的模板题。。。。。直接按照题目建边跑一遍费用流即可（这居然是网络流24题。。。。），需要注意跑完一次网络流之后，要回归原图跑第二次。AC代码：#pragma GCC optimize(2)#include<bits/stdc++.h>#define int long longusing namespace std;const i...