ट्विटर बूटस्ट्रैप को कैसे नाम दें ताकि शैलियों में टकराव न हो

Question

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

<div class="normal-styles">
  <h1>dont style this with bootstrap</h1>
  <div class="bootstrap-styles">
    <h1>use bootstrap</h1>
  </div>
</div>

इस उदाहरण में, ट्विटर बूटस्ट्रैप दोनों को सामान्य शैली देगा h1, लेकिन मैं इस बात के बारे में अधिक चयनात्मक होना चाहता हूं कि मैं ट्विटर बूटस्ट्रैप शैलियों को किन क्षेत्रों में लागू करता हूं।

Comments

मौजूदा स्टाइलशीट वाले ऐप के लिए सीएसएस फ्रेमवर्क

— शेरब्रो

यह मदद करेगा "संघर्ष से बचने के लिए बूटस्ट्रैप सीएसएस कैसे करें" formden.com/blog/isolate-bootstrap

— शमूएल Ev

Answer 1

यह जितना मैंने सोचा था उससे कहीं अधिक आसान हो गया। दोनों कम और Sass नामस्थान (समान सिंटैक्स का उपयोग करके) का समर्थन करते हैं। जब आप बूटस्ट्रैप शामिल करते हैं, तो आप इसे चयनकर्ता के भीतर नाम स्थान पर कर सकते हैं:

.bootstrap-styles {
  @import 'bootstrap';
}

अपडेट: LESS के नए संस्करणों के लिए, यह कैसे करना है:

.bootstrap-styles {
  @import (less) url("bootstrap.css");
}

इसी तरह के सवाल का जवाब यहां दिया गया।

Comments

अरे, मैं इसका पालन करने की कोशिश कर रहा हूं, लेकिन मैं थोड़ा भ्रमित हूं। मैं एंगुलर के साथ काम कर रहा हूं। CDN का उपयोग करके मैंने bootstrap.min.js, less.min.js और bootstrap.min.css फ़ाइलों का संदर्भ लिया है। मुझे वास्तव में यकीन नहीं है कि मेरे आवेदन में नाम स्थान कहां है।

— बैटमैन

ऐसा करने के बाद, मेरा मोडल काम नहीं करता क्योंकि यह भी उपयोग करता है। क्या इसकी उम्मीद की जानी चाहिए थी?

— बैटमैन

@Batman आप एक CDN का उपयोग नहीं करना चाहते हैं, क्योंकि आप अनिवार्य रूप से एक उपसर्ग शामिल करने के लिए सभी बूटस्ट्रैप को फिर से लिख रहे हैं। आपको @importमूल बूटस्ट्रैप के लिए SASS जैसे प्रीप्रोसेसर का उपयोग करने की आवश्यकता है । मेरे पास मॉडल्स के साथ भी मुद्दे थे, मुझे लगता है क्योंकि बूटस्ट्रैप शीर्ष स्तर के बॉडी टैग के लिए कुछ कक्षाएं लागू करता है। मुझे याद नहीं है कि क्या मुझे कोई हल मिला है। अंत में, मुझे लगता है कि मैंने अपना मोडल रिप्लेसमेंट लिखना समाप्त कर दिया।

— एंड्रयू

संस्करण 3 ( hereswhatidid.com/2014/02/… ) के बाद अब यह काम नहीं करता है

— adamj

क्या कोई समझा सकता है कि यह आयात विवरण कहां जाना चाहिए? एक अलग-अलग-रहित फ़ाइल की तरह दिखता है। मैंने ऐसा किया और इसे बूटस्ट्रैप कम फ़ोल्डर में डाल दिया, लेकिन यह नाम स्थान के साथ संकलन नहीं करता है। मुझे लगता है कि मुझे कुछ याद आ रहा है

— ::

Answer 2

@ और शानदार जवाब दिया। आप यह भी ध्यान रखना चाहेंगे कि बूटस्ट्रैप मुख्य रूप से फ़ॉन्ट जोड़ने के लिए, शरीर} को संशोधित करता है। इसलिए जब आप इसे LESS / SASS के माध्यम से नामांकित करते हैं तो आपकी आउटपुट css फ़ाइल इस तरह दिखती है: (बूटस्ट्रैप 3 में)

