本文引用慕课网http://www.imooc.com/learn/141  作者大漠  讲的很详细,我没有全篇都引用,其中很多是添加了自己的一些理解.

Bootstrap框架是基于JQuery 所以使用Bootstrap之前必须要引用JQuery,针对其优点这里引用一下其他大神对Bootstrap的评价

☑  简单灵活可用于架构流行的用户界面和交互接口的html、css、javascript工具集。

☑  基于html5、css3的bootstrap，具有大量的诱人特性：友好的学习曲线，卓越的兼容性，响应式设计，12列格网，样式向导文档。

☑  自定义JQuery插件，完整的类库，基于Less等。

不难看出除了基于JQuery之外还大量使用了Less和Scss,我觉得大部分CSS3样式基本都使用了样式框架Less和Scss所以想去了解这个框架的同学最后也去看看这两个样式框架,这里不得不提到浏览器兼容性问题因为这个框架本身比较新2011年才退出的所以支持IE8以上版本如下:

bootstrap模板为使IE6、7、8版本（IE9以下版本）浏览器兼容html5新增的标签，引入下面代码文件即可。

<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

同理为使IE6、7、8版本浏览器兼容css3样式，引入下面代码：

<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

        <title>Bootstrap的HTML标准模板</title>

        <!-- Bootstrap -->

        <link href="css/bootstrap.min.css" rel="stylesheet">

        <!--你自己的样式文件 -->

        <link href="css/your-style.css" rel="stylesheet">

        <!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->

        <!--[if lt IE 9]>

        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

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

        <![endif]-->

    </head>

    <body>

        <h1>Hello, world!</h1>

        <!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->

        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>

        <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->

        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

    </body>

</html>

总结标签部分样式变化:

一.标题标签

1、重新设置了margin-top和margin-bottom的值，  h1~h3重置后的值都是20px；h4~h6重置后的值都是10px。
2、所有标题的行高都是1.1（也就是font-size的1.1倍）,而且文本颜色和字体都继承父元素的颜色和字体。
3、固定不同级别标题字体大小，h1=36px，h2=30px，h3=24px，h4=18px，h5=14px和h6=12px。

为了非标题字体作用同时也设置了不同的字体样式

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>标题（一）</title>

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

</head>

<body>

<!--Bootstrap中的标题-->

<h1>Bootstrap标题一</h1>

<h2>Bootstrap标题二</h2>

<h3>Bootstrap标题三</h3>

<h4>Bootstrap标题四</h4>

<h5>Bootstrap标题五</h5>

<h6>Bootstrap标题六</h6>

<!--Bootstrap中让非标题元素和标题使用相同的样式-->

<div class="h1">Bootstrap标题一</div>

<div class="h2">Bootstrap标题二</div>

<div class="h3">Bootstrap标题三</div>

<div class="h4">Bootstrap标题四</div>

<div class="h5">Bootstrap标题五</div>

<div class="h6">Bootstrap标题六</div>

<!--任务填写下方-->

</body>

</html>

标题与副标题<small>标签

1、行高都是1，而且font-weight设置了normal变成了常规效果（不加粗），同时颜色被设置为灰色（#999）。
2、由于<small>内的文本字体在h1~h3内，其大小都设置为当前字号的65%；而在h4~h6内的字号都设置为当前字号的75%；
详细代码请参阅bootstrap.css文件中第407行~第443行。

二.段落正文

全局字体一般设置14px在body的样式中设置的,背景颜色之类的都在里面设置的,这里着重说一下<P>标签,P标签做了一个特殊处理加了margin标签使上下文P标签之间有个10px的空格.

1、全局文本字号为14px(font-size)。

2、行高为1.42857143（line-height），大约是20px(大家看到一串的小数或许会有疑惑，其实他是通过LESS编译器计算出来的，当然Sass也有这样的功能)。

3、颜色为深灰色（#333）；

