修改

Question

我使用的CMS主题包含所有Bootstrap 3.是否可以在HTML / CSS中手动添加标题栏？我不确定这是该块的官方名称......它是包含文字的紫色全宽块：

CSS Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system.

在以下链接中（例如）：

http://getbootstrap.com/css/

此标题栏内置于我的主题中，可根据我选择的页面设计提供。

但是我想知道这个块是否可以单独从Bootstrap中获得，比如Navbar，panel，well等组件，我可以只包含一些HTML / CSS代码并让它出现在页面正文中，示例

Answer 1

不，它不是在引导程序中，但它很容易抓住风格并在任何地方使用它：

.bs-docs-header {
font-size: 24px;
padding-bottom: 60px;
padding-top: 60px;
text-align: left;
}

.bs-docs-masthead, .bs-docs-header {
background-color: #6F5499;
background-image: linear-gradient(to bottom, #563D7C 0px, #6F5499 100%);
background-repeat: repeat-x;
color: #CDBFE3;
padding: 30px 15px;
position: relative;
text-align: center;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);

}

检查this jsfiddle

Answer 2

如果查看他们的来源，他们使用名为docs.min.css的样式表，他们已在此处定义了背景。除此之外，它只是一个简单的<div class="container">。所以答案是肯定和否定。当然，在使用引导程序时，您可以单独使用CMS中的容器，但除非您从getbootstrap.com源中删除它，否则后台将无法使用。

修改

如果您看到他们的样式，他们会在docs.min.css：

中使用此代码

@media (min-width: 768px)
    .bs-docs-header h1 {
    font-size: 60px;
    line-height: 1;
    }
}

这意味着，当窗口宽度超过768像素时，它会为h1提供60px的字体大小。当你属于它时，这个代码被忽略，并且正在应用默认的bootstrap font-size。

编辑2

要获得背景颜色，请不要将背景颜色应用于.container。在没有宽度值的情况下围绕它包裹div。容器宽度不是全宽，因此如果您对其应用背景，则它仅位于居中的容器后面。

编辑3

一个简单的HTML结构就是这样的（你仍然需要包含所有引导样式和默认的html标签等。

<html>
    <body>
        <div id="bgColorDiv">
            <div class="container">
                <h1>My title</h1>
                <p>Paragraph below the title</p>
            </div>
        </div>
    </body>
</html>

Bootstrap：是否可以在html / css代码中添加标题栏？

2 个答案:

修改

编辑2

编辑3