রেলস অ্যাপে বুটস্ট্র্যাপ 3 ইনস্টল করা হচ্ছে

Question

আমি আমার রেল অ্যাপগুলিতে বুটস্ট্র্যাপ 3.0 ইনস্টল করার চেষ্টা করছি। আমি সম্প্রতি মাইকেল হার্টলের টিউটোরিয়ালটি শেষ করেছি এবং এখন বুটস্ট্র্যাপের এই নতুন সংস্করণটি ব্যবহার করে নিজের সিস্টেমটি তৈরি করার চেষ্টা করছি, তবে আমার কয়েকটি প্রশ্ন রয়েছে যা সম্পর্কে আমি নিশ্চিত নই।

আমার সিস্টেম চশমা:

• এমবিপিতে ওএস এক্স মাউন্টেন সিংহ
• রেল 4.0
• রুবি ২.০

আমার কাছে প্রশ্নগুলি:

1. আমার জেমফাইলে ব্যবহার করার জন্য সেরা রত্নটি কোনটি? আমি তাদের কয়েকটি খুঁজে পেয়েছি।
2. আমি আমার উপর কি আমদানি করব custom.css.scss? আমি কোথাও পড়েছি এটি ২.৩.২ থেকে পৃথক।
3. বুটস্ট্র্যাপের কাজ পেতে আমার আরও কিছু করার আছে, বা বাকি পদক্ষেপগুলি বুটস্ট্র্যাপ ২.৩.২-এর জন্য আমি অনুসরণ করেছি?

সম্পাদন করা

এখানে গিটহাবের বুটস্ট্র্যাপ-রেল প্রকল্পটি প্রথমে যা করতে বলেছে তা এখানে:

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

আমি রাজী. আমি আরও দেখতে পেলাম যে ফাইলগুলি সরাসরি tingোকানো পূর্ববর্তী সংস্থাগুলিতে কম সমস্যার মধ্যে চলে (যেমন, হেরোকুকে ঠেলে দেওয়ার জন্য)।

— Amy.js

এতে মাইনযুক্ত ফাইলগুলি অন্তর্ভুক্ত করার কোনও সুবিধা আছে কি vendor/assets/{stylesheets|javascripts}? স্প্রোকেটগুলিতে অন্তর্ভুক্ত থাকা ফাইলগুলিকে ছোট করা উচিত app/assets/{stylesheets|javascripts}।

— jrhorn424

কীভাবে চিত্র এবং ফন্ট ফাইল অন্তর্ভুক্ত করবেন?

— wwli

@wwli - নীচে আমার উত্তর দেখুন। এটি ব্যাখ্যা করে যে কীভাবে গ্লাইফিকনস এবং ফন্ট যুক্ত করতে হয়।

— rvg

আপনি বুটস্ট্র্যাপ এবং বুটস্ট্র্যাপ.মিন উভয়ই অনুলিপি করছেন কেন?

— জনমারলিনো 10:54 এ 614 এ

Answer 2

অনেকেই জানেন, রত্নের দরকার নেই।

পদক্ষেপগুলি গ্রহণ:

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

অ্যাপ্লিকেশন সিএসএস ফাইলের প্রয়োজনীয় বিবৃতিগুলির ক্রমটি কী সেই পথটিকে নিয়ন্ত্রণ করে না যেখানে ফাইলগুলি লোড করা হয় সেই পথের তালিকার ডিরেক্টরিগুলির আদেশের চেয়ে? পাথের ক্রমটি সাধারণত ফাইল নিয়ন্ত্রণ করে যা কোনও ফাইলের ভেরির ভার্শন বোঝানো হয় যদি এটি পাথ তালিকার অন্তর্ভুক্ত একাধিক ডিরেক্টরিতে পাওয়া যায়। যদি তা না হয় তবে প্রয়োজনীয় বিবৃতিগুলির ক্রম কীভাবে কার্যকর হয়?

— কিকিংবুল

দয়া করে মিনিড সংস্করণগুলি অনুলিপি করবেন না, অন্যথায় আপনি পরে ডাবল অন্তর্ভুক্ত পাবেন ('প্রয়োজনীয়_ত্রী মনে হয়' সেভাবে কাজ করে?)। কেবলমাত্র এই দ্বৈত-অন্তর্ভুক্তির কারণে আমি বুটসি রত্ন ইনস্টল করার পরে কোনও ড্রপডাউন খুলতে পারিনি ।

— কুরিন্ডউ হিম

