<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#ul li a{
font-size: 18px;
}
</style>
</head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<body>
<!--头部-->
<div class="col-md-4">
<ul class="list-inline pull-right topbar">
<li><a href="">设为首页</a></li>
<li><a href="">加入收藏</a></li>
<li><a href="">联系我们</a></li>
<li><a href="">帮助中心</a></li>
</ul>
</div>
<!--
这里着重表明一下:pull-right是靠右对其
list-inline是在我们Bootstrap3.2中书写方法如果你使用的是Bootstrap的2.3及一下版本的话直接写inline即可
-->
<div class="menu">
<div class="row">
<div class="col-md-7">
<ul class="nav nav-tabs" id="ul">
<li><a href="">首页</a></li>
<li><a href="">Web</a></li>
<li><a href="">设计</a></li>
<li><a href="">Java</a></li>
<li><a href="">Bootstrap</a></li>
<li><a href="">JavaScript</a></li>
<li><a href="">新媒体运营</a></li>
</ul>
</div>
<div class="col-md-5">
</div>
</div>
</div>
<!--
导航部
我们在制作导航部分使用我们的基类nav开头，我们的nav-tabs需要我们的nav基类开头，如果没有我们的nav基类支持，他是无法产生效果的
胶囊式标签页：用相同的html标记，但要用nav-pills代替
-->
<!--身体部分-->
<div class="">
</div>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="text-center">主题支持：<a href="">高新管HP1903.1904支持</a></p>
</div>
</div>
</div>
</div>
<!--
底部内容：
Thumbnail
在图像周围添加带有 class .thumbnail 的 <a> 标签。
这会添加四个像素的内边距（padding）和一个灰色的边框
当鼠标悬停在图像上时，会动画显示出图像的轮廓。
-->
</body>
</html>
原文：https://www.cnblogs.com/tianjiu/p/12951088.html