Bootstarp入门教程（2） 概述

叁歲伎倆 2023-10-16 19:09 177阅读 0赞



概述：

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

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

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>Demo</title>    
  5.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  6.     <meta http-equiv="description" content="this is my page">
  7.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">    
  8.     <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
  9.   </head>  
  10.   <body>
  11.     This is my HTML page. <br>
  12.   </body>
  13. </html>

(2)移动设备优先：之中添加viewport元数据标签。

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

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

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

  1. <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 Gallagher和 Jonathan Neal维护的一个reset库。

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

  1. <div class="container">
  2.            ......
  3.            </div>

#

发表评论

表情：
评论列表 （有 0 条评论，177人围观）

还没有评论，来说两句吧...

相关阅读