मैं MVC 5 परियोजना में बूटस्वाच या रैपबूटस्ट्रैप से किसी विषय को कैसे लागू कर सकता हूं?

Question

मैं एक नया ASP.Net MVC5 वेब एप्लिकेशन बनाने वाला हूं। मैं एप्लिकेशन में बूटस्वाच या रैपबूटस्ट्रैप से एक विषय का उपयोग करना चाहूंगा, लेकिन यह कैसे करना है इस पर निर्देशों का एक सेट नहीं मिल सकता है।

Comments

यह वह नहीं है जो आप ढूंढ रहे हैं, लेकिन यह काफी सरल है। अपने कंटेंट फोल्डर में, .cssथीम को और अपने App_Start बंडल में शामिल करें। Config.cs, के ~/Content/bootstrap.cssसाथ बदलें~/Content/yourtheme.bootstrap.css

— कैरी केंडल

धन्यवाद कैरी यह एक सुंदर जवाब है। आप वास्तविक लेआउट पृष्ठ के बारे में क्या करते हैं? बस नमूने से HTML के साथ शरीर को बदलें? मैं यह सुनिश्चित करना चाहता हूं कि इसके लिए कोई GitHub या अन्य स्वचालित प्रक्रिया न हो। मैं इसका उत्तर इस रूप में दूंगा कि अगर अगले दिन कोई और टिप्पणी नहीं मिलती है।

— पीटर लाउडन

लेआउट पृष्ठ के लिए, मुझे लगता है कि यह डिफ़ॉल्ट टेम्पलेट है । यह अन्य थीम के साथ बॉक्स से बाहर काम करेगा। सीधे शब्दों में कहें, एक थीम बूटस्ट्रैप के बस अलग-अलग रंग के / स्टाइल वाले संस्करण हैं। तो, बटन अलग-अलग रंग के हो सकते हैं और कुछ घटकों में अलग-अलग सीमा-त्रिज्या हो सकती है, लेकिन वास्तविक समग्र शैली कमोबेश एक जैसी होगी। आप विभिन्न लेआउट लागू कर सकते हैं , बस बंडलों के साथ शामिल करें।

— कैरी केंडल

मैं बाद में अधिक विवरण के साथ एक अच्छी तरह से लिखित उत्तर की आपूर्ति करूंगा:]

— कैरी केंडल

साभार @Carrie क्या आपके पास रैपबूटस्ट्रैप से प्रीमियम थीम का उपयोग करने का अनुभव है और क्या सिद्धांत समान है?

— पीटर लाउडन

Answer 1

एक विषय को लागू करने के लिए कदम काफी सरल हैं। यह समझने के लिए कि सब कुछ एक साथ कैसे काम करता है, आपको यह समझने की आवश्यकता होगी कि ASP.NET MVC 5 टेम्पलेट बॉक्स से क्या प्रदान कर रहा है और आप इसे अपनी आवश्यकताओं के लिए कैसे अनुकूलित कर सकते हैं।

_{नोट: यदि आपको MVC 5 टेम्पलेट कैसे काम करता है, इसकी बुनियादी समझ है, तो थीमिंग अनुभाग पर नीचे स्क्रॉल करें।}

---

ASP.NET MVC 5 टेम्पलेट: यह कैसे काम करता है

यह वॉक-थ्रू एक एमवीसी 5 परियोजना बनाने के लिए और हुड के तहत क्या हो रहा है पर चला जाता है । इस ब्लॉग में MVC 5 टेम्पलेट की सभी विशेषताएं देखें ।

1. एक नया प्रोजेक्ट बनाएं। टेम्प्लेट के तहत वेब > ASP.NET वेब एप्लिकेशन चुनें । अपनी परियोजना के लिए एक नाम दर्ज करें और क्लिक करें OK।

2. अगले विज़ार्ड पर, MVC चुनें और क्लिक करें OK। यह MVC 5 टेम्पलेट लागू होगा।

   

3. MVC 5 टेम्पलेट एक MVC एप्लिकेशन बनाता है जो उत्तरदायी डिज़ाइन और थीमिंग सुविधाएँ प्रदान करने के लिए बूटस्ट्रैप का उपयोग करता है। हुड के अंतर्गत, टेम्पलेट एक भी शामिल है बूटस्ट्रैप 3. * nuget पैकेज है कि 4 फ़ाइलों को स्थापित करता है: bootstrap.css, bootstrap.min.css, bootstrap.js, और bootstrap.min.js।

   

