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>

<meta name="viewport" content="width=device-width,initial-scale=1.0">

<link href="bootstrap-responsive.css" rel="stylesheet">

</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">(定义下拉菜单)

<li></li><li></li>...<li></li>

</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">

<li class="dropdown">

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

<ul class="dropdown-menu">

<li></li><li></li>...<li></li>

</ul>

</li>

</ul>

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

比如：    <div class="tabbable">

<ul class="nav nav-tabs">

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

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

</ul>

<div class="tab-content">

<div class="tab-pane active" id="tab1"><p></p></div>

<div class="tab-pane" id="tab2"><p></p></div>

</div>

</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类就可以。

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

<div class="header ">

<div class="navbar-inner">

<div class="container">

<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

<span class="icon-bar"><span><span class="icon-bar"><span><span class="icon-bar"><span>

</a>

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

<div class="nav-collapse collapse">

</div>

</div>

</div>

</div>

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

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

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

<li  class="media">

<a class="pull-left" href="#">

<img class="media-object" data-src="holder.js/64*64">

</a>

<div class="media-body">

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

<p>......</p>

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

</div>

</li>

</ul>

四.支持的JavaScript插件

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

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

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

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

<div class=" modal hide fade">

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

<h3>Modal header</h3>

</div>

<div class="modal-body">

<p>One fine body...</p>

</div>

<div class="modal-footer">

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

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

</div>

</div>

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

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

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

要通过JavaScript滴啊用id="myModal"的模态框，仅仅需一行：$('#myModal').modal(options)

关于模态框的几个方法：1.选项$('#myModal').modal({keyboard:false})   2.开关$('#myModal').modal('toggle')...................

关于模态框的事件：在模态框关闭之后弹出一个警告框：$('#myModal').on('hidden',function(){alert("Just do it!");})

关于Bootstrap的理解的更多相关文章

  1. Yii2框架bootstrap样式理解

    Yii2框架默认採用了bootstrap作为CSS风格,各种视图类组件都如此.之前一直採用默认风格,并在必要的时候加入或者改动一下class来达到目的.但在改版Yii1.1的orange项目时.发现之 ...

  2. bootstrap深入理解之格子布局

    一.源码文件: _grid.scss:格子系统类文件 Mixins/_grid.scss:支持格子系统实现的mixin集合 Mixins/_grid-framework.scss:格子系统实现的核心m ...

  3. 从零开始学Bootstrap(3)

    首先让我们回顾一下系列内容. 从零开始学Bootstrap(1)介绍了BootStrap最简单的模板,逐条解释了每行代码的含义. 从零开始学Bootstrap(2)强调了边学边做,通过实际的例子,讲解 ...

  4. 旺财速啃H5框架之Bootstrap（六）

    年后太忙,一直没有更新 好,这篇结束,速啃嘛,就应该拿重点,实用点.继续之前的内容,接着来讲讲网页中常用的布局组件与插件,我喜欢用简单的直接的话或案例来说明,就是针对那些想快速能做出点东西的人而准备的 ...

  5. bootstrap基本用法

    进入中文官网:http://www.bootcss.com   开始第一个Demo   准备工作: (1)进入bootstrap中文官网,点击起步 (2)下载生产环境         下载好的文件是一 ...

  6. bootstrap学习之路

    接触bootstrap也半年有余,从一开始不知道如何使用,到知道其各个模块的具体功能,再到提炼哪些使用的比较多,再此又体会到bootstrap源码的精髓,通过oocss写的类使其感觉更有易用性,开始本 ...

  7. 面试&笔试常见题，你了解多少？

    HTML:1.  什么是语义化的HTML?有何意义?为什么要做到语义化?(高频率考题)2.  行内元素和块元素分别有哪些?(高频率)3.  严格模式与混杂模式的区分?如何触发这两种模式?(高频率)4. ...

  8. HTML5+CSS3项目总结

      经过一个月的学习,我基本掌握了HTML5的一些标签的用法和特性,以及一些CSS3的属性的特点和用法. 在本周安排的为期四天的第一阶段的课程的项目实训中,我基本能够熟练运用学到的知识,完成页面的速度 ...

  9. 手机自动化测试:Appium代码之Logger

    手机自动化测试:Appium代码之Logger   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.poptest推出手机自动化测 ...

随机推荐

  1. Percona Toolkit工具集介绍

    部署mysql工具是一个非常重要的部分,所以工具的可靠性和很好的设计非常重要.percona toolkit是一个有30多个mysql工具的工具箱.兼容mysql,percona server,mar ...

  2. Zookeeper研究和应用

    http://www.searchtb.com/2011/01/zookeeper-research.html zookeeper简介 zookeeper是一个开源分布式的服务,它提供了分布式协作,分 ...

  3. EL表达式中fn函数

    JSTL 使用表达式来简化页面的代码,这对一些标准的方法,例如bean的getter/setter方法,请求参数或者context以及 session中的数据的访问非常方便,但是我们在实际应用中经常需 ...

  4. FFMPEG音视频解码

    文章转自:https://www.cnblogs.com/CoderTian/p/6791638.html 1.播放多媒体文件步骤 通常情况下,我们下载的视频文件如MP4,MKV.FLV等都属于封装格 ...

  5. FFmpeg命令添加视频字幕

    FFmpeg添加字幕 首先需要科普下.vob,mkv等格式文件以流的形式存储字幕,而mp4不支持这种方式.如果希望生成带字幕的mp4文件,只能将字幕“烧录”到视频中. 也就是说我们需要将字幕流与视频流 ...

  6. Scrapy见面第五天

    这算是我第一次使用框架吧,说来羞愧. 此前用Request带上cookie实现.(略微)完好了QQ空间的爬虫(传送门),接下来想实现分布式去爬. 事实上仅仅要能实现待爬QQ队列的共享,分布式的主要问题 ...

  7. 【Android】15.5 例15-3—Notification的各种属性演示

    分类:C#.Android.VS2015: 创建日期:2016-02-29 一.简介 利用这个例子,可测试通知的各种属性以及这些不同属性选项呈现的效果. 另外,在这个例子中,还演示了如何读写SD中的图 ...

  8. android.animation(2) - ValueAnimator的 Interpolator 和 Evaluator

    一.插值器 插值器,也叫加速器:有关插值器的知识,我在<Animation动画详解(二)——Interpolator插值器>中专门讲过,大家可以先看看这篇文章中各个加速器的效果.这里再讲一 ...

  9. django如何给上传的图片重命名(给上传文件重命名)

    1.先在你项目中添加一个文件夹如:system 在文件夹下添加__init__.py 和storage.py文件,并在storage.py中添加如下代码: # -*- coding: UTF-8 -* ...

  10. MultipartEntity 乱码

    MultipartEntity multipartEntity = new MultipartEntity(HttpMultipartMode.BROWSER_COMPATIBLE, null, Ch ...