Bootstrap4如何定制自己的颜色和风格

Bootstrap是现在最流行的CSS框架，有许多网站、后台管理系统的样式都是基于Bootstrap设计的。然而，Bootstrap 始终保持着那蓝色 + 浅灰色彩基调，最新的 Bootstrap4 也是如此，看久了难免有些审美疲劳。

怎么修改 Bootstrap 的色彩主题呢？本篇就教你如何定制 Bootstrap4，使你的页面更与众不同一些。

0. 需要的工具

  1. Node.js 编译
  2. Bootstrap4、下载Bootstrap的依赖包，需要在电脑上安装 Node.jsBootstrap4 源代码 修改 Boostrap 需要一份源代码，访问 Bootstrap 官方网站（https://getbootstrap.com）可以下载到源代码。

有些地方可能无法访问 Bootstrap4 官网，那么也可以访问 Bootstrap 中文网 下载到源代码。

1. 定制颜色主题

Bootstrap为了方便定制，将一些变量提取了出来，放在 scss/_varaibles.scss 文件中。

打开这个文件，可以发现有非常多的配置，找到这一段：

$primary:    $blue !default;
$secondary:   $gray-600 !default;
$success:    $green !default;
$info:     $cyan !default;
$warning:    $yellow !default;
$danger:    $red !default;
$light:     $gray-100 !default;
$dark:     $gray-800 !default;

这里就是配置 Bootstrap 基本色调的地方，修改这些颜色值，可以另网站看上去风格迥异。除了主色调，还有很多颜色相关的变量可以控制，细到一个输入框的边框夜色也可以调整。您可以慢慢尝试。

比如修改 _variables.scss 的这些变量：

$primary:    #e95420 !default;
$secondary:   #0e8420 !default;
$success:    #fff !default;
$light:     #e8cd56 !default;
$dark:     #e95420 !default;

$input-bg: #c34113;
$input-border-color: #c34113;
$input-placeholder-color: #ccc;
$input-color: #fff;

$jumbotron-bg: rgb(247, 247, 247);

就会得到 Ubuntu 网站类似的色彩风格：

2. 组件外观微调

除了调整颜色，_variables.scss 还有很多变量，能对 Bootstrap 组件的外观进行微调，比如：

$enable-shadows，控制一些弹出组件周围是否显示阴影

$enable-rounded，控制组件（按钮、输入框、下拉框等）周围是否显示为圆角

$enable-gradients，控制组件的背景是否显示微弱的渐变效果

这控制的变量还有很多，就不一一列举了。

4. 编译 Bootstrap

修改完了变量，如何生成自己的 Bootstrap CSS文件呢？需要用 npm 编译。

编译前需要先下载各种依赖包，通过 install 命令搞定：

npm install

提示：Node.js 默认npm官网下载依赖包，可能比较慢。建议从淘宝NPM镜像下载，速度很快：

先执行 npm install -g cnpm --registry=https://registry.npm.taobao.org

然后在任何用到 npm 命令的地方，都可以用 cnpm 代替

依赖下载完之后执行编译：

npm run dist

稍等片刻，编译好的 css 文件会出现在 dist/css/ 目录下，可以复制到你的项目中使用啦！

5. 在 Webpack 项目定制 Bootstrap

以上所说内容都是通过编译源代码的方式定制 Bootstrap4。如果想要在 Webpack 项目中定制 Bootstrap4 该怎么办呢？

直接修改 node_modules 中的 Bootstrap 源码不太合适。官方推荐的方式是，在项目中新建一个 custom.scss 文件，把你想修改的变量写在里面：

// 如果想修改 _variables.scss 中的变量，请写在这里
$primary:    #e95420 !default;
$secondary:   #0e8420 !default;
...
// 文件末尾请这样引入 Bootstrap 的源码
@import "~bootstrap/scss/bootstrap";

然后在 Webpack 编译时，把 custom.scss 也加入到编译的文件列表中。这需要修改项目中的 webpack.config.js 配置。

那么，webpack.config.js 该怎么写呢？

答案就在 Boostrap4 的官方文档里，您可以自己翻阅。也可通过这个微信号赞助我 1 元，我会直接告诉您答案。谢谢各位土豪，您的支持就是我继续分享的动力！：-)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

您可能感兴趣的文章:

  • Bootstrap风格的zTree右键菜单
  • 基于bootstrap风格的弹框插件
  • Bootstrap风格的WPF样式
  • 使用BootStrap和Metroui设计的metro风格微网站或手机app界面
  • Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
  • Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
  • 基于Bootstrap实现Material Design风格表单插件 附源码下载
  • 自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
  • jquery ui bootstrap 实现自定义风格
赞 (0)

