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

Taonce 发布于2019-08-29 11:00 / 1643人阅读

摘要：是一个很好的框架，可以给项目提供一个良好的框架基础，但是很多情况下我们需要对做一些定制以适应项目的需求。下面讲一下如何用管理你的定制项目，并能够与官方库保持更新的方法。

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

云服务器 GPU云服务器基于h5做webrtc的开发用php做网站的方法基于webrtc库开发降噪做小程序定制

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111359.html

2016年最具潜力前端开源项目Top20

摘要：作为年最具潜力，乃至最具影响力的前端开源项目真的不为过。通过上的介绍，这个项目是偏右阿里的前端大牛和阿里的前端大牛主导，而且从中也不难看出有些部分是来自参与过的项目。 showImg(https://segmentfault.com/img/bVH8b2?w=900&h=500); 在2016年，前端的开源世界越发精彩，Vue的不断壮大，Angular 2的发布，Amaze UI 3....

winterdawn 2019-08-30 13:21 评论0 收藏0
2016年最具潜力前端开源项目Top20

摘要：作为年最具潜力，乃至最具影响力的前端开源项目真的不为过。通过上的介绍，这个项目是偏右阿里的前端大牛和阿里的前端大牛主导，而且从中也不难看出有些部分是来自参与过的项目。 showImg(https://segmentfault.com/img/bVH8b2?w=900&h=500); 在2016年，前端的开源世界越发精彩，Vue的不断壮大，Angular 2的发布，Amaze UI 3....

xiguadada 2019-08-20 13:39 评论0 收藏0
2016年最具潜力前端开源项目Top20

摘要：作为年最具潜力，乃至最具影响力的前端开源项目真的不为过。通过上的介绍，这个项目是偏右阿里的前端大牛和阿里的前端大牛主导，而且从中也不难看出有些部分是来自参与过的项目。 showImg(https://segmentfault.com/img/bVH8b2?w=900&h=500); 在2016年，前端的开源世界越发精彩，Vue的不断壮大，Angular 2的发布，Amaze UI 3....

Caizhenhao 2019-08-01 16:10 评论0 收藏0
javascript框架学习计划

摘要：前言终于要做这个计划了，前端框架千千万，绝不能一头扎进去盲目开始，本片文章总结一下目前前各种端框架，以及它们的用途主要解决什么问题，然后最后做出学习计划。希望入了前端坑的同学们可以有所帮助。但是库与框架很难严格区分，所以统一称为解决方案。前言：终于要做这个计划了，前端框架千千万，绝不能一头扎进去盲目开始，本片文章总结一下目前前各种端框架，以及它们的用途主要解决什么问题，然后最后做出学...

airborne007 2019-08-19 18:43 评论0 收藏0