Rails App पर बूटस्ट्रैप 3 को इंस्टॉल करना

Question

मैं अपने रेल एप्लिकेशन पर बूटस्ट्रैप 3.0 स्थापित करने की कोशिश कर रहा हूं। मैंने हाल ही में माइकल हार्टल के ट्यूटोरियल को समाप्त किया है और अब मैं बूटस्ट्रैप के इस नए संस्करण का उपयोग करके अपना स्वयं का सिस्टम बनाने की कोशिश कर रहा हूं, लेकिन मेरे पास कुछ प्रश्न हैं जिनके बारे में मुझे यकीन नहीं है।

मेरा सिस्टम चश्मा:

• एमबीपी पर ओएस एक्स माउंटेन लायन
• रेल्स 4.0
• रूबी 2.0

मेरे पास प्रश्न:

1. मेरे जेमफाइल में उपयोग करने के लिए सबसे अच्छा रत्न कौन सा है? मैंने उनमें से कुछ पाया है।
2. मैं अपने पर क्या आयात करूं custom.css.scss? मैंने कहीं पढ़ा कि यह 2.3.2 से अलग है।
3. क्या बूटस्ट्रैप को काम करने के लिए मुझे कुछ और करना है, या शेष चरण वही हैं जिन्हें मैंने बूटस्ट्रैप 2.3.2 के लिए अनुसरण किया है?

संपादित करें

यहां बताया गया है कि GitHub पर बूटस्ट्रैप-रेल परियोजना पहले क्या करने के लिए कहती है:

gem 'anjlab-bootstrap-rails', :require => 'bootstrap-rails',
                              :github => 'anjlab/bootstrap-rails'

तो यह करने के लिए कहते हैं:

gem 'anjlab-bootstrap-rails', '>= 3.0.0.0', :require => 'bootstrap-rails'

क्या वे एक ही काम करते हैं, या क्या आपको उन दोनों को करना है?

Answer 1

वास्तव में आपको इसके लिए मणि की आवश्यकता नहीं है, यहां आरओआर में बूटस्ट्रैप 3 स्थापित करने का चरण है

• बूटस्ट्रैप डाउनलोड करें

• कॉपी करें:

  bootstrap-dist/css/bootstrap.css तथा bootstrap-dist/css/bootstrap.min.css

  सेवा: vendor/assets/stylesheets

• कॉपी करें:

  bootstrap-dist/js/bootstrap.js तथा bootstrap-dist/js/bootstrap.min.js

  सेवा: vendor/assets/javascripts

• अपडेट: app/assets/stylesheets/application.css जोड़कर

  *= require bootstrap.min

• अपडेट: app/assets/javascripts/application.js जोड़कर

  //= require bootstrap.min

इससे आप किसी भी समय बूटस्ट्रैप को अपडेट कर सकते हैं, आपको अपडेट होने के लिए मणि की प्रतीक्षा करने की आवश्यकता नहीं है। इस दृष्टिकोण के साथ परिसंपत्ति पाइपलाइन उत्पादन में लघु संस्करण का उपयोग करेगी।

Comments

मैं सहमत हूँ। मैंने यह भी पाया कि सीधे फ़ाइलों को सम्मिलित करने से संपत्ति को कम करने के मामले में कम हो जाता है (जैसे, हरोकू को धक्का देने के लिए)।

— एमीज।

क्या इसमें मिनिमाइज्ड फाइलों को शामिल करने का कोई फायदा है vendor/assets/{stylesheets|javascripts}? Sprockets को उन फ़ाइलों को छोटा करना चाहिए जो इसमें शामिल हैं app/assets/{stylesheets|javascripts}।

— jrhorn424

छवि और फोंट फ़ाइलों को कैसे शामिल करें?

— wwli

@ हवेली - नीचे मेरा जवाब देखें। यह बताता है कि ग्लिफ़िकन्स और फोंट को कैसे जोड़ा जाए।

— आरवीजी

आप बूटस्ट्रैप और बूटस्ट्रैप दोनों को क्यों कॉपी कर रहे हैं?

— जॉनमेरलिनो

Answer 2

जैसा कि बहुत से लोग जानते हैं, मणि की कोई आवश्यकता नहीं है।

कदम उठाने के लिए:

