在ad中，header的封装最常用的是HTML5中的
使用
除了HTML5，我们在ad中还可以使用JavaScript来封装header。在JavaScript中，我们可以通过document.createElement()方法来创建一个
下面是一个简单的例子：
var header = document.createElement("header");document.body.appendChild(header);我们也可以通过classList.add()方法来给
使用CSS来封装header也是一种常见的方式。我们可以使用CSS3中的伪元素::before和::after来创建一个
下面是一个基本的例子：
header::before { content: "HEADER";
display: block;
text-align: center;
font-weight: bold;
}通过CSS来封装
如果你使用Bootstrap来开发网站，那么
在Bootstrap中，header的封装一般使用
下面是一个Bootstrap中header的基本结构：
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">LOGO</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav>通过上面的代码，我们可以快速创建一个响应式的header布局，并且支持导航条的折叠与展开。
关注微信