前言

在了解这篇文章的时候
需要提前知道这些知识点
可看我之前的文章

html从入门到精通（全）
css属性从入门到精通（全）
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>

Bootstrap从入门到精通（全）相关推荐

原型设计大师：Axure RP网站与APP设计从入门到精通(全彩) 中文pdf扫描版
原型设计大师:Axure RP网站与APP设计从入门到精通内容丰富且实用,由浅入深地传授了Axure 原型设计工具在网站和APP设计中的应用与技巧,并在文中贯穿了众多精彩实战案例.书中完整展现了多个鲜 ...
Arduino从入门到精通全课时教程分享
Arduino从入门到精通全课时教程分享欢迎使用Arduino全套教程下载课程详细图片链接:https://pan.baidu.com/s/1a2xMyWa6n5de1WlRulSmYQ 提取码 ...
python从入门到精通清华_java从入门到精通(第5版)+python从入门到精通+c语言从入门到精通全3册清华大学出版社...
<JAVA从入门到精通(第5版)> <Java从入门到精通(第5版)>从初学者角度出发,通过通俗易懂的语言.丰富多彩的实例,详细介绍了使用Java语言进行程序开发需要掌握的知识 ...
xxljob从入门到精通-全网段最全解说
XXL-JOB特性一览基本概念 xxljob解决的是以下几个痛点: 1) 跑批处理监控无法可视化,当前跑批的状态是:成功?失败?挂起?进度?为什么失败/原因? 2)批处理任务不可重用,特别是无法对批 ...
云之梦php免费教学视频下载_2017年8月云知梦php入门到精通全栈开发全套教程+laravel商城...
php全栈工程师云知梦 2017.7月底更新截止. 全套教程一共172集,每天两小时深入讲解,注意只是讲,课下自己要练习,总和86天课程,直到完全掌握php后端开发从基础变量函数.mysql.缓存 ...
云知梦BootStrap重入门到精通项目实战 BootStrap基础教程共14课
<云知梦BootStrap前端框架> ├第1集 BootStrap安装和栅格系统.avi ├第2集 BootStrap排版样式.avi ├第3集 BootStrap代码.表格和表单样式.a ...
Altium Designer 20 19（入门到精通全38集）四层板智能车PCB设计视频教程AD19 AD20 凡亿----笔记
某博主笔记1 又一博主笔记2 AD18的安装教程(包括资料) AD19在进行PCB设计时,板上的元器件全部被锁定,怎么解锁? PCB各层定义 AD中关于PCB规则的设置画PCB要考虑生产:电子元件的 ...
JQuery从入门到精通(全一章)
活动地址:CSDN21天学习挑战赛文章目录学习目录 1.jQuery介绍官网地址:(https://www.bootcdn.cn/jquery/) 2.JQuery对象基本使用方法 3.Java ...
java框架零基础从入门到精通的学习路线附开源项目面经等（超全）
目录前言 1. 学习路线 2. 学习方法前言这篇文章主要总结我之前所学过的框架以及学习路线从实打实的零基础到框架再到项目之后实习工作也在这篇博客中记录我的学习笔记以及在笔记中遇到的配置安 ...
JAVA入门到精通-第94讲-山寨QQ项目8-好友在线提示
遇到的问题: 现在每登录一个人,后面的人是能看到前面的登录的人的: 但是,前面的人看不到后面的人登录: //后面每登录一个人,有责任去通知前面登录的人他已经上线了: 通知了完以后,需要更改好友在线的情 ...

Bootstrap从入门到精通（全）

目录

前言