bootstrap学习整理

最新推荐文章于 2022-01-21 08:00:45 发布

yxf135

最新推荐文章于 2022-01-21 08:00:45 发布

阅读量144

点赞数

本文链接：https://blog.csdn.net/yxf135/article/details/111060008

版权

bootstrap是什么

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

使用bootstrap响应式框架需要满足下面条件

必须是HTML5 文档类型

<!DOCTYPE html>
<html lang="zh-CN">
  ...
</html>

Bootstrap 是移动设备优先
1. 为了确保适当的绘制和触屏缩放，需要在之中添加 viewport 元数据标签。
```
<meta name="viewport" content="width=device-width, initial-scale=1">
```
1. 也可以在上述基础上禁用缩放属性，让整体效果更像原生界面
```
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
```
Bootstrap 排版、链接样式设置了基本的全局样式。分别是：
- 为 body 元素设置 background-color: #fff;
- 使用 @font-family-base、@font-size-base 和 @line-height-base 变量作为排版的基本参数
- 为所有链接设置了基本颜色 @link-color ，并且当链接处于 :hover 状态时才添加下划线

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种容器类不能互相嵌套。

.container类用于固定宽度并支持响应式布局的容器。

<div class="container">
  ...
</div>

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

<div class="container-fluid">
  ...
</div>

关注