关于前端响应式框架bootstrap的说明

看到有网友在询问关于响应式模板的修改问题,本文简单地介绍下关于bootstrap前端框架的原理。
 网友:我在网上找了一个响应式模板,里面的模块要怎么修改呢?,样式里好像都没有宽多少长多少,,这个怎么改?大神求救啊

 

bootstrap前端框架

一个简单的bootstrap前台HTML结构:

  1. <div class="container"> 
  2.     <!--bootstrap采用栅格:一共加起来4x3=12--> 
  3.     <div class="row"> 
  4.         <div class="col-md-4">第一列</div> 
  5.         <div class="col-md-4">第二列</div> 
  6.         <div class="col-md-4">第三列</div> 
  7.     </div> 
  8. </div> 

基于以上HTML标签,相关的bootstrap框架样式:

  1. @media (min-width992px
  2. .container { 
  3.   max-width970px
  4. .row { 
  5.   margin-right-15px
  6.   margin-left-15px
  7. @media (min-width992px
  8. .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11 { 
  9.   floatleft
  10. @media (min-width992px
  11. .col-md-4 { 
  12.   width33.33333333333333%

什么是响应式布局?我总结一句话:

“响应式”其实就是把我们的web应用在不同设备的主流分辨率下给完美展示!

响应式的过程其实就是屏幕查询!

只要慢慢深入bootstrap,我们可以布局出各色各样精美的模板!当然,优秀的前端框架除了bootstrap还有很多,比如Pintuer

欢迎加入前端QQ群讨论:239274519

 

相关经验

导读书签
书签初始化中…