将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一起使用

回答

相关问题