我的学习之路_bootstrap

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