@ কৌরিন্দউ হিমের মন্তব্যটি মনোযোগ দেওয়ার মতো বলে মনে হচ্ছে। আমি .min ফাইলগুলি সরিয়ে না দেওয়া পর্যন্ত আমি ড্রপডাউন খুলতে পারি না।

— পাকো আবাটো

Answer 3

এই উত্তরটি আপনার মধ্যে যারা কোনও রত্ন ব্যবহার না করেই আপনার রেল অ্যাপগুলিতে বুটস্ট্র্যাপ 3 ইনস্টল করতে খুঁজছেন তাদের পক্ষে। এটি করার জন্য দুটি সহজ উপায় যা 10 মিনিটেরও কম সময় নেয়। আপনার প্রয়োজন অনুসারে সবচেয়ে ভাল যেটিকে বেছে নিন ick গ্লাইফিকনস এবং জাভাস্ক্রিপ্ট কাজ করে এবং আমি সেগুলিও 4.1.0 রেলের সর্বশেষ বিটা দিয়ে পরীক্ষা করেছি।

1. রেল 4 সহ বুটস্ট্র্যাপ 3 ব্যবহার করুন - বুটস্ট্র্যাপ 3 ফাইলগুলি আপনার অ্যাপ্লিকেশনটির বিক্রেতা ডিরেক্টরিতে অনুলিপি করা হয়েছে।

2. আপনার রেল অ্যাপ্লিকেশনটিতে সিডিএন থেকে বুটস্ট্র্যাপ যুক্ত করা - বুটস্ট্র্যাপ সিডিএন থেকে বুটস্ট্র্যাপ 3 ফাইল সরবরাহ করা হয় ।

উপরের নম্বর 2 সবচেয়ে নমনীয়। আপনাকে যা করতে হবে তা হ'ল একটি লেআউট সহায়কতে সঞ্চিত সংস্করণ নম্বরটি পরিবর্তন করা। সুতরাং আপনি আপনার পছন্দের বুটস্ট্র্যাপ সংস্করণটি চালাতে পারেন, এটি 3.0.0, 3.0.3 বা তার চেয়েও পুরানো বুটস্ট্র্যাপ 2 রিলিজ হোক।

Comments

এটি কাজ করতে পারে বলে মনে হচ্ছে না। এটি localhost:3000/fonts/glyphicons-halflings-regular.svgক্রোম কনসোলে উদাহরণ হিসাবে অনুসন্ধান চালিয়ে যায় এবং গ্লাইফিকনগুলি সামনে আসে না (404 হিসাবে)।

— স্টিভ 21

@ স্টিভ - আমি ধরে নিয়েছি আপনার বিকাশে সমস্যা হচ্ছে এবং আপনি উপরে # 1 বেছে নিয়েছেন। যদি এটি সঠিক হয় তবে আমি বুটস্ট্র্যাপ ফন্ট ডিরেক্টরি এবং এর সমস্ত বিষয়বস্তু /vendor/assets/আপনার প্রকল্পে অনুলিপি করে দেখতে পেয়েছি । আপনি বুটস্ট্র্যাপ.মিন প্রয়োজন এবং আপনার কাছে @ ফন্ট-ফেস ওভাররাইড রয়েছে তা নিশ্চিত করার জন্য আপনার অ্যাপ্লিকেশন সিএসএস পরীক্ষা করা উচিত। এসসিএসএস আজকাল ব্যাপকভাবে ব্যবহৃত হয়। আপনি যদি এটি ব্যবহার করে থাকেন তবে আপনার @ ফন্ট-ফেস ওভাররাইডগুলিতে 'src: url' থেকে 'src: asset-url' পরিবর্তন করতে হবে। পোস্টের নীচে একটি নমুনা প্রকল্পও রয়েছে যা সহায়তা করতে পারে।

— আরভিজি

ফন্টগুলি নিয়ে আমার কোনও শেষ নেই - উন্নয়নে ভাল কাজ করেছি তবে উত্পাদন নয়। এগুলি কেবল সর্বজনীন / ফন্টে রেখে শেষ হয়েছে

— ক্রিসজে

Answer 4

টুইটারে এখন রত্ন অন্তর্ভুক্ত বুটস্ট্র্যাপের একটি সাস-রেডি সংস্করণ রয়েছে, সুতরাং এটি রিয়েলগুলিতে যুক্ত করা আগের চেয়ে সহজ।

কেবল আপনার রত্নখাত্রে নিম্নলিখিতটি যুক্ত করুন:

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

bundle install এবং পাইপলাইনের মাধ্যমে ফাইলগুলি উপলভ্য করতে আপনার সার্ভার পুনরায় চালু করুন।

