一、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. js浮点数精度问题
			
    大多数语言在处理浮点数的时候都会遇到精度问题,但是在JS里似乎特别严重,来看一个例子 alert(45.6*13); 结果居然是592.800000000001,当然加法之类的也会有这个问题 那这是j ...
    
			
    2. 
						
  2. python爬虫数据抓取方法汇总
			
    概要:利用python进行web数据抓取方法和实现. 1.python进行网页数据抓取有两种方式:一种是直接依据url链接来拼接使用get方法得到内容,一种是构建post请求改变对应参数来获得web返 ...
    
			
    3. 
						
  3. 调色板类QPalette——包含了Qt窗口不见的颜色组(collor group)，和Windows右键属性外观非常类似
			
    QPalette类包含了Qt窗口不见的颜色组(collor group); 1.Active组,该组的颜色用户当前活动的(active)窗口,即具有键盘或鼠标焦点的窗口; 2.Inactive组,该组 ...
    
			
    4. 
						
  4. 航道水下地形DEM构建方法比较
			
    论文<航道水下数字高程模型的构建方法> 对航道水下地形建立DEM,技术路线:先构建TIN,手动去除多余三角边,再利用CAD ObjectARX二次开发接口中提供的几种内插方法生成grid  ...
    
			
    5. 
						
  5. java单链表代码实现
			
    用惯了C++,java写起来果然不太爽...不废话了,上代码... package javaInnerclassDemo; class Link{ class Node{ private String ...
    
			
    6. 
						
  6. STC15？MSP430？ARM？DSP？
			
    自从大学毕业以来,发现属于自己的时间越来越少,每天忙于工作,导致在大学学到的东西都好生疏,特别是大一刚开始学的模电,单片机等,现在才慢慢的抓起来,然后在这个多核处理器流行的时代,单片机貌似快过时了,但 ...
    
			
    7. 
						
  7. android专栏
			
    Android之Activity(8) Android之Adapter(1) Android之ContentProvider(1) Android之Handler(4) Android之JSON(2) ...
    
			
    8. 
						
  8. ios7高级
			
    1.实现控制器和视图. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1     ...
    
			
    9. 
						
  9. eclipse或adt-bundle创建的android项目没有自动生成MainActivity.java和activity_main.xml等文件解决办法
			
    以前我电脑一直以来都是用的eclipse3.7来开发android项目的,创建android项目也能正常生成MainActivity.java和activity_main.xml等文件.后来不知道什么 ...
    
			
    10. 
						
  10. PHPExcel 导出
			
    <?php include '../init.inc.php'; include "../db.inc.php"; /* @func 引入类 */ include ROOT. ...
    
			
    11.