布局

最新推荐文章于 2022-09-02 18:22:29 发布

原创最新推荐文章于 2022-09-02 18:22:29 发布 · 438 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #布局

HTML/JavaScript/CSS/JQuery 专栏收录该内容

8 篇文章

订阅专栏

本文描述了作者对故乡五月紫云岭上盛开的杜鹃花的回忆，通过细腻的文字表达了对过去美好时光的怀念，以及对爱情的深刻感悟。文中运用了bootstrap布局技巧，展现了网页设计的魅力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link href="../css/bootstrap.css" rel="stylesheet">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="../js/jquery-1.7.2.min.js"></script>
<script src="../js/bootstrap.js"></script>
</head>

<body>
<div class="container">
<h1 class="page-header">布局<small>使用bootstrap网络系统布局网页</small></h1>
<p>飘泊已久的灵魂，来到故乡的五月。天很蓝，紫云岭上的杜鹃花开了，像是蓝天里飘落下的红霞，一大片一大片的，真美！雨后的杜鹃花，在阳光的浇漓下，清亮，通透，娇艳，真像我初恋的她，是那样的清纯，甜美！好多年了，我没有她的消息，思念填满了心壑，也挤满了心空。铺天盖地的思念就像紫云岭上的杜鹃花，一坡比一坡浓烈，那颜色，好像在流血。</p>

<div class="row">
<div class="col-md-4">
<h2 class="page-header">区块一</h2>
<p>我爱五月的杜鹃，那是一个绽放的花季，那是一段美丽的故事。一条红纱巾系着两颗心，一头是她，一头是我，我们彼此对视着，我们相互拥有着，很幸福。青春总是匆匆忙忙，那股爱就像下坡的溪水，转眼就流到了山根儿。杜鹃花谢了枝头，那一袖的芳香淡入了辽远的蓝天里。从此，我跌进了等待，我走进了寂寞。路，是那样的遥渺。</p>
</div>

<div class="col-md-4">
<h2 class="page-header">区块二</h2>
<p>好在，蓝天还在！故乡的天，很蓝，蓝得好像要滴出它的颜色，幸好，有几朵白云扛着它。这时，紫云岭上的雪是青白的，白的很认真，也很自恋，我真不忍心踩到它。</p>
</div>

<div class="col-md-4">
<h2 class="page-header">区块三</h2>
<p>冬天的故乡没有杜鹃花，这不是我的过错，这是季节的错过。还好，故乡的蓝天依在，那股杜鹃花的香味依在，虽然淡了些，可这也能唤醒我的嗅觉。我知道，这是蓝天为我留下的味道，这味道，淡淡的香，一直香到我的灵魂深处。一场宿醉，那是必然的。与蓝天邂逅，那是我爱的延续，也是靠近春天的开始。</p>
</div>
</div>
</div>
</body>
</html>

效果如下：

1.<div class="container"></div>的作用: 居中

使到。

2.<div class="row"> </div>作用：使其div内容作为一行，一行有12列，通过<div class="col-md-4"></div>决定该div占多少列。

*注：在bootstrap2.x中是使用 class="span4"而在bootstrap3中已不支持，而是使用class="col-md-4"。

我自己使用的是bootstrap3，如果使用class="span4"就不会发生如下效果：

3.在bootstrap3中使用container，row就默认流布局，相当于bootstrap2.x中的 container-fluid，row-fluid。

如上demo使用bootstrap2.x写法如下：

<div class="container-fluid">
<h1 class="page-header">布局<small>使用bootstrap网络系统布局网页</small></h1>
<p>飘泊已久的灵魂，来到故乡的五月。天很蓝，紫云岭上的杜鹃花开了，像是蓝天里飘落下的红霞，一大片一大片的，真美！雨后的杜鹃花，在阳光的浇漓下，清亮，通透，娇艳，真像我初恋的她，是那样的清纯，甜美！好多年了，我没有她的消息，思念填满了心壑，也挤满了心空。铺天盖地的思念就像紫云岭上的杜鹃花，一坡比一坡浓烈，那颜色，好像在流血。</p>

<div class="row-fluid">
<div class="span4">
<h2 class="page-header">区块一</h2>
<p>我爱五月的杜鹃，那是一个绽放的花季，那是一段美丽的故事。一条红纱巾系着两颗心，一头是她，一头是我，我们彼此对视着，我们相互拥有着，很幸福。青春总是匆匆忙忙，那股爱就像下坡的溪水，转眼就流到了山根儿。杜鹃花谢了枝头，那一袖的芳香淡入了辽远的蓝天里。从此，我跌进了等待，我走进了寂寞。路，是那样的遥渺。</p>
</div>

<div class="span4">
<h2 class="page-header">区块二</h2>
<p>好在，蓝天还在！故乡的天，很蓝，蓝得好像要滴出它的颜色，幸好，有几朵白云扛着它。这时，紫云岭上的雪是青白的，白的很认真，也很自恋，我真不忍心踩到它。</p>
</div>

<div class="span4">
<h2 class="page-header">区块三</h2>
<p>冬天的故乡没有杜鹃花，这不是我的过错，这是季节的错过。还好，故乡的蓝天依在，那股杜鹃花的香味依在，虽然淡了些，可这也能唤醒我的嗅觉。我知道，这是蓝天为我留下的味道，这味道，淡淡的香，一直香到我的灵魂深处。一场宿醉，那是必然的。与蓝天邂逅，那是我爱的延续，也是靠近春天的开始。</p>
</div>
</div>
</div>