Bootstrap将会根据你的屏幕的大小来调整HTML元素的大小 —— 强调 响应式设计的概念。
通过响应式设计,你无需再为你的网站设计一个手机版的。它在任何尺寸的屏幕上看起来都会不错。
你仅需要通过添加下列代码到你的HTML开头来将Bootstrap添加到任意应用中:
- 通过Bootstrap,我们要做的只是给图片添加 img-responsive class属性。这样图片的宽度就能完美地适配你的页面的宽度了。
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<div class="container-fluid"></div>
<img class="img-responsive" src="/images/running-cat.jpg">
- 让BUTTON横向填充整个屏幕。通常情况下,你的 button 元素仅与它所包含的文本一样宽。通过使其成为块级元素,你的按钮将会伸展并填满页面整个水平空间,任何在它之下的元素都会跟着浮动至该区块的下一行。
- 深蓝色
btn-primary
是你的应用的主要颜色,被用在那些用户主要采取的操作上
<button class="btn btn-primary btn-block">Like</button>
<button class="btn btn-block btn-info">info</button>
<button class="btn btn-danger btn-block">Delete</button>
class属性 col-md-*
正被使用。在这里,md
表示 medium (中等的),*
代表一个数字,它指定了这个元素所占的列宽。通过此图表的属性设置可知,在中等大小的屏幕上(例如笔记本电脑),元素的列宽被指定了。
在我们创建的 Cat Photo App 中,将会使用 col-xs-*
,其中 xs
是 extra small 缩写(应用于较小的屏幕,比如手机屏幕),*
是你需要填写的数字,代表在一行中,各个元素应该占的列宽。
把 Like
, Info
和 Delete
三个按钮一并放入一个 <div class="row">
元素中;然后,其中的每一个按钮都需要各自被一个 <div class="col-xs-4">
元素包裹。
当div
元素设置了 class 属性 row
之后,那几个按钮便可嵌入其中
<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>