4. वेब अनुकूलन सुविधा का उपयोग करके बूटस्ट्रैप को आपके एप्लिकेशन में बंडल किया जाता है। निरीक्षण करें Views/Shared/_Layout.cshtmlऔर देखें

   @Styles.Render("~/Content/css")
   

   तथा

   @Scripts.Render("~/bundles/bootstrap") 
   

   ये दो रास्ते बंडलों को संदर्भित करते हैं App_Start/BundleConfig.cs:

   bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
       "~/Scripts/bootstrap.js",
       "~/Scripts/respond.js"));
   
   bundles.Add(new StyleBundle("~/Content/css").Include(
       "~/Content/bootstrap.css",
       "~/Content/site.css"));
   

5. यह वही है जो आपके एप्लिकेशन को बिना किसी कॉन्फ़िगरेशन के सामने चलाना संभव बनाता है। अब अपना प्रोजेक्ट चलाने का प्रयास करें।

   

---

ASP.NET MVC 5 में बूटस्ट्रैप थीम्स लागू करना

यह MVC 5 प्रोजेक्ट में बूटस्ट्रैप थीम को कैसे लागू किया जाए, यह चलता है

1. सबसे पहले, cssउस विषय को डाउनलोड करें जिसे आप लागू करना चाहते हैं। इस उदाहरण के लिए, मैं बूटस्वाच का सपाट उपयोग करूंगा । डाउनलोड किया शामिल करें flatly.bootstrap.cssऔर flatly.bootstrap.min.cssमें Contentफ़ोल्डर (यकीन है कि परियोजना में शामिल करने के लिए भी हो)।

2. App_Start/BundleConfig.csनिम्नलिखित को खोलें और बदलें:

   bundles.Add(new StyleBundle("~/Content/css").Include(
       "~/Content/bootstrap.css",
       "~/Content/site.css"));
   

   अपनी नई थीम शामिल करने के लिए:

   bundles.Add(new StyleBundle("~/Content/css").Include(
       "~/Content/flatly.bootstrap.css",
       "~/Content/site.css"));
   

3. यदि आप _Layout.cshtmlMVC 5 टेम्पलेट में शामिल डिफ़ॉल्ट का उपयोग कर रहे हैं , तो आप चरण 4 पर छोड़ सकते हैं। यदि नहीं, तो न्यूनतम रूप से, अपने बूटस्ट्रैप HTML टेम्पलेट के साथ अपने लेआउट में इन दो पंक्ति को शामिल करें :

   अपने में <head>:

   @Styles.Render("~/Content/css")
   

   समापन से पहले अंतिम पंक्ति </body>:

   @Scripts.Render("~/bundles/bootstrap")
   

4. अब अपना प्रोजेक्ट चलाने का प्रयास करें। अब आपको अपने विषय का उपयोग करके अपने नए बनाए गए एप्लिकेशन को देखना चाहिए।

   

---

साधन

की जाँच करें इस भयानक 30 दिन चलने के माध्यम से गाइड द्वारा जेम्स मंडलों में अधिक जानकारी, ट्यूटोरियल, सुझाव और कैसे ASP.NET MVC 5 के साथ ट्विटर बूटस्ट्रैप का उपयोग करने पर चाल के लिए।

• बूटस्ट्रैप
• दृश्य स्टूडियो 2013 वेब प्रोजेक्ट टेम्पलेट्स में बूटस्ट्रैप
• ASP.NET MVC 5 के साथ आरंभ करना
• ASP.NET MVC 5 के साथ बूटस्ट्रैप 3 - चरण दर चरण ट्विंकल से
• बूटस्वाच - बूटस्ट्रैप के लिए मुफ्त थीम

Comments

मैं मुख्य रूप से एक CDN का उपयोग करने का सुझाव नहीं दूंगा क्योंकि आप बहुत सारे अनुकूलन खो देते हैं जो कि बंडलिंग में निर्मित होते हैं (जैसे कि minification )। इसके साथ ही किया जा रहा है ने कहा, आप बस को प्रतिबिंबित करने के CDN यानी की उस दृश्य में लिंक को बदल देंगे कदम # 4 में@Styles.Render("//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/cerulean/bootstrap.min.css")

— कैरी केंडल

जब मैंने दौड़ने की कोशिश की तो मैंने ऐसा किया (लेकिन साइबर थीम के साथ) और अब मुझे "An Type of System 'System.IndexOutOfRangeException' WebGrease.dll में हुई। त्रुटि Styles.Render ("~ / सामग्री / सीएसएस") पर होती है

— HitLikeAHammer

मैं कभी भी एक सार्वजनिक CDN का उपयोग इस कारण से नहीं करूंगा कि मेरे पास बॉक्स का नियंत्रण नहीं है या सुरक्षा अभ्यास नहीं हैं । किसी भी मामले में, यह वार्तालाप वास्तव में इस पोस्ट के लिए विषय पर नहीं है, इसलिए यदि आप बातचीत पर ले जाना चाहते हैं तो मुझे चैट में शामिल होने पर विचार करें :)

— कैरी केंडल

