bootstrap响应式网页
相应式网页
bootstrap中文版：http://www.bootcss.com/
bootstrap英文版：https://getbootstrap.com/getting-started/
什么是响应式网页？
一个页面，可以在各种不同的设备下浏览，都有不错的浏览体验。
相应式网页的三个特征：
1.流式布局
2.可伸缩的图片可字体
3.CSS3 Media Query
如何编写响应式网页：
1.设置viewport元标签
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">-height:视口的高度，一般不指定
-initial-scale:初始时的缩放倍率
-minimum-scale:允许的最小缩放倍率
-maximum-scale:允许的最大缩放倍率
-user-scalable:是否允许用户手动缩放，可取值1/0/yes/no
2.使用相对单位（px）代替绝对单位(%、aut、em)
3.流式布局
使用float
4.使用自适应图片：{img max-width:100%}
会随着容器的改变而改变，且不超过图片自身的大小
5.根据浏览器屏幕的特征，有选择性的执行某些CSS样式--CSS媒体查询技术（media query）
作用：根据客户端浏览设备的特性，有选择性的执行部分CSS
media：指浏览网页的设备 ，如screen（pc/pad/phone）、print、tv、projection屏幕阅读器
query：查询出当前浏览设备的特性，如类型、宽度、高度、分辨率、色彩位深、
方向Orientation （Landscape/Portrait），根据这些特性，执行特定的CSS
CSS3 mediaquery有两种用法：
1.根据媒体的特性，加载不同的外部CSS
<link media="screen and (min-width:768px) and (max-width:990px)" rel="stylesheet" href="css/pad.css">2.根据媒体的特性，执行某段CSS中的部分内容
@media screen and (min-width:990px){
h1{
text-align: center;
font-size: 3em;
border-bottom: 3px solid #cccccc;
}
.box{
border:1px solid #3a3;
background: #dfd;
color: #282;
padding: 8px;
}
}如何测试响应式网页：
1.使用真实物理设备---效果可靠但任务量太大只要手机/平板/电脑在同一个局域网/互联网即可测试
2.使用第三方模拟器软件测试
3.使用浏览器提供的设备模拟器测试---最简单但有时测试效果与真实物理设备有所不同，需要进一步验证
Bootstrap起步程序：
起步代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好，世界！</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>代码解读：
1.
<html lang="zh-CN">
<!--1.告诉浏览器翻译时如何确定当前网页的基础语言
2.告诉读屏软件当前页面的基础发音--><meta http-equiv="X-UA-Compatible" content="IE=edge">Bootstrap基础知识：
jQuery是一个js框架
jQueryUI是一个HTML组件库
Twitter Bootstrap是一个HTML/CSS/JS框架，适用移动设备优先的响应式网页
Bootstrap V2版本：面向PC进行了样式设定，同时兼顾pad和phone
Bootstrap V3版本：面向phone进行样式设定，同时兼顾PC
主要涉及：
1.HTML：为HTML5已有的标签扩展了一些自定义属性 data-*
2.CSS：CSS Reset + 几千个class
3.JS：基于jQuery提供了十几个插件函数
内容五部分：
1.起步：下载、 模板、bootlint、示范、禁用响应式
2.全局CSS：
按钮：.btn .btn-default
图片：.img-rounded .img-circle .img-thumbnail .img-responsive
文本：.text-五种 .bg-五种 .test-left/right/center/justify
排版和代码： .list-unstyle .list-inline
------------------------------------------------------------------------------------------------
表格: .table .table-bordered .table-responsive .table-striped .table-hover
栅格布局系统： .container .container-fluild
.row 里只能放 .col
.col-xs-* .col-sm-* .col-md-* .col-lg-*
.hidden-xs .hidden-sm .hidden-md .hidden-lg
.col-xs-offset-* .col-md-offset-* .col-md-offset-* .col-md-offset-*
表单：
3.组件： 图标字体、下拉菜单、按钮组、导航、面包屑、分页、标签、徽章、水井、巨幕、页头、导航条
4.JS插件：
5.定制：
CSS补充知识点：
1.盒子模型计算： box-sizing
div{
box-sizing： content-box；//默认值
box-sizing： border-box；
}
content-box：一个盒子的总宽度：margin+border+padding+width
border-box：一个盒子的总宽度：margin+width（border+padding）
2.Bootstrap 全局CSS样式--按钮--简单有趣
.btn{padding: ;border: ;}
.btn-default{color: ;background: ;border-color: ;}
***********************************************************************
.btn-danger{padding: ;border: ;}红色
.btn-sucess{padding: ;border: ;}绿色
.btn-warning{padding: ;border: ;}黄色
.btn-info{padding: ;border: ;}浅蓝色
.btn-primary{padding: ;border: ;}深蓝色
*************************************************************
.btn-lg 大按钮
.btn-sm 小按钮
.btn-xs 超小按钮
***************************************************************
.btn-block 块级按钮
**************************************************************
.pull-left {float:left;} 左浮动按钮
.pull-right {ffloat:right;} 右浮动按钮
3.Bootstrap 全局CSS样式--图片--简单有趣
.img-rounded 圆角图
.img-circle 圆形图
.img-thumbnail 缩略图
.img-responsive 响应式图片
4.Bootstrap 全局CSS样式--排版和代码--仅作了解
http://write.blog.csdn.net/postedit/72735945
**************************************************************************
<mark> 标记文本
<del>被删除的文本 / <s>无用的文本
<ins>插入文本 / <u>带下划线的文本
<small>小号文本（父容器大小的85%）
<strong>强调文本（加粗）
<em>斜体文本
**************************************************************************
.text-left 左对齐
.text-right 右对齐
.text-center 中间对齐http://write.blog.csdn.net/postedit/72735945
.text-justify 两端调整对齐
*****************************************************************************
.text-uppercase 大写字母
.text-lowercase 小写字母
.text-capitalize 首字母大写
****************************************************************************
.list-unstyle
.list-inline
5.Bootstrap 全局CSS样式--表格--简单有趣
| Bootlin: 是一个js，由Bootstrap官方提供，用于检测使用bootstrap的页面中常见的HTML错误、class使用方式的错误----默认情况下浏览器是检测不出来的。 |
.table 加内边框
.table-bordered 加外围边框的表格
.table-responsive 响应式表格 注意：使用在table的父元素div上，不是直接使用在table标签中
.table-striped 隔行变色的表格
.table-hover 带悬停效果的表格
6.Bootstrap 全局CSS样式--栅格布局系统--最重点
web开发中页面布局可以采用的方式：
1.使用table布局
优势：简单不易出错 不足：加载效率低
2.使用div+CSS做布局
优势：加载速度快、灵活 不足：不易控制
3.使用bootstrap提供的栅格（Grid Layout）布局系统
优势：加载速度快、灵活、支持响应式功能、容易控制（有行/列的概念，但使用div+css实现）
栅格布局系统的特点：
3.1 所有行必须放在容器中：.container 或 .container-fluid
3.2 分为多行（row），一行平均分为12列（col）
3.3网页内容只能放在列（col）中，不能直接放在行（row）中
| .container的宽度 | |
| 当屏幕宽度>1200px(超大PC显示器-lg): 容器宽1170px | |
| 当屏幕宽度>992px(普通PC显示器-md): 容器宽970px | |
| 当屏幕宽度>768px(平板显示器-sm): 容器宽750px | |
当屏幕宽度<768px(手机PC显示器-xs): 容器宽auto
|
bootstrap容器的特点：
1》宽度做了媒体查询
2》添加了前置和后置内容生成，可以防止子元素的越界、浮动造成的影响
3》网页内容只能放在列（col）中，不能直接放在行（row）
4》可以在col中在嵌套row
5》col分为四大类：col-xs,col-sm,col-md,col-lg
6》col-md-* *值可分为1~12，值就位某个列的宽度的（*/12）
7》可以为一个列指定不同屏幕下的不同宽度
8》col-lg-* 只对大PC屏幕有效
col-md-* 对普通PC和大PC屏幕有效
col-sm-* 对普通PC、大PC、平板屏幕有效
col-xs-* 对普通PC、大PC、平板、手机屏幕有效
9》hidden-lg 当前列只在大PC屏幕下隐藏
hidden-md 当前列只在PC屏幕下隐藏
hidden-sm 当前列只在平板屏幕下隐藏
hidden-xs 当前列只在手机屏幕下隐藏
10》.col-lg-offset-*只对大PC屏幕偏移有效
.col-md-offset-* 对普通PC和大PC屏幕偏移有效
.col-md-offset-* 对普通PC、大PC、平板屏幕偏移有效
.col-md-offset-* 对普通PC、大PC、平板、手机屏幕偏移有效
7.Bootstrap 全局CSS样式--表单--次重点&最难
bootstrap表单分为三种：
1》默认表单
<form >
<div class="form-group">
<label class="control-label" for="uname">用户名：</label>
<input id="uname" class="form-control" type="text">
<span class="help-block">用户名长度在6~12之间</span>
</div>
<div class="checkbox">
<label>
<input type="checkbox">我接受本站的使用条款
</label>
</div> <input class="btn btn-warning" type="button" value="提交">
<input class="btn btn-success" type="button" value="清空">2》行内表单
<h1>行内表单</h1>
<form class="form-inline" action="">
<div class="form-group">
<label for="uname" class="control-label">用户名：</label>
<input id="uname" class="form-control" type="text">
</div>
<div class="form-group">
<label class="control-label" for="uname">密码：</label>
<input id="uname" class="form-control" type="text">
</div>
<input class="btn btn-warning" type="button" value="登录">
</form>3》水平表单
<form class="form-horizontal" action="">
<div class="form-group">
<div class="col-md-1">
<label for="uname" class="control-label">用户名：</label>
</div>
<div class="col-md-5">
<input id="uname" class="form-control" type="text">
</div>
<div class="col-md-3">
<span class="help-block">用户名长度在6~12之间</span>
</div>
</div>
<div class="form-group">
<div class="col-md-1">
<label class="control-label" for="uname">密码：</label>
</div>
<div class="col-md-5">
<input id="uname" class="form-control" type="text">
</div>
<div class="col-md-3">
<span class="help-block">密码中必须包含数字，字母</span>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="checkbox">
<label>
<input type="checkbox">我接受本站的使用条款
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<input class="btn btn-warning" type="button" value="提交">
<input class="btn btn-primary" type="button" value="清空">
</div>
</div>
</form>上一篇： nodejs日志读取、日志查找、日志刷新
下一篇： *Egret(白鹭) 多边形数据图
推荐阅读
-
bootstrap响应式网页
-
响应式网页设计_响应式网页设计：我们从这里去哪里？
-
响应式布局-图片列表如何在窄屏（<320px）中显示为列，在宽屏（>768px）中显示为有间隙的一行
-
简单的响应式布局
-
灵活的响应式导航方法
-
【响应式Web设计】读书笔记 - 弹性布局与响应式图片（五） - 7
-
基于AdonisJS的响应式个人博客
-
java 企业门户网站 源码 自适应响应式 freemarker 静态引擎 html5 SSM ssmspringmvcfreemarkerhtml5企业站
-
Angular4学习笔记（五）- 数据绑定、响应式编程和管道
-
Android中通过RxJava进行响应式程序设计的入门指南