6-1 自定义Bootstrap
本节编程练习不计算学习进度,请电脑登录imooc.com操作

自定义Bootstrap

使用 Bootstrap 框架的不方便:

很多时候在创建 Web 页面或应用的时,需要自己独立的 UI 界面效果,此时仅仅使用 Bootstrap 框架并不能满足我们自身 UI 的需求,也造成要写很多的样式代码来覆盖 Bootstrap 框架提供的样式代码。如此一来,这也失去使用 Bootstrap 框架的意义。

很多同学会问,我要使用Bootstrap框架,而且还要让其出来的 UI 界面效果能和满足自己的UI设计效果。

解决方法:

在 Bootstrap 框架中提供多种方式来自定义 Bootstrap,让 Bootstrap 框架适合自己的需求,接下来,简单的向大家介绍怎样自定义 Bootstrap 框架

自定义Bootstrap框架主要有两种方式来实现:

  1. 使用 CSS 预处理器语言
  2. 使用在线自定义设置

1.使用 CSS 预处理器语言

在学习 Bootstrap 框架的使用时,可以看到 Bootstrap 框架中很多组件的 UI 效果都有对应的 LESS 版本和 Sass 版本源码。其实需要自定义 Bootstrap 框架,完全可以在这些组件的 LESS 或 Sass 源码文件上进行修改,然后将修改好的源码重新编译出 bootstrap.css 文件,从而实现适合自己的 UI 界面风格。 

使用 CSS 预处理器语言来重新定义 Bootstrap 框架有一个前提条件,那就是开发人员会使用 LESS 或 Sass 预处理器语言,否则要在此基础上实现 Bootstrap 框架自定义不是一件容易的事情。不过大家不用担心,就算你不懂 LESS 或 Sass 也不用怕,可以通过在线自定义设置来实现自定义 Bootstrap 框架。

2.使用在线自定义设置

在Bootstrap框架的官网为大家提供了一个在线自定义 Bootstrap 框架的配置页面 http://getbootstrap.com/customize/ ,可以通过这里进行配置。

在线自定义设置主要包括三个部分:

我们只需要根据自己的需求设置完成之后,点击最底部的下载按钮就可以得到自定义后的 Bootstrap 框架。

任务

我来试试:怎么样?小伙伴还不赶快去试试。

  1.  
下一节