Bootstrap 全局 css 样式|学习笔记

简介: 快速学习 Bootstrap 全局 css 样式

开发者学堂课程【前端开发框架 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=viewportcontent=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.cssrel=stylesheet>

</head>

<body>

<div class=container>

<p>内容哈哈哈哈</p>

</div>

</body>

</html>

支持移动设备需要在

<meta charset=UTF-8>

<meta name=viewportcontent=width=device-width,inital-scale=1>

<title>全局css样式</title>

<link href=bootstrap.min.cssrel=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.cssrel=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.cssrel=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>

相关文章
|
1月前
|
前端开发
【Bootstrap】<前端框架>Bootstrap常用样式 - 排版
【1月更文挑战第17天】【Bootstrap】<前端框架>Bootstrap常用样式 - 排版
|
1月前
|
前端开发 JavaScript
如何固定html表格头部,用css样式即可实现,操作简便、代码简单
如何固定html表格头部,用css样式即可实现,操作简便、代码简单
20 0
|
1月前
|
前端开发
|
1月前
|
前端开发 JavaScript
|
4天前
|
前端开发 开发者
深入了解 CSS 伪类:优化页面样式与交互
深入了解 CSS 伪类:优化页面样式与交互
34 2
|
30天前
|
Web App开发 移动开发 前端开发
【CSS】<Cascading Style Sheets>CSS3常用样式属性
【1月更文挑战第22天】【CSS】<Cascading Style Sheets>CSS3常用样式属性
|
1月前
|
编解码 前端开发 JavaScript
更灵活的CSS3新特性:帮你简化样式管理和优化网站性能(三)
更灵活的CSS3新特性:帮你简化样式管理和优化网站性能
|
1月前
|
前端开发 开发者 容器
更灵活的CSS3新特性:帮你简化样式管理和优化网站性能(二)
更灵活的CSS3新特性:帮你简化样式管理和优化网站性能
|
1月前
|
移动开发 前端开发 开发者
更灵活的CSS3新特性:帮你简化样式管理和优化网站性能(一)
更灵活的CSS3新特性:帮你简化样式管理和优化网站性能
|
1月前
|
前端开发 程序员 容器
CSS样式文件和class类名命名规范参考
CSS样式文件和class类名命名规范参考
17 0