bootstrap 主题颜色

2018-02-25 17:47:16 supergao222 阅读数 10924
  • 组件基础2

    掌握Vue.js基础知识; 掌握Vue.js核心功能; 掌握Vue.js实战技能;

    0人学习 刘宏强
    免费试看

Bootstrap4 定制自己的颜色和风格


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

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

0. 需要的工具

  • Node.js 编译 Bootstrap4、下载Bootstrap的依赖包,需要在电脑上安装 Node.js
  • Bootstrap4 源代码 修改 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 网站类似的色彩风格:

image.png

2. 组件外观微调

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

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

image.png

  • $enable-rounded,控制组件(按钮、输入框、下拉框等)周围是否显示为圆角

image.png

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

image.png

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

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 的官方文档里,您可以自己翻阅。也可通过微信号加我微信,我会直接告诉你。

二维码.jpg

2018-03-18 20:25:00 qq_26173219 阅读数 11636
  • 组件基础2

    掌握Vue.js基础知识; 掌握Vue.js核心功能; 掌握Vue.js实战技能;

    0人学习 刘宏强
    免费试看

http://stackoverflow.com/questions/18529274/change-navbar-color-in-twitter-bootstrap-3

原理是修改bootstrap.css 或者 bootstrap.min.css 中关于.navbar-default的颜色值,如果修改的是bootstrap.css中的.navbar-default,要引用bootstrap.css文件。

比如:<link href="<%=path %>/css/bootstrap.min.css" rel="stylesheet"> 其中path为WebContent路径,用<%String path = request.getContextPath();%>获取。

然后修改导航条中引用的css样式:<nav class="navbar-default navbar-fixed-top">


有个工具网站,专门用来生成特点颜色的导航条

http://work.smarchal.com/twbscolor/css/e74c3cc0392becf0f1ffbbbc0

2015-08-13 15:37:50 javakeffer 阅读数 5210
  • 组件基础2

    掌握Vue.js基础知识; 掌握Vue.js核心功能; 掌握Vue.js实战技能;

    0人学习 刘宏强
    免费试看

最近使用bootstrap做前端网页开发,bootsreap自带的颜色不合适,需要使用新的主题颜色方案,在网上搜索后发现一个不错的网站,只需要使用一张图片,便可根据图片中的颜色生成套主题,并可以下载这套主题的css样式问题,替换bootStrap的css文件即可使用,很方便。

链接www.lavishbootstrap.com

2019-03-07 10:19:21 fengsh998 阅读数 1521
  • 组件基础2

    掌握Vue.js基础知识; 掌握Vue.js核心功能; 掌握Vue.js实战技能;

    0人学习 刘宏强
    免费试看

基于Bootstrap 4.3.1版本:https://getbootstrap.com/docs/4.3/getting-started/introduction/

基于react脚手架来进行说明!

基础知识,针对bootstrap使用有一定了解的人群,对webpack有一定了解的人群,对react脚手架有了解。

一步步来,不要急,一口吞不了象。

 运行终端:

1. cd 到一个目录。自行定义。

2. 安装脚手架。create-react-app bootstrap_customstyle

3.因为脚手架都给我们把webpack的相关配置都写的比较完整了,默认是看不到webpack.config.js的。而bootstrap官网上提到如果要自定义主题色或扩展之类的。有几个方式:

a.下载bootstrap源代码,修改源文件编译出css。

b.直接修改编译出来的css。

但这两种都不推荐。因为一个是入侵了原css样式设计。而编译原码的方式,改动一次需要重编一次。比较麻烦。为解决灵活性,官网推荐了一种扩展复盖的方式。

https://getbootstrap.com/docs/4.3/getting-started/theming/

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

现在就来试试这个自定义custom.scss的方式进行自定义主题。

把工程执行npm run eject.把webpack.config.js的相关配置给开放出来。因为后面需要增加sass-loader来加载scss.

用vscode打开文件夹。

按照官方说明,把相应的目录结构设置完了。现在执行npm start看看能不能运行先。

我的node 6.5 babel7.x 版本,开放eject后跟起来有几个错。不要紧,处理下就好了。

