01-简介和环境搭建

Bootstrap是Twitter开发的一个适合前台使用的CSS和JQuery插件库,Bootstrap3我已经使用了很多年,它非常适合快速搭建没什么UI美观需求,交互又不是特别复杂的页面,Bootstrap3相关的笔记也已经是非常古老了,当时也并不会什么前端,但Bootstrap用着就特别顺手。

Bootstrap v4已经正式发布了一段时间,和v3的主要区别就是优化了一些界面效果,以及CSS的class使用设定更加现代化。v4和v3一样还是基于JQuery的,这里我们简单学习了解一下。

注:到目前为止,Bootstrap4的中文文档虽然有,但是基本就是机翻水平,一些单词该翻译的没翻译,不该翻译的乱翻译,而且有些本来正确的英文单词都改的错字连篇,不忍直视,简直是污染网络环境,建议不要看。

应用场景

实际上,我们大多经常使用的UI库,例如国内阿里的antd、饿了么的elementui,这些都是适合后台的UI库,而适合前台的UI库又都是手机端的,Bootstrap其实恰好填补了前台PC端这个空白。

当然,这其实也说明前台页面并不太适合套UI库,大多数生产上的项目,也都是采用Photoshop、Sketch等软件绘制设计图,然后由开发人员根据设计图手写CSS来构建的。Bootstrap基本只是起个辅助作用。

环境搭建

下载

官网:https://getbootstrap.com/

目前,Bootstrap最新版本是4.3.1。

除此之外,Bootstrap4还依赖JQuery,我们需要额外下载这些组件。

引入依赖

<link rel="stylesheet" href="libs/bootstrap-4.3.1-dist/css/bootstrap.min.css">
<script src="libs/jQuery-3.4.1/jquery.min.js"></script>
<script src="libs/bootstrap-4.3.1-dist/js/bootstrap.bundle.min.js"></script>

注意:Bootstrap提供了好几个JavaScript文件,其中.bundle.min.js是最全的,除了JQuery其余依赖都自带了。

全局CSS设定

浏览器的默认页面有一些奇怪的特性,我们一般都会在一开始把它们去掉,比如下面这两个,取消了页面的默认边距和盒模型:

* {
    box-sizing: border-box;
}
body {
    margin: 0;
}
作者:Gacfox
版权声明:本网站为非盈利性质,文章如非特殊说明均为原创,版权遵循知识共享协议CC BY-NC-ND 4.0进行授权,转载必须署名,禁止用于商业目的或演绎修改后转载。
Copyright © 2017-2024 Gacfox All Rights Reserved.
Build with NextJS | Sitemap