1、响应式网页：
 ①Responsive Web Page：一个可以根据浏览设备的不同，而自动更改布局、图片、文字效果的网页；
 ②构成：不能固定宽度，必须流式布局；文字和图片大小随容器大小而改变；CSS3 Media Query；
2、响应式网页编写：
 ①必须声明viewport元标签：
  <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
  * 避免用户左右滑动屏幕，禁止浏览器初始时缩放显示；
 ②容器的宽度尽量不使用固定值（px），使用相对宽度（%或auto）；
 ③文字尽量不使用绝对尺寸（px），使用相对尺寸（em或rem）；
 ④图片要指定大小，如：
  img{
   max-width:100%;/*随容器缩小，但最大不会超过图片原始大小——防止失真*/
  }
 ⑤页面布局时不能固定，采用流式布局，如浮动，inline-block；
 ⑥灵活使用CSS3 Media Query技术——响应式网页必备元素！
3、CSS3 Media Query技术：
 ①Media：指浏览网页的设备，如screen、tv、projection、tty（字符终端）、print、braille、speech等；
 ②Query：指自动获取当前浏览设备物理特性，如色彩深度、orientation、width、height等；
 ③CSS媒体查询技术：可以根据浏览设备的类型及特性，执行不同的CSS代码；
 ④CSS3 Media Query两种用法：
  a、根据媒体查询结果，执行不同的外部CSS文件：
   <link media="screen and (max-width:991px) and (min-width:768px)" rel="stylesheet" href="css/pad.css"/>
   不足：当前设备不执行的CSS文件也会被浏览器加载，每个CSS文件可能存在很多重复代码；
  b、在一个CSS片段中，有选择的执行某些选择器：
   @media screen and (min-width:768px) and (max-width:991px){
    选择器{属性名：值}
   }
4、BootStrap模板：
 ①<html lang="zh-cn">
  HTML标签的lang属性（language），用于指定当前网页的自然语言（可取值zh-cn、en、en-us、ja等）；
  作用：为浏览器翻译功能指明原始语言；为屏幕阅读软件指明应该使用的发音；
 ②<meta http-equiv="X-UA-Compatible" content="IE=dege">
  HTTP响应消息头部：X-UA-Compatible；
  Cross-UserAgent-Compatible：IE浏览器专用头部，告诉新版本的IE兼容哪个版本的内核，edge表示启用能够使用的最新的版本内核；
5、BootStrap全局CSS样式：
 ①按钮相关Class：
  .btn——按钮基础样式；
  .btn-default——白底黑字按钮；
  .btn-danger——红色按钮；
  .btn-warning——黄色按钮；
  .btn-success——绿色按钮；
  .btn-info——浅蓝色按钮；
  .btn-primary——深蓝色按钮；
  .btn-lg——大号按钮；
  .btn-sm——中号按钮；
  .btn-xs——小号按钮；
  .btn-block——块级按钮；
 ②图片相关Class：
  .img-circle——圆形图片；
  .img-rounded——圆角图片；
  .img-thumbnail——缩略图片；
  .img-responsive——响应式图片；
 ③文本相关Class：
  .text-danger/warning/success/info/primary——五种文本颜色；
  .bg-danger/warning/success/info/primary——五种文本背景颜色；
  .text-uppercase——文本转换为大写形式；
  .text-lowercase——文本转换为小写形式；
  .text-capitalize——文本转换为首字母大写形式；.text-left——文本左对齐；
  .text-center——文本居中对齐；
  .text-right——文本右对齐；
  .text-justify——文本两端调整对齐；

