基于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.gitgit fetch bootstrapgit checkout -b bs-bootstrap bootstrap/mastergit checkout developgit flow init

保持bootstrap的更新

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

# 获得bootstrap最新的代码git checkout bs-mastergit pull# 将develop rebase到bootstrap v3.3.5的tag上git checkout developgit rebase v3.3.5# 如果你用了git-flow,那你的feature分支也要rebase一下git checkout feature/some-featuregit 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/ 即可。

参考资料

  1. http://www.smashingmagazine.com/2013/03/12/customizing-bootstrap/

  2. http://www.codeproject.com/Articles/594098/How-to-customize-Twitter-Bootstrap-to-fit-your-web

关键字:bootstrap, css, git, develop


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部