BootStrap_01之全局样式

2022-04-24 22:09:42

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——文本两端调整对齐；

码农公寓

相关文章