Question

所以我刚刚发现了引导程序，我正在尝试将它实现到我的小网页/应用程序中，以便我可以使我的表单/控制台框更具视觉吸引力。

在jsfiddle中将bootstrap作为外部资源集成后，我的app / page的原型仍然有效。参见：

code to make the red box go away

jsfiddle

正如您所看到的，我的应用程序的jsfiddle版本正常运行

但是当在实际站点中实现bootstrap时，一切都没有了......

Actual site

正如您所看到的，文本的主要图像和输出完全消失，表单/控制台的结构也消失了。

有谁能解释这里发生了什么？

我是否正确地集成了CSS文件，或者我只是错误地实现了bootstrap？以下是上传到服务器的一些HTML文件：

<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
...
<body>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="textualizer.js"></script>
    <script type="text/javascript" src="script.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>

或者它与CSS选择器有什么关系，也许它们在集成bootstrap之后会被改变，这就是为什么它不能在实际站点中工作？我完全迷失了为什么它在jsfiddle工作但不在实际网站上工作。（通常当我完全迷失在这么大的东西上时，答案最终会成为我刚才忽略的最简单的事情）....

Answer 1

正如您在bootstrap docs中所看到的，它有一些带有css类的标记，可以获得您想要的内容。例如，<div class="container"> </div>，<button type="button" class="btn btn-default">Submit</button>等。只需添加css参考，它就不会自动应用到您的html页面。由于您在jsfiddle中使用了自定义CSS样式，因此工作正常。但是，由于您没有在您的网站中使用自定义CSS，它将呈现为没有任何样式的纯HTML标记。

因此，请使用您的网站的引导程序布局和类更改标记并查看结果。如果您希望覆盖颜色等，可以在bootstrap core css文件之后使用自定义css文件：

 <link rel="stylesheet" href="css/bootstrap.min.css">
 <link rel="stylesheet" href="css/mycustomstyle.css">

您可以在mycustomstyle.css文件中对引导核心样式进行覆盖。只需彻底阅读bootstrap文档，就可以了解如何在网站/ Web应用程序中使用它。

实现twitter bootstrap会影响已经存在的css或表单吗？

1 个答案: