开源中文网

您的位置: 首页 > CSS > 正文

Bootstrap 4 的安装与配置教程详解

来源: 网络整理  作者: 佚名

Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用,Bootstrap 提供了全面、美观的文档。你能在这里找到关于 HTML 元素、HTML 和 CSS 组件,下面我们来看Bootstrap 4 的安装与配置教程

Bootstrap 4 刚刚发布了预览版,离正式版还有一段时间。不过现在我们已经可以使用 Bootstrap 4 了,看看里面有什么新东西。 最简单的方法就是使用 Bootstrap 的 CDN ,把需要的样式表与 JS 文件链接到网页上,不过这样你不能去编辑 Bootstrap ,比如去定制里面的一些选项。下面我们使用 Git 去克隆一份 Bootstrap 仓库到本地。
# 进入到桌面
cd ~/desktop
# 为项目创建目录并进入这个目录
mkdir ninghao-bootstrap
cd ninghao-bootstrap
# 克隆 Bootstrap 仓库
git clone https://github.com/twbs/bootstrap.git
# 进入到 Bootstrap
cd bootstrap
# 提取分支
git fetch
# 切换到 Bootstrap 4 的开发分支
git checkout v4-dev

确定你已经安装好了 npm 还有 Bower ,然后我们需要去为 Bootstrap 项目安装需要的东西。
npm install

bower install

安装需求的这些东西要等一会儿,速度可能有点慢。完成以后我们用编辑器打开创建的目录 ninghao-bootstrap,然后新建一个 html 文件叫 index.html ,下面是一个基本的模板:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <link rel="stylesheet" href="http://ninghao.net/bootstrap/dist/css/bootstrap.css">
  </head>
  <body>
    <!-- Content -->
    <script src="http://ninghao.net/bootstrap/bower_components/jquery/dist/jquery.min.js"></script>
    <script src="http://ninghao.net/bootstrap/dist/js/bootstrap.js"></script>
  </body>
</html>

为了可以自动更新浏览器的变化,可以使用 bowser-sync 为项目去创建一个服务器并且监视一些文件的变化,进入到 ninghao-bootstrap 这个目录以后,执行

browser-sync start --server --no-notify --files 'index.html, bootstrap/dist/css/bootstrap.css'

新建一个命令行窗口,再进入到项目的 bootstrap 这个目录的下面,执行一下:
grunt watch
这个命令会监视 Bootstrap 项目文件的变化,发生变化以后,会重新编译 Bootstrap 的 CSS 与 JS 。
选项
Bootstrap 4 定义了一些自定义的选项,你可以方便的使用它们为 Bootstrap 的组件打开或者关掉某些效果,比如 Flexbox,圆角,阴影,渐变等等。这些选项就是 Sass 里的一些变量,打开:
bootstrap/scss/_variables.scss

在 Options 这个区域的下面,你可以看到:
$enable-flex:               false !default;

$enable-rounded:            true !default;

$enable-shadows:            false !default;

$enable-gradients:          false !default;

$enable-transitions:        false !default;

$enable-hover-media-query:  false !default;

这些变量的值有些是 true ,表示启用,有些是 flase ,表示禁用。比如你不想让某些组件使用圆角的效果,可以把 $enable-rounded 这个变量的值设置成 false ,保存文件以后,会自动编译 Bootstrap 的 CSS,这样就会去掉某些组件里应用的圆角效果。
Flexbox
Flexbox 是一种简单灵活的布局方法,很多现化的浏览器已经开始支持 Flexbox 了,它也是未来布局页面主要用的东西。 Bootstrap 4 开始支持 Flexbox ,不过现在会作为一个可选项,也就是默认不会在组件里使用 Flexbox  ,启用它的话,先打开文件:
bootstrap/scss/_variables.scss
搜索 $enable-flex 这个变量,把它的值设置成 true ,保存文件,然后重新编译 Bootstrap ,这样 Bootstrap 4 里的某些组件就会使用 Flexbox 代替传统的 float,display: table 这些东西。

Tags:教程
相关文章列表:
关于开源中文网 - 联系我们 - 广告服务 - 网站地图 - 版权声明