我的学习之路_bootstrap

aeab

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">   导航条背景换色