BootStrap_01之全局样式的更多相关文章

  1. BootStrap入门教程 (一) ：手脚架Scaffolding（全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts)）

    2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK ...

  2. bootstrap复习：全局样式

    一.概览 1.Bootstrap 是移动设备优先的. 2.在移动设备浏览器上,通过为视口(viewport)设置 meta 属性为 user-scalable=no 可以禁用其缩放(zooming)功 ...

  3. styled-components解决全局样式'injectGlobal' 废除的问题

    最新版的 styled-components v4 已经将原有的 injectGlobal() 方法替换成了 createGlobalStyle() ,而且用法也和之前的 injectGlobal 方 ...

  4. bootstrap 全局样式设置

    HTML <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" co ...

  5. 全局css , 样式设置, css 初始化. css ,style ,全局样式, 初始化样式

    全局CSS设置总结 1.清除所有标记的内外边距 html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldse ...

  6. taro 组件的外部样式和全局样式

    自定义组件对应的样式文件,只对该组件内的节点生效. 编写组件样式时,需要注意以下几点: 组件和引用组件的页面不能使用 id 选择器(#a).属性选择器([a])和标签名选择器,请改用 class 选择 ...

  7. 关于微信小程序中组件和页面对全局样式的继承性

    1.组件只能继承全局样式中的font和color(backgroundcolor不继承) 2.页面可以继承全局样式中所有样式

  8. bootstrap基础学习小记（一）简介模板、全局样式

    2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK ...

  9. 02 uni-app框架学习：设置全局样式统一每个页面的背景颜色

    1.设置全局样式可以在App.vue里面 2.在每个页面的根view 里添加一个class名叫page

随机推荐

  1. Angular2学习笔记（1）

    Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...

  2. gentoo 安装

    加载完光驱后 1进行ping命令查看网络是否通畅 2设置硬盘的标识为GPT(主要用于64位且启动模式为UEFI,还有一个是MBR,主要用于32位且启动模式为bois) parted -a optima ...

  3. 使用JSONObject.fromObject的时候出现“There is a cycle in the hierarchy”异常 的解决办法

    在使用JSONObject.fromObject的时候,出现“There is a cycle in the hierarchy”异常.   意思是出现了死循环,也就是Model之间有循环包含关系: ...

  4. AngularJs之九（ending......)

    今天继续angularJs,但也是最后一篇关于它的了,基础部分差不多也就这些,后续有机会再写它的提升部分. 今天要写的也是一个基础的选择列表: 一:使用ng-options,数组进行循环. <d ...

  5. 基于OpenCV的车辆检测与追踪的实现

    最近老师布置了一个作业,是做一个基于视频的车辆检测与追踪,用了大概两周的时间做了一个简单的,效果不是很理想,但抑制不住想把自己的一些认识写下来,这里就把一些网络上的博客整理一下分享给大家,希望帮助到大 ...

  6. [原创]mybatis中整合ehcache缓存框架的使用

    mybatis整合ehcache缓存框架的使用 mybaits的二级缓存是mapper范围级别,除了在SqlMapConfig.xml设置二级缓存的总开关,还要在具体的mapper.xml中开启二级缓 ...

  7. ASP.NET MVC5+EF6+EasyUI 后台管理系统（64）-补充WebApi与Unity注入-配置文件

    系列目录 上一篇演示了WebApi利用Unity注入 很多人问我如何用配置文件来配置注入,本节演示如何利用配置文件来注入,道理是一样的,跳转到上一节下载源码一起来动手! 1.打开源码定位到文件Depe ...

  8. 理解nodejs模块的scope

    描述 原文档地址:https://docs.npmjs.com/misc/scope 所有npm模块都有name,有的模块的name还有scope.scope的命名规则和name差不多,同样不能有ur ...

  9. angular2系列教程（九）Jsonp、URLSearchParams、中断选择数据流

    大家好,今天我们要讲的是http模块的第二部分,主要学习ng2中Jsonp.URLSearchParams.observable中断选择数据流的用法. 例子

  10. pt-ioprofile

    pt-ioprofile是用来观察特定进程的IO信息的. 该脚本是用shell写的,有两方面的作用: pt-ioprofile does two things: ) ) is not performe ...