关于Bootstrap的理解-白红宇

关于Bootstrap的理解

阅读量：5155 次

发布时间：2019-06-13

本文共 7087 字，大约阅读时间需要 23 分钟。

Web开发领域存在大量的反复劳动。以创建一个菜单为例，不同的人或是同一个人在不同的时期去构建一个菜单。他创建出来的菜单格式都会存在差异；随着构件的菜单越来越多，我们会发现假设将构建菜单这件事形成一个框架，以后仅仅要调用这个框架就能生成一个菜单。这样会极大地提高开发的效率。Bootstrap就是在这种环境中产生。Bootstrap是一个用于构建响应式站点的前端框架。它将HTML。CSS和Javascript结合起来，为构建稳定的站点提供了基础的设施，提高了开发效率。Bootstrap为用户提供了一套基础的组建。展示出了非常好的用户界面以及站点的交互能力。同一时候它也为用户提供了二次开发的可能性，假设你不喜欢某个bootstrap的默认界面元素，你能够通过配置LESS变量进行改动。经过一番定制，你一定能够得到适合自己须要的版本号。

Bootstrap构建站点：包含一些主要的站点框架+提前定义的CCS样式+内置的布局组件+支持的JavaScript插件。

一.站点框架这部分

A.默认网格系统的基本參数(12列。940px，不支持响应式布局等)

B.流式网格系统的列宽定义使用百分比，而不是像素(将某一行.row改成.row-fluid就会成为流式)

C.容器布局能够实现页面的固定宽度和居中的布局(<div class="container-fluid">...</div>)

D.响应式设计：针对浏览器设备对网页中的既有内容进行优化的方法。为适用不同的屏幕宽度，bootstrap使用CSS的媒体查询(media query)来检測浏览器视口的宽度。响应能力不是全部站点都需的，能够更具自己的需求进行加入和删除。

要想让bootstrap支持响应式布局，须要在<head>标签中加入<meta>标签以及<link>标签，比方：

<!doctype html>

<html>

<head>

</head>

</html>

二.提前定义的CSS样式

这一部分主要定义了网页的基本排版。表格，表单。button。图片和图标的格式的用法。重点是列表。表格，表单，button的一些用法。

【列表】：无序列表。有序列表。定义列表；

无序列表：<ul><li></li><li></li>...<li></li></ul>。能够在对应的<ul>标签中加入class="unstyled"去掉无序列表前面的圆点

有序列表：<ol><li></li><li></li>...<li></li></ol>，样式中使用数字而非圆点

定义列表：<dl><dt><dd></dd></dt><dt><dd></dd></dt>...<dt><dd></dd></dt></dl>，没有块级的<li>元素。每一个列表项由<dt>和<dd>组成；假设要让词条和解释并排显示。仅仅要给<dl>标签上加上class="dl-horizontal"就可以

【表格】：bootstrap支持的表格元素:<table><thead><tbody><tr><th><td><caption>等；假设想要一个简单的表格，内容间有少许内边距，同一时候还有水平切割线。仅仅要给<table>加入.table类就可以。会给每一个<td>上方加入边框

除了主要的.table类之外，bootstrap还提供4个类为表哥加入不同的样式:.table-striped .table-bordered .table-hover和.table-condensed分别表示：带条纹背景表格，带边框表格，带悬停高度表格和紧缩的表格

能够加入给表格行的类：.success .error .warning .info适用于<tr>

【表单】：可选的表单布局+内置支持的表单控件+扩展的表单控件+设置表单大小+表单控件状态

可选表单布局：1.搜索表单(为<form>加入.form-search类。给<input>加入.search-query类)2.行内表单(为<form>加入.form-inline类)

3.横向表单($为<form>元素加入.form-horizontal类 $成对标签和控件包装在类为.control-group的<div>中$为每一个标签加入.control-lable类$每一个控件包装在类为.controls的<div>中。以便对齐)

内置的表单控件：1.输入框<input type="text" placeholder="Text input">2.文本区<textarea rows="3"></textarea>3.复选框和单选button<checkbox><radio>(让多个复选框或单选button在一行，能够给他们加入.inline类)4.选项列表<selece multiple="multiple"></select>

扩展表单控件：输入框的前置和后置组建：首先写一个类为.input-prepend或.input-append的<div>；然后在该<div>中将前置或后置内容放到类为.add-on的<span>中；最后将<span>放到对应的<input>元素的前面或是后面就可以。

设置表单大小：1.设置输入控件的相对大小。通过在<input>中设置类为.input-mini .input-small .input-medium .input-large .input-xlarge等等

2.基于网格设置控件大小，通过在<input>中设置类为span*来基于网格设置控件大小。假设想让多个控件位列同一行，能够加入.control-row类以产生适当间距。

【button】：button能够使用以下这些类加入颜色class="..." btn btn-primary btn-info btn-success btn-warning btn-danger btn-inverse 等等，能够给连接或button加入.btn-large,.btn-small,.btn-mini类来改变button大小；加入.btn-block类使button宽度是100%;对于类.disabled能够实现禁用button操作。

三.内置的布局组件

这一部分主要解说了导航条和媒体对象等。重点介绍：下拉菜单，button组。导航。导航条以及他们之间配合使用。

