วิธีเนมสเปซ Twitter Bootstrap เพื่อให้สไตล์ไม่ขัดแย้งกัน

ฉันต้องการใช้ Twitter Bootstrap แต่เฉพาะในองค์ประกอบบางอย่างเท่านั้นดังนั้นฉันจึงต้องหาวิธีนำหน้าคลาส Twitter Bootstrap ทั้งหมดด้วยคำนำหน้าของฉันหรือใช้ส่วนผสมที่น้อยกว่า ฉันยังไม่มีประสบการณ์เกี่ยวกับเรื่องนี้ดังนั้นฉันจึงไม่ค่อยเข้าใจวิธีการทำเช่นนี้ นี่คือตัวอย่างของ HTML ที่ฉันพยายามจัดรูปแบบ:

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

ในตัวอย่างนี้ Twitter Bootstrap จะใช้รูปแบบปกติทั้งคู่h1แต่ฉันต้องการเลือกมากขึ้นเกี่ยวกับพื้นที่ที่ฉันใช้สไตล์ Twitter Bootstrap

สิ่งนี้กลายเป็นเรื่องง่ายกว่าที่ฉันคิด ทั้ง Less และ Sass รองรับการกำหนดเนมสเปซ (โดยใช้ไวยากรณ์เดียวกัน) เมื่อคุณรวม bootstrap คุณสามารถทำได้ภายในตัวเลือกเพื่อเนมสเปซ:

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

อัปเดต:สำหรับรุ่นที่ใหม่กว่าของ LESS นี่คือวิธีการ:

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

คำถามที่คล้ายกันได้รับคำตอบที่นี่

@ แอนดรูคำตอบที่ดี นอกจากนี้คุณจะต้องทราบด้วยว่า bootstrap ปรับเปลี่ยนเนื้อหา {} ส่วนใหญ่เพื่อเพิ่มแบบอักษร ดังนั้นเมื่อคุณเนมสเปซผ่าน LESS / SASS ไฟล์ css เอาต์พุตของคุณจะมีลักษณะดังนี้: (ใน bootstrap 3)

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

แต่เห็นได้ชัดว่าจะไม่มีแท็ก body ใน div ของคุณดังนั้นเนื้อหา bootstrap ของคุณจะไม่มีฟอนต์ bootstrap (เนื่องจาก bootstrap ทั้งหมดสืบทอดฟอนต์จากพาเรนต์)

ในการแก้ไขคำตอบควรเป็น:

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

    @import 'bootstrap';
}

ใส่คำตอบของ @Andrew, @Kevin และ @ adamj ไว้ด้วยกัน (รวมถึงรูปแบบอื่น ๆ อีกสองสามแบบ) หากคุณรวมสิ่งต่อไปนี้ไว้ในไฟล์ชื่อ "bootstrap-namespaced.less" คุณสามารถนำเข้า "bootstrap-namespaced.less" ไปยังน้อยกว่านี้ได้ ไฟล์:

// 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;
}

การเพิ่มเนมสเปซลงใน bootstrap CSS จะทำให้การทำงานของโมดอลหยุดชะงักเนื่องจาก bootstrap จะเพิ่มคลาส 'modal-backdrop' ให้กับเนื้อหาโดยตรง วิธีแก้ปัญหาคือย้ายองค์ประกอบนี้หลังจากเปิดโมดอลเช่น:

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

คุณสามารถลบองค์ประกอบในตัวจัดการสำหรับเหตุการณ์ "hide.bs.modal"

ใช้ไฟล์เวอร์ชัน .less กำหนดไฟล์ที่คุณต้องการน้อยกว่าจากนั้นห่อไฟล์ .less เหล่านั้นด้วย:

.bootstrap-styles {

    h1 { }

}

สิ่งนี้จะให้ผลลัพธ์ของ:

.bootstrap-styles h1 { }

ฉันทำ GIST ด้วย Bootstrap 3 ทั้งหมดภายในคลาสชื่อ. bootstrap-wrapper https://gist.github.com/onigetoc/20c4c3933cabd8672e3e

ฉันเริ่มต้นด้วยเครื่องมือนี้: http://www.css-prefix.com/ และแก้ไขส่วนที่เหลือด้วยการค้นหาและแทนที่ใน PHPstorm ฟอนต์ @ font-face ทั้งหมดโฮสต์บน maxcdn

ตัวอย่างบรรทัดแรก

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

Namespacing จะแบ่ง div ฉากหลังของปลั๊กอิน Modal เนื่องจากจะถูกเพิ่มลงในแท็ก <body> โดยตรงเสมอโดยข้ามองค์ประกอบเนมสเปซของคุณซึ่งมีสไตล์ที่ใช้กับมัน

คุณสามารถแก้ไขได้โดยเปลี่ยนการอ้างอิงของปลั๊กอิน$bodyก่อนที่จะแสดงฉากหลัง:

myDialog.modal({
    show: false
});

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

myDialog.modal("show");

$bodyคุณสมบัติตัดสินใจที่ฉากหลังจะถูกเพิ่ม

เพื่ออธิบายขั้นตอนทั้งหมดให้ดีขึ้นว่าแอนดรูว์พูดถึงอะไรสำหรับผู้ที่ไม่รู้ว่า Less คืออะไร นี่คือลิงค์ที่อธิบายวิธีการทำทีละขั้นตอนวิธีการแยก Bootstrap หรือไลบรารี CSS อื่น ๆ

วิธีแก้ปัญหาที่ง่ายที่สุด - เริ่มใช้คลาส css แบบแยกที่สร้างขึ้นเองสำหรับ Bootstrap

ตัวอย่างเช่นสำหรับ Bootstrap 4.1 ดาวน์โหลดไฟล์จากไดเรกทอรี css4.1 -

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

และรวม HTML ของคุณใน div ด้วยคลาส bootstrapiso:

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

เทมเพลตหน้าพร้อม bootstrap 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>

ฉันประสบปัญหาและวิธีการเดียวกันที่เสนอโดย @Andrew น่าเสียดายที่ไม่ได้ช่วยในกรณีเฉพาะของฉัน คลาส Bootstrap ชนกับคลาสจากเฟรมเวิร์กอื่น นี่คือวิธีการของโครงการนี้ได้รับการ incepted https://github.com/sneas/bootstrap-sass-namespace อย่าลังเลที่จะใช้

เป็นข้อสังเกตสำหรับทุกคน เพื่อให้โมดอลทำงานร่วมกับฉากหลังคุณสามารถคัดลอกสไตล์เหล่านี้จาก bootstrap3

.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;
}

โคลน bootstrap แรกจาก github:

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

ติดตั้งข้อกำหนด:

npm install

เปิด scss / bootstrap.scss และเพิ่มเนมสเปซของคุณ:

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

รวบรวม bootstrap:

npm run dist

เปิดdist/css/bootstrap.cssและลบเนมสเปซออกจากแท็กhtmlและbody

หลังจากนั้นคัดลอกเนื้อหาของโฟลเดอร์ dist ไปยังโปรเจ็กต์ของคุณเท่านี้คุณก็พร้อมแล้ว

มีความสุข!