bootstrap

内置了html,css,js插件为一体的前端框架

响应式布局:

设计一套页面就可以使用于很多现实设备

bootstrap:

1.入门(响应式布局的容器)

1.先进入jQuery的js

2.再引入bootstrap的js

3.引入bootstrap的css文件

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

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

5.页面创建一个布局容器

<div class="container"> </div> (不流动)

<div class="container-fluid" > </div> (流动)

了解:css的媒体查询

默认情况 有个设置的阈值价格屏幕分辨率分为几个区间

分辨率: 屏幕大小

分辨率>1200px 大屏幕

1200px>分辨率>992px 中等的屏幕

992px>分辨率>768px 小屏幕

768px>分辨率 超小屏幕

栅格系统: 根据屏幕分辨率的大小而页面做出不同的显示效果

一行会被平均分成12份,如果多与12份另起一行

分辨率: 屏幕大小 样式 例如

分辨率>1200px 大屏幕 col-lg-n col-lg-1

1200px>分辨率>992px 中等的屏幕 col-md-n col-md-2

992px>分辨率>768px 小屏幕 col-sm-n col-sm-4

768px>分辨率 超小屏幕 col-xs-n col-xs-6

还提供隐藏元素div样式

hidden-xs (超小屏隐藏)

hidden-sm (小屏隐藏)

hidden-md (中等屏隐藏)

hidden-lg (大屏下隐藏)

bootstrap组成:

全局的css样式:设置全局css样式;基本的HTML元素均可以通过class设置并增强效果,还有先进的栅格系统.

组件:

js插件

class="btn btn-primary 超链接按钮框

img-circle 图片样式

pull-left 靠左

pull-right 靠右

<nav class="navbar navbar-inverse" role="navigation"> 导航条背景换色