Bootstrap从入门到精通（全）_码农研究僧_bootstrap精通

未知 02-07 8041

目录前言1. 下载安装2. 布局容器和栅格网格系统2.1 布局容器2.2 栅格网格系统 3. 常用样式4. 表单4.1 控件4.2 布局 5. 插件5.1 导航框5.2 下拉菜单

前言

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

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">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <title>Bootstrap 模板</title> <meta name="viewport" content="width=device-width, initial-scale=1.0">  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">     </head> <body> <h1>Hello, world!</h1>  <script src="https://code.jquery.com/jquery.js"></script>  <script src="js/bootstrap.min.js"></script> </body> </html>

也可以通过官网的cdn进行在线引入，但是前提每次都要联网

<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">  <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> 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)750px970px1170pxClass 前缀.col-xs-.col-sm-.col-md-.col-lg-列数量和12121212最大列宽Auto60px78px95px间隙宽度30px（一个列的每边分别 15px）30px（一个列的每边分别 15px）30px（一个列的每边分别 15px）30px（一个列的每边分别 15px）可嵌套YesYesYesYes偏移量YesYesYesYes列排序YesYesYesYes

数据?(.row)必须包含在容器（.container）中，以便为其赋予合适的对??式和内距(padding)。在?(.row)中可以添加列(.column), 只有列（column）才可以作为?容器(.row)的直接?元素，但列数之和不能超过平分的总列数，?如12。如果?于12,则?动换到下??

列组合

列偏移

列排序

<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

演示代码如下

关于复选框 checkbox

垂直显示： .checkbox水平显示： .checkbox-inline

代码显示

代码如同，就不给出演示了

单选框 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 包裹整个下拉框:

2、默认向下dropdown，向上弹起加入 . dropup 即可 3、使用button作为父菜单，使用类名: dropdown-toggle 和自定义data-toggle属性

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>