Bootstrap 创建一个网页

接下来我们通过 Bootstrap3 来创建一个简单的响应式网页。

在学习之前我们可以先看下效果: /try/demo_source/bootstrap3-makewebsite.htm

HTML 代码

< div class = " jumbotron text-center " style = " margin-bottom:0 " > < h1 > 我的第一个 Bootstrap 页面 </ h1 > < p > 重置浏览器窗口大小查看效果! </ p > </ div > < nav class = " navbar navbar-inverse " > < div class = " container-fluid " > < div class = " navbar-header " > < button type = " button " class = " navbar-toggle " data-toggle = " collapse " data-target = " #myNavbar " > < span class = " icon-bar " > </ span > < span class = " icon-bar " > </ span > < span class = " icon-bar " > </ span > </ button > < a class = " navbar-brand " href = " # " > 网站名 </ a > </ div > < div class = " collapse navbar-collapse " id = " myNavbar " > < ul class = " nav navbar-nav " > < li class = " active " > < a href = " # " > 主页 </ a > </ li > < li > < a href = " # " > 页面 2 </ a > </ li > < li > < a href = " # " > 页面 3 </ a > </ li > </ ul > </ div > </ div > </ nav > < div class = " container " > < div class = " row " > < div class = " col-sm-4 " > < h2 > 关于我 </ h2 > < h5 > 我的照片: </ h5 > < div class = " fakeimg " > 这边插入图像 </ div > < p > 关于我的介绍.. </ p > < h3 > 链接 </ h3 > < p > 描述文本。 </ p > < ul class = " nav nav-pills nav-stacked " > < li class = " active " > < a href = " # " > 链接 1 </ a > </ li > < li > < a href = " # " > 链接 2 </ a > </ li > < li > < a href = " # " > 链接 3 </ a > </ li > </ ul > < hr class = " hidden-sm hidden-md hidden-lg " > </ div > < div class = " col-sm-8 " > < h2 > 标题 </ h2 > < h5 > 副标题 </ h5 > < div class = " fakeimg " > 图像 </ div > < p > 一些文本.. </ p > < p > 云搜索MX教程,学的不仅是技术,更是梦想!!!云搜索MX教程,学的不仅是技术,更是梦想!!!云搜索MX教程,学的不仅是技术,更是梦想!!! </ p > < br > < h2 > 标题 </ h2 > < h5 > 副标题 </ h5 > < div class = " fakeimg " > 图像 </ div > < p > 一些文本.. </ p > < p > 云搜索MX教程,学的不仅是技术,更是梦想!!!云搜索MX教程,学的不仅是技术,更是梦想!!!云搜索MX教程,学的不仅是技术,更是梦想!!! </ p > </ div > </ div > </ div > < div class = " jumbotron text-center " style = " margin-bottom:0 " > < p > 底部内容 </ p > </ div >

尝试一下 »