.bootstrap-styles body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.428571429;
    color: #333333;
    background-color: white;
}

लेकिन जाहिर है कि आपके div के अंदर एक बॉडी टैग नहीं होगा, इसलिए आपके बूटस्ट्रैप कंटेंट में बूटस्ट्रैप फॉन्ट नहीं होगा (क्योंकि सभी बूटस्ट्रैप पैरेंट से फॉन्ट इनहेरिट करते हैं)

ठीक करने के लिए, उत्तर होना चाहिए:

.bootstrap-styles {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.428571429;
    color: #333333;
    background-color: white;

    @import 'bootstrap';
}

Comments

आप भूल गएmargin: 0;

— kolobok

ध्यान! मुझे नहीं पता कि क्यों, लेकिन कुछ जगहों पर कम उत्पन्न होता है जैसे .सी-उपसर्ग।

— kolobok

Answer 3

यदि आप "बूटस्ट्रैप-नेमस्पेल्ड.लेस" नामक फ़ाइल में निम्नलिखित को शामिल करते हुए @Andrew, @Kevin और @ adamj के उत्तर (कुछ अन्य शैलियों के साथ) डालते हैं, तो आप बस 'बूटस्ट्रैप-नेमस्पेल्ड.लेस' को किसी भी कम में आयात कर सकते हैं। फ़ाइल:

// bootstrap-namespaced.less

// This less file is intended to be imported from other less files. 
// Example usage:
// my-custom-namespace {
//  import 'bootstrap-namespaced.less';
// }

// Import bootstrap.css (but treat it as a less file) to avoid problems 
// with the way Bootstrap is using the parent operator (&).
@import (less) 'bootstrap.css';

// Manually include styles using selectors that will not work when namespaced.

@import 'variables.less';

& {
    // From normalize.less

    // Previously inside "html {"
    // font-family: sans-serif; // Overridden below
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;

    // Previously inside "body {"
    margin: 0;

    // From scaffolding.less

    // Previously inside "html {"
    // font-size: 10px; // Overridden below
    -webkit-tap-highlight-color: rgba(0,0,0,0);

    // Previously inside "body {"
    font-family: @font-family-base;
    font-size: @font-size-base;
    line-height: @line-height-base;
    color: @text-color;
    background-color: @body-bg;
}

Comments

धन्यवाद। यह वास्तव में सबसे अच्छा समाधान है।

— kolobok

अच्छी तरह से काम !

— केविन बर्थोमीयर

Answer 4

बूटस्ट्रैप CSS के लिए एक नेमस्पेस जोड़ने से मोडल कार्यक्षमता टूट जाएगी क्योंकि बूटस्ट्रैप सीधे शरीर में 'मोडल-बैकड्रॉप' क्लास जोड़ता है। मोडल खोलने के बाद इस तत्व को स्थानांतरित करने के लिए एक वर्कअराउंड है, जैसे:

$('#myModal').modal();
var modalHolder = $('<div class="your-namespace"></div>');
$('body').append(modalHolder);
$('.modal-backdrop').first().appendTo(modalHolder); 

आप तत्व को 'Hide.bs.modal' ईवेंट के लिए किसी हैंडलर में निकाल सकते हैं।

Comments

यदि आप ngbootstrap के साथ कोणीय का उपयोग कर रहे हैं, तो आप एक विशिष्ट कंटेनर के अंदर मोडल खोलने का विकल्प चुन सकते हैं। this.modalService.open('myModal', {container: '#modalgoeshere'})

— एनए

Answer 5

फ़ाइलों के .less संस्करण का उपयोग करें। निर्धारित करें कि आपको किन कम फ़ाइलों की आवश्यकता है, फिर उन .less फ़ाइलों को निम्न के साथ लपेटें:

.bootstrap-styles {

    h1 { }

}

यह आपको आउटपुट देगा:

.bootstrap-styles h1 { }

Answer 6

