BootStrap_01之全局样式
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之全局样式的更多相关文章
- BootStrap入门教程 (一) ：手脚架Scaffolding（全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts)）
2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK ...
- bootstrap复习：全局样式
一.概览 1.Bootstrap 是移动设备优先的. 2.在移动设备浏览器上,通过为视口(viewport)设置 meta 属性为 user-scalable=no 可以禁用其缩放(zooming)功 ...
- styled-components解决全局样式'injectGlobal' 废除的问题
最新版的 styled-components v4 已经将原有的 injectGlobal() 方法替换成了 createGlobalStyle() ,而且用法也和之前的 injectGlobal 方 ...
- bootstrap 全局样式设置
HTML <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" co ...
- 全局css , 样式设置, css 初始化. css ,style ,全局样式, 初始化样式
全局CSS设置总结 1.清除所有标记的内外边距 html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldse ...
- taro 组件的外部样式和全局样式
自定义组件对应的样式文件,只对该组件内的节点生效. 编写组件样式时,需要注意以下几点: 组件和引用组件的页面不能使用 id 选择器(#a).属性选择器([a])和标签名选择器,请改用 class 选择 ...
- 关于微信小程序中组件和页面对全局样式的继承性
1.组件只能继承全局样式中的font和color(backgroundcolor不继承) 2.页面可以继承全局样式中所有样式
- bootstrap基础学习小记（一）简介模板、全局样式
2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK ...
- 02 uni-app框架学习：设置全局样式统一每个页面的背景颜色
1.设置全局样式可以在App.vue里面 2.在每个页面的根view 里添加一个class名叫page
随机推荐
- ABP源码分析一：整体项目结构及目录
ABP是一套非常优秀的web应用程序架构,适合用来搭建集中式架构的web应用程序. 整个Abp的Infrastructure是以Abp这个package为核心模块(core)+15个模块(module ...
- Sublime Text3配置在可交互环境下运行python快捷键
安装插件 在Sublime Text3下面写代码感觉很不错,但是写Python的时候遇到了一些问题. 用Sublime Text3打开python文件,或者在Sublime Text3下写好pytho ...
- RxJS + Redux + React = Amazing!（译二）
今天,我将Youtube上的<RxJS + Redux + React = Amazing!>的后半部分翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: ht ...
- 前端学HTTP之Web主机托管
前面的话 对内容资源的存储.协调以及管理的职责统称为Web主机托管.主机托管是Web服务器的主要功能之一.保存并提供内容,记录对内容的访问以及管理内容都离不开服务器.如果不想自行管理服务器所需的软硬件 ...
- C#多线程之线程同步篇2
在上一篇C#多线程之线程同步篇1中,我们主要学习了执行基本的原子操作.使用Mutex构造以及SemaphoreSlim构造,在这一篇中我们主要学习如何使用AutoResetEvent构造.Manual ...
- 算法与数据结构(七) AOV网的拓扑排序
今天博客的内容依然与图有关,今天博客的主题是关于拓扑排序的.拓扑排序是基于AOV网的,关于AOV网的概念,我想引用下方这句话来介绍: AOV网:在现代化管理中,人们常用有向图来描述和分析一项工程的计划 ...
- MCDownloadManager ios文件下载管理器
我们用AFNetworking小试牛刀,写一个简单的下载器来演示功能. 前言 为什么AFNetworking能够成为顶级框架?我们究竟该如何领悟它的精髓所在?这都是很难的问题.安全,高效,流畅,这3个 ...
- java中易错点（二）
java,exe是java虚拟机 javadoc.exe用来制作java文档 jdb.exe是java的调试器 javaprof,exe是剖析工具 解析一: sleep是线程类(Thread)的方法, ...
- javascript 笔记！
1.通过javascript向文档中输出文本 document是javascript的内置对象,代表浏览器的文档部分 document.write("Hello Javascript&quo ...
- NodeJs支付宝移动支付签名及验签
非常感谢 :http://www.jianshu.com/p/8513e995ff3a?utm_campaign=hugo&utm_medium=reader_share&utm_co ...