bootstrap响应式网页布局

最新推荐文章于 2024-07-25 18:59:20 发布

罗汉爷

最新推荐文章于 2024-07-25 18:59:20 发布

阅读量2.4k

点赞数 2

分类专栏： Web前端文章标签： bootstrap网页布局

本文链接：https://blog.csdn.net/IndexMan/article/details/89810821

版权

Web前端专栏收录该内容

41 篇文章 3 订阅

订阅专栏

bootstrap可以说是没有布局和审美概念的后端狗的福利。使用它的栅格系统可以轻松的对网页进行布局，而且可以做到响应式的布局。看起来很酷，接下来我就会总结自己在开发博客系统中用到的知识点及实战案例给大家，作为一个专栏管理。

知识点

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

container: 用于固定宽度并支持响应式布局的容器

page-header: 页头

row: 通过“行（row）”在水平方向创建一组“列（column）”

spanN：预定义栅格

效果

代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式布局</title>
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="../bootstrap/css/bootstrap-responsive.css" rel="stylesheet">

</head>

<body>
<div class="container">
  <h1 class="page-header">响应式布局<small> 使用Bootstrap网格系统布局网页</small></h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget quam accumsan vestibulum. Maecenas facilisis tellus quis nisl facilisis eget mollis lectus feugiat. Etiam pharetra mattis ultrices. In ac mi metus, ac pharetra ipsum. Aenean imperdiet sem purus. Suspendisse quis odio eu neque varius posuere. Fusce tincidunt tincidunt arcu non viverra. Vivamus dui eros, rhoncus cursus porta quis, sollicitudin a ante. Aliquam porta euismod sollicitudin.</p>
  <div class="row">
    <div class="span4">
      <h2 class="page-header">区块一</h2>
      <p>consectetur adipiscing elit,Lorem ipsum dolor sit amet. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget quam accumsan vestibulum. </p>
    </div>
    <div class="span4">
      <h2 class="page-header">区块二</h2>
      <p>Lorem ipsum dolor sit amet, quam accumsan vestibulum，consectetur adipiscing elit. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget . </p>
    </div>
    <div class="span4">
      <h2 class="page-header">区块三</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget quam accumsan vestibulum. </p>
    </div>
  </div>
  <div class="row">
    <div class="span8">
      <h2 class="page-header">主内容</h2>
      <p>Lorem ipsum dolor sit amet, quam accumsan vestibulum，consectetur adipiscing elit. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget .，consectetur adipiscing elit,Lorem ipsum dolor sit amet. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget quam accumsan vestibulum. </p>
    </div>
    <div class="span4">
      <h2 class="page-header">边栏</h2>
      <p>Lorem ipsum dolor sit amet, quam accumsan vestibulum，consectetur adipiscing elit. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget . </p>
    </div>
    
  </div>
</div>
<script src="../bootstrap/js/jquery-1.7.2.min.js"></script> 
<script src="../bootstrap/js/bootstrap.js"></script>
</body>
</html>