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
随机推荐
- 解决PHP-问题:Class 'SimpleXMLElement' not found in
1.问题 在ubuntu 16.10中,学习PHP,学习到PHP如何生成XML文件时候,碰到了这个问题: PHP Fatal error: Class 'ClassName\SimpleXMLElem ...
- ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之目录导航
ASP.NET MVC with Entity Framework and CSS是2016年出版的一本比较新的.关于ASP.NET MVC.EF以及CSS技术的图书,我将尝试着翻译本书以供日后查阅. ...
- 如何利用tcpdump对mysql进行抓包操作
命令如下: tcpdump -s -l -w - dst -i eno16777736 |strings 其中-i指定监听的网络接口,在RHEL 7下,网络接口名不再是之前的eth0,而是 eno16 ...
- kafka源码分析之一server启动分析
0. 关键概念 关键概念 Concepts Function Topic 用于划分Message的逻辑概念,一个Topic可以分布在多个Broker上. Partition 是Kafka中横向扩展和一 ...
- js学习之变量、作用域和内存问题
js学习之变量.作用域和内存问题 标签(空格分隔): javascript 变量 1.基本类型和引用类型: 基本类型值:Undefined, Null, Boolean, Number, String ...
- C++ 拷贝构造函数和赋值运算符
本文主要介绍了拷贝构造函数和赋值运算符的区别,以及在什么时候调用拷贝构造函数.什么情况下调用赋值运算符.最后,简单的分析了下深拷贝和浅拷贝的问题. 拷贝构造函数和赋值运算符 在默认情况下(用户没有定义 ...
- 使用Expression实现数据的任意字段过滤(1)
在项目常常要和数据表格打交道. 现在BS的通常做法都是前端用一个js的Grid控件, 然后通过ajax的方式从后台加载数据, 然后将数据和Grid绑定. 数据往往不是一页可以显示完的, 所以要加分页: ...
- Node.js学习笔记——Node.js开发Web后台服务
一.简介 Node.js 是一个基于Google Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效.Node.j ...
- Android Retrofit 2.0 使用-补充篇
推荐阅读,猛戳: 1.Android MVP 实例 2.Android Retrofit 2.0使用 3.RxJava 4.RxBus 5.Android MVP+Retrofit+RxJava实践小 ...
- Android Fragment 剖析
1.Fragment如何产生?2.什么是Fragment Android运行在各种各样的设备中,有小屏幕的手机,超大屏的平板甚至电视.针对屏幕尺寸的差距,很多情况下,都是先针对手机开发一套App,然后 ...