前端库Bootstrap框架：「09] 使用 Bootstrap 网格并排放置元素

路条编程 2021-06-11

535

Bootstrap 是一个前端框架，用于设计响应式 web 页面和 web 应用程序。它采用移动优先的方法来开发 web。Bootstrap 包括预构建的 CSS 样式和类，以及一些 JavaScript 功能。Bootstrap 采用响应式 12 列网格布局，并具有以下设计组件模板：按钮、图片、表格、表单、导航，本专题介绍在 web 项目中使用 Bootstrap 框架的一些方法。

使用 Bootstrap 网格并排放置元素

Bootstrap 具有一套基于 12 列的响应式栅格系统————可以轻松实现将多个元素放入一行并指定它们的相对宽度。Bootstrap 的大部分 class 属性都可以应用在 div
元素上。

Bootstrap 的列宽度属性取决于用户的屏幕宽度。比如，手机有着窄屏幕而笔记本电脑有者更大的屏幕.

就拿 Bootstrap 的 col-md-*
class 来说。在这里， md
表示 medium （中等的），而 *
是一个数字，说明了这个元素占有多少个列宽度。这个例子就是指定了中等大小屏幕（例如笔记本电脑）下元素所占的列宽度。

在我们创建的宠物猫应用中，我们将使用 col-xs-*
，其中 xs
是 extra small 的缩写 (应用于较小的屏幕，比如手机屏幕)， *
是你填写的数字，代表一行中，你的元素该占多少列宽。

将我们的喜欢, 提示信息和 删除
三个按钮并排放入一个 <div class="row">
元素中，然后每个按钮都各用一个 <div class="col-xs-4">
元素包裹起来。

当 div
元素设置了 row
class 之后，那几个按钮便会嵌入其中了。

具体代码如下所示：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
<div class="container-fluid">


<h2 class="text-center red-text">宠物猫应用</h2>


<p>点击此处<a href="#">猫图片</a>.</p>


<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="一只可爱的橙色猫躺在它的背上"></a>


<img class="img-responsive" src="https://bit.ly/fcc-running-cats">
<div class="row">
<div class="col-xs-4">
<button class="btn btn-primary btn-block">喜欢</button>
</div>
<div class="col-xs-4">
<button class="btn btn-info btn-block">提示信息</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger">删除</button>
</div>
 </div>
<p>宠物猫爱好:</p>
<ul>
<li>吃鱼</li>
<li>嬉戏</li>
<li>吃猫粮</li>
</ul>
<p>最讨厌的三件事:</p>
<ol>
<li>跳蚤</li>
<li>打雷</li>
<li>狗</li>
</ol>
<form action="http://www.icoderoad.com/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> 户内</label>
<label><input type="radio" name="indoor-outdoor"> 户外</label>
<label><input type="checkbox" name="personality"> 爱</label>
<label><input type="checkbox" name="personality"> 懒惰</label>
<label><input type="checkbox" name="personality"> 疯狂</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">提交</button>
</form>
</div>

今天就讲到这里，如果有问题需要咨询，大家可以直接留言或扫下方二维码关注公众号。也可以添加 happyzjp 微信受邀加入学习社群，我们会尽力为你解答。练习网站已经正式上线，大家可以登陆网站 http://www.icoderoad.com 进行文章中示例的练习。

前端

文章转载自路条编程，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

前端库Bootstrap框架：「09] 使用 Bootstrap 网格并排放置元素

评论