मैंने बूटस्ट्रैप 3 के साथ एक GIST किया, जिसका नाम एक वर्ग के अंदर है .bootstrap-आवरण: https://gist.github.com/onigetoc/20c4c3933cabd8672e3e

मैंने इस टूल से शुरुआत की: http://www.css-prefix.com/ और बाकी की खोज को PHPstorm में बदल कर ठीक कर दें। सभी फोंट @ फॉन्ट-फेस को अधिकतम एलसीडी पर होस्ट किया गया है।

पहली पंक्ति का उदाहरण

.bootstrap-wrapper {font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}

Answer 7

नेमस्पेसिंग मोडल प्लगइन के बैकड्रॉप डिव को तोड़ता है, क्योंकि यह हमेशा सीधे <body> टैग में जोड़ा जाता है, आपके नेमस्पेसिंग तत्व को दरकिनार कर दिया है, जिस पर शैलियों ने इसे लागू किया है।

$bodyबैकग्राउंड दिखाने से पहले आप प्लगइन के संदर्भ को बदलकर इसे ठीक कर सकते हैं :

myDialog.modal({
    show: false
});

myDialog.data("bs.modal").$body = $(myNamespacingElement);

myDialog.modal("show");

$bodyजहां पृष्ठभूमि जोड़ दिया जाएगा संपत्ति का फैसला किया।

Answer 8

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

Answer 9

सबसे सरल समाधान - बूटस्ट्रैप के लिए कस्टम बिल्ड पृथक सीएसएस वर्गों का उपयोग करना शुरू करें।

उदाहरण के लिए, बूटस्ट्रैप 4.1 के लिए css4.1 निर्देशिका से डाउनलोड फाइलें -

https://github.com/cryptoapi/Isolate-Bootstrap-4.1-CSS-Themes

और अपने HTML को वर्ग बूटस्ट्रैपिसो के साथ एक div में लपेटें:

<div class="bootstrapiso">
<!-- Any HTML here will be styled with Bootstrap CSS -->
</div>

पृथक बूटस्ट्रैप 4 के साथ पेज टेम्पलेट होगा

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <title>Page1</title>

    <!-- Isolated Bootstrap4 CSS - -->
    <link rel="stylesheet" href="css4.1/bootstrapcustom.min.css" crossorigin="anonymous">   

    <!-- JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" crossorigin="anonymous"></script>
    <script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" crossorigin="anonymous"></script>

  </head>

  <body>

  <div class="bootstrapiso">
  <!-- Any HTML here will be styled with Bootstrap CSS -->
  </div>

  </body>
</html>

Answer 10

मैंने उसी मुद्दे का सामना किया और @Andrew द्वारा प्रस्तावित विधि दुर्भाग्य से मेरे विशिष्ट मामले में मदद नहीं की। बूटस्ट्रैप कक्षाएं दूसरे ढांचे से कक्षाओं से टकराती हैं। इस तरह से इस परियोजना को https://github.com/sneas/bootstrap-sass-namespace बनाया गया है । बेझिझक इस्तेमाल करें।

Answer 11

सभी के लिए एक और नोट के रूप में। एक पृष्ठभूमि के साथ काम करने वाले मोडल प्राप्त करने के लिए, आप बस इन शैलियों को बूटस्ट्रैव से कॉपी कर सकते हैं

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #000;
}
.modal-backdrop.fade {
  filter: alpha(opacity=0);
  opacity: 0;
}
.modal-backdrop.in {
  filter: alpha(opacity=50);
  opacity: .5;
}

Answer 12

जीथब से पहला क्लोन बूटस्ट्रैप:

git clone https://github.com/twbs/bootstrap.git

आवश्यकताओं को स्थापित करें:

npm install

Scss / bootstrap.scss खोलें और अपना नामस्थान जोड़ें:

.your-namespace {
    @import "functions";
    ...
    @import "utilities/api";
}

संकलन बूटस्ट्रैप:

npm run dist

dist/css/bootstrap.cssनाम htmlऔर bodyटैग से नाम खोलें और निकालें ।

बाद में अपने प्रोजेक्ट में डिस्ट फ़ोल्डर की सामग्री को कॉपी करें और आप सभी सेट हो जाएं।

मज़े करो!