Html 向 Bootstrap 添加标头
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15299150/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding a Header to Bootstrap
提问by Justin Russo
I'm fairly new to Bootstrap and am having trouble placing a header above the navigation bar. I need to have a header for the current website with at least 70 px in height, at the same time I need to make sure the Responsiveness works when seen through mobile phone. My current code is
我对 Bootstrap 还很陌生，在导航栏上方放置标题时遇到了问题。我需要为当前网站设置一个高度至少为 70 像素的标题，同时我需要确保通过手机查看时响应性有效。我目前的代码是
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#index.html"><img src="img/navigationlogo.png" alt="Home"/></a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">
<a href="#index.html"><img src="img/Home_Button.png" width="24" height="21" alt="Home"/></a>
</li>
</ul>
</div>
</div>
</div>
</div>
What is was think I could do is to add
认为我可以做的是添加
<header></header>
Above navigation bar and place my logo there.
在导航栏上方并将我的徽标放在那里。
Can someone please provide me a sample code with css on how I can achieve this ? As I heard that some minimum padding is to be maintained so that the responsive navigation works if seen through a mobile device.
有人可以为我提供一个带有 css 的示例代码，以说明我如何实现这一目标吗？我听说要保持一些最小填充，以便在通过移动设备看到时响应式导航可以正常工作。
回答by user2426014
add a header tag and give it the "page-header"class. This will give your website a nice little header.
添加一个标题标签并给它"page-header"类。这将为您的网站提供一个漂亮的小标题。
回答by Jon Crowell
If you're wondering about Bootstrap's standard headers, you should also be aware of how to add a subhead.
如果您想知道 Bootstrap 的标准标题，您还应该知道如何添加子标题。
<div class="page-header">
<h1>Your mother was a hamster
<small>and your father smelt of elderberries</small>
</h1>
</div>
Result:
结果：
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="page-header">
<h1>Your mother was a hamster
<small>and your father smelt of elderberries</small>
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>回答by Shail
You can place a div or an html5 header block above the navbar in the following way , assuming your width to be 1000px for the image:
您可以按以下方式在导航栏上方放置 div 或 html5 标题块，假设图像的宽度为 1000 像素：
<header>
<img src="http://placehold.it/1000x70"/>
</header>
You can place your navbar after the above code.
您可以将导航栏放在上述代码之后。
You can see a jsfiddle Demo
你可以看到一个jsfiddle Demo