কেবল কম্পাস এবং সাস-কেবল সমর্থন রয়েছে: https://github.com/twbs/bootstrap-sass

Comments

ধন্যবাদ। Newbies জন্য গিথুব রেডমে থেকে একটি মূল পয়েন্ট; "যদি আপনি স্রেফ একটি নতুন রেল অ্যাপস তৈরি করেছেন তবে এটি পরিবর্তে একটি .css ফাইল নিয়ে আসতে পারে this যদি এই ফাইলটি উপস্থিত থাকে তবে এটি সাসের পরিবর্তে পরিবেশন করা হবে, সুতরাং এটির নাম পরিবর্তন করুন ..."

— ব্রেট

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

সম্পত্তির পাইপলাইনের সাহায্যে বুটস্ট্র্যাপ-সাস রিলে ফেলা সহজ to

আপনার জেমফাইলে আপনাকে বুটস্ট্র্যাপ-সাস জহরত যোগ করতে হবে এবং সাস-রেলস রত্নটি উপস্থিত রয়েছে তা নিশ্চিত করতে হবে - এটি ডিফল্টভাবে নতুন রেল অ্যাপ্লিকেশনগুলিতে যুক্ত করা হয়।

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

জেএসে //= require js/bootstrap

সম্পন্ন!

এই পদ্ধতিগুলি হ'ল ফন্টগুলি অন্য কোনও বিশেষ কনফিগারেশন ছাড়াই লোড করে তোলে এবং তাদের স্বয়ংসম্পূর্ণ ডিরেক্টরি থেকে বুটস্ট্র্যাপ ফাইলগুলি সরানোর প্রয়োজন হয় না।

Answer 8

এই শাখাটি ব্যবহার করে আশা করা যায় সমস্যার সমাধান হবে:

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

Answer 9

আমি মনে করি নতুন বুটস্ট্র্যাপ সংস্করণের জন্য সর্বাধিক টু ডেট রত্নটি ফর্ম অঞ্জলব ।

তবে আমি জানি না যে এটি যখন অন্য রত্নগুলির সাথে সাদাসিধা যেমন আপনি করেন তখন ঠিক ভাল কাজ করে কিনা rails generate simple_form:install --bootstrapইত্যাদি boot নতুন বুটস্ট্র্যাপ সংস্করণে ফিট করার জন্য আপনাকে কিছু প্রাথমিক বা কনফিগারেশন সম্পাদনা করতে হতে পারে।

Comments

উত্তরের জন্য ধন্যবাদ. তাহলে আমার জেমফাইলে 'রত্ন অঞ্জলব' আমাকে কি করতে হবে @ tbraun89?

— মেগাশিগগার

রিডমেটি গিথুব পৃষ্ঠায় রয়েছে। বর্তমান রত্ন হয় gem "anjlab-bootstrap-rails", "~> 3.0.0.1"।

— tbraun89

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

— রিডমে

ধন্যবাদ! আমি প্রশ্নে কিছু যুক্ত করেছি। আপনি 'সম্পাদনা' করার পরে অংশটি পরিষ্কার করতে পারবেন?

— মেগাশিগার

প্রথমটি সরাসরি গিথুব থেকে ফাইলগুলি লোড করে তাই আপনি যখন একটি বান্ডিল আপডেট করবেন তখন আপনার নতুন সংস্করণ থাকবে, সেকেন্ডটি রুবিজেমস থেকে রত্নটি লোড করে যা এই মুহুর্তে সংস্করণ 3.0.০.০.১। (2 দিন বয়সী)

— tbraun89

Answer 10

আমার আসলে এটির একটি সহজ সমাধান ছিল যার মধ্যে আমি কীভাবে এটি কাজ করতে পারি তা সম্পর্কে আমার মাথা প্রায় স্ক্র্যাচ করে। hahah!

ঠিক আছে, আমি প্রথমে বুটস্ট্র্যাপ ডাউনলোড করেছি (সংকলিত সিএসএস এবং জেএস সংস্করণ)।

তারপরে আমি সমস্ত বুটস্ট্র্যাপের সিএসএস ফাইলগুলি পেস্ট করেছি app/assets/stylesheets/।

এবং তারপরে আমি সমস্ত বুটস্ট্র্যাপ জেএস ফাইলগুলিতে আটকালাম app/assets/javascripts/।

আমি পৃষ্ঠাটি আবার লোড করে ওয়াল্লাহ! আমি আমার আরআর-এ কেবল বুটস্ট্র্যাপ যুক্ত করেছি!