转载

基于Bootstrap做定制，并与官方库保持更新的方法

bootstrap是一个很好的css框架，可以给项目提供一个良好的css框架基础，但是很多情况下我们需要对bootstrap做一些定制以适应项目的需求。

定制bootstrap的方法有很多种，如果你想深入到bootstrap源码进行定制的话，那么本文是比较适合你的。

下面讲一下如何用git管理你的bootstrap定制项目，并能够与bootstrap官方库保持更新的方法。

git仓库创建做要做的事情

# 先用git建库，保证库里有一个master分支，这里就不赘述了  # 添加bootstrap的git仓库 git remote add bootstrap git@github.com:twbs/bootstrap.git git fetch bootstrap # 创建一个bs-bootstrap分支，对应到bootstrap仓库的master分支 git checkout -b bs-bootstrap bootstrap/master # 创建自己的develop分支，这个分支衍生自bootstrap最新版本的tag（当前是v3.3.4） git checkout -b develop v3.3.4 # 将develop分支push到自己的仓库里s git push  # 推荐使用git-flow做代码分支管理，这一步不是必须 # 注意不要把tag的前缀设置v，因为bootstrap的tag前缀就是v，会引起冲突 git flow init

其他协同开发的Developer要做的事

git clone 项目库  git remote add bootstrap git@github.com:twbs/bootstrap.git git fetch bootstrap git checkout -b bs-bootstrap bootstrap/master git checkout develop git flow init

保持bootstrap的更新

原来的develop分支是基于bootstrap v3.3.4的，现在bootstrap已经升级到v3.3.5，那么我们这么做

# 获得bootstrap最新的代码 git checkout bs-master git pull  # 将develop rebase到bootstrap v3.3.5的tag上 git checkout develop git rebase v3.3.5  # 如果你用了git-flow，那你的feature分支也要rebase一下 git checkout feature/some-feature git flow feature rebase

rebase的过程可能会有一些冲突需要解决，但是如果你是按照标准的方式对bootstrap进行定制的话，这些冲突应该是很小的。

其他工作

因为你有了bootstrap的源码，所以可以利用bootstrap所提供的基础设置做打包、测试、生成文档的工作。所以你可能需要：

gem install jekyll gem install rouge npm install -g grunt-cli

如果需要打包的话，执行 grunt 即可。会更新项目目录的dist、_gh_page目录。

执行 jekyll serve ，就会启动bootstrap本地文档服务器，访问浏览器 http://localhost:9001/ 即可。

参考资料

http://www.smashingmagazine.com/2013/03/12/customizing-bootstrap/
http://www.codeproject.com/Articles/594098/How-to-customize-Twitter-Bootstrap-to-fit-your-web

原文 https://segmentfault.com/a/1190000005981442

正文到此结束