4、字体为"Helvetica Neue", Helvetica, Arial, sans-serif;（font-family），或许这样的字体对我们中文并不太合适，但在实际项目中，大家可以根据自己的需求进行重置，在此我们不做过多阐述，我们回到这里。该设置都定义在<body>元素上，由于这几个属性都是继承属性，所以Web页面中文本（包括段落p元素）如无重置都会具有这些样式效果。

/*源码请查看bootstrap.css文件中第274行~280行*/

body {

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

font-size: 14px;

line-height: 1.42857143;

color: #333;

background-color: #fff;

}

另外在Bootstrap中，为了让段落p元素之间具有一定的间距，便于用户阅读文本，特意设置了p元素的margin值（默认情况之下，p元素具有一个上下外边距，并且保持一个行高的高度）：
/*源码请查看bootstrap.css文件中第467行~469行*/

p {

 margin: 0 0 10px;

}

作为强调字体也做了相应的处理除了常用的strong,small,cite之外另外还有lead样式用于语句强调作用
.lead {

margin-bottom: 20px;

font-size: 16px;

font-weight:;

line-height: 1.4;

}

@media (min-width: 768px) {/*大中型浏览器字体稍大*/

.lead {

font-size: 21px;

  }

}

Bootstrap还通过元素标签:<small>、<strong>、<em>和<cite>给文本做突出样式处理。
/*源码查看bootstrap.css文件第55行~第58行*/

b,strong {

  font-weight: bold; /*文本加粗*/

}

/*源码查看bootstrap.css文件第481行~第484行*/

small,.small {

  font-size: 85%; /*标准字体的85%,也就是14px * 0.85px，差不多12px*/

}

/*源码查看bootstrap.css第485行~第487行*/

cite {

font-style: normal;

}
还有关于斜体字体的描述基本变化不是特别大不知道的同学可以去慕课网上看看<em>标签相关的知识
强调内容的相关颜色这个框架页给出了几种样式供大家学习:

在Bootstrap中除了使用标签<strong>、<em>等说明正文某些字词、句子的重要性，Bootstrap还定义了一套类名，这里称其为强调类名（类似前面说的“.lead”）,这些强调类都是通过颜色来表示强调，具本说明如下：

  • .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：两端对齐




												


											
