Bootstrap4 创建一个网页

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

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

HTML 代码

< div class = " jumbotron text-center " style = " margin-bottom:0 " > < h1 > 我的第一个 Bootstrap 4 页面 </ h1 > < p > 重置浏览器窗口大小查看效果! </ p > </ div > < nav class = " navbar navbar-expand-sm bg-dark navbar-dark " > < a class = " navbar-brand " href = " # " > 导航 </ a > < button class = " navbar-toggler " type = " button " data-toggle = " collapse " data-target = " #collapsibleNavbar " > < span class = " navbar-toggler-icon " > </ span > </ button > < div class = " collapse navbar-collapse " id = " collapsibleNavbar " > < ul class = " navbar-nav " > < li class = " nav-item " > < a class = " nav-link " href = " # " > 链接 </ a > </ li > < li class = " nav-item " > < a class = " nav-link " href = " # " > 链接 </ a > </ li > < li class = " nav-item " > < a class = " nav-link " href = " # " > 链接 </ a > </ li > </ ul > </ div > </ nav > < div class = " container " style = " margin-top:30px " > < 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 flex-column " > < li class = " nav-item " > < a class = " nav-link active " href = " # " > 激活状态 </ a > </ li > < li class = " nav-item " > < a class = " nav-link " href = " # " > 链接 </ a > </ li > < li class = " nav-item " > < a class = " nav-link " href = " # " > 链接 </ a > </ li > < li class = " nav-item " > < a class = " nav-link disabled " href = " # " > 禁用 </ a > </ li > </ ul > < hr class = " d-sm-none " > </ 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 >

尝试一下 »