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——文本两端调整对齐;
最新文章
- Javascript高级程序设计——基本类型和引用类型的值
- eclipse安装color theme插件
- SQL中的with as
- JavaWeb学习总结(二)—http协议
- $.getJSON()方法的 callback说明
- Swift\本地文件管理
- webapp之路--理解viewport的使用
- 自学Zabbix3.2-配置功能简介
- 2018-03-03-解决win下凭据删除不干净而无法登录共项目录的问题
- 转发—Android开发常用的插件及工具
- linux 下搭建php环境
- (五) Keras Adam优化器以及CNN应用于手写识别
- CentOS7 下 Hadoop 分布式部署
- request 和 response 对象
- Laravel 添加路由文件
- Centos6.5下进行PHP版本升级
- 基于C/S模式的android手机与PC机通信系统的开发
- 爬虫从网页中去取的数据中包含&;nbsp;空格
- 记录pytorch的几个问题
- 如何用c#本地代码实现与Webbrowser中的JavaScript交互
热门文章
- .Net多线程编程—并发集合
- 《Django By Example》第三章 中文 翻译 (个人学习,渣翻)
- C++中的const
- [C#] 简单的 Helper 封装 -- SQLiteHelper
- 【开源毕设】一款精美的家校互动APP分享——爱吖校推 [你关注的,我们才推](持续开源更新3)附高效动态压缩Bitmap
- ASP.NET Core 中文文档 第四章 MVC(4.1)Controllers, Actions 和 Action Results
- 解决maven下载jar慢的问题(如何更换Maven下载源)
- 一个标签的72变,打造一个纯CSS图标库
- Restful WebApi项目开发实践
- 谈一谈Http Request 与 Http Response