如何將railsbootstrap（由twitter bootstrap制作）主題添加到rails應用程序

Question

網站https://wrapbootstrap.com/有使用Twitter Bootstrap制作的主題。 這些主題中的每一個都包括不同版本的Twitter Bootstrap以及其他各種庫和版本（jquery，fontawesome等...）

如何將這些主題添加到現有的Rails應用程序中？ 步驟是什么？

如果我已經使用了不同版本的jquery，twitter bootstrap，fontawesome和其他版本（如Gemfile中所聲明的那樣），我對可能出現的沖突特別好奇。

謝謝

Answer 1

您可以將從wrapbootstrap購買的主題中的css添加到assets> application.css.scss文件中。 並在rails應用程序視圖中使用主題附帶的html標記，以便應用css樣式。

另外，我建議使用gem 'sass-rails'導入標准的bootstrap樣式。

這是一個教程，可以幫助您開始向rails應用程序添加bootstrap。 添加主題css和html標簽取決於您。

http://railscasts.com/episodes/328-twitter-bootstrap-basics?view=asciicast

Answer 2

我為幾個項目做了這個，我同意Mike在上面回答的主要內容。 以下是我看到的一些問題。

我們開始作為Rails上的標准項目我們所有的視圖動態（Ember）/靜態基於Bootstrap CSS。 當主要內部頁面啟動並顯示功能時，我們專注於登錄頁面。 到這個時候，我們有了引導程序的寶石，fontawesome添加到我們的Gemfile中。

因此，其中一件事就是從Gemfile中刪除這些寶石“bootstrap”，“fontawesome”。 將這些包含在wrapbootstrap轉儲中。

此外，隨着集成的進展，您可能會意識到許多常見代碼正在重復，最符合您分割頁面組件的興趣：標題，頁腳其他內容作為部分Rails視圖。 它嚴重節省了編輯工作量。

我發現在你仍然處於集成階段時保持每件事情非常有用的另一件事是分割你的CSS / JS包括從wrap bootstrap和你已經擁有的頁面導入的頁面。 因此，如果您打算將所有現有頁面遷移到新主題中來抓取CSS，那么它可以分階段合並，否則您可以讓它們共存。

您必須在routes.rb，控制器調用中添加新條目以支持頁面（如果您還沒有它們）。 喜歡約會，聯系人，團隊等。

如果您使用Ember / Backbone之類的東西，那么您必須在某些頁面中管理單個尋呼機應用程序的共存，這些頁面可能會也可能不會鏈接到Wrapbootstrap頁面。

當我將wrapbootstrap主題集成在Rails-EmberJS應用程序之上時，這就是我必須要關注的所有事情。

Answer 3

有趣的時間因為我自己必須這樣做。 我仍然是Rails的新手，所以這可能不是最好的解決方案，但這是我如何工作......

注意：每個主題都不同，所以這可能不是一個適合所有方法。

1）我的主題是用Middleman構建的，它期望獨立運行或在Sinatra實例上運行。

2）為了在Rails上獲得主題，我必須添加指南針寶石，sass gem，sass-rails gem和compass-rails gem才能正常工作。 我假設您可以安裝這些（如果您的主題需要）。

3）假設您已准備好滾動Rails應用程序，請進入您的資產目錄並備份.js，.css以及所有字體和圖像。 將主題資源文件放在適當的位置。

4）現在對視圖層執行相同操作。 您可能有一個partials和/或pages文件夾，您可以將其放在views目錄中。 您需要將application.erb.html和任何導航文件放在views目錄下的layouts文件夾中。 同樣，請確保先備份原始文件。

5）如果您的主題是為Sinatra設計的，那么您可能有一個Config.rb文件。 我將邏輯從這個文件移動到我的config / environment.rb文件中。 我對這一步沒有信心。 如果有更好的位置，其他Rails開發人員可以插入。

6）啟動服務器。 您可能會遇到一些例外，但這是可以預料的。

7）查看舊的app / assets / javascripts / application.js文件，並將其與新文件進行比較。 確保新文件包含jquery ujs庫//= require jquery_ujs 。 沒有這點魔法你的PUT和DELETE HTTP動詞將無法正常工作。

8）路徑調整。 我的主題包含了Font Awesome庫。 為了使它工作，我不得不調整font-awesome.scss文件頂部的引用路徑。

9）最后，您需要在environment.rb文件中調試新添加的代碼。 Sinatra開發人員正在做很多Route魔術來調整導航顯示。 這並沒有很好地適應我的環境。 我從導航模板文件中刪除了許多這些調用。 完成后，我的新皮膚應用程序啟動並運行！ 祝好運。

Answer 4

確保在安裝twitter bootstrap時你應該在你的Gemfile中添加以下gem：“group：assets”

gem 'therubyracer'
gem 'less-rails'
gem 'twitter-bootstrap-rails'

然后運行bundle命令。

現在，您已經下載的主題“file_name.css”（file_name可以是任何）只需將其添加到app-> assests-> stylesheets下的“stylesheets”文件夾中

然后在您將看到的同一文件夾中打開您的application.css文件

*= require_tree.

用這個替換

*= require "file_name.css"

注意：不要忘記重新編譯資產或只是刪除tmp / cache文件夾的內容。

保存並重啟服務器。 它將適用於你的新主題。

Answer 5

觀看此培訓課程，該課程將指導您從頭開始詳細完成。

http://pluralsight.com/training/courses/TableOfContents?courseName=getting-started-aspdotnet-mvcservice-stack-bootstrap