1. बूटस्ट्रैप डाउनलोड करें
   • डायरेक्ट डाउनलोड लिंक बूटस्ट्रैप 3.1.1
   • या http://getbootstrap.com/ पर मिल गया

2. प्रतिलिपि

   bootstrap/dist/css/bootstrap.css
   bootstrap/dist/css/bootstrap.min.css 

   सेवा: app/assets/stylesheets

3. प्रतिलिपि

   bootstrap/dist/js/bootstrap.js
   bootstrap/dist/js/bootstrap.min.js 

   सेवा: app/assets/javascripts

4. जोङना: app/assets/stylesheets/application.css

   * - बूटस्ट्रैप की आवश्यकता है

5. जोङना: app/assets/javascripts/application.js

   // = बूटस्ट्रैप की आवश्यकता है

बस इतना ही। आप एक नया कूल बूटस्ट्रैप टेम्पलेट जोड़ने के लिए तैयार हैं।

---

app/इसके बजाय क्यों vendor/?

एप्लिकेशन / परिसंपत्तियों में फ़ाइलों को जोड़ना महत्वपूर्ण है , इसलिए भविष्य में आप बूटस्ट्रैप शैलियों को अधिलेखित करने में सक्षम होंगे।

यदि बाद में आप custom.css.scssकस्टम स्टाइल वाली फाइल जोड़ना चाहते हैं। आप में इसके समान कुछ होगा application.css:

 *= require bootstrap                                                            
 *= require custom  

यदि आपने बूटस्ट्रैप फ़ाइलों को ऐप / परिसंपत्तियों में रखा है , तो सब कुछ उम्मीद के मुताबिक काम करता है। लेकिन, यदि आपने उन्हें विक्रेता / परिसंपत्तियों में रखा है , तो बूटस्ट्रैप फाइलें अंतिम लोड हो जाएंगी। ऐशे ही:

<link href="/assets/custom.css?body=1" media="screen" rel="stylesheet">
<link href="/assets/bootstrap.css?body=1" media="screen" rel="stylesheet">

इसलिए, आपके कुछ अनुकूलन उपयोग नहीं किए जाएंगे क्योंकि बूटस्ट्रैप शैलियाँ उन्हें ओवरराइड कर देंगी।

इसके पीछे कारण

कई स्थानों पर रेल संपत्ति की खोज करेगी; इस स्थानों की सूची प्राप्त करने के लिए आप यह कर सकते हैं:

$ rails console
> Rails.application.config.assets.paths

आउटपुट में आप देखेंगे कि ऐप / परिसंपत्तियाँ पूर्वता लेती हैं, इस प्रकार इसे पहले लोड किया जाता है।

Comments

क्या एप्लिकेशन में आवश्यक कथनों का क्रम नहीं है। फ़ाइल फ़ाइल पथ सूची में निर्देशिकाओं के आदेश के बजाय फ़ाइलों को लोड करने के क्रम को नियंत्रित करती है? रास्तों के क्रम को नियंत्रित किया जाता है, जो पथ सूची में शामिल कई निर्देशिकाओं में पाया जाता है, तो फ़ाइल गेस्ट के किस संस्करण को लोड किया जाता है। यदि नहीं, तो आवश्यकता बयानों का क्रम कैसे चलता है?

— 21

कृपया कीमा बनाया हुआ संस्करणों की प्रतिलिपि न करें, अन्यथा आपको बाद में डबल मिलेगा (ऐसा लगता है कि 'requ_tree।' इस तरह से काम करता है?)। मैं भी इंस्टॉल किया गया के बाद किसी भी ड्रॉपडाउन खोलने में असमर्थ था बूट्सी सिर्फ इसलिए की इस डबल शामिल मणि।

— कोरिंदौ हिमे

@ कौरिन्दो हिमे की टिप्पणी ध्यान देने योग्य है। मैं ड्रॉपडाउन को तब तक नहीं खोल सकता था जब तक कि मैं .min फाइलें नहीं हटा देता।

— पाको अबाटो

Answer 3

यह जवाब आप में से उन लोगों के लिए है जो बिना मणि का उपयोग किए अपने रेल एप्लिकेशन में बूटस्ट्रैप 3 स्थापित करना चाहते हैं। ऐसा करने के दो सरल तरीके हैं जो 10 मिनट से कम समय लेते हैं। अपनी जरूरतों को पूरा करने वाले को ही चुनें। ग्लिफ़िकॉन और जावास्क्रिप्ट काम करते हैं और मैंने उन्हें नवीनतम रीलों के नवीनतम बीटा 4.1.0 के साथ परीक्षण किया है।

