將bootstrap與其CSS一起使用

我真的很想用這些方法使用bootstrap sass。

是否可以擴展bootstrap以使用BEM樣式類名稱？

.block {} 
.block__element {} 
.block--modifier {}

例如，如何使用BEM命名典型的引導程序導航？

 <header className="container-fluid"> 
      <nav className="navbar navbar-default navbar-static-top"> 
       <div className="container"> 
        <div className="navbar-header"> 
         <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" 
           aria-expanded="false" aria-controls="navbar"> 
          <span className="sr-only">Toggle navigation</span> 
          <span className="icon-bar"></span> 
          <span className="icon-bar"></span> 
          <span className="icon-bar"></span> 
         </button>

會涉及什麼，我應該怎麼做呢？

來源

2015-11-26 Bomber

是的，你絕對可以做，使用@extend和@include如本文演示 - 「BEM, SASS and Bootstrap: how to mix everything up in a smart way?」

總的想法是，你可以申請自舉類的CSS屬性，以自己的類。例如，你自己的導航模塊（。我的導航）可以得到所有的CSS樣式.navbar的：

.my-navigation { 
 
    @extend .navbar; 
 
}

這樣，你可以使用類=「我的導航」代替使用class =「navbar」。

當然，爲了能夠做到這一點，你必須使用Bootstrap的SASS文件 - 而不是編譯的CSS。這裏有一些提示 - Bootstrap Sass Installation and Customization。

要指出的另一個重要的事情是，包含/擴展所有的Bootstrap類只是因爲你喜歡使用BEM可能不是最好的方法。有這個甜蜜的地方，你必須找到自己和你正在進行的項目。這裏有一些鏈接，其中這個討論：

Why You Should Avoid Sass @extend
Does sass harm performance?
A Tale of Front-end Sanity: Beware the Sass @import

來源

2016-10-31 07:31:47

將bootstrap與其CSS一起使用

回答

相關問題