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. 2函数 matlab_（2）Matlab函数“fmincon”非线性优化问题
  2. Caused by: java.net.UnknownHostException: ubuntu: Name or service not known
  3. [SpringSecurity]web权限方案_用户认证_设置用户名密码
  4. android 音频播放总结 soundlPool,MediaPlay
  5. 线性回归用matlab怎么做,matlab中如何应用regress()函数进行线性回归分析？
  6. np中meshgrid生成二维矩阵matplotlib中imshow生成图形
  7. 画ROC曲线的R包总结
  8. 运行Myeclipse时，如何删除IVM窗口
  9. S3C2440裸机------GPIO
  10. vue导出excel加一个进度条_vue 实现Excel 导入导出功能
  11. 【vue+vue-area-linkage】三级联动省市区选择器
  12. PPT放映时不能全屏播放解决方法
  13. redis下载(windows版)
  14. 使用计算机室刷卡上机,浅析高校计算机实验室综合信息管理系统
  15. IMS-FACNN(Improved Multi-Scale Convolution Neural Network integrated with a Feature Attention Mecha
  16. 西西吹雪：从程序员到项目经理（一）
  17. 吐槽支付宝红包：逼公鸡下蛋的后果
  18. linux docker 中使用 System.Drawing.Common 异常 System.Drawing.Common 仅在 Windows 上受支持
  19. 网易云音乐（2）————加载失败的原因
  20. 01-JAVA中JDK1.80的安装与配置

热门文章

  1. matlab bdir 排序,Matlab 2020b介绍及下载安装步骤
  2. 在计算机系统中使用加载器,在个人计算机系统中从软盘加载基本输入/输出系统的设备和方法...
  3. 嗅觉计算机应用,sensonic计算机嗅觉分析仪
  4. html span 字体位置,html – 如何强制span在CSS中使用父字体系列
  5. oracle循环不是a就取b,oracle数据库试题的.doc
  6. nginx php 扩展,源码安装Nginx+PHP-FPM及扩展
  7. linux下无权限安装ffmpeg-4.1.3
  8. Tensorflow 循环神经网络-时间序列表示
  9. Hadoop系列之DistributedCache用法
  10. TensorFlow神经网络（九）VGG net论文阅读笔记