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. nginx配置反向代理或跳转出现400问题处理记录

    午休完上班后,同事说测试站点访问接口出现400 Bad Request  Request Header Or Cookie Too Large提示,心想还好是测试服务器出现问题,影响不大,不过也赶紧上 ...

  2. ThreadLocal简单理解

    在java开源项目的代码中看到一个类里ThreadLocal的属性: private static ThreadLocal<Boolean> clientMode = new Thread ...

  3. (JS+CSS)实现图片放大效果

    代码很简单,在这里就不过多阐述,先上示例图: 实现过程: html部分代码很简单 <div id="outer"> <p>点击图片</p> &l ...

  4. Vue + Webpack + Vue-loader 系列教程（2）相关配置篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...

  5. jQuery学习之路（1）-选择器

    ▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...

  6. inline-block元素间距问题的几种解决方案

    不知道大家有没有碰到过设置了display:inline-block;的几个相邻元素之间有几px间距的问题,这里提供几种简单实用的解决方法,希望能够帮到大家!   方法1. 将<li>标签 ...

  7. My TWI

    前言 对TWI没有什么特别的印象,因为有一个更出名的TWU,而我去年又刚好错过了它,因此TWU的光辉完全掩盖了TWI.对TWI印象最深的是在邮件中看到的38th北京的这期,看到他们的图文记录,在圈子中 ...

  8. servlet 简介,待完善

    什么是Servlet?① Servlet就是JAVA 类② Servlet是一个继承HttpServlet类的类③ 这个在服务器端运行,用以处理客户端的请求 Servlet相关包的介绍--javax. ...

  9. golang sync.WaitGroup bug

    注意,这个结构体,要是想在函数之间传来传去的话,必须要使用指针....... 这个结构体里没有 指针,这个类型可以说没有“引用特性”. 被坑了一晚上.特此记录.

  10. SAP自定义权限对象

    SAP系统自带了很多的权限对象,每一个运行画面都有非常多的权限用到.不过标准的权限对象并不一定适合于用在客户自己开发的程序里面,所以每个ABAPer都应该会自己开发一套权限对象,并引用在程序代码里面. ...