网页设计达人必备！Bootstrap vs Semantic UI，哪家更给力？

一、Bootstrap：霸道总裁

哎呦喂小伙伴们听说了么，CSS布局框架哪家强？那必须得提bootstrap！它太火爆了，有好多组件随你挑，还有牛逼的响应式功能！用一次就上瘾，轻松成为网页设计达人！看看这句代码吧：

html

        <div class="col-md-4">左侧栏</div>
        <div class="col-md-4">中间内容</div>
        <div class="col-md-4">右侧栏</div>

看这个代码，就用了Bootstrap的网格系统！直接帮你搞定左中右三栏布局，屏幕大小变也不怕。超级实用，对不对？！

二、Semantic UI：文艺青年

  


  

    

      
左侧栏
      
中间内容
      
右侧栏
    
  

现在超火的那个叫Semantic UI的软件听说过没？它的函数名就跟诗一样好听易懂。这儿有个用了他们的代码片段，看看多炫酷：

<div class=”four wide column”>左侧栏</div>

<div class=”eight wide column”>中间内容</div>

<div class=”four wide column”>右侧栏</div>

哥们，牛，看出来你绝对是老手了。拿Semantic UI当高端货用的网格布局，让网页层次感十足，还有那些看似高深莫测的分类，太有编程范儿了！

三、Foundation：技术宅男

  


  

    

      
左侧栏
      
中间内容
      
右侧栏
    
  

Benchmark先锋级别的CSS框架真心强到爆表！看似低调，其实内在功力深厚，设计元素应有尽有！不再磨叽，马上给你展示实战案例：

<div class=”small-4 columns”>左侧栏</div>

<div class=”small-4 columns”>中间内容</div>

<div class=”small-4 columns”>右侧栏</div>

这里用了Foundation的网格排版，直接一点，就是把页面划成了3块儿，根据需要分配宽度。这个方法真得很炫酷也很实用，超级适合那些热衷于技术探索的小伙伴们！

  


  

    

      
左侧栏
      
中间内容
      
右侧栏
    
  

四、PureCSS：小清新

知道PureCSS么?它可真是个简单又实用的CSS框架，用来快速搞定漂亮的网页设计。看看这个实际例子吧:

<div class=”pure-u-1-3″>左侧栏</div>

<div class=”pure-u-1-3″>中间内容</div>

<div class=”pure-u-1-3″>右侧栏</div>

哎呦，我这次用的是PureCSS这个栅格框架，分三列布局，每列还能用类属性调节宽度，干净利落，任凭你怎么调都是这么顺手，特方便！

  


  

    
左侧栏
    
中间内容
    
右侧栏
  

五、Tailwind CSS：前卫潮人

说起潮牌CSS就不能不聊tailwind！有一招特别帅，就是把类名串在一起搞样式。比如下面这个tailwind CSS代码就是这么干的：

<div class=”col-span-1″>左侧栏</div>

<div class=”col-span-1″>中间内容</div>

<div class=”col-span-1″>右侧栏</div>

这代码用起Tailwind CSS网格系，3栏布局立马搞定！每个栏目安排得多规矩~赶时髦没那么难，瞬间Get！

  


  

    
左侧栏
    
中间内容
    
右侧栏
  

哈喽，我来给你说说这五个超好用的CSS布局框架——Bootstrap、Semantic UI、Foundation、PureCSS和Tailwind CSS。每一个都有它自己的特色。看看哪个更符合你的需求，快选择！你学习了这些之后，相信你就能熟练使用这些布局框架。