Bootstrap框架(基础篇)的更多相关文章
	

    
						
  1. Bootstrap框架(基础篇)之列表,表格,表单
		
    继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇 除了HTML提供的三种基本列表样式: 无序列表 <ul> <li>… ...
    
		
    2. 
						
  2. Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单
		
    一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...
    
		
    3. 
								
  3. 【SSM之旅】Spring+SpringMVC+MyBatis+Bootstrap整合基础篇（一）项目简介及技术选型相关介绍
		
    试水 一直想去搭建个自己的个人博客,苦于自己的技术有限,然后也个人也比较懒散.想动而不能动,想动而懒得动,就这么一直拖到了现在.总觉得应该把这几年来的所学总结一番,这样才能有所成长. 不知在何时,那就 ...
    
		
    4. 
						
  4. easyui框架--基础篇（一）-->数据表格datagrid（php与mysql交互）
		
      前  言  php  easyui框架--本篇学习主要是 easyui中的datagrid(数据表格)框架. 本篇学习主要通过讲解一段代码加GIF图片学习datagrid(数据表格)中的一些常用属 ...
    
		
    5. 
						
  5. SpringBoot+thymeleaf+security+vue搭建后台框架   基础篇（一）
		
    刚刚接触SpringBoot,说说踩过的坑,主要的还是要记录下来,供以后反省反省! 今天主要讲讲 thymeleaf+security 的搭建,SpringBoot的项目搭建应该比较简单,这里就不多说 ...
    
		
    6. 
						
  6. Bootstrap框架基础
		
    特点:写非常少的代码 即可实现多终端的页面适配 ☑  简单灵活可用于架构流行的用户界面和交互接口的html.css.javascript工具集. ☑  基于html5.css3的bootstrap,具 ...
    
		
    7. 
						
  7. ABP框架实践基础篇之开发UI层
		
    返回总目录<一步一步使用ABP框架搭建正式项目系列教程> 说明 其实最开始写的,就是这个ABP框架实践基础篇.在写这篇博客之前,又回头复习了一下ABP框架的理论,如果你还没学习,请查看AB ...
    
		
    8. 
						
  8. UI设计实战篇——利用Bootstrap框架制作查询页面的界面
		
    Bootstrap框架是一个前端UI设计的框架,它提供了统一的UI界面,简化了设计界面UI的过程(缺点是定制了界面,调整的余地不是太大).尤其是现在的响应时布局(我的理解是页面根据不同的分辨率,采用不 ...
    
		
    9. 
						
  9. JAVA基础第五章-集合框架Map篇
		
    业内经常说的一句话是不要重复造轮子,但是有时候,只有自己造一个轮子了,才会深刻明白什么样的轮子适合山路,什么样的轮子适合平地! 我将会持续更新java基础知识,欢迎关注. 往期章节: JAVA基础第一 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. ODOO-10.0 错误 Could not execute command 'lessc'
			
    2017-01-05 20:24:12,473 4652 INFO None odoo.service.db: Create database `hello`. 2017-01-05 20:24:16 ...
    
			
    2. 
						
  2. HTTP状态代码含义
			
    1.200:正常. 2.201:服务器已经创建了文档,Location头给出了它的URL. 3.202:已经接受请求,但处理尚未完成. 4.203:文档已经正常返回,但一些应答头可能不正确,因为使用的 ...
    
			
    3. 
						
  3. 博客开篇：随笔《从windows到linux的转变》。
			
    在QQ群里讨论到了WINDOWS和LINUX.MAC,用手机码了如下回复,索性转过来当做博客的开篇.:) unix 和linux 在外很火的主要原因是开源,国外崇尚自由的精神是从出生就在细胞里的,而w ...
    
			
    4. 
						
  4. Bash之PS1配置
			
    今天想调整以下PS1的显示,查看了很多文档后有些收获.Bash有可自定义的4类提示: PS1 在每个命令之前显示的主提示符,因此它是每个人都不同的. PS2 当一个命令需要更多的输入(例如,一个多行命 ...
    
			
    5. 
						
  5. jquery之实例应用
			
    Query是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多),对javascript进行了封装,是的更加便捷的开发,并且在兼容性方面十分优 ...
    
			
    6. 
						
  6. ZIP4J---ZIP文件压缩与解压缩学习
			
    package com.wbh.common.utils; import java.io.File; import java.io.FileInputStream; import java.io.IO ...
    
			
    7. 
						
  7. Linux GCC常用命令
			
    1简介 2简单编译 2.1预处理 2.2编译为汇编代码(Compilation) 2.3汇编(Assembly) 2.4连接(Linking) 3多个程序文件的编译 4检错 5库文件连接 5.1编译成 ...
    
			
    8. 
						
  8. 自动化运维：网站svn代码上线更新（flask+saltstack）
			
    阶段性总结:      跌跌撞撞的用了一周左右的时间做完了网站自动升级功能,中间遇到了很多的问题,也学到了很多,在此做一个总结.   1.整体架构: 后台:nginx+uwsgi  #nginx提供w ...
    
			
    9. 
						
  9. 【MVC】ASP.NET MVC Forms验证机制
			
    http://www.cnblogs.com/bomo/p/3309766.html 随笔 - 121  文章 - 0  评论 - 92 [MVC]ASP.NET MVC Forms验证机制 ASP. ...
    
			
    10. 
						
  10. 浅谈mybatis中的#和$的区别
			
    1. #将传入的数据都当成一个字符串,会对自动传入的数据加一个双引号.如:order by #user_id#,如果传入的值是111,那么解析成sql时的值为order by "111&qu ...
    
			
    11.