章节
问答
课签
笔记
评论
占位
占位

自定义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 组件
  • Bootstrap 插件
  • Bootstrap 的 LESS 版本变量设置

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

任务

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

?不会了怎么办
||

提问题

写笔记

公开笔记
提交
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最热 最新
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?