一、Bootstarp是什么？

简单、灵活的用于搭建WEB页面的HTML、CSS、JS的工具集

（基于HTML5和CSS3）
总结：简洁强大的前端开发框架，可以让WEB开发更迅速、更简单
二、如何使用Bootstarp？（获取getbootstarp.com）
Bottstarp分为2和3两个大方向版本
bootstarp2 兼容好，功能略弱
1、下载：
分别对应的是框架 、 源码 、  Sass
2、引入：
 
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- Optional theme -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified Javas cript -->

<s cript src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></s cript>

三、bootstrap包含了什么？

bootstrap/

├── css/

│   ├── bootstrap.css

│   ├── bootstrap.min.css

│   ├── bootstrap-theme.css

│   └── bootstrap-theme.min.css

├── js/

│   ├── bootstrap.js

│   └── bootstrap.min.js

└── fonts/

├── glyphicons-halflings-regular.eot

├── glyphicons-halflings-regular.svg

├── glyphicons-halflings-regular.ttf

└── glyphicons-halflings-regular.woff

 
注意：bootstarp中的JS插件依赖Jquery
因此jQunery要在bootstarp先前引入
 
四、页面模版
<!DOCTYPE html>


<html lang="en">


  <head>


    <meta charset="utf-8">


    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--在IE运行最新的渲染模式-->


    <meta name="viewport" content="width=device-width, initial-scale=1"><!--初始化移动浏览显示-->


    <!--


		viewport可以让开发者控制页面的大小和缩放


		width=device-width让宽度等于设备的宽度


		initial-scale=1 初始缩放比例	-->


    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->


    <link href="css/bootstrap.min.css" rel="stylesheet"><!--载入bootstarp的样式-->

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->


    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>


      <s cript src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></s cript>


	<!--为使IE6、7、8版本（IE9以下版本）浏览器兼容-->

      <s cript src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></s cript>


	<!--为使IE6、7、8版本浏览器兼容css3样式-->

    <![endif]-->

  </head>


  <body>


    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's Javas cript plugins) -->


    <s cript src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></s cript>


    <!-- 加入jquery -->

    <!-- Include all compiled plugins (below), or include individual files as needed -->


    <!-- 加入bootstarp -->


    <s cript src="js/bootstrap.min.js"></s cript>


  </body>


</html>


五、全局样式


在制作Web页面时，前端人员都习惯为网站设置一个全局样式（reset.css）。


bootstarp也帮你预先写好（其中包含）




  • 移除body的margin声明
    • 

  • 设置body的背景色为白色
    • 

  • 为排版设置了基本的字体、字号和行高
    • 

  • 设置全局链接颜色，且当链接处于悬浮“:hover”状态时才会显示下划线样式





六、标题元素


依旧是H1到H6，但是Bootstarp对其进行了优化




为了让非标题元素和标题使用相同的样式，还特意定义了.h1~.h6六个类名。


七、副标题


bootstarp使用<small>标签来制作副标题<h1>Hello, world!<small>Hello, world!</small></h1>


small标签要嵌套在标题标签中，否则不生效


八、段落文本（正文）


依旧是<p>


九、强调内容


如果想让一个段落p突出显示，可以通过添加类名“.lead”实现，其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。


除此之外，Bootstrap还通过元素标签:<small>、<strong>、<em>和<cite>给文本做突出样式处理。


十、加粗


可以使用<b>和<strong>标签让文本直接加粗


十一、斜体


通过使用标签<em>或<i>来实现


