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

616 查看

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/ 即可。

参考资料