提示@bable/plugin-transform-react-jsx.可能是因为react的脚手架生成的是jsx的语法需要jsx的解晰器。

安装npm install -S babel-preset-es2015 babel-preset-react

装完后运行npm start.提示找不到resolve.解晰器,装下呗。

AdeMacBook-Pro-3:bootstrap_customstyle a$ npm start

> bootstrap_customstyle@0.1.0 start /Users/a/Downloads/tt/bootstrap_customstyle
> node scripts/start.js

internal/modules/cjs/loader.js:583
    throw err;
    ^

Error: Cannot find module 'resolve'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.Module._load (internal/modules/cjs/loader.js:507:25)
...

npm install -S resolve

跑起来后。把无用的一些文件删除。像App.test.js, logo.svg. serviceWorker.js,App.css

然后修改App.js

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div className="container">
        bootstrap hello world ! custom theming!
      </div>
    );
  }
}

export default App;

修改index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

最终目录结构;

好了,现在只是可以运行。并没有使用bootstrap.下面安装下bootstrap.

5.npm install -S bootstrap

   因为bootstrap依赖jquery 和popper.js所以也安装一把。

npm install -S jquery popper.js

修改App.js

import React, { Component } from 'react';

import 'bootstrap/dist/css/bootstrap.css';

class App extends Component {
  render() {
    return (
      <div className="container bg-primary">
        bootstrap hello world ! custom theming!
      </div>
    );
  }
}

export default App;

这里使用直接引css的方式。只是为了看效果。

好了,现在换种引用方式。

把import 'bootstrap/dist/css/bootstrap.css';改为import 'bootstrap';却发现样式不启作用了。

接下来,我们通过官网建议使用scss的方式导入。

修改custom.scss

@import "~bootstrap/scss/bootstrap";
// @import "../node_modules/bootstrap/scss/bootstrap";

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional
// @import "../node_modules/bootstrap/scss/reboot";
// @import "../node_modules/bootstrap/scss/type";
// @import "../node_modules/bootstrap/scss/images";
// @import "../node_modules/bootstrap/scss/code";
// @import "../node_modules/bootstrap/scss/grid";

接下来安装npm install -S sass-loader postcss-loader autoprefixer

参考这个:https://getbootstrap.com/docs/4.3/getting-started/webpack/

配置一段规则到wepack.config.js中。

...
{
  test: /\.(scss)$/,
  use: [{
    loader: 'style-loader', // inject CSS to page
  }, {
    loader: 'css-loader', // translates CSS into CommonJS modules
  }, {
    loader: 'postcss-loader', // Run postcss actions
    options: {
      plugins: function () { // postcss plugins, can be exported to postcss.config.js
        return [
          require('autoprefixer')
        ];
      }
    }
  }, {
    loader: 'sass-loader' // compiles Sass to CSS
  }]
},
...

加规则特别注意,我之前经为可以随便加的。放在最前面,结果出BUG。后面我放到最后一段。当然具体位置要阅读webpack.config.js配置中的规则,看下放在那里合适。因为规则解晰是自下而上的。

修改好配置后。把App.js的改入改为

import React, { Component } from 'react';

// import 'bootstrap/dist/css/bootstrap.css';
// import 'bootstrap';
import '../scss/custom.scss';
...

然后npm start发现提示 

Failed to compile.

./src/App.js
Module not found: You attempted to import ../scss/custom.scss which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

发现不能访问src外的资源文件。原因为是脚手架帮我们做了限制。只需要找到webpack.config.js中的

new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),注释起来就好了。

Failed to compile.

./scss/custom.scss (./node_modules/css-loader!./node_modules/postcss-loader/src??ref--6-oneOf-3-2!./node_modules/sass-loader/lib/loader.js!./scss/custom.scss)
To import Sass files, you first need to install node-sass.
Run `npm install node-sass` or `yarn add node-sass` inside your workspace.

需要安装node-sass后再运行。OK。

修改App.js中的className样式为className="container bg-primary text-danger text-center display-3"

运行效果。

好了,到此bootstrap能使用。并且可以加需自定义的scss文件了。那么自定义主题色就可以执行了。按官方所后的。在custom.scss中对变量的复写。具体有那些变量可以参看scss/_variables.scss

