Bootstrap 全局CSS样式:总体注意事项

简介: Bootstrap 框架

作者: WangMin
格言: 努力做好自己喜欢的每一件事

1.HTML5 文档类型

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

1.png

2.Bootstrap 是移动设备优先的,为了确保适当的绘制和触屏缩放,需要在<head>之中添加 meta标签,其中的name属性值必须是viewport。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>bootstrap</title>
        <meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1, user-scalable=no">
    </head>
    <body>
    </body>
</html>

width = device-width :表示宽度是设备屏幕的宽度
initial-scale = 1.0:表示初始的缩放比例
minimum-scale = 0.5:表示最小的缩放比例
maximum-scale = 2.0:表示最大的缩放比例
user-scalable = yes/no:表示用户是否可以双指或双击放大
这里的属性值设置根据你的项目情况来定

3.布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个.container容器。bootstrap提供了两个相同作用的类,注意由于padding的原因,这两种容器类不能相互嵌套。
.container类用于固定宽度并支持响应式布局的容器,也就是用媒体查询获得的动态尺寸。
.container-fluid类用于 100% 宽度,占据全部视口(viewport)的容器。

利用简单的例子来说明.container.container-fluid之间的区别

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>container与container-fluid区别</title>
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=yes">
        <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container" style="background:red;"><div>container</div></div>
        <div class="container-fluid" style="background:blue"><div>container-fluid</div></div>
    </body>
</html>

1、.container类和container-fluid类的div左右两边有一个15px的padding(内边距)

2.png

2..container类在屏幕宽度小于等于767px的时候,宽度等于屏幕宽度的,也就是100%,.container-fluid类不管屏幕宽度大小,一直是100%屏幕宽767px:

3.png

3、.container类在屏幕宽度小于等于768px的时候div左右出现了外边距margin=9px(左右padding依然是15px),.container-fluid类宽度不管屏幕宽度大小,一直是100%。

4.png

4、.container类在屏幕宽度小于1000px的时候div左右外边距margin一直增大,padding值和子div的宽度不变,屏幕拉大的部分都作用于margin上了。.container-fluid类宽度不管屏幕宽度大小,一直是100%。

5.png

5、.container类在屏幕拉大到1000px的时候,.container类的div左右外边距margin=15px,左右padding=15px。.container-fluid类宽度不管屏幕宽度大小,一直是100%。

6.png

6、屏幕又继续拉大的时候,.container类的div左右外边距margin会随着拉大。.container-fluid类宽度不管屏幕宽度大小,一直是100%。

7.png

根据以上的六个点进行的总结:
(1).container类出现内边距和外边距,.container-fluid类出现内边距。
(2).container类左右内边距一直是15px,屏幕小于等于767px的时候没有margin值,屏幕大于767px开始有左右margin值,屏幕宽度为768px和1000px的时候,margin值相对最小,分别是9px和15px,其他时候margin值随着屏幕的增大而增大。.container-fluid类宽度不管屏幕宽度大小,一直是100%。


就先分享到这里!! 😄 后续继续更新!!

目录
相关文章
|
24天前
|
前端开发
如何设置 CSS 盒子模型的边框样式?
CSS盒子模型的边框样式可以通过`border`属性设置,包括边框宽度、样式和颜色。例如:`border: 2px solid red;` 设置了2像素宽的红色实线边框。也可分别设置四边,如`border-top`、`border-right`等。
|
13天前
|
前端开发 JavaScript UED
|
30天前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
149 1
|
1月前
|
编解码 前端开发 JavaScript
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
50 2
|
18天前
|
前端开发
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式,通过&lt;head&gt;部分的&lt;style&gt;标签定义;外部样式表适用于多个页面,通过&lt;link&gt;标签引用外部CSS文件;&lt;style&gt;定义样式,&lt;link&gt;引用资源;已弃用的标签有&lt;font&gt;、&lt;center&gt;、&lt;strike&gt;,属性有color和bgcolor。
|
18天前
HTML 样式- CSS2
HTML样式实例展示了如何使用`font-family`、`color`和`font-size`属性来定义字体样式,以及使用`text-align`属性来设置文本的对齐方式。示例包括标题和段落的样式设置。
|
18天前
|
前端开发
HTML 样式- CSS1
CSS (层叠样式表) 用于为 HTML 元素添加样式,包括颜色、文本、盒子模型等。CSS 可以通过内联样式、内部样式表或外部引用的方式添加到 HTML 中。推荐使用外部引用方式。本教程将介绍如何使用 CSS 为 HTML 添加样式,并提供实例演示。
|
2月前
|
前端开发
前端基础(四)_CSS层叠样式表_什么是css_css样式的引入方式_样式表的优先级_样式选择器
本文详细介绍了CSS(层叠样式表)的基本概念、语法规则、引入方式、样式表的优先级和样式选择器。文章解释了CSS的作用,展示了如何在HTML中通过行内样式、内部样式和外部样式引入CSS,讨论了不同CSS选择器的优先级和如何确定最终的样式应用。此外,还强调了使用`!important`规则时的优先级高于行内样式。
85 1
|
1月前
|
前端开发 Ubuntu Linux
CSS 修改鼠标图标样式
CSS 修改鼠标图标样式
37 0
|
1月前
|
前端开发 容器
CSS实现旋转圆角叠加样式,你学会了吗?
CSS实现旋转圆角叠加样式,你学会了吗?
34 0