首页编程实战列表使用Bootstrap设计响应式页面

使用Bootstrap设计响应式页面


还记得在学习HTML5和CSS的时候,我们创建过一个猫咪照片(Cat Photo)的小应用吗?现在,让我们回头继续完善这个应用吧。这次,我们将使用非常主流的响应式CSS框架Bootstrap来完善它

Bootstrap会自动获取使用者屏幕的大小,并根据屏幕的大小自动调整HTML元素的宽度和高度来适配屏幕,因此称之为--响应式布局

通过响应式布局,你不再需要为你的Web站点重新设计一个手机版的页面,Bootstrap会自动帮你调整好在手机页上的页面显示,事实上,Bootstrap在任何宽度的设备上都能适应得很好

使用Bootstrap也非常简单,你只需要把下面的链接添加到你需要使用Bootstrap来进行布局的应用的头部

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap /3.3.1/css/bootstrap.min.css"/>

不过,考虑到接下来的学习中都需要使用该样式,所以我们已经默认帮你们都加载好了,你不需要再添加这个样式链接了。

那么,接下来让我们开始学习Bootstrap吧首先,我们需要把所有的HTML内容放在一个包含有container-fluidclass名称的div下。


运行 (ctrl + enter)
偷看答案


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