Bootstrap4 创建一个网页

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

在学习之前我们可以先看下效果：https://www.runoob.com/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>菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！</p> <br> <h2>标题</h2> <h5>副标题</h5> <div class="fakeimg">图像</div> <p>一些文本..</p> <p>菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！</p> </div> </div> </div> <div class="jumbotron text-center" style="margin-bottom:0"> <p>底部内容</p> </div>

尝试一下 »