【下拉菜单】：下拉菜单以列表形式<ul>呈现<ul class="dropdown-menu"><li></li><li></li>...<li></li></ul>；为类.dropdown-menu加入.pull-right类可使下拉菜单右边缘与父对象右边缘对齐。在当前下拉菜单的随意<li>元素上加入.dropdown-submenu就可以

【button组】：仅仅要把对应的链接或button放在一个类为.btn-group的<div>中就可以；假设是将多个button组放到一行上。能够使用类为.btn-toolbar的<div>来包装这些button组；要想把button垂直堆叠起来，能够在.btn-group后面加入一个.btn-group-vertical类。

【button下拉菜单】：将button和下拉菜单包装在一个.btn-group中即可，再加上一个<span class="caret"></span>.对于将下拉菜单改成上拉菜单，仅仅要在.btn-group容器中再加入一个.dropup类即可；若还想让上拉菜单与开关button右对齐，在.dropdown-menu中再加入一个.pull-right类即可

比如：<div class="btn-group">

<button class="btn btn-danger">Danger</button>(用来形成某一形式的按钮)

<button class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>(定义这一按钮为下拉按钮)

<ul class="dropdown-menu">(定义下拉菜单)

</ul>

</div>

【导航元素】：标签形导航：无序列表<ul>加入.nav和.nav-tabs类；胶囊型导航：用.nav-pills替代.nav-tabs类就可以；垂直堆叠导航：再加入一个.nav-stacked类就可以。

导航列表：带.nav类的无序列表。再加入一个.nav-list类就能够把它变成导航列表。

【导航加下拉菜单】：给一个列表项加入.dropdown类，然后给嵌套在这个列表项中的链接加入.dropdown-toggle类和data-toggle="dropdown"属性，再给嵌套在这个列表项中的无序列表元素加入.dropdown-menu类。

比如： <ul class="nav nav-tabs">

<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown<b class="caret"></b></a>

</ul>

</li>

</ul>

【可切换的标签导航】：一定要分别为每一个标签页(.tab-pane)定义一个唯一的ID，并把它们包装在.tab-content元素中。若让标签切换时有淡入淡出的动画，仅仅要给每一个.tab-pane加上.fade类就可以。标签位置能够设置：底部(.tab-below)左側(.tab-left)右側(.tab-right)

比如： <div class="tabbable">

<li class="active"><a href="#tab1" data-toggle="tab">Meats</a></li>

<li><a href="#tab2" data-toggle="tab">Fruits</a></li>

</ul>

</div>

【导航条】：为保证导航条与页面同宽。能够把它放在类为.span12或者.container的容器元素中。通过加入.navbar的类定义导航条

【导航条菜单】：为导航条加入不同辅助类，能够改变它的定位方式。

比方出如今页面顶部(.navbar-fixed-top)。底部(.navbar-fixed-bottom)。随页面滚动(.navbar-static-top)。为了让导航条具有响应能力，把须要隐藏的内容包装到类为.nav-collapse .collapse的<div>中。显示隐藏内容的button(链接)要有一个.btn-navbar类和两个data-*属性：data-toggle告诉javascript这个button做什么。data-target表示要切换的元素。若要创建反色导航条，在.navbar类后面加入.navbar-inverse类就可以。

(响应式导航条的演示样例代码)比如：

</a>

<a href="#" class="brand" >Project</a> //用来显示导航条的名字

</div>

【其它导航】：面包屑式导航：一个类为.breadcrumb的无序列表。辅助类.divider能减轻颜色。降低字号。分页导航：给<div>加入.pagination类。还能够加入.pagination-centered类使分页导航居中。前后页导航：把一个无序列表包装在一个<div>中，定义.page类或者通过给对应的列表项加入.previous和.next类

【媒体对象】有两种媒体对象：.media和.media-list。假设准备的是一个无序列表，就是用.media-list。假设准备的仅仅有一个<div>元素。那么就用.media。下面是创建媒体列表的代码。

比如： <ul class="media-list">

</a>

<h4 class="media-heading">Media heading</h4>

<div class="media"></div>(嵌套的媒体对象)

</div>

</li>

</ul>

四.支持的JavaScript插件

这里讲述了JavaScript插件。比方下拉菜单，传送带。模态框等等。它们为站点赋予交互能力，丰富了用户体验。一般来说。全部的bootstrap插件都能够使用两种方式来訪问：内置的Data API和JavaScript代码两种方式。Bootstrap开发人员希望用户通过JavaScript API使用全部插件，全部公开的API都是单个可连缀的方法，全部方法都能够接受一个可选对象，一个表示要调佣的方法字符串，或者什么參数也不接受。

比如：$('#myModal').modal('show')

这里我着重通过模态框的案例来分析怎样使用支持的javaScript插件。

【模态框】：一个叠放在父窗体上的子窗体。创建模块框：

<h3>Modal header</h3>

</div>

</div>

<a href="#" class="btn btn-primary">Save changes</a>

<a href="#" class="btn">Close</a>

</div>

关于模态框，重点是3个类。

第一个.modal：用来把一个<div>标注为模态框；第二个.hide：告诉浏览器先把模态框隐藏起来；第三个.fade：模态框从无到有或是从有到无。淡入淡出的效果。

使用bootstrap的JavaScript Data API，须要设置几个数据属性，就能够实现模态框的调用。为此在作为开关的连接或button上设置data-toggle="modal"。再把data-target="#foo"设置为模态框的ID就可以；