在custom.scss复写主题

$theme-colors: (
    "primary": #00ff00,//#0074d9,
    "danger": #f7f307
  );

@import "~bootstrap/scss/bootstrap";
// @import "../node_modules/bootstrap/scss/bootstrap";

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
...

然后运行。

OK,自定义主题色完成。并没有改动源代码。也没有下载bootstrap源码编译。其实大家多看看文档说明,找找,练练。捣整下,都会弄出来的。

demo:https://download.csdn.net/download/fengsh998/11003919

2019-01-18 21:58:19 haifeng10001 阅读数 2302
  • 组件基础2

    掌握Vue.js基础知识; 掌握Vue.js核心功能; 掌握Vue.js实战技能;

    0人学习 刘宏强
    免费试看

bootstrap4有个网站叫做bootswatch,其中已经设计了一些很美的主题:
bootswatch首页的部分截图
要想使用也是很简单的,只需要下载其中的bootstrap.css或者bootstrap.min.css并覆盖到自己项目的对应文件就行了。如果你想动态切换的话,现在提供的思路是:
用JavaScript写一个函数响应页面上一个按钮的点击,这个函数主要是获取页面导入css的链接< link >标签,修改它的href值就行了。
当然如果你想让整个网站都应用上同一个动态修改后的主题,下文也用到了,主要是采用cookies记录的方式解决。

下面的代码来自Django,在HTML页面上的一些语法和大家常见的JavaEE不大相同,但本文涉及的内容只和JavaScript和Bootstrap有关,无需在意哈。但我要说一下我Django网站上各页面都有的一个特点,那就是每个HTML页面都继承于或被包含于一个基础页面,这样的话,便只需要修改基础页面的css或js就行了,相信JavaEE那边也是这样做的。

网页上涉及到的代码

<link rel="stylesheet" href="{% static 'bootstrap4.0.0/css/bootstrap.min.css' %}" id="default-theme">

切换时主要针对上面< link >标签的hrefid进行修改,一个href对应一个id。本程序用到两个主题版本的css文件,其id和文件名的对应为:

id 同目录下的css文件名
default-theme bootstrap.min.css
gray-theme bootstrap_gray.min.css

这样就清晰明了了哈哈哈,下面是切换的按钮,触发changeTheme()方法:

<!--切换主题的按钮-->
<input id="change-theme-btn" type="button" class="btn btn-light" onclick="changeTheme()" value="切换主题"/>

涉及的JavaScript代码

具体说明请看注释:

// 按钮触发的切换主题方法
function changeTheme() {
    var link = document.getElementsByTagName("link")[0];
    //判断目前页面上的link的id是哪个,如果是默认主题的话,就传送新主题的id给change()函数,否则亦然
    if (link.id === "default-theme") {
        change("dark-theme");
    } else {
        change("default-theme");
    }
}

//真正的切换主题方法
function change(themeName){
    var link = document.getElementsByTagName("link")[0];

    if(themeName === "default-theme"){
        link.id = "default-theme";
        link.href = '/static/bootstrap4.0.0/css/bootstrap.min.css';
        
        //记录新的主题到cookies,这里一定要写上path=/,否则就不是修改cookies而是在不同页面创建cookies了
        document.cookie = "themeCookies=default-theme;path=/";
    }else if(themeName === "dark-theme"){
        link.id = "dark-theme";
        link.href = '/static/bootstrap4.0.0/css/bootstrap_gray.min.css';
        document.cookie = "themeCookies=dark-theme;path=/";
    }
}

// 获取cookie中当前主题的id,没有则返回默认的default-theme
function getThemeName() {
    var themeCookies = "themeCookies=";
    var allCookies = document.cookie.split(';');
    for(var i=0; i<allCookies.length; i++){
        var c = allCookies[i].trim();
        if(c.indexOf(themeCookies) === 0)
            return c.substring(themeCookies.length, c.length);
    }
    return "default-theme";
}

$(document).ready(function () {
    change(getThemeName());
});

我开了个微信公众号,经常在上面发一些个人思考和计算机技术、技巧的文章,欢迎来关注一下哈:
在这里插入图片描述