Bootstarp入门教程(2) 概述
概述:
深入了解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 Gallagher和 Jonathan Neal维护的一个reset库。
(6)Containers:.container包裹页面上的内容即可实现居中对齐。注意:由于设置了padding
和 固定宽度,.container
不能嵌套。
<div class="container">
......
</div>
1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。