前端 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

　　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 超大屏幕隐藏

相关推荐