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
随机推荐
- C++对C的函数拓展
一,内联函数 1.内联函数的概念 C++中的const常量可以用来代替宏常数的定义,例如:用const int a = 10来替换# define a 10.那么C++中是否有什么解决方案来替代宏代码 ...
- Windows Server 2012 NIC Teaming介绍及注意事项
Windows Server 2012 NIC Teaming介绍及注意事项 转载自:http://www.it165.net/os/html/201303/4799.html Windows Ser ...
- 继电器是如何成为CPU的（1）
继电器是如何成为CPU的(1) ——<穿越计算机的迷雾>整理和总结 究竟是如何设计的电路,具有计算和控制的智力? 这一点也不高深.本系列文章从初中学的最简单的电路图说起,看看能不能从最初的 ...
- static，你还敢用吗？(二）
为了压系统,昨天小组在测试环境模拟了一大批订单数据.今天上午查看记录的账单计息日志,发现了一大堆的MySqlException MySql.Data.MySqlClient.MySqlExceptio ...
- maven依赖查询地址
http://search.maven.org/#search%7Cga%7C1%7C
- 使用Microsoft的IoC框架：Unity来对.NET应用进行解耦
1.IoC/DI简介 IoC 即 Inversion of Control,DI 即 Dependency Injection,前一个中文含义为控制反转,后一个译为依赖注入,可以理解成一种编程模式,详 ...
- Mach-O 的动态链接（Lazy Bind 机制）
➠更多技术干货请戳:听云博客 动态链接 要解决空间浪费和更新困难这两个问题最简单的方法就是把程序的模块相互分割开来,形成独立的文件,而不再将它们静态的链接在一起.简单地讲,就是不对那些组成程序的目标文 ...
- TFS2013 设置签出独占锁
转载自: http://www.cnblogs.com/zhang888/p/4280251.html
- (转) 将ASP.NET Core应用程序部署至生产环境中（CentOS7）
原文链接: http://www.cnblogs.com/ants/p/5732337.html 阅读目录 环境说明 准备你的ASP.NET Core应用程序 安装CentOS7 安装.NET Cor ...
- [高性能MYSQL 读后随笔] 关于事务的隔离级别（一）
一.锁的种类 MySQL中锁的种类很多,有常见的表锁和行锁,也有新加入的Metadata Lock等等,表锁是对一整张表加锁,虽然可分为读锁和写锁,但毕竟是锁住整张表,会导致并发能力下降,一般是做dd ...