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!");})

转载于:https://www.cnblogs.com/lxjshuju/p/7285430.html

关于Bootstrap的理解相关推荐

  1. Yii2框架bootstrap样式理解

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

  2. Bootstrap开篇理解:

    PS:本人为新手,该文章仅作为笔记记载学习 1.什么是Bootstrap? Bootstrap是Twitter公司推出的,专门用于开发响应式布局,移动设备优先的WEB框架 (美国Twitter公司的设 ...

  3. bootstrap 点击按钮刷新_Spring Cloud 中的 Bootstrap 上下文

    学习目标 复习 Spring 事件/监听器模式(ApplicationEvent / ApplicationListener) 理解 Bootstrap 上下文 理解 Spring Boot / Sp ...

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

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

  5. 机器学习中的模型评价、模型选择及算法选择

    链客,专为开发者而生,有问必答! 此文章来自区块链技术社区,未经允许拒绝转载. 正确使用模型评估.模型选择和算法选择技术无论是对机器学习学术研究还是工业场景应用都至关重要.本文将对这三个任务的相关技术 ...

  6. netty Demo

    今天写了一个helloworld版本的netty程序,跟大家分享一下: 首先需要的包是:netty-all-4.1.25.Final.jar 客户端: StrClient.java package c ...

  7. springboot配置文件加载顺序_「SpringBoot系列」配置文件加载优先级解析

    SpringBoot提供了外部分配置功能,可以使用属性文件(properties).YAML(yml)文件.环境变量和命令行参数来进行处部参数配置,并t以特定的顺序来处理配置,以便于允许合理的覆盖值. ...

  8. python读mongodb很慢_Python3.5+Mongodb+Flask Web实战坑点小结【Dog Plus】

    我不是程序员,也不是设计师,我只是碰巧有一些想法和一台电脑. I am not a designer nor a coder. I'm just a guy with a point-of-view ...

  9. linux 建树软件,新一代建树工具IQ-Tree介绍

    系统发育树(phylogenetic tree)构建的软件可谓五花八门.大体上,有如下几种策略:从最简单的UPGMA法,到邻接法(neighbor joining),最大简约法(most parsim ...

最新文章

  1. Linux多线程同步——信号量
  2. 在.NET开发中的单元测试工具之(1)——NUnit
  3. CentOS7中yum安装mysql_CentOS7中YUM 安装mysql
  4. JFree chart
  5. 简单的MVC与SQL Server Express LocalDB
  6. 请设计输出实数的格式，包括：⑴一行输出一个实数；⑵一行内输出两个实数；⑶一行内输出三个实数。实数用quot;6.2fquot;格式输出。
  7. 【计算机网络】链路与连通
  8. AGC 012 B - Splatter Painting
  9. Java课程设计---Eclipse基本环境配置
  10. 项目中关于IFRAME引发的问题【出现率很高】
  11. 一文彻底搞懂BP算法：原理推导+数据演示+项目实战（上篇）
  12. python检验多重共线性_python从机器学习角度处理共线性
  13. UE4 键盘控制开关灯
  14. rip路由协议计算机网络实验报告,RIP 动态路由协议的配置(实验报告).doc
  15. 光模块第一节之模块的制作和测试环境搭建
  16. 揭秘经典案例炼成之道 微信开发者大会精华回顾
  17. 解决Pycharm 多线程时出现错误Process finished with exit code -1073741819 (0xC0000005)
  18. 快速找出一个数组中的两个数字，让这两个数字之和等于一个给定的值
  19. 爬虫(数据采集与预处理课程)
  20. 根据百度地图API自定义切换地图类型为卫星或普通

热门文章

  1. 【Java 编程】文件操作，文件内容的读写—数据流
  2. python qt库,用于 Python 的高级 GUI 库(Qt 和 PyQt)(1)Unix系统 -电脑资料
  3. c51随机数不重复_怎么让51单片机产生随机数？
  4. 两台电脑怎么共享_怎么在电脑上创建共享文件（必须是在同一个网段）
  5. kafka zookeeper java_简单搭建kafka + zookeeper，附简单Java生产和消费客户端
  6. linux socket 结构定义 send,Linux下Socket编程中用send发送结构体
  7. centos8 ssh配置_JumpServer 堡垒机CentOS 8 安装部署（四）
  8. GB/T 28181-2016与GB/T 28181-2011变更对比
  9. mysql 忘记密码处理方式
  10. oracle9i 是否安全,指纹识别与Oracle 9i安全特性解析