前端框架之BootStrab

Bootstrap

简介:

概述:

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

注意: Bootstrap是基于jquery开发的,在使用时需要引入jquery的js文件.

作用:

1.开发响应式的页面

2.节约开发成本,提高开发效率

注释:

响应式:就是一个网页能够兼容多个终端

入门:

下载BootStrap:

www.bootcss.com 官网地址

模版★

1.导入BootStrap的css

2.导入jquery的js文件(1.8+)

3.导入BootStrap的js

4.设置视口(支持移动设备)

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

5.添加一个布局容器

给div设置一个 class属性:

class="container" 固定宽度

class="container-fluid" 类似于100%

组成部分-核心:

全局CSS:

作用:

设置全局 CSS 样式；基本的 HTML 元素均可以通过 class 设置样式并得到增强效果；还有先进的栅格系统。

媒体查询(了解):

动态获取终端设备的分辨率

分辨率	屏幕大小
分辨率 >= 1200px	超大屏幕
992px <= 分辨率 < 1200px	中等屏幕
768px <= 分辨率 < 992px	小屏幕
分辨率 < 768px	超小屏幕

栅格系统★:

作用:

在不同分辨率的屏幕下展示不同的效果,根据不同的上网设备,栅格系统将屏幕分成一系列的行(row)和列(column),由行和列来创建页面布局,注意栅格系统必须放在布局容器内使用.

行: 设置div单独占一行

class = "row" // 给div添加class="row"

列: 设置div占据当前行的份数 (一行12份)

n: 所占份数

class属性的值	屏幕大小	分辨率
col-lg-n	大屏	分辨率 >= 1200px
col-md-n	中屏	992px <= 分辨率 < 1200px
col-sm-n	小屏	768px <= 分辨率 < 992px
col-xs-n	超小屏	分辨率 < 768px

响应式工具:

显示:

.visible-xs 超小屏可见

.visible-sm 小屏可见

.visible-md 中等屏幕可见

.visible-lg 大屏可见

隐藏:

.hidden-xs 超小屏时隐藏

.hidden-sm 小屏幕时隐藏

.hidden-md 中等屏幕时隐藏

.hidden-lg 大屏幕时隐藏

按钮:★

.btn 为按钮添加基本样式

.btn-default 默认/标准按钮

.btn-primary 原始按钮样式（未被操作）

.btn-success 表示成功的动作

.btn-info 该样式可用于要弹出信息的按钮

图片:

.img-rounded 为图片添加圆角 (IE8 不支持)

.img-circle 将图片变为圆形 (IE8 不支持)

.img-responsive 图片响应式

表单:

垂直表单:

内联表单:(将所有内容放在同一行)

水平表单:

表格:

.table 普通表格

.table-striped 条纹表格(IE8不支持)

.table-bordered 边框表格

.table-hover 带有鼠标悬停的表格

.table-condensed 紧缩表格

文本对齐方式:

.text-left 左对齐

.text-center居中

.text-right 右对齐

组件:

导航条:

分页组件:

javaScript插件:

模态框:

data-toggle="modal" ​ 打开模态框的功能

data-target="#id值" 或 =".类名" ​ 指定需要打开的id或类名来打开模态框

data-dismiss="modal" ​ 关闭模态框的功能

图片轮播:

Nginx服务器:

作用:部署静态页面

• start nginx : 启动Nginx服务器

• nginx -s reload : 重新启动Nginx服务器

• nginx -s stop : 停止Nginx服务器