前端 Bootstrap基础
====================================
响应式布局 http://four.haser.top/
Bootstrap
====================================
Flex 流布局
概念：
一个网站能够兼容多种终端（PC、手机、平板、车机系统、电视、巨幕），
而不是为每一个终端定制一个特定的版本。
响应式布局就是为不同终端互联网浏览而诞生的。
响应式主要从css入手
@media 媒体(设备)
CSS3实现响应式布局：
<meta name="viewport"
content="width=device-width,.....,maximum-scale=1.0">
<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
width=device-width 将设备的宽度赋值给width
height=device-height
user-scalable=no 禁用用户端缩放
initial-scale=1.0 初始缩放值为1倍
minimum-scale=1.0 最小缩放值为1倍
maximum-scale=1.0 最大缩放值为1倍
屏幕分辨率
1680×1050
1920×1080
CSS3媒体查询
语法：
@media not|only 媒体类型 逻辑符号 (媒体特性表达式)
{
CSS样式代码
}
逻辑符号 一般是判断设备宽度
@media (min-width: 500px) {
div {
width: 300px;
height: 300px;
background-color: red;
}
}
@media (min-width: 800px) {
div {
width: 300px;
height: 300px;
background-color: red;
}
}
@media (min-width: 800px) and (max-width: 1600px){
div {
width: 300px;
height: 300px;
background-color: red;
}
}
比如：
●常见媒体类型：
参见 media-type.html
●媒体特性：
参见 media-features.html
设备宽度和高度
页面宽度和高度
设备的物理宽/高度 和 像素宽/高度
手机屏幕是几.几英寸(物理)
网页中的字体大小
16px 1em
em 有上级元素有依赖关系
rem --- root rem CSS3
<div style="font-size:5em">
<div style="font-size:2em">
字体大小就成10em
</div>
</div>
<div style="font-size:5rem">
<div style="font-size:2rem">
字体大小就成2em
</div>
</div>
前端后台模板
x-admin 目前免费
==========================
Bootstrap
==========================
概述：
来自Twitter，是目前最受欢迎的前端框架之一。
基于HTML、CSS、Javascript。
简洁灵活，使得Web开发更加快捷。
下载：
http://getbootstrap.com/
参考网站：
Bootstrap中文网
http://www.bootcss.com/
v3.3.7版本
bootstrap-3.3.7-dist.zip
css(响应式布局)
js
fonts
一、bootstrap安装
将css、js、fonts目录复制到网站的根目录
jquery
二、bootstrap页面框架
基本页面框架
简单：只需要在head标签中引入相关资源
<link rel="stylesheet" href="css/bootstrap.css" charset="UTF-8">
<script src="js/bootstrap.js" type="text/javascript" charset="UTF-8"></script>
扩展：
适合不同的设备：
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
width=device-width 网页的宽度自动适应手机屏幕的宽度
可以让不支持H5的浏览“支持”H5
如果是IE9以下的版本，则引用以下JS文件
html5shiv.js
respond.js
<!--[if lt IE 9]>
<![endif]-->
Normalize.css 可选引入
保证bootstrap的样式在不同的浏览器中保持一致
三、bootstrap——全局CSS样式
1.布局容器
container 类样式(根据屏幕在左右留出一部分空白)
container-fluid 类样式(占满整个屏幕宽度)
2.网格布局——栅格布局
row 类样式(行)
col-**-** 类样式(列)
col-**-offset-** 列偏移
col-xs-** 超小屏幕——手机 (**值从1-12)
col-sm-** 小屏幕——平板...
col-md-** 中型屏幕——PC
col-lg-** 大屏幕——超大显示器
辅助类：
文字辅助类：
text-muted 浅色
text-primary 主要的
text-success 成功
text-info 描述、信息
text-warning 警告
text-danger 危险
响应式布局工具：
*一般使用block
.visible-xs-* 只在手机中可见
.visible-sm-* 只在平板中可见 768
.visible-md-* 只在PC中可见 996
.visible-lg-* 只在超大屏幕中可见 1200
.hidden-xs 手机隐藏
.hidden-sm 平板隐藏
.hidden-md PC隐藏
.hidden-lg 超大屏幕隐藏
