BootStrap 01

简介

Bootstrap是由Twitter公司(全球最大的微博)的两名技术工程师研发的

是一个基于HTML、CSS、JavaScript的开源框架。

该框架代码简洁、视觉优美，可用于快速、简单地构建基于PC及移动端设备的Web页面需求。

特点:

Bootstrap非常流行，得益于它非常实用的功能和特点。

主要核心功能特点如下：

跨设备、跨浏览器

响应式布局

提供的全面的组件

内置jQuery插件

支持HTML5、CSS3( HTML5语义化标签和CSS3 )

支持LESS动态样式

BootStrap使用步骤

下载应用于生产环境的文件包,包含如下文件:

CSS文件夹(样式文件)

fonts文件夹(字体文件)

js文件夹(JavaScript文件)

将上述下载的内容,解压后,与Jquery.js一起引入到项目中!

在HTML代码中,引入上述的文件:

核心的样式表文件

Jquery框架

bootstrap的核心脚本文件

默认页面排版的变化:

a)文字大小默认为14px .

b) line-height行高设置为了20px;

c) p标签取消了上外边距,指定了下外边距为10px(1/2行高)

d)文本颜色为333;

标题标签样式

兄弟连Java-Bootstrap框架教程副标题

//36px

兄弟连Java-Bootstrap框架教程

//30px

兄弟连Java-Bootstrap框架教程

//24px

兄弟连Java-Bootstrap框架教程

//18px

兄弟连Java-Bootstrap框架教程

//14px

兄弟连Java-Bootstrap框架教程

//12px

兄弟连Java-Bootstrap框架教程副标题

//36px

兄弟连Java-Bootstrap框架教程

//30px

兄弟连Java-Bootstrap框架教程

//24px

兄弟连Java-Bootstrap框架教程

//18px

兄弟连Java-Bootstrap框架教程

//14px

兄弟连Java-Bootstrap框架教程

//12px

内联文本样式

格式: 元素或.mark类//添加标记

兄弟连Java-Bootstrap 框架教程

//各种加线条的文本

兄弟连Java-Bootstrap框架教程 //删除的文本

兄弟连Java-Bootstrap框架教程 //无用的文本

兄弟连Java-Bootstrap框架教程 //插入的文本

兄弟连Java-Bootstrap框架教程 //效果同上，下划线文本

//各种强调的文本

兄弟连Java-Bootstrap框架教程 //标准字号的85%

兄弟连Java-Bootstrap框架教程 //加粗700

兄弟连Java-Bootstrap框架教程 //倾斜

文本对齐

class属性:

text-left:文本居左

text-center:文本居中

text-right:文本居右

text-justify:两端对其兼容差

text-nowrap:不换行

案例:

兄弟连Java-Bootstrap框架教程

兄弟连Java-Bootstrap框架教程

兄弟连Java-Bootstrap框架教程

兄弟连Java-Bootstrap框架教程

兄弟连Java-Bootstrap框架教程

大小写文本

修改class:

text-lowercase小写

text-uppercase大写

text-capitalize首字母大写

案例:

兄弟连Java-Bootstrap框架教程

//小写

兄弟连Java-Bootstrap框架教程

//大写

兄弟连Java-Bootstrap hahaha框架教程

//首字母大写

列表样式*

修改class:

list-unstyled:取消前置文字或图标

list-inline:横向排列,并取消文字和图标

案例:

床前有个老和尚

床上有个小和尚

老和尚对小和尚说

哈哈哈哈哈哈哈

床前有个老和尚

床上有个小和尚

老和尚对小和尚说

哈哈哈哈哈哈哈

代码块样式

//内联代码

//用户输入press ctrl+,

//代码块

BootStrap代码块

前景后景色***

a)文本颜色(前景色)

设置class:

text-muted:柔和灰

text-primary:主要蓝

text-success:成功绿

text-info:信息蓝

text-warning:警告黄

