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
随机推荐
- java: web应用中不经意的内存泄露
前面有一篇讲解如何在spring mvc web应用中一启动就执行某些逻辑,今天无意发现如果使用不当,很容易引起内存泄露,测试代码如下: 1.定义一个类App package com.cnblogs. ...
- C#高性能TCP服务的多种实现方式
哎~~ 想想大部分园友应该对 "高性能" 字样更感兴趣,为了吸引眼球所以标题中一定要突出,其实我更喜欢的标题是<猴赛雷,C#编写TCP服务的花样姿势!>. 本篇文章的主 ...
- iPhone Anywehre虚拟定位提示“后台服务未启动，请重新安装应用后使用”的解决方法
问题描述: iPhone越狱了,之后在Cydia中安装Anywhere虚拟定位,但是打开app提示:后台服务未启动,请重新安装应用后使用. 程序无法正常使用... 解决方法: 打开Cydia-已安装, ...
- css中的浮动与三种清除浮动的方法
说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top ...
- .Net Core MVC 网站开发（Ninesky） 2.3、项目架构调整(续)-使用配置文件动态注入
上次实现了依赖注入,但是web项目必须要引用业务逻辑层和数据存储层的实现,项目解耦并不完全:另一方面,要同时注入业务逻辑层和数据访问层,注入的服务直接写在Startup中显得非常臃肿.理想的方式是,w ...
- 一起学 Java（二）面向对象
一.方法函数 函数也称为方法,就是定义在类中的具有特定功能的一段独立代码.用于定义功能,提高代码的复用性. 函数的特点1> 定义函数可以将功能代码进行封装,便于对该功能进行复用:2> 函数 ...
- Django admin定制化，User字段扩展[原创]
前言 参考上篇博文,我们利用了OneToOneField的方式使用了django自带的user,http://www.cnblogs.com/caseast/p/5909248.html , 但这么用 ...
- Dynamics CRM 2015-Data Encryption激活报错
在CRM的日常开发中,Data Encryption经常是不得不开启的一个功能.但是有时,我们可能遇到一种情况,Organization导入之后,查看Data Encryption是已激活的状态,但是 ...
- Android系统默认对话框添加图片
开发工具Android Studio 今天公司UI要求软件对话框改成加图片的,以前没有做过,所以就学习了一下,废话不多说, 看效果: 创建XML文件dialog_lsit_item.xml <L ...
- CentOS7 安装Mono及Jexus
CentOS7安装Mono及Juxes 1 安装Mono 1.1 安装yum-utils 因为安装要用到yum-config-manager,默认是没有安装的,所以要先安装yum-utils包.命令如 ...