Bootstarp入门教程(2) 概述

无情 阅读:624 2021-04-01 00:26:54 评论:0


概述:

               深入了解Bootstrap底层结构的关键部分,包括我们让web开发变得更好、更快、更强壮的最佳实践。


              (1)HTML5文档类型:Bootstrap使用到的某些HTML元素和CSS属性需要将页面设置为HTML5文档类型

             

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Demo</title>	 
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
    <meta http-equiv="description" content="this is my page"> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">     
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 
  </head>   
  <body> 
    This is my HTML page. <br> 
  </body> 
</html>

                (2)移动设备优先:<head>之中添加viewport元数据标签

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

                   在移动设备浏览器上,通过为viewport meta标签添加user-scalable=no可以禁用其缩放(zooming)功能

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

 
                (3)响应式图片:通过添加.img-responsive class可以让Bootstrap 3中的图片对响应式布局的支持更友好。其实质是为图片赋予了max-width: 100%;height: auto;属性,可以让图片按比例缩放,不超过其父元素的尺寸。

        <img src="img/t.png" class="img-responsive">


                  (4)排版和链接:Bootstrap设置了全局样式,包括显示、排版和链接。尤其是:

                  为body标签设置了background-color: #fff;样式

                  设置了排版的基本属性@font-family-base@font-size-base@line-height-base

                  设置全局的链接颜色 @link-color 和点击链接颜色 :hover


        (5)Normalize:为了增强跨浏览器表现的一致性,我们使用了Normalize,这是由Nicolas GallagherJonathan Neal维护的一个reset库。

        (6)Containers:.container包裹页面上的内容即可实现居中对齐。注意:由于设置了padding 和 固定宽度,.container不能嵌套。

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

          



       

声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

关注我们

一个IT知识分享的公众号