text-danger:危险红

背景颜色(后景色)

设置class:

bg-primary:主要蓝

bg-success:成功绿

bg-info:信息蓝

bg-warning:警告黄

bg-danger:危险红

案例:

敬业卖鞋

床前明月光

地上鞋4双

其中哔哔哔

哈哈哈哈哈

嘿嘿嘿嘿嘿

床前明月光

地上鞋4双

其中哔哔哔

哈哈哈哈哈

嘿嘿嘿嘿嘿

床前明月光

地上鞋4双

其中哔哔哔

哈哈哈哈哈

嘿嘿嘿嘿嘿

-------------------------------------------------------------------------------------------------------

表格样式***

基本表格样式*

class:table

案例:

基本表格样式

图书编号

图书名称

图书作者

图书简介

图书价格

10001

金苹果

哈哈哈

讲述了一个苹果哈哈哈哈哈的过程

19800

10002

银苹果

哈哈哈

讲述了一个苹果哈哈哈哈哈的过程

19800

10003

铜苹果

哈哈哈

讲述了一个苹果哈哈哈哈哈的过程

19800

10004

金瓶梅果

哈哈哈

讲述了一个梅果哈哈哈哈哈的过程

19800

10005

银瓶梅果

哈哈哈

讲述了一个梅果哈哈哈哈哈的过程

19800

10006

铜瓶梅果

哈哈哈

讲述了一个梅果哈哈哈哈哈的过程

19800

条纹表格样式*

class:table table-striped

案例:

基本表格样式

图书编号

图书名称

图书作者

图书简介

图书价格

10001

金苹果

哈哈哈

讲述了一个苹果哈哈哈哈哈的过程

19800

10002

银苹果

哈哈哈

讲述了一个苹果哈哈哈哈哈的过程

19800

10003

铜苹果

哈哈哈

讲述了一个苹果哈哈哈哈哈的过程

19800

10004

金瓶梅果

哈哈哈

讲述了一个梅果哈哈哈哈哈的过程

19800

10005

银瓶梅果

哈哈哈

讲述了一个梅果哈哈哈哈哈的过程

19800

10006

铜瓶梅果

哈哈哈

讲述了一个梅果哈哈哈哈哈的过程

19800

--------------------------------------------------------------------------------------------------------

给表格添加边框

给上述的表格样式,添加class:table-bordered

案例:

基本表格加边框样式

图书编号

图书名称

图书作者

图书简介

图书价格

10001

金苹果

哈哈哈

讲述了一个苹果哈哈哈哈哈的过程

19800

10006

铜瓶梅果

哈哈哈

讲述了一个梅果哈哈哈哈哈的过程

19800

条纹表格加边框样式

图书编号

图书名称

图书作者

图书简介

图书价格

10001

金苹果

哈哈哈

讲述了一个苹果哈哈哈哈哈的过程

19800

10006

铜瓶梅果

哈哈哈

讲述了一个梅果哈哈哈哈哈的过程

19800

给tr单独指定颜色:

class含义

active激活样式

success成功的绿

info信息的蓝

warning警告的黄

danger危险的红

sr-only隐藏显示

案例:

条纹表格加边框加背景颜色样式

bordered">

图书编号

图书名称

图书作者

图书简介

图书价格

10001

金苹果

哈哈哈

讲述了一个苹果哈哈哈哈哈的过程

19800

10002

银苹果

哈哈哈

讲述了一个苹果哈哈哈哈哈的过程

19800

10003

铜苹果

哈哈哈

讲述了一个苹果哈哈哈哈哈的过程

19800

10004

金瓶梅果

哈哈哈

讲述了一个梅果哈哈哈哈哈的过程

19800

10005

银瓶梅果

哈哈哈

讲述了一个梅果哈哈哈哈哈的过程

19800

10006

铜瓶梅果

哈哈哈

讲述了一个梅果哈哈哈哈哈的过程

19800