如何將wrapbootstrap（使用twitter引導）主題添加到rails應用程序

網站https://wrapbootstrap.com/的主題是使用Twitter Bootstrap創建的。這些主題中的每一個都包括不同版本的Twitter Bootstrap以及其他各種庫和版本（jQuery，fontawesome等...）如何將wrapbootstrap（使用twitter引導）主題添加到rails應用程序

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

我特別好奇的是，如果我已經在使用不同版本的jquery，twitter bootstrap，fontawesome和其他（在Gemfile中聲明），可能會引發衝突。

謝謝

來源

2012-10-08 AdamT

您可以從您wrapbootstrap購買的資產> application.css.scss文件中的主題添加CSS。在你的rails應用視圖中使用主題附帶的html標籤，以便應用css樣式。

此外，我會建議使用gem 'sass-rails'導入標準引導樣式。

這裏有一個教程，讓你開始將引導添加到rails應用程序。添加主題CSS和HTML標籤取決於您。

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

來源

2012-11-28 21:23:05 cpursley

有趣的時間，因爲我只是有這個做我自己。我還是相當新的Rails，所以這可能不是最好的解決方案，但這是我如何得到它的工作...

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

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

2）爲了在Rails上獲得主題，我必須添加指南針gem，sass gem，sass-rails gem和compass-rails gem才能正常工作。我假設你可以安裝這些（如果您的主題需要）。 3）假設您已準備好Rails應用程序，請進入您的資產目錄並備份您的.js，.css以及所有字體和圖像。將您的主題資產文件放在適當的位置。

4）現在，您的視圖層也一樣。您可以在views目錄中放置一個partials和/或pages文件夾。您需要將application.erb.html和任何導航文件放在views目錄下的layouts文件夾中。再次確保您先備份原始文件。

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

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

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

8）路徑調整。我的主題包括Font Awesome庫。爲了使它起作用，我必須調整font-awesome.scss文件頂部的參考路徑。 9）最後，你需要在environment.rb文件中調試新添加的代碼。 Sinatra開發者在調整導航顯示方面做了很多路線魔術。這並沒有很好地適應我的環境。我從導航模板文件中刪除了很多這些調用。一旦完成，我的新皮膚應用程序啓動並運行！祝你好運。

來源

2013-05-20 13:26:01 Mike

我爲少數項目做過這項工作，我主要同意邁克上面的回答。這裏是我看到的一些陷阱。

我們開始動態（恩伯）on Rails的所有我們的看法標準項目/靜是基於CSS的引導。當主要內部頁面啓動並顯示功能時，我們將重點放在着陸頁上。到這時候，我們有引導程序的寶石，fontawesome添加到我們的Gemfile中。

做的事情之一就是從Gemfile中刪除這些寶石「引導」，「fontawesome」。將這些包含在您的wrapbootstrap轉儲中。

也爲您一體化的進展，你可能會發現被重複了很多共同的代碼，它的分裂頁面組件您的最佳利益：頁眉，頁腳其他事情分Rails的看法。這嚴重節省了編輯工作。

另一件事，我發現讓每一件事情，而你仍處於整合階段是非常有用的，是拆你的CSS/JS包括從包裹引導你已經有了頁面導入的頁面。因此，如果您打算將所有現有網頁遷移到新的主題中，則可以分階段合併，否則可以讓它們共存。

你必須在routes.rb中添加新條目，控制器，支持來電頁面，如果你沒有他們了。喜歡關於，聯繫人，團隊等等

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

這是所有的事情我已經當我集成的Rails的EmberJS應用程序頂部的wrapbootstrap主題照顧了。

來源

2013-05-29 12:23:49 sudhanshu

確保在安裝Twitter的引導你應該添加以下的寶石到你的Gemfile在「組：資產」

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

然後運行bundle命令。現在

，主題爲「file_name.css」（FILE_NAME可以是任何），美已經下載只需將它下APP-> assests->樣式表添加到「樣式」文件夾

然後打開你的application.css文件在同一個文件夾在那裏你會看到

*= require_tree.

與

*= require "file_name.css"

注意替換此行：不要忘了重新編譯你的資產中或者乾脆刪除您的TMP/C的含量疼痛文件夾。

保存並重新啓動服務器。它會應用你新的主題。

來源

2013-06-06 07:25:22

觀看此培訓課程，指導您從頭開始詳細介紹。

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

來源

2014-01-14 11:13:15 Libertad

注意，[只有鏈路答案]（http://meta.stackoverflow.com/tags/link-only-answers/info）氣餒，SO答案應的終點尋找一個解決方案（而不是另一個引用的中途停留，這往往會隨着時間推移而變得陳舊）。請考慮在此添加獨立的摘要，並將鏈接保留爲參考。 – kleopatra

這是一個可怕的答案。課程不僅沒有解釋如何做到這一點，但你的答案不是終點解決方案。可怕。 –

這個答案與這個問題有什麼關係？ – TJChambers

如何將wrapbootstrap（使用twitter引導）主題添加到rails應用程序

回答

相關問題