使用Bootstrap 3+Sass组合建网站
2014-02-26 08:51:32

Bootstrap自带的响应网格和一些常见的Web组件(Sass)，我们可以拾起来建立一个网站响应迅速。如果你看过我们之前建网站的文章引导，你可能知道，自举方式是使用由减。

虽然减已成为更强大的新功能，在1.5版本推出，有些人可能更熟悉Sass / SCSS。此外，还有可能在Sass一些功能，你不能没有，但它们不存在于以下（）。如果你想工作的自举和无礼的话，这要归功于托马斯·麦克唐纳，您也可以因为引导程序已经被移植到Sass/ SCSS。

安装
有几个方法可以开始使用Bootstrap+Sass。首先，因为它已被列为一个Ruby的 ​​宝石，你可以通过终端使用下面的命令行安装：

gem install bootstrap-sass

您也可以沿着用它与指南针下面这个命令。这是同样的方式，我们如何安装Zurb基金会。但是，请注意，这样将只包括_variables.less含引导变量，styles.less，你把你自己的风格，规则。

compass create my-new-project -r bootstrap-sass --using bootstrap

或者，您也可以简单地从下载Github上回购。

bootstrap3中有什么新功能？
下面是Bootstrap发现了一些新的功能。

扁平设计
您可以立刻在新版本中看到的变化，Bootstrap3，是它现在包含了扁平设计。的渐变和阴影，我们在以前的版本的组件发现现在都没有了。

bootstrap3的网格布局

引导还引入了一组新的类和新的网格结构。在版本3，有大，中，小和特小网格，以满足不同的视口大小。让我们来看看下面的HTML示例：

  1. <div class="container">  
  2.     <div class="row">  
  3.         <div class="column col-md-4 col-sm-6">  
  4.             <p>Left Column</p>  
  5.         </div>  
  6.         <div class="column col-md-4 col-sm-4">  
  7.             <p>Middle Column</p>  
  8.         </div>  
  9.         <div class="column col-md-4 col-sm-2">  
  10.             <p>Right Column</p>  
  11.         </div>  
  12.     </div>  
  13. </div>  

我们有三列。每列都有相等的宽度在大视口大小（在数位板上一个桌面屏幕或横向上）看时。大小施加COL-MD-4级。

然后，当屏幕尺寸越来越小的列宽司将与调整后的COL-SM-*级，使列宽可以留在正确的比例，而不是仅仅被堆叠，就像在以前的版本引导的。

 

新组件
也有一些新的组件在版本3中添加。这包括寻呼机（用于建筑下一页-和-上一页式导航），名单群组，面板和页眉。

使用Sass功能

从技术上讲，我们只要引导类添加到HTML元素，使网站布局，我们在这个例子中所做的上方。但是，使用CSS预处理器，像Sass的时候，我们可以利用一些功能，以实现一个更清洁，更语义化的HTML结构，而不是被塞满了无意义的类名。

鉴于前面的例子中，我们可以通过改变结构和类名来这样的事情：

  1. <div class="container">  
  2.  
  3.     <div class="main-area">  
  4.  
  5.         <div class="column content">  
  6.             <p>This is the Content.</p>  
  7.         </div>  
  8.         <div class="column sidebar">  
  9.             <p>This is the Sidebar.</p>  
  10.         </div>  
  11.         <div class="column side-nav">  
  12.             <p>This is the Navigation.</p>  
  13.         </div>  
  14.     </div>  
  15. </div>  

在样式表中，我们可以使用Sass@扩展指令来构建布局。使用@延长意志组共享相同的样式规则的选择器。

  1. .main-area {  
  2.  
  3.     @extend .row;  
  4.  
  5. }  
  6. .column {  
  7.     @extend .col-md-4;  
  8. }  
  9. .content {  
  10.     @extend .col-xs-6;  
  11.     @extend .col-sm-6;  
  12. }  
  13. .sidebar {  
  14.     @extend .col-xs-4;  
  15.     @extend .col-sm-4;  
  16. }  
  17. .side-nav {  
  18.     @extend .col-sm-2;  
  19.     @extend .col-sm-2;  
  20. }  

另外，您还可以使用Sass@包括将复制并包括混入的样式规则为我们的类选择器。

  1. .main-area {  
  2.  
  3.     @include make-row;  
  4.  
  5. }  
  6. .content {  
  7.     @include make-xs-column(6);  
  8.     @include make-sm-column(6);  
  9. }  
  10. .sidebar {  
  11.     @include make-xs-column(4);  
  12.     @include make-sm-column(4);  
  13. }  
  14. .side-nav {  
  15.     @include make-xs-column(2);  
  16.     @include make-sm-column(2);  
  17. }  
  18. .column {  
  19.     @include make-md-column(4);  
  20. }  

现在，查看它在浏览器上，你会得到你的回应布局。

结论

引导和萨斯绝对会让一个伟大的组合。与引导，你可以在短短几个小时内建立一个有效的响应的网站。而在萨斯功能，如@扩展和@包括可以帮助我们写出更精简，可编程和可维护的CSS。欲了解更多有关Sass，你可以参考这篇文章：入门萨斯：安装和基础知识。

所以，你有没有尝试过bootstrap+Sass？