Bootstrap框架学习之---介绍、排版样式

今天开始学习bootstrap框架，做为一名java后台工程师，励志要学会网站开发的全过程技术。写博客既是分享也是对自己的一个监督，业精于勤荒于嬉。

学习要点:

1.bootstrap简介和安装使用

2.排版样式

3.表格和按钮

1、框架介绍和安装使用

bootstrap是一个基于HTML、CSS、Javascript的开源框架，可用于快速、简单的构建基于PC及移动端设备的web页面框架。广泛适用于企业中的项目。其最大的优势在于响应式布局，可以使页面在PC端、PAD端以及手机移动端的兼容访问，无需单独再开发相应的布局。

1.1、特点

(1)跨设备、跨浏览器：可以兼容所有浏览器，包括IE7以上的所有版本。

(2)响应式布局：同一页面可以在PC、PAD以及手机等屏幕上响应式切换显示。

(3)提供全面的组件：包含了导航、标签、工具条、按钮等一系列的组件的css样式、js组件等。大大节省开发者的开发时间。

(4)内置jQuery插件：提供了很多很实用的jquery插件，因此使用bootstrap框架需要jQuery包的支持。

(5)支持html5和css3。

1.2、下载和简单使用

bootstrap下载地址：http://v3.bootcss.com (免费下载)

下载成功后将得到一个压缩包，解压即可。

简单使用教程：因个人开发习惯使用eclipse，所以直接在eclipse中测试。将解压后的文件，取出其中css和js文件夹里的相关文件，引入项目即可，具体细节请看截图。

2、排版样式

2.1、页面主体

bootstrap将全局font-size设置为了14px，line-height行高设置为了20px，并且默认所有的标签的padding和margin属性为0px，<p>段落标签被设置为10px的行高，字体颜色是#333。使用bootstrap的段落标签，直接用<p>就可以。

2.2、标题标签

并且还支持普通内联元素通过定义class的方式来实现相同的功能，如<span class="h1">bootstrap框架</span>,另外，还可以使用<small>标签设置父标题。以下为演示：

2.3、文本对齐方式

以下的知识点，因难度不大，不放效果图，只记录代码，有兴趣可以直接敲一遍试试

2.4、设置英文文本大小写

<p class="text-lowercase">Bootstrap 框架</p> //小写<p class="text-uppercase">Bootstrap 框架</p> //大写<p class="text-capitalize">Bootstrap 框架</p>//首字母大写

2.5、列表排版

//移出默认样式<ul class="list-unstyled"><li>Bootstrap 框架</li><li>Bootstrap 框架</li><li>Bootstrap 框架</li><li>Bootstrap 框架</li><li>Bootstrap 框架</li></ul>//设置成内联<ul class="list-inline"><li>Bootstrap 框架</li><li>Bootstrap 框架</li><li>Bootstrap 框架</li><li>Bootstrap 框架</li><li>Bootstrap 框架</li></ul>//水平排列描述列表<dl class="dl-horizontal"><dt>Bootstrap</dt><dd>Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。</dd></dl>

2.6、页面中显示代码

//内联代码<code><section></code>//用户输入press <kbd>ctrl + ,</kbd>//代码块<pre><p>Please input...</p></pre>