初体验
安装
从官网下载 js.css.字体文件
新建站点-创建html文件
连接bootstrap的css
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css" />
第一个小案例
头部
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale">
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css" />
<title></title>
<style type="text/css">
body {
padding-top: 50px;
}
.container{
padding-top: 40px 15px;
text-align: center;
}
</style>
</head>
身体
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand">Xiaozhi</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">heme</a></li>
<li><a href="#">heme</a></li>
<li><a href="#">heme</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a
mostly barebones HTML document.</p>
</div>
</div>
</body>
效果图
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
建导航栏