Bootstrap是什么

简介

Bootstrap文档官网

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

一个已经编写好的css类的集合，js的集合。不需要我们从头再写。js用的是Jquery。

文档官网里有各种使用方法，之前因为无法对于网站显示做修改，所以学习了Bootstrap。经过一段时间的学习，前端有一点进步，还是感觉对前端页面无法细致操作。

使用Bootstrap不是难的。但是，在Bootstrap的基础上，对其进行修改，是有难度的。最重要的是很少有相关的教学，当前主流对于Bootstrap的教学都是基础使用，很少包括对于其的修改。

功能组件化，组件又由一小段组件代码构成。

提供包括弹框界面，可以直接弹出表单。

栅格系统，规范的划分屏幕区域，不需要我们去判断如果同一行有两块或者多块内容区域时，如何设置宽度高度，margin, padding,响应式等。

许多组件，导航栏，下拉菜单，路径导航，进度条等等，常用的用法是复制示例代码修改即可。

Bootstrap与JQUERY这个js库相关，而Jquery在当今国内的言论里都是**,说不好用，没人用等等，但是在这么知名框架上的使用，我们进行一下反思。

VS code 官网就用的是Bootstrap

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。

国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。

一个下拉菜单的实例

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button"  data-toggle="dropdown" >
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" >
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

用一些预定义的类就可以使用简单的代码实现比较复杂的功能。

下载

用于生产环境的Bootstrap : 编译并压缩后的 CSS、JavaScript 和字体文件。不包含文档和源码文件。

用的最多的就是这个，把他下载下来，里面对应有css, js 文件，把他们用链接方式引入即可。

  • 引入Jquery文件
  • <link rel="stylesheet" href="对应地址" >
  • <script src="对应地址" >

预编译版

下载压缩包之后，将其解压缩到任意目录即可看到以下（压缩版的）目录结构：

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

上面展示的就是 Bootstrap 的基本文件结构：预编译文件可以直接使用到任何 web 项目中。我们提供了编译好的 CSS 和 JS (bootstrap.) 文件，还有经过压缩的 CSS 和 JS (bootstrap.min.) 文件。同时还提供了 CSS 源码映射表 (bootstrap.*.map) ，可以在某些浏览器的开发工具中使用。同时还包含了来自 Glyphicons 的图标字体，在附带的 Bootstrap 主题中使用到了这些图标。

全局css样式

Bootstrap 将设置全局的 CSS 样式。HTML 的基本元素均可以通过 class 设置样式并得到增强效果。还有先进的栅格系统。

移动设备优先

在 Bootstrap 2 中，我们对框架中的某些关键部分增加了对移动设备友好的样式。而在 Bootstrap 3 中，我们重写了整个框架，使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。

为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。
<meta name="viewport" content="width=device-width, initial-scale=1">

在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

布局容器

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

.container 类用于固定宽度并支持响应式布局的容器。两边会有空白的地方，并非从最左边开始。

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

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。两边没有空白的地方，从最左边开始。

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

总结

bootstrap提前预制好了一些样式组件，说是直接用就好，但是例如导航条这个组件。在许多bootstrap网站里，却并没有直接使用。也就是说，虽然有这个bootstrap，在实际的网站编写时还会遇到很多样式相关问题。并且需要添加大量不属于bootstrap的代码，后台人员或者说并非熟练的前端开发人员，并不能用好这个框架。

最后，多去看好的用bootstrap做的网站！

posted @ 2021-07-22 15:42  Dba_sys  阅读(223)  评论(0)  编辑  收藏  举报