首页编程实战列表使用Bootstrap设计一个头部导航

使用Bootstrap设计一个头部导航


我们将通过把标题和慵懒的猫咪图片放在同一行中,为我们的Cat Photo APP做一个简单的标题。

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

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

an image illustrating Bootstrap's grid system

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

但是在此APP中,我们将使用 col-xs-*xs 是指超小屏幕(例如手机屏幕之类)的列宽比例, * 指定了元素宽度应该占用的栏数。

使用<div class="row"> 标签把你的第一张猫咪图片跟h2 标签包含起来,然后创建一个<div class="col-xs-8"> 元素把h2元素包含进去,猫咪图片则放到 <div class="col-xs-4">标签里,这样,h2 标签跟猫咪图片就处于同一行中了

请注意,图片现在是否符合文字尺寸?


运行 (ctrl + enter)
偷看答案


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