2014-08-02

定制Bootstrap3

文章目录

1. 1. 安装前端工具包
2. 2. 创建目录
3. 3. 安装 bootstrap 源码
4. 4. 注意

以前开发项目都是找现成的模板, 经历多个项目后, 总是达不到理想的效果. 为了完全能够定制Web页面的外观,又不会把Bootstrap本身的文件改的面目全非,因此需要创建自定义文件结构

安装前端工具包

sudo npm install -g bower
sudo npm install -g lessc

本文所展示的示例是在phpstorm下完成的, 要自动编译less文件,需要用到lessc编译器, 打开less文件时,phpstrom会自动提示安装less插件,按提示安装即可,需要重启phpstrom.

创建目录

创建一个新目录 my-bootstrap,并初始化为一个npm模块,按照提示输入相应的模块信息

mkdir my-bootstrap
cd my-bootstrap
npm init

安装 bootstrap 源码

有两种方式安装bootstrap源代码, 本文使用npm安装方式,和通过git方式安装路径有区别,使用时注意

# 通过bower安装
bower install bootstrap
# 用git安装
git clone https://github.com/twbs/bootstrap.git

创建一个自定义目录custom用于放置自定义的less文件

mkdir custom
cd custom

• 首先,在custom目录中创建一个自定义主的文件my-bootstrap.less. 此文件用于包含原始的bootstrap.less文件, 以及自定义的less模块文件.
• 其次,在my-boostrap.less文件中包含bootstrap.less文件

举例, 如果我们自定义导航栏的外观,那么首先把navs.less文件从
node_modules/bootstrap/less/navs.less复制到costom/navs.less

然后在my-bootstrap.less文件中导入custom/navs.less, 内容如下

// filename: my-bootstrap.less
@import "../bower_components/bootstrap/less/bootstrap";
@import "navs";

再修改custom/navs.less文件,定制自己需要的外观

最后在html页面中导入

目录结构如下

如果要修改其他Bootstrap部件的样式和外观,复制相应的bower_components/bootstrap/less/*.less到custom/目录下, 然后在my-bootstrap.less文件中导入,最后修改

注意

bootstrap中有一个非常重要的文件variables.less, 其中定义了很多被其他文件引用的变量, 建议复制到自定义目录custom下, 修改其中的变量满足自定义需要.

Web

bootstrap3