1. बूट्सट्रैप 3 का उपयोग रेल्स 4 के साथ - बूटस्ट्रैप 3 फाइलों को आपके एप्लिकेशन के वेंडर डायरेक्टरी में कॉपी किया जाता है।

2. अपने रूल्स एप्लिकेशन में CDN से बूटस्ट्रैप जोड़ना - बूटस्ट्रैप 3 फाइलें बूटस्ट्रैप CDN से सेवित हैं ।

ऊपर 2 नंबर सबसे लचीला है। आपको बस उस संस्करण संख्या को बदलना होगा जो एक लेआउट हेल्पर में संग्रहीत है। तो आप अपनी पसंद के बूटस्ट्रैप संस्करण को चला सकते हैं, चाहे वह 3.0.0, 3.0.3 या इससे भी पुराना बूटस्ट्रैप 2 रिलीज़ हो।

Comments

यह काम करने के लिए प्राप्त करने के लिए प्रतीत नहीं कर सकते। यह localhost:3000/fonts/glyphicons-halflings-regular.svgक्रोम कंसोल में एक उदाहरण के रूप में खोज करता रहता है, और ग्लिफ़िकॉन ऊपर नहीं आ रहा है (404 के रूप में)।

— स्टीव

@Steve - मैंने मान लिया है कि आपको विकास में समस्या हो रही है और आपने ऊपर # 1 चुना है। यदि यह सही है, तो मैं दोहराता हूँ कि आपने बूटस्ट्रैप फोंट निर्देशिका की नकल की है और यह सब /vendor/assets/आपके प्रोजेक्ट की सामग्री है । आपको अपने आवेदन की जांच करनी चाहिए। यह सुनिश्चित करने के लिए कि आपको bootstrap.min की आवश्यकता है और आपके पास @ फॉन्ट-फेस ओवरराइड है। SCSS इन दिनों व्यापक रूप से उपयोग किया जाता है। यदि आप इसका उपयोग कर रहे हैं, तो आपको @ फॉन्ट-फेस ओवरराइड्स में 'src: url' को 'src: परिसंपत्ति-url' बदलने की आवश्यकता है। पोस्ट के निचले भाग में एक नमूना परियोजना भी है जो मदद कर सकती है।

— rvg

फोंट के साथ मुझे कोई परेशानी नहीं थी - विकास में ठीक काम किया लेकिन उत्पादन में नहीं।

— अंत

Answer 4

ट्विटर में अब मणि के साथ बूटस्ट्रैप का एक सेट -तैयार संस्करण शामिल है, इसलिए इसे रेल में जोड़ना पहले से कहीं अधिक आसान है।

बस अपने रत्न को निम्नलिखित में जोड़ें:

gem 'sass-rails', '>= 3.2' # sass-rails needs to be higher than 3.2
gem 'bootstrap-sass', '~> 3.1.1'

bundle install और पाइपलाइन के माध्यम से फाइल उपलब्ध कराने के लिए अपने सर्वर को पुनः आरंभ करें।

कम्पास और sass-only के लिए भी समर्थन है: https://github.com/twbs/bootstrap-sass

Comments

धन्यवाद। न्यूबाइट्स के लिए जीथब रीडमे से एक प्रमुख बिंदु; "अगर आपने एक नया रेल एप्लिकेशन बनाया है, तो इसके बजाय .css फ़ाइल के साथ आ सकता है। यदि यह फ़ाइल मौजूद है, तो इसे Sass के बजाय परोसा जाएगा, इसलिए इसका नाम बदलें ..."

— Brett

Answer 5

मैं https://github.com/yabawock/bootstrap-sass-rails का उपयोग करता हूं

जो कि बहुत ही सीधे फॉरवर्ड इंस्टॉल, तेज मणि अपडेट और फॉलोअप और मामले में त्वरित सुधार की आवश्यकता है।

Comments

यह मणि पदावनत है (जैसा कि वे स्वयं बताते हैं)। इसके बजाय आधिकारिक SASS पोर्ट का उपयोग करें: github.com/twbs/bootstrap-sass (यह उत्तर भी देखें: stackoverflow.com/a/20875719/3451975 )

