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

Taonce 發布于2019-08-29 11:00 / 1647人閱讀

摘要：是一個很好的框架，可以給項目提供一個良好的框架基礎，但是很多情況下我們需要對做一些定制以適應項目的需求。下面講一下如何用管理你的定制項目，并能夠與官方庫保持更新的方法。

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庫開發降噪做小程序定制

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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