boostrap了解

最新推荐文章于 2024-07-07 02:58:35 发布

ant_1024

最新推荐文章于 2024-07-07 02:58:35 发布

阅读量226

点赞数

分类专栏：前端文章标签： boostrap了解

本文链接：https://blog.csdn.net/wuzhuang12/article/details/80306037

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

  创建的网页开头使用html5的文档类型，否则可能面临浏览器不一致的问题 

 
 <meta 
   
 name 
 = 
 "viewport" 
   
 content 
 = 
 "width=device-width, initial-scale=1.0" 
 > 

 
 对移动设备友好，确定适当的绘制和触屏缩放，在网页的head之中添加 

 
 initial-scale=1.0 
  确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。 

 
 通常情况下， 
 maximum-scale=1.0 
  与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。 

 
 <meta 
   
 name 
 = 
 "viewport" 
   
 content 
 = 
 "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" 
 > 

 
 响应式图像 

 
 <img 
   
 src 
 = 
 "..." 
   
 class 
 = 
 "img-responsive" 
   
 alt 
 = 
 "响应式图像" 
 > 

  源码： 

 
 . 
 img 
 - 
 responsive  
 { 
  display 
 : 
  block 
 ; 
  height 
 : 
   
 auto 
 ; 
  max 
 - 
 width 
 : 
   
 100 
 %; 
  
 } 

 
 全局显示、排版和链接 

 
 基本的全局显示 

 
 body  
 { 
  font 
 - 
 family 
 : 
   
 "Helvetica Neue" 
 , 
   
 Helvetica 
 , 
   
 Arial 
 , 
  sans 
 - 
 serif 
 ; 
  font 
 - 
 size 
 : 
   
 14px 
 ; 
  line 
 - 
 height 
 : 
   
 1.428571429 
 ; 
  color 
 : 
   
 #333333; 
  background 
 - 
 color 
 : 
   
 #ffffff; 
  
 } 

 
 第一条规则设置 body 的默认字体样式为  
 "Helvetica Neue", Helvetica, Arial, sans-serif 
 。 

 
 第二条规则设置文本的默认字体大小为 14 像素。 

 
 第三条规则设置默认的行高度为 1.428571429。 

 
 第四条规则设置默认的文本颜色为 #333333。 

 
 最后一条规则设置默认的背景颜色为白色 

 
 排版 

 
 使用 @font-family-base、 @font-size-base 和 @line-height-base 属性作为排版样式。 

 
 链接样式 

 
 通过属性 @link-color 设置全局链接的颜色。 

 
 对于链接的默认样式，如下设置： 

 
 a 
 : 
 hover 
 , 
 a 
 : 
 focus  
 { 
  color 
 : 
   
 #2a6496; 
  text 
 - 
 decoration 
 : 
  underline 
 ; 
  
 } 
 a 
 : 
 focus  
 { 
  outline 
 : 
  thin dotted  
 #333; 
  outline 
 : 
   
 5px 
   
 auto 
   
 - 
 webkit 
 - 
 focus 
 - 
 ring 
 - 
 color 
 ; 
  outline 
 - 
 offset 
 : 
   
 - 
 2px 
 ; 
  
 } 

 
 容器（Container） 

 
 <div 
   
 class 
 = 
 "container" 
 > 
  ... 
 </div> 

  源码 

 
 . 
 container  
 { 
  padding 
 - 
 right 
 : 
   
 15px 
 ; 
  padding 
 - 
 left 
 : 
   
 15px 
 ; 
  margin 
 - 
 right 
 : 
   
 auto 
 ; 
  margin 
 - 
 left 
 : 
   
 auto 
 ; 
  
 } 

 
 . 
 container 
 : 
 before 
 , 
  
 . 
 container 
 : 
 after  
 { 
  display 
 : 
  table 
 ; 
  content 
 : 
   
 " " 
 ; 
  
 } 

 
 . 
 container 
 : 
 after  
 { 
  clear 
 : 
  both 
 ; 
  
 } 

 
 @media 
   
 ( 
 min 
 - 
 width 
 : 
   
 768px 
 ) 
   
 { 
   
 . 
 container  
 { 
  width 
 : 
   
 750px 
 ; 
  
 } 

Chrome	Firefox	IE	Opera	Safari
Android	YES	YES	不适用	不适用	不适用
iOS	YES	不适用	不适用	不适用	YES
Mac OS X	YES	YES	不适用	YES	YES
Windows	YES	YES	YES*	YES	不适用