首页编程实战列表使用Bootstrap做页面布局

使用Bootstrap做页面布局


Bootstrap使用响应式网格系统,可以轻松地将元素放入行中并指定每个元素的相对宽度。 Bootstrap的大部分类都可以应用于div 元素。

以下是Bootstrap的12列网格布局如何工作的图:

an image illustrating Bootstrap's grid system

值得注意的是,在上图中,我们用到了col-md-* 这个class,这里的md 表示中等,* 是一个数字,指定了元素应该占多少列宽,从图中我们可以看出,设置的是一个中等尺寸宽度的诸如笔记本电脑屏幕上的布局

回到我们正在优化的Cat Photo App应用中,现在我们使用col-xs-* 这个class属性对按钮进行重新布局,xs 跟md 不同,xs 是指一个屏幕宽度较小的设备,比如手机屏幕之类的

现在,让我们把Like, Info  Delete 三个按钮嵌进一个<div class="row"> 标签中让他们并列排列,然后把按钮嵌进<div class="col-xs-4"> 中,设置按钮占用的列宽

细心的你可能会发现,当div 标签设置了row 这个class属性之后,按钮便可并列排列了。


运行 (ctrl + enter)
偷看答案


W3Cschool app 编程微课功能上线
二维码
建议反馈
二维码