Bootstrap之CSS篇(1)
本篇我们来学习Bootstrap在CSS布局中的使用。
Bootstrap CSS概述
对文档类型的要求
Bootstrap的开发中使用了HTML5元素和CSS属性，为了保证在浏览器中的兼容性，强列建议在所有的Bootstrap项目中使用HTML5的文档类型，否则将不能确保项目的效果。
<!DOCTYPE html>
对移动设备的支持
Bootstrap 3对移动设备进行了优化，以前需要引入一个移动设备的CSS资源，新的版本默认就可以支持移动设备。
移动设备优先适配，其次才是面桌设备，这个特点让Bootstrap更适合开发移动设备网页应用。
Bootstrap开发移动设备网站时，需要在head中声明viewport meta标签
<meta name="viewport" content="width=device-width,initial-scale=1.0">
width属性，控制设备宽度，确保它能正确呈现在不同的设备上
initial-scale=1.0 以1：1比例呈现，无缩放效果
我们能过viewport meta标签来，禁止移动设备浏览器使用缩放功能，让网站拥有原生应用一样的效果只能上下滑动。
<meta name="viewport" content="width=device-width,maximum-scale=1.0,user-scalable=no">
响应式图像
为img标签添加img-responsive这个类，即可让图像拥有非常友好的响应式布局支持。
<img src='img01.jpg' class="img-responsive" alt="响应式图像">
分析.img-responsive这个class包含的CSS属性
.img-responsive {
display:block;
height:auto;
max-width:100%;
}
img元素将以block块级元素显示，并且高度为浏览器自适应，最大宽度为100%，这些属性可以让图像按比例缩放不超过父级标签，从而非常友好的支持响应式布局。
如果图像需要水平居中，可以在追加.center-block类，因为display:block所以不能使用.text-center来实现居中
全局样式
Bootstrap默认的全局样式
body{
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
}
我们还可以通过
body{margin:0}来取消body默认8px的边距
排版样式
Bootstrap默认的排版样式
@font-family-base @font-size-base @line-height-base
以上三个属性设置了基本的排版样式
链接样式
Bootstrap默认的链接样式
为链接设置了基本颜色@link-color，并且当链接处于:hover状态时才添加下划线
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;
}
源码位置
上述的几个基本样式都可以在scaffolding.less文件中找到
关于Normalize.css
Normalize.css是一个很小的css文件，它在HTML元素样式上提供了跨浏览器的高度一致性。
Normalize.css它是为HTML5准备的，是CSS reset优质的替代方案。
-- Bootstrap使用Normalize来建立跨浏览器一致性保护有用的浏览器样式
为大部份html元素提供一般化的样式
修复浏览器自身的bug
关于容器
通常在Bootstrap中我们使用container class来放置网页的主体内容
<div class="container"> ...... <div>
分析.container这个class包含的CSS属性
.container{
padding-right:15px;
padding-left:15px;
margin-right:auto;
margin-left:auto;
}
container的左右外边距为自适应，内边距为固定宽度
不可对容器进行嵌套
使用容器解决塌陷问题
before伪元素，修复上边距塌陷
after伪元素，清除浮动
.container:before,.container:after{
display:table;
content:" ";
}
after伪元素，清除容器包含的所有浮动元素
container:after{
clear:both;
}
关于媒体查询
Bootstrap 为所有container的媒体查询阀值都设置了max-width属性，来适应网格系统。
@media (min-width:1024px){
.container{
width:1006px;
}
};
学习小结
对文档型有严可的要求
从3.0开始移动设备优先匹配，然后才是桌面设备
通过class名来引用，Bootstrap给我们预置了很多实用的CSS类
定义了全局、排版、链接的全局基本样式和相关设置属性
使用了Normailze方案
容器概念和塌陷问题处理
媒体查询中的max-width属性
本篇略有些枯燥都是些底层的内容，不过相信这些内容在以后的运用中会帮助到我们。下一篇开始学习很经典的网格系统使用。
Bootstrap相关资源文件，已上传至我的Gitee项目 https://gitee.com/net_master/Ajax_Node/tree/master/Bootstrap
书山有路勤为径，学海无涯苦作舟!!!
zhoubo
2020.8.19 at home
- 点赞
- 收藏
- 关注作者
评论（0）