Bootstrap 创建一个网页

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

在学习之前我们可以先看下效果:http://www.gxlcms.com/specialhttp://www.gxlcms.com/code/name/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>菜鸟教程,学的不仅是技术,更是梦想!!!菜鸟教程,学的不仅是技术,更是梦想!!!菜鸟教程,学的不仅是技术,更是梦想!!!</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>

尝试一下 »