— Jeehut

Answer 6

gem bootstrap-sass

बूटस्ट्रैप-एसएएस को परिसंपत्ति पाइपलाइन के साथ रेल में गिराना आसान है।

अपने जेमफाइल में आपको बूटस्ट्रैप-सैस रत्न को जोड़ना होगा, और यह सुनिश्चित करना होगा कि सैस-रेल रत्न मौजूद है - यह डिफ़ॉल्ट रूप से नए रेल अनुप्रयोगों में जोड़ा जाता है।

gem 'sass-rails', '>= 3.2' # sass-rails needs to be higher than 3.2 gem 'bootstrap-sass', '~> 3.0.3.0'

bundle install और पाइपलाइन के माध्यम से फाइल उपलब्ध कराने के लिए अपने सर्वर को पुनः आरंभ करें।

स्रोत: http://rubydoc.info/gems/bootstrap-sass/3.0.3.0/frames

Answer 7

मेरे लिए, ऐसा करने का सबसे सरल तरीका है

1) डाउनलोड और अनज़िप बूटस्ट्रैप में vendor

2) अपने विन्यास में बूटस्ट्रैप पथ जोड़ें

config.assets.paths << Rails.root.join("vendor/bootstrap-3.3.6-dist")

3) उनकी आवश्यकता है

सीएसएस में *= require css/bootstrap

js में //= require js/bootstrap

किया हुआ!

यह विधियाँ फोंट को किसी अन्य विशेष विन्यास के बिना लोड करती हैं और उन्हें बूटस्ट्रैप फ़ाइलों को अपनी स्वयं की निर्देशिका से बाहर ले जाने की आवश्यकता नहीं होती है।

Answer 8

इस शाखा के उपयोग से उम्मीद है कि समस्या का समाधान होगा:

gem 'twitter-bootstrap-rails',
  git: 'git://github.com/seyhunak/twitter-bootstrap-rails.git',
  branch: 'bootstrap3'

Answer 9

मुझे लगता है कि नए बूटस्ट्रैप संस्करण के लिए मणि अप करने के लिए सबसे ऊपर है अंजलाब ।

लेकिन मुझे नहीं पता कि यह वर्तमान में अन्य रत्नों जैसे simple_form के साथ अच्छा काम करता है जब आप करते हैं rails generate simple_form:install --bootstrap, आदि। आपको नए बूटस्ट्रैप संस्करण को फिट करने के लिए कुछ इनिशियलाइज़र या कॉन्फ़िगरेशन को संपादित करना पड़ सकता है।

Comments

जवाब देने के लिए धन्यवाद। तो मेरे जेमफाइल में 'मणि अंजलाब' मुझे केवल @ tbraun89 करना है?

— मेगाशिगर

रीडमेथ जीथब पेज पर है। वर्तमान रत्न है gem "anjlab-bootstrap-rails", "~> 3.0.0.1"।

— tbraun89

gem 'anjlab-bootstrap-rails', '>= 3.0.0.0', :require => 'bootstrap-rails'

— रेडमी में

धन्यवाद! मैंने सवाल में कुछ जोड़ा। क्या आप 'संपादन' के बाद के भाग को स्पष्ट कर सकते हैं?

— मेगाशिगर 4

पहली बार फ़ाइलों को सीधे गिथब से लोड किया जाता है ताकि जब आप एक बंडल अपडेट करते हैं तो आपके पास सबसे नया संस्करण होगा, एकांत में रगड़ से रत्न लोड होता है जो इस समय 3.0.0.1 संस्करण है। (2 दिन पुराना)

— tbraun89

Answer 10

मैं वास्तव में इस पर एक आसान समाधान था जिसमें मैं अपने सिर को खरोंच कर देता हूं कि यह कैसे काम करता है। hahah!

खैर, पहले मैंने बूटस्ट्रैप (संकलित सीएसएस और जेएस संस्करण) डाउनलोड किया।

फिर मैंने सभी बूटस्ट्रैप css फाइल को पेस्ट किया app/assets/stylesheets/।

और फिर मैंने सभी बूटस्ट्रैप js फाइलों को पेस्ट किया app/assets/javascripts/।

मैंने पृष्ठ और वालेह को फिर से लोड किया! मैंने अभी अपने RoR में बूटस्ट्रैप जोड़ा है!