开发者学堂课程【前端开发框架 Bootstrap 使用教程:Bootstrap 全局 css 样式】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/360/detail/4222
Bootstrap 全局 css 样式
一、Bootstrap 全局 css 样式的介绍
1、全局 css 样式:
设置全局 css 样式;基本的 HTML 元素均可以通过 class 设置样式并得到增强效果;还有先进的栅格系统。
2、概览:
深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好、更快、更强壮的最佳实践。
3、HTML5 文档类型:
Bootstrap 使用到的某些 HTML 元素和 css 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置。
例
<!DOCTYPE HTML>
<html lang=
”
zh-CN
”
>
...
</html>
二、Bootstrap 全局 css 样式的特点和运用
1、移动设备优先
在 Bootstrap2 中,我们对框架中的某些关键部分增加了对移动设备友好的样式。而在 Bootstrap 3 中,我们重写了整个框架,使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式,而是直接融合进了框架的内核中。也就是说, Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落,而不是增加一个额外的文件。
为了确保适当的绘制和触屏缩放,需要在之中添加 viewport 元数据标签。
例
<netaname=
”
viewport
”
content=
”
width=device-width,initial=sscale=1
”
>
具体操作打开集成开发环境创建一个工程
首先引入一个 Bootstrap 文件
然后创建一个 HTML 文件
<!DOCTYPE HTML>
<html lang=
”
en
”
>
<head>
<meta charset=
”
UTF-8
”
>
<title>全局css样式</title>
<link href=
”
bootstrap.min.css
”
rel=
”
stylesheet
”
>
</head>
<body>
<div class=
”
container>
<p>内容哈哈哈哈</p>
</div>
</body>
</html>
支持移动设备需要在
<meta charset=
”
UTF-8
”
>
<meta name=
”
viewport
”
content=
”
width=device-width,inital-scale=1
”
>
<title>全局css样式</title>
<link href=
”
bootstrap.min.css
”
rel=
”
stylesheet
”
>
</head>
2、排版与链接
Bootstrap 排版、链接样式没置了基本的全局样式。分別是:
·为 body 元素役置 background-color:#fff;
·使用@font-family-base、@font-size-base 和@line-height-base a 変量作为排版的基本参数
·为所有链接设置了基本顔色@link-color,并且当链接处于:hover 状恋吋才添加下划线
送些祥式都能在 scaffolding.less 文件中找到对应的源码。
例
<!DOCTYPE HTML>
<html lang=
”
en
”
>
<head>
<meta charset=
”
UTF-8
”
>
<title>全局css样式</title>
<link href=
”
bootstrap.min.css
”
rel=
”
stylesheet
”
>将这个注释一下
</head>
<body>
<div class=
”
container>
<p>内容哈哈哈哈</p>
</div>
</body>
</html>
位置和大小都会发生变化
对于链接样式的设置
<!DOCTYPE HTML>
<html lang=
”
en
”
>
<head>
<meta charset=
”
UTF-8
”
>
<title>全局css样式</title>
<link href=
”
bootstrap.min.css
”
rel=
”
stylesheet
”
>
</head>
<body>
<div class=
”
container>
<p>内容哈哈哈哈</p>
<a href=
””
>hello</a>
</div>
</body>
</html>
3、布局容器
Bootstrap 需要为页面内容和栅格系统包裹个.container 容器。我们提供了两个作此用处的类。注意,由于 padding 等属性的原因,这两种容器类不能互相嵌套。
.container 类用于固定宽度并支持响应式布局的窖器。
<div class="container">
...
</div>
.container-fluid类用于100%宽度,占据全部视口(viewport)的容器。
<div class="container-fluid">
...
</div>