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