Bootstrap学习（第二节）

来源：互联网发布：linux jdk6安装教程编辑：程序博客网时间：2024/06/09 15:08

Bootstrap的一个重要特点，就是响应式布局，接下来，就让我们来对响应式布局进行一些了解。

什么是响应式布局呢？很简单，就是一个网站能够兼容多个终端，而不是为每一个终端都做一个特定的版本。举个例子，你做了一个网站，使用手机、电脑和平板的人都能够访问，但由于设备屏幕大小的不同，不同设备所显示的界面自然也会有所不同，电脑可能会把页面内容全部显示，而手机可能只显示一部分或者显示了整个页面但由于屏幕太小什么都看不清。为了解决这个问题，你当然可以选择为每一种设备都编写一套前端，但这样未免太过麻烦，响应式布局就是为了解决这个问题，它可以通过判断屏幕尺寸，从而做出不同的显示。下面是一个小例子。

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>  <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></head><body><div class="container">  <div>    <h1>我的第一个 Bootstrap 页面</h1>  </div>  <div class="row">    <div class="col-sm-4">      <h3>第一列</h3>    </div>    <div class="col-sm-4">      <h3>第二列</h3>    </div>    <div class="col-sm-4">      <h3>第三列</h3>            </div>  </div></div></body></html>

接下来对这个例子进行讲解。

 <meta name="viewport" content="width=device-width, initial-scale=1">

device-width设定了这个页面的宽度与浏览器的宽度一致。 intial-scale:页面首次被显示是可视区域的缩放级别,取值为1.0则页面按实际尺寸显示,没有任何缩放。

<div class="col-sm-4">

Bootstrap把屏幕的宽度等分为12列，col-xx-n的格式就是用来确定具体用几列的宽度，xx则是代表了多大的屏幕，下面的图片有具体说明。

阅读全文

0 0