2017.4.7 Bootstrap响应式设计

首页 > 代码库 > 2017.4.7 Bootstrap响应式设计

2017.4.7 Bootstrap响应式设计

2024-09-13 05:23:30 216人阅读

1.CSS添加：

2.首先，我们需要把所有的HTML内容放在class为container-fluid的div下。

3.图片自适应：通过Bootstrap，我们要做的只是给图片添加 img-responsive class属性。这样图片的宽度就能完美地适配你的页面的宽度了。

4.我们可以通过居中头部元素来使它看起来更棒。

我们所要做的只是把text-center class属性添加给 h2 元素。

记住：你可以用空格分开多个class来为同一个元素添加多个 class 属性，就像这样：

<h2 class="red-text text-center">your text</h2>

5.Bootstrap有它自己的 button 按钮风格，看起来要比默认的按钮好看得多。创建一个新的 button 元素。给它添加 btn class 属性

6.通常情况下，你的 button 元素仅与它所包含的文本一样宽。通过使其成为块级元素，你的按钮将会伸展并填满页面整个水平空间，任何在它之下的元素都会跟着浮动至该区块的下一行。添加Bootstrap的 btn-block class 到你的按钮。

技术分享

7.深蓝色btn-primary是你的应用的主要颜色，被用在那些用户主要采取的操作上。添加Bootstrap的 btn-primary class 属性到按钮标签上。

注意：这个按钮仍然需要 btn 和 btn-block 属性！

8.Bootstrap自带了一些预定义的按钮颜色。浅蓝色 btn-info 被用在那些用户可能会采取的操作上。在你的 "Like" 按钮下面添加一个文本为 "Info" 的块级Bootstrap按钮，并为其添加 btn-info和 btn-block class属性。

注意：这些按钮仍然需要 btn 和 btn-blockclass属性.

技术分享

9.Bootstrap自带了一些预定义的按钮颜色。红色btn-danger被用来提醒用户该操作具有“破坏性”，例如删除一张猫的图片。

创建一个文本为 "Delete" 的按钮，并且给它添加 class btn-danger。

注意：这些标签仍然需要 btn 与 btn-blockclass。

<button class="btn btn-block btn-danger">Delete</button>

技术分享

10.Bootstrap 使用一种响应式网格布局——可轻松实现将多个元素放入一行并指定各个元素的相对宽度的需求。Bootstrap 中大多数的class属性都可以设置于 div 元素中。

技术分享

请注意，在这张图表中，class属性 col-md-*正被使用。在这里，md 表示 medium (中等的)，* 代表一个数字，它指定了这个元素所占的列宽。通过此图表的属性设置可知，在中等大小的屏幕上(例如笔记本电脑)，元素的列宽被指定了.

使用 col-xs-* ，其中 xs 是 extra small 缩写（应用于较小的屏幕，比如手机屏幕），* 是你需要填写的数字，代表在一行中,各个元素应该占的列宽

把 Like, Info 和 Delete 三个按钮一并放入一个 <div class="row"> 元素中；然后，其中的每一个按钮都需要各自被一个 <div class="col-xs-4"> 元素包裹

代码：

<div class="row">
<div class="col-xs-4"><button class="btn btn-block btn-primary">Like</button></div>
<div class="col-xs-4"><button class="btn btn-block btn-info">Info</button></div>
<div class="col-xs-4"><button class="btn btn-block btn-danger">Delete</button></div>
</div>

技术分享