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. SDWebImage源码解读之SDWebImageDownloaderOperation

    第七篇 前言 本篇文章主要讲解下载操作的相关知识,SDWebImageDownloaderOperation的主要任务是把一张图片从服务器下载到内存中.下载数据并不难,如何对下载这一系列的任务进行设计 ...

  2. UWP中新加的数据绑定方式x:Bind分析总结

    UWP中新加的数据绑定方式x:Bind分析总结 0x00 UWP中的x:Bind 由之前有过WPF开发经验,所以在学习UWP的时候直接省略了XAML.数据绑定等几个看着十分眼熟的主题.学习过程中倒是也 ...

  3. 让姑姑不再划拳 码农也要有原则 ： SOLID via C#

    “姑娘,别这样.我们是有原则的.” “一个有原则的程序猿是不会写出 “摧毁地球” 这样的程序的,他们会写一个函数叫 “摧毁行星”而把地球当一个参数传进去.” “对,是时候和那些只会滚键盘的麻瓜不同了, ...

  4. Centos——安装JDK

    写在前面: Just mark! 创建linux虚拟机的时候经常要安装JDK,配置环境变量,却又经常忘记,这里记录一下. 环境:Centos-6.8-x86_64-minimal JDK :jdk-7 ...

  5. android http 抓包

    有时候想开发的时候想看APP发出的http请求和响应是什么,这就需要抓包了,这可以得到一些不为人知的api,比如还可以干些“坏事”... 需要工具: Fiddler2 抓包(点击下载) Android ...

  6. EditText 基本用法

    title: EditText 基本用法 tags: EditText,编辑框,输入框 --- EditText介绍: EditText 在开发中也是经常用到的控件,也是一个比较必要的组件,可以说它是 ...

  7. [C#] C# 知识回顾 - 你真的懂异常（Exception）吗？

    你真的懂异常(Exception)吗? 目录 异常介绍 异常的特点 怎样使用异常 处理异常的 try-catch-finally 捕获异常的 Catch 块 释放资源的 Finally 块 一.异常介 ...

  8. Entity Framework 手动使用migration里面的up 和down方法。

    add-migration -IgnoreChanges 201606100717405_201606100645298_InitialCreate 执行这一句后 ,清空使用map生成的代码,个人不太 ...

  9. Android之使用Bundle进行IPC

    一.Bundle进行IPC介绍 四大组件中的三大组件(Activity.Service.Receiver)都是支持在Intent中传递Bundle数据的,由于Bundle实现了Parcelable接口 ...

  10. ios 获取或修改网页上的内容

    UIWebView是iOS最常用的SDK之一,它有一个stringByEvaluatingJavaScriptFromString方法可以将javascript嵌     入页面中,通过这个方法我们可 ...