十二、强调相关的类




  • .text-muted：提示，使用浅灰色（#999）
    • 

  • .text-primary：主要，使用蓝色（#428bca）
    • 

  • .text-success：成功，使用浅绿色(#3c763d)
    • 

  • .text-info：通知信息，使用浅蓝色（#31708f）
    • 

  • .text-warning：警告，使用黄色（#8a6d3b）
    • 

  • .text-danger：危险，使用褐色（##a94442







十三、对齐风格




在排版中离不开文本的对齐方式。在CSS中常常使用text-align来实现文本的对齐风格的设置。其中主要有四种风格：


☑  左对齐，取值left


☑  居中对齐，取值center


☑  右对齐，取值right


☑  两端对齐，取值justify


为了简化操作，方便使用，Bootstrap通过定义四个类名来控制文本的对齐风格：


☑   .text-left：左对齐


☑   .text-center：居中对齐


☑   .text-right：右对齐


☑   .text-justify：两端对齐


十四、列表




在HTML文档中，列表结构主要有三种：有序列表、无序列表和定义列表。具体使用的标签说明如下：
无序列表


<ul>

    <li>…</li>

</ul>


有序列表


<ol>

    <li>…</li>

</ol>


定义列表


<dl>

    <dt>…</dt>

    <dd>…</dd>

</dl>


Bootstrap根据平时的使用情形提供了六种形式的列表：


☑  普通列表


☑  有序列表


☑  去点列表


☑  内联列表


☑  描述列表


☑  水平描述列表


去点列表


类： .list-unstyled


定义列表


依旧是dl dt dd


内联列表：


通过添加类名“.list-inline”来实现内联列表


水平定义列表


水平定义列表就像内联列表一样，Bootstrap可以给<dl>添加类名“.dl-horizontal”给定义列表实现水平显示效果。


十五、代码


三种代码风格：


是显示代码的风格


1、使用<code></code>来显示单行内联代码
2、使用<pre></pre>来显示多行块代码
3、使用<kbd></kbd>来显示用户输入代码


在使用代码时，用户可以根据具体的需求来使用不同的类型：
1、<code>：一般是针对于单个单词或单个句子的代码
2、<pre>：一般是针对于多行代码（也就是成块的代码）
3、<kbd>:一般是表示用户要通过键盘输入的内容










，<pre>元素一般用于显示大块的代码，并保证原有格式不变。但有时候代码太多，而且不想让其占有太大的页面篇幅，就想控制代码块的大小。Bootstrap也考虑到这一点，你只需要在pre标签上添加类名“.pre-scrollable”，就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。


十六、表格


表格是Bootstrap的一个基础组件之一，Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用Bootstrap的表格过程中，只需要添加对应的类名就可以得到不同的表格风格


Bootstrap为表格不同的样式风格提供了不同的类名，主要包括：


☑  .table：基础表格


☑  .table-striped：斑马线表格


☑  .table-bordered：带边框的表格


☑  .table-hover：鼠标悬停高亮的表格


☑  .table-condensed：紧凑型表格


☑  .table-responsive：响应式表格


表格行的类


Bootstrap还为表格的行元素<tr>提供了五种不同的类名


.active 表示当前表格的活动信息


.success 表示成功或正确的行为


.info 表示中立的信息或行为


.warning表示警告的


.danger 表示危险或错误


.table基础表格


通过添加类.table控制




.table-striped斑马线表格




实现这个效果通常要先添加 .table 和 .table-striped


.table bordered 带边框的表格




.table-hover 鼠标悬停高亮的表格


.table-condensed 紧凑表格


.table-responsive 相应表格


十七、表单


表单是Bootstrap框架中的核心内容


水平表单


Bootstrap框架默认的表单是垂直显示风格，但很多时候我们需要的水平表单风格（标签居左，表单控件居右）


1、在<form>元素是使用类名“form-horizontal”。


2、配合Bootstrap框架的网格系统。


内联表单


表单的控件都在一行内显示，在<form>元素中添加类名“form-inline”


输入框input


在Bootstrap中使用input时也必须添加type类型，如果没有指定type类型，将无法得到正确的样式，因为Bootstrap框架都是通过input[type=“?”](其中?号代表type类型，比如说text类型，对应的是input[type=“text”])的形式来定义样式的。


为了让控件在各种表单风格中样式不出错，需要添加类名“form-control”


下拉菜单select


Bootstrap框架中的下拉选择框使用和原始的一致，多行选择设置multiple属性的值为multiple


文本域textarea


文本域和原始使用方法一样，设置rows可定义其高度，设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名，则无需设置cols属性。因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto。


复选框checkbox和单选按钮radio


1、不管是checkbox还是radio都使用label包起来了


2、checkbox连同label标签放置在一个名为“.checkbox”的容器内


3、radio连同label标签放置在一个名为“.radio”的容器内


为了布局的需要，将复选框和单选按钮需要水平排列。


1、如果checkbox需要水平排列，只需要在label标签上添加类名“checkbox-inline”


2、如果radio需要水平排列，只需要在label标签上添加类名“radio-inline”


按钮


按钮也是表单重要控件之一,制作按钮通常使用下面代码来实现：


☑  input[type=“submit”]


☑  input[type=“button”]


☑  input[type=“reset”]


☑  <button>


在Bootstrap框架中的按钮都是采用<button>来实现。


表单控件大小


可以通过设置控件的height，line-height，padding和font-size等属性来实现控件的高度设置。不过Bootstrap框架还提供了两个不同的类名，用来控制表单控件的高度。这两个类名是：


1、input-sm:让控件比正常大小更小


2、input-lg:让控件比正常大小更大


表单控件状态


表单状态的作用：


每一种状态都能给用户传递不同的信息，比如表单有焦点的状态可以告诉用户可以输入或选择东西，禁用状态可以告诉用户不可以输入或选择东西，还有就是表单控件验证状态，可以告诉用户的操作是否正确等。那么在Bootstrap框架中的表单控件也具备这些状态。


焦点状态是通过伪类“:focus”来实现。Bootstrap框架中表单控件的焦点状态删除了outline的默认样式，重新添加阴影效果。


焦点状态Bootstarp自动添加


表单控件状态(禁用状态)


Bootstrap框架的表单控件的禁用状态和普通的表单禁用状态实现方法是一样的，在相应的表单控件上添加属性“disabled”。


只需要在需要禁用的表单控件上加上“disabled”


表单控件状态(验证状态)


在制作表单时，不免要做表单验证。同样也需要提供验证状态样式，在Bootstrap框架中同样提供这几种效果。


1、.has-warning:警告状态（黄色）


2、.has-error：错误状态（红色）


3、.has-success：成功状态（绿色）


使用的时候只需要在form-group容器上对应添加状态类名。








 


转载原文：http://www.zcool.com.cn/article/ZMTEzOTE2.html


 
												


											
玩转Bootstarp(连载)的更多相关文章
	

    
								
  1. UWA 技术分享连载 转载
		
    技术分享连载1 Q1:Texture占用内存总是双倍,这个是我们自己的问题,还是Unity引擎的机制? Q2:我现在发现两个因素直接影响Overhead,一个是Shader的复杂度,一个是空Updat ...
    
		
    2. 
						
  2. 玩转SpringCloud（F版本）  二．服务消费者（1）ribbon+restTemplate
		
    上一篇博客有人问我,Springcloud系列会不会连载 ,大家可以看到我的标签分类里已经开设了SpringCloud专题,所以当然会连载啦,本人最近也是买了本书在学习SpringCloud微服务框架 ...
    
		
    3. 
						
  3. Aurora学习笔记连载一：仿真平台搭建
		
    由于公司项目需要,需要学习Aurora协议,才有了这样的连载学习笔记,也算是对自己学习的一份记录吧. 对于Aurora是什么,大家自行百度. 当然,Kevin也在此先提醒大家,本套学习笔记不是你想学就 ...
    
		
    4. 
						
  4. 【书籍连载】《STM32 HAL 库开发实战指南—基于F7》-第一章
		
    从今天起,每天开始连载一章<STM32 HAL 库开发实战指南—基于F7>.欢迎各位阅读.点评.学习. 第1章  如何使用本书 1.1  本书的参考资料 本书参考资料为:<STM32 ...
    
		
    5. 
						
  5. Spring Boot 2.x（十六）：玩转vue文件上传
		
    为什么使用Vue-Simple-Uploader 最近用到了Vue + Spring Boot来完成文件上传的操作,踩了一些坑,对比了一些Vue的组件,发现了一个很好用的组件--Vue-Simple- ...
    
		
    6. 
						
  6. sql注入搞事情（连载二）
		
    sql注入(连载二)安信华web弱点测试系统注入 好多人问我sql怎么学习,我一下也说不出来.我就在此做统一的解答: sql语句分为两种,不管怎么用还是怎么学习主要是要理解SQL语句的基本概念,框架, ...
    
		
    7. 
						
  7. 开篇：免费开源的趣讲 ZooKeeper 教程（连载）
		
    本文作者:HelloGitHub-老荀 一.起因 良好的开端,是成功的一半. 我是作者老荀,一个普通的程序员,没有 985 和 211 的背景,也从没在大厂工作过.仅仅是喜欢研究技术,一直想做一个讲解 ...
    
		
    8. 
						
  8. 玩转spring boot——快速开始
		
    开发环境: IED环境:Eclipse JDK版本:1.8 maven版本:3.3.9 一.创建一个spring boot的mcv web应用程序 打开Eclipse,新建Maven项目 选择quic ...
    
		
    9. 
						
  9. [C#] 软硬结合第二篇——酷我音乐盒的逆天玩法
		
    1.灵感来源: LZ是纯宅男,一天从早上8:00起一直要呆在电脑旁到晚上12:00左右吧~平时也没人来闲聊几句,刷空间暑假也没啥动态,听音乐吧...~有些确实不好听,于是就不得不打断手头的工作去点击下 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. GridView分页功能的实现
			
    当GridView中显示的记录很多的时候,可以通过GridView的分页功能来分页显示这些记录.如果GridView是直接绑定数据库,则很简单:将"启动分页"打勾即可. 如果是用代 ...
    
			
    2. 
						
  2. 微软提供的虚拟磁盘API
			
    https://msdn.microsoft.com/en-us/library/windows/desktop/dd323684(v=vs.85).aspx https://msdn.microso ...
    
			
    3. 
						
  3. CF#52 C  Circular RMQ  （线段树区间更新）
			
    Description You are given circular array a0, a1, ..., an - 1. There are two types of operations with ...
    
			
    4. 
						
  4. MySQL具体解释（19）----------海量数据分页查询优化
			
    分页的详细解说解说请看http://blog.csdn.net/u011225629/article/details/46775947 查看代码打印1 SELECT * FROM table ORDE ...
    
			
    5. 
						
  5. 汉诺塔 python版
			
    汉诺塔问题:如果将n个盘子(由小到大)从a通过b,搬到c,搬运过程中不能出现小盘子在大盘子下面的情况. 思路分析:假设前要移动第100个盘子,分两步走,移动第99个:再移动第100个:而要移动第99个 ...
    
			
    6. 
						
  6. jQuery 插件 flexslider 初步使用
			
    发现了个不错的 jQuery 幻灯片插件 flexslider,有 接近 3000 Star,应该说是很靠谱的,下面是简单使用教程. 引入代码 所有代码都可以在 flexlslider 的 Githu ...
    
			
    7. 
						
  7. WINFORM Tootip使用小结
			
    toolTip1.Active = true;   //激活工具提示,只有激活才会显示提示 toolTip1.IsBalloon = true;    //toolTip以气泡形式出现 toolTip ...
    
			
    8. 
						
  8. 51NOD 算法马拉松8
			
    题目戳这里:51NOD算法马拉松8 某天晚上kpm在玩OSU!之余让我看一下B题...然后我就被坑进了51Nod... A.还是01串 水题..怎么乱写应该都可以.记个前缀和然后枚举就行了.时间复杂度 ...
    
			
    9. 
						
  9. Ajax学习之小结
			
    ajax: * 同步交互和异步交互:  * 同步交互:客户端发送请求——>等待服务器端处理——>接收响应,这个过程客户端不能做任何其他事情,这种模式叫做同步交互  * 异步交互:客户端发送 ...
    
			
    10. 
						
  10. centos6.5 升级python 到 python 2.7.11 安装 pip
			
    1.首先官方下载源码,然后安装(./configure,make all,make install,make clean,make distclean) 注意:需要先安装zlib-devel,open ...
    
			
    11.