20190430-Bootstrap之旅

Posted 2021-11-05 nightnight

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了20190430-Bootstrap之旅相关的知识，希望对你有一定的参考价值。

写在前面的乱七八糟的前言：当当当，现在是早上9:06，emmm是我是我还是我，(*?▽?*)今天讲讲BT这个磨人的小妖精，为什么说磨人呢，因为用的好就不磨人了啊~咳咳就跟我女盆友一样┓( ´∀` )┏。秉承万物皆对象，对象有空间的原则，BT框架提供了很多模块化的东西，写了一堆的CSS，如果要搭建一个个性化又复杂的网站，我劝你从良，少年~那怎么搞？不学吗，辣是不可能滴这么好用的框架，不学太可惜了，一个小小建议，先学怎么应用，再学怎么使用，哦吼？应用和使用不是一回事吗？少年你又水我！no no no，简单讲，应用就是cv大法，拿来即用，你无需知道原理跟内部到底有什么牛逼的东西生成这样的部件，而使用，是你知道并弄懂源码，还能随需而动~话不多说，盘她就是了~

1、bootstrap的由来

2、bootstrap的优缺

3、bootstrap的构成

3.1引用

3.2CSS样式

3.3组件

3.4JS插件

内容

1、bootstrap的由来

1.1BT简介

来自Twitter，由其设计师Mark Otto和Jacob Thornton合作开发，由Less写成，是一个UI框架，开源免费。

1.2BT官网

英文版：https://getbootstrap.com/

中文版：https://getbootstrap.com/

我是乱入的旁白：emm不知道有没有小伙伴去研究过这俩个网站的设计，今早猫了一眼，我发现个不得了的事情，我滴天，BT中文居然是用BT框架写的耶，一堆的浮动~，然鹅，BT英文导航却是flex布局的，┓( ´∀` )┏；目前，BT英文已更新到4.3，而BT中文的4还在慢慢被接受中，目前主流还是3.3.7，所以？BT4将迎来box-flex时代喵？这再次警醒着我们，要好好盘英语？？？少年，你怕不是有点虎。作为一个爱国人士，爱国就好了嘛，BT中文盘起~

1.3BT中文网

创于2012年，与众多项目关联，React中文、jQuery中文、Next.JS中文、Node.js中文等。

2、bootstrap的优缺

2.1不足:

2.1.1↑学习成本：盘她用她，要学她

2.1.2代码冗余：对于小型项目而言，大量不需要使用到的CSS样式，会造成臃肿

2.1.3个性化定制较差：若设计稿的style跟BT自身的style差个十万八千里，便需要重写n多CSS样式去覆盖原有的，那么BT我要你何用。

2.1.4兼容问题：BT将所有的元素盒模型都设置为border-box，很难兼容IE，即使目前存在许多兼容IE的方法，但仍需引入其他文件，势必导致加载速度变慢，影响用户体验。

2.1.5js插件仍需丰富内容：如导航页面是锚点而没有滚动动画

2.1.6不利于扩展、重用、维护

2.2优势：

2.2.1栅格系统与CSS模块化：↑开发效率

2.2.2规范名称定义，易维护，如CSS声明顺序：相关属性声明应归为一组，并按照下面的顺序书写

2.2.2.1定位：Position

2.2.2.2盒模型：Box Model

2.2.2.3格式排版：Typographic

2.2.2.4视觉：Visual

2.2.2.5杂项：Misc

更多参考：CSS编码规范[email protected]

2.2.3规范项目开发流程

3、bootstrap的构成

3.1引用

3.1.1直接下载：上线的最好使用这一方式，一是安全，二是稳定，三是运行反应较快

3.1.2使用BootCDN：测试练习demo使用这一方式，主要是方便，但运行反应稍差

3.1.3使用Bower/npm/Composer：小白的我从来未使用过~

3.2CSS样式

3.2.1基本模板

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (Bootstrap 的所有 javascript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
  </body>
</html>