Bootstrap学习笔记2--响应式布局与栅格样式

最新推荐文章于 2023-05-25 21:07:27 发布

清风Python

最新推荐文章于 2023-05-25 21:07:27 发布

阅读量242

点赞数

分类专栏： Web开发

本文链接：https://blog.csdn.net/BreezePython/article/details/101475293

版权

Web开发专栏收录该内容

35 篇文章 0 订阅

订阅专栏

响应式布局

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。

先看个栗子

我们制作网页时，经常涉及到栅格排版，比如左侧的主导航、中间的正文、右侧的付导航。那么看看最差的实现方式吧：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    *{
      margin: 0px;
      padding: 0px;
      font-size:15px;
    }
  div{
    padding: 10px 20px;
  }
  .left{
      width:25%;
      float: left;
  }
  .middle{
      width:40%;
      float: left;
  }
  .left{
      width:25%;
      float: left;
  }
    </style>
  </head>
  <body>
    <div class="left">
      <h3>主侧栏</h3>
      响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，
      就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。
      这个概念是为解决移动互联网浏览而诞生的。

    </div>
    <div class="middle">
      <h3>内容</h3>
      响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，
      就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。
      这个概念是为解决移动互联网浏览而诞生的。
      响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，
      而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。
      随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，
      还看到了一些成形的模式。

    </div>
    <div>
      <h3 class="right">右侧栏</h3>
      响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，
      就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。
      这个概念是为解决移动互联网浏览而诞生的。

    </div>

  </body>
</html>

基础栅格.png

表面看起来貌似没什么问题，但如果我们调整浏览器的宽度后，它是什么效果呢？

无响应式布局.gif

看过上面的例子，大家就该了解到，响应式布局对于页面展示的必要性了。那么响应式布局如何实现的呢？

再举个毛栗子

我们通过css的media来实现一个最村儿的相应式布局，当浏览器宽度小于500px时，将网页的背景与字体颜色进行翻转，来看看效果：

自定义响应式布局.gif

Bootstrap栅格系统

单纯的去考虑响应式，需要考虑的东西太多了。所以推荐使用Bootstrap。它默认将浏览器分为了12份。我们可以使用它，对浏览器进行快速的栅格化排版，至于响应式布局？完全不用考虑，框架已经为你想好了.....

栅格类格式如下：

class = "col-(size)-(number)"

我们将div套上相关的class即可完成栅格化布局：

col : column 列
size：
lg large 大尺寸
md medium 中尺寸
sm small 小尺寸
em extra small 超小尺寸

lg	large	大尺寸
md	medium	中尺寸
sm	small	小尺寸
em	extra small	超小尺寸

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
  </head>
  <body>
    <div class="col-sm-3">
      <h3>主侧栏</h3>
      响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，
      就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。
      这个概念是为解决移动互联网浏览而诞生的。
    </div>
    <div class="col-sm-7">
      <h3>内容</h3>
      响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，
      就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。
      这个概念是为解决移动互联网浏览而诞生的。
      响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，
      而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。
      随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，
      还看到了一些成形的模式。
    </div>
    <div class="col-sm-2">
      <h3>右侧栏</h3>
      响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，
      就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。
      这个概念是为解决移动互联网浏览而诞生的。
    </div>


  </body>
</html>

响应式布局.gif

OK，一切就是这么简单.....

To Be Continue ...

历史文章：

Bootstrap学习笔记1--表单样式

清风Python

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap学习笔记2--响应式布局与栅格样式

响应式布局响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很...
复制链接

扫一扫