@SixOThree मैं स्क्रीनशॉट में बहुत अधिक मूल्य नहीं रखूँगा, मैंने उन्हें एक दृश्य उदाहरण के लिए लिंक किए गए लेखों में से एक से खींच लिया। आशा है कि मदद करता है :)

— कैरी केंडल

मुझे बस समाधान मिला: मैं बूटस्ट्रैप v4 थीम का उपयोग कर रहा था, जबकि मेरा बूटस्ट्रैप संस्करण 3.x था। एक बार जब मैंने सही संस्करण के लिए एक थीम का उपयोग किया, तो सब कुछ समस्याओं के बिना काम किया। @ CarrieKendall, मुझे लगता है कि यह आगामी पाठकों के लिए बहुत उपयोगी हो सकता है यदि आप इस बिंदु को अपने उत्तर में जोड़ते हैं।

— 41686d6564

Answer 2

यह थोड़ी देर हो सकती है; लेकिन किसी को यह उपयोगी लगेगा।

MVC5 के लिए एक लोकप्रिय बूटस्ट्रैप टेम्पलेट - AdminLTE को एकीकृत करने के लिए एक Nuget पैकेज है

बस इस कमांड को अपने Visual Studio Package Manager कंसोल में चलाएं

Install-Package AdminLteMvc

एनबी: इसे स्थापित करने में थोड़ा समय लग सकता है क्योंकि यह सभी आवश्यक फाइलों को डाउनलोड करने के साथ-साथ नमूना पूर्ण और आंशिक विचार (.cshtml फाइलें) भी बनाता है जो आपको विकसित करने के लिए मार्गदर्शन कर सकते हैं। एक नमूना लेआउट फ़ाइल _AdminLteLayout.cshtmlभी प्रदान की जाती है।

आपको ~/Views/Shared/फ़ोल्डर में फाइलें मिलेंगी

Comments

यह `AdminLteMvc Nuget बहुत साफ है! मैंने अभी-अभी almsaeedstudio.com/preview पर पूर्वावलोकन की जाँच की है। यह पसंद है ... सब कुछ एक व्यवस्थापक वेबसाइट टेम्पलेट में की आवश्यकता होगी :)

— शिव

Answer 3

सबसे पहले, यदि आप अपना पता लगाने में सक्षम हैं

bootstrap.css फ़ाइल

तथा

bootstrap.min.js फ़ाइल

आपके कंप्यूटर में, फिर आप क्या करते हैं

सबसे पहले http://bootswatch.com/ से अपनी पसंदीदा थीम डाउनलोड करें

डाउनलोड किए गए bootstrap.css और bootstrap.min.js को कॉपी करें फ़ाइलों की

फिर आपके कंप्यूटर में मौजूदा फ़ाइलों का पता लगाते हैं और उन्हें नई डाउनलोड की गई फ़ाइलों के साथ बदल देते हैं।

ध्यान दें: सुनिश्चित करें कि आपकी डाउनलोड की गई फ़ाइलों का नाम बदलकर आपके फ़ोल्डर में है

अर्थात

तब आप जाने के लिए अच्छे हैं।

कभी-कभी परिणाम तुरंत प्रदर्शित नहीं हो सकता है। आपके ब्राउज़र को ताज़ा करने के तरीके के रूप में सीएसएस चलाने की आवश्यकता हो सकती है

Answer 4

मेरे पास MSDN पर एक लेख है - कस्टम बूटस्ट्रैप थीम / लेआउट के साथ ASP.NET MVC बनाना, वीएस 2012, वीएस 2013 और वीएस 2015 का उपयोग करके, इसमें एक डेमो कोड नमूना भी संलग्न है .. कृपया नीचे दिए गए लिंक को देखें। https://code.msdn.microsoft.com/ASPNET-MVC-application-62ffc106

Comments

इस लेख को asp.net समुदायों asp.net/community/articles में "दिवस का लेख" के रूप में चुना गया है 07 अक्टूबर 2016

— हुसैन पटेल

Answer 5

बूटव्रेप वेबसाइट से bootstrap.css और bootstrap.js फ़ाइलों का चयन और डाउनलोड करने के लिए आपको जो कुछ करना है, वह है, और फिर उनके साथ मूल फ़ाइलों को बदलें।

निश्चित रूप से आपको jQuery पथ के बाद अपने लेआउट पृष्ठ पर पथ जोड़ना होगा।

Answer 6

बूटस्वाच एक अच्छा विकल्प है, लेकिन आप ASP.NET MVC के लिए बने कई प्रकार के मुफ्त टेम्पलेट भी पा सकते हैं जो एमडीबूटस्ट्रैप (बूटस्ट्रैप के शीर्ष पर निर्मित फ्रंट-एंड फ्रेमवर्क) का उपयोग करते हैं:

ASP.NET MVC MDB टेम्पलेट