相关推荐

  • Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面

    Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面

    虽然说IE6除了部分要求苛刻的需求以外已经被可以不考虑了,但是WIN7自带的浏览器IE8还是需要支持的. 本文这个方法主要的优点,个人觉得就是准备少,不需要上网寻找大量的图片做素材,你只要准备好一个bootstrap.jquery与photoshop就可以了,bootstrap与jquery怎么配置,可以参考<Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗>(点击打开链接) 被要求编写一个网站,常常会被如何布局困扰,其实也不难,如果能够熟练使用Bootstrap,并且有一套特定

  • 基于bootstrap风格的弹框插件

    自己写的一款基于bootstrap风格的弹框插件,暂时只有确认框.提示框.后续功能扩展.bug修改再更新. ;(function($){ //默认参数 var PARAMS; var DEFAULTPARAMS = { width: 500, title: '提示消息', content: '', okbtn: '确定', cancelbtn: '取消', headerBackground: 'info', vbackdrop: 'static', //默认点击遮罩不会关闭modal vkeyb

  • 基于Bootstrap实现Material Design风格表单插件 附源码下载

    基于Bootstrap实现Material Design风格表单插件 附源码下载

    Jquery Material Form Plugin是一款基于Bootstrap的Material Design风格的jQuery表单插件.该表单通过自定义样式和jQuery来将Bootstrap的表单修改为扁平风格的表单,并带有浮动标签特效. 在线预览         源码下载 使用方法 使用该Material Design风格表单需要在页面中引入jquery,bootstrap相关文件和materialFormStyles.css.materialForm.js文件. <link rel=

  • Bootstrap编写一个兼容主流浏览器的受众门户式风格页面

    Bootstrap编写一个兼容主流浏览器的受众门户式风格页面

    上一次写的<Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面>(点击打开链接)部分老一辈的需求可能对这种后现代的风格并不满意,没关系,我们完全可以改变布局拉成门户式的风格,他们马上就接受了: 首先,门户式的布局的大概你要清楚,这一才利于我们快速布局开头是一个较小的巨幕,后是一个导航栏,这里还是用到了按钮组接着是各个专栏,这里是关于bootstrap栅格系统与面板的运用,最后是版权信息,这里还是一个面板. 反正个人觉得这种门户式的布局风格烂大街,但不知道为何似乎很受众的样子. 我们需

  • Bootstrap风格的WPF样式

    Bootstrap风格的WPF样式

    简介 此样式基于bootstrap-3.3.0,样式文件里的源码行数都是指的这个版本.CSS源文件放到了Content文件夹下的bootstrap.css WPF样式和CSS还是不太相同,所以有些内容实现上稍有出入,有些内容用法不太一样,有些内容并没有实现 但至少,一些概念,尺寸和取色,还是很好的借鉴 博客说明按Bootstrap官方文档的顺序来写 App.xaml里引用Bootstrap.xaml资源 <Application.Resources> <ResourceDictionar

  • Bootstrap风格的zTree右键菜单

    HTML: <%-- 右键菜单 --%> <div id="zTreeRightMenuContainer" style="z-index: 9999;"> <%-- 层级 0 --%> <ul class="dropdown-menu" role="menu" level="0"> <%-- 通过给菜单项添加样式"hasChildren&qu

  • 自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框

    先说点闲话,熟悉Angular的猿们会喜欢这个插件的. 00.本末倒置 不得不承认我是一个喜欢本末倒置的人,学生时代就喜欢先把晚交的作业先做,留着马上就要交的作业不做,然后慢悠悠做完不重要的作业,卧槽,XX作业马上要交了,赶紧补补补.如今做这个项目,因为没找到合适的多选下拉Web插件,又不想用html自带的丑陋的<select multiple></select>,自己花了一整天时间做了一个.或许这样占用的主要功能开发的时间,开发起来会更有紧迫感吧.感觉自己是个抖M自虐倾向,并且伴

  • jquery ui bootstrap 实现自定义风格

    jquery ui bootstrap 实现自定义风格

    首先看一下自定义提示框的效果图 alert 普通的提示当然可以自定义样式 confrim 确认框 支持callback 复制代码 代码如下: //message 提示的信息 ,callback(true/false)回调函数  window.shconfirm = function (message, callback) 回调函数参数为 true/false prompt 邀请用户输入框 复制代码 代码如下: //message 提示的信息 ,callback(msg)回调函数(用户输入的消息)

  • 使用BootStrap和Metroui设计的metro风格微网站或手机app界面

    使用BootStrap和Metroui设计的metro风格微网站或手机app界面

    今天使用bootstrap和metroui设计了一个metro风格的移动app或者微信微网站的界面 程序的源代码可以从此处获得:https://github.com/mz121star/weixin-metro 有喜欢的朋友可以拿去修改一下. <!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if

  • Bootstrap4如何定制自己的颜色和风格

    Bootstrap是现在最流行的CSS框架,有许多网站.后台管理系统的样式都是基于Bootstrap设计的.然而,Bootstrap 始终保持着那蓝色 + 浅灰色彩基调,最新的 Bootstrap4 也是如此,看久了难免有些审美疲劳. 怎么修改 Bootstrap 的色彩主题呢?本篇就教你如何定制 Bootstrap4,使你的页面更与众不同一些. 0. 需要的工具 Node.js 编译 Bootstrap4.下载Bootstrap的依赖包,需要在电脑上安装 Node.jsBootstrap4 源

  • Vant主题定制如何修改颜色样式

    Vant主题定制如何修改颜色样式

    目录 Vant主题定制修改颜色 使用场景 第一种:完全替换主题色或其他样式 第二种:直接覆盖样式 Vant自定义主题颜色 先看效果图 步骤方法 Vant主题定制修改颜色 使用场景 需要修改vant组件的颜色或其他的样式时,可以用以下方法进行自定义修改. 一个简单的效果: 第一种:完全替换主题色或其他样式 用Vant官方提供的方法进行定制: 1.main.js引入样式原文件 // 引入全部样式 import 'vant/lib/index.less'; // 引入单个组件样式 import 'va

  • SS xspace风格模板制作教程

    SS 风格模板区引导帖,来此必看![内含SS风格相关教程链接] 一.本版版规 引用: http://www.discuz.net/thread-759546-1-1.html本版供SupeSite/X-Space模板爱好者交流讨论.鼓励大家互助分享!二.发布分享模板格式 引用: http://www.discuz.net/viewthread.php?tid=759558发布和预览风格的发帖格式规范,违者当做删除处理.三.SS 风格模板相关教程 引用: ss6.0模板制作教程(二) ss6.0模

  • autoit GUI相关知识

    autoit GUI相关知识

    GUI 的概念 GUI 可由一个或多个 窗口 组成,这些窗口又带有一个或多个控件.GUI是靠"事件驱动"实现与用户的交互的,比如像点击按钮这样的动作就会引发一个事件.程序在空闲状态时等待事件的发生,捕捉到事件时则根据事件执行相关操作.您可以猜想自己在门边等邮差(一直坐在那儿直到有信被送进来为止),等邮差把信送来了,您就要阅读该信并决定下一步做什么,这就跟GUI的原理一样了:您等待的是邮差,而GUI则等待事件, 当然,在GUI(指程序的界面)运行时您也可以选择要做的其它任务,比如使用GU

  • iOS中tableView cell分割线的一些设置技巧

    前言 对于iOS的tableView的cell的分割线,一般我们很少使用不是系统默认的,但是有些项目要求还是要求我们去改变分割线的颜色或者外形以配合整个项目的色调.这个苹果公司早都为我们想到了. 一.关于分割线的位置. 分割线的位置就是指分割线相对于tableViewCell.如果我们要根据要求调节其位置,那么在iOS7.0版本以后,提供了一个方法如下: if ([self.tableView respondsToSelector:@selector(setSeparatorInset:)])

  • Android开发之图形图像与动画(一)Paint和Canvas类学习

    Android开发之图形图像与动画(一)Paint和Canvas类学习

    Paint类 *Paint类代表画笔,用来描述图形的颜色和风格,如线宽,颜色,透明度和填充效果等信息. *使用Paint类时,需要先创建该类的对象,可以通过该类的构造函数实现.通常情况的实现代码是: *Paintpaint=newPaint(); *创建完Paint对象后,可以通过该对象提供的方法对画笔的默认设置进行改变 Canvas *Canvas类代表画布,通过该类提供的构造方法,可以绘制各种图形. *通常情况下,要在Android中绘图,需要先创建一个继承自View类的视图,并且在该类中重

  • js脚本学习 比较实用的基础

    event.clientX 返回最后一次点击鼠标X坐标值: event.clientY 返回最后一次点击鼠标Y坐标值: event.offsetX 返回当前鼠标悬停X坐标值 event.offsetY 返回当前鼠标悬停Y坐标值 document.write(document.lastModified) 网页最后一次更新时间 document.ondblclick=x 当双击鼠标产生事件 document.onmousedown=x 单击鼠标键产生事件 document.body.scrollTo

  • Android RadioButton 图片位置与大小实例详解

    Android RadioButton 图片位置与大小实例详解

    Android RadioButton 图片位置与大小 Java: rgGroup = (RadioGroup) findViewById(R.id.re_group); rbWeiHui = (RadioButton) findViewById(R.id.rb_wei_hui); rbAdd = (RadioButton) findViewById(R.id.rb_add); rbMine = (RadioButton) findViewById(R.id.rb_mine); //定义底部标签

  • JavaScript 语法集锦 脚本之家基础推荐

    click() 对象.click() 使对象被点击. closed 对象.closed 对象窗口是否已关闭true/false clearTimeout(对象) 清除已设置的setTimeout对象 clearInterval(对象) 清除已设置的setInterval对象 confirm("提示信息") 弹出确认框,确定返回true取消返回false cursor:样式 更改鼠标样式 hand crosshair text wait help default auto e/s/w/n

  • JS实现超精简的链接列表在固定区域内滚动效果代码

    JS实现超精简的链接列表在固定区域内滚动效果代码

    本文实例讲述了JS实现超精简的链接列表在固定区域内滚动效果代码.分享给大家供大家参考,具体如下: 这款超精简版的链接列表文字滚动代码,可在指定的区域内滚动,当然,区域大小可以自己设置的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-link-list-scroll-style-codes/ 具体代码如下: <html> <HEAD> <TITLE>文字链接列表滚动</TITLE> <META

随机推荐