鸩羽千夜

09bootstrap.md

goer ... 2022-01-05 Css
  • Css
 大约 1 分钟
Bootstrap框架

[toc]

# Bootstrap 框架

# 1. bootstrap

booterstrap来自Twitter，是目前非常受欢迎的前端框架,热门开源项目

img

# 2.特点

🔺 优点：

  1. 拥有完善的文档，使用起来更方便；
  2. 可提高开发效率；
  3. 规范名称定义，便于维护;
  4. 响应式设计；

🔻缺点：

  1. css框架对于一个小项目等页面来说很臃肿 (很多代码用不到)；

  2. 学习成本提高；

  3. 太依赖框架，可能会无法帮助提高技术；

# 3.下载

官网 (opens new window) 国内 (opens new window)

  1. 压缩的文件(更节省空间)
  2. 源码文件(自己想看源码去下载)
  3. cdn内容分发，直接引入标签，有安全问题
  4. 包管理器安装
/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 *//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adj......
     很多很多
     很多很多
 /*# sourceMappingURL=bootstrap.min.css.map */
1
2
3
4
5
6
7
8
  • 重要的：不然设置没效果(添加 viewport 元数据标签)
为移动端设置视口：viewport
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
1
2

# 4.核心：栅格系统

最好的教程：官方的文档官方

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口 （viewport）尺寸的增加，系统会自动分为最多12列。

javascript