Html 如何在我的站点上正确使用引导？

我刚开始使用bootstrap，我正在用它创建一个网站。但有人告诉我，我没有正确地使用它。有人能告诉我如何正确使用引导程序吗？谢谢你的帮助

正文{
溢出：隐藏；
背景色：#1C213D；
背景图片：url（“background.png”）；
}
.导航{
位置：绝对位置；
宽度：250px；
高度：5000px；
背景色：rgba（0,0,0,2）；
边框：2个实心rgba（56179206.4）；
}
李娜先生{
/*0.5s是更改颜色所需的时间*/
转换：.3s背景轻松输入输出；
}
ulli{
位置：相对位置；
文本对齐：居中；
列表样式：无；
字体系列：“玩”；
显示：块；
颜色：淡蓝色；
利润上限：200px；
字体大小：20px；
填充：10px；
}
p{
填充顶部：10px；
垫底：10px；
文本对齐：左对齐；
字号：18px；
颜色：白烟；
}
.集装箱{
位置：绝对位置；
宽度：800px；
高度：450px；
利润上限：200px；
左边距：265px；
背景色：rgba（0,0,0,8）；
边框顶部：2个实心rgba（56179206,1）；
边框底部：2个实心rgba（56179206,1）；
右边框：2个实心rgba（56179206,1）；
}
.项目1{
位置：绝对位置；
宽度：400px；
高度：275px；
边缘顶部：80px；
左边距：800px；
边框：2个实心rgba（56179206,1）；
背景色：rgba（0,0,0,2）；
}
.项目2{
位置：绝对位置；
宽度：400px；
高度：275px；
边缘顶部：80px；
左边距：350px；
边框：2个实心rgba（56179206,1）；
背景色：rgba（0,0,0,2）；
}
.项目3{
位置：绝对位置；
宽度：400px；
高度：275px；
边缘顶部：400px；
左边距：350px；
边框：2个实心rgba（56179206,1）；
背景色：rgba（0,0,0,2）；
}
.项目4{
位置：绝对位置；
宽度：400px；
高度：275px；
边缘顶部：400px；
左边距：800px；
边框：2个实心rgba（56179206,1）；
背景色：rgba（0,0,0,2）；
}
img{
位置：绝对位置；
左边距：54px；
边缘顶部：25px；
}
我{
页边顶部：675px；
字体大小：40px；
颜色：白色；
}

家






这是主页

您没有包括引导js（或所需的jQuery）文件。请参阅此链接：

此外，这是多余的：

class="col-md-4 col-lg-4 col-sm-4 col-xs-4"
class="col-md-7 col-lg-7 col-xs-7 col-sm-7"

它们可以合并为：

class="col-md-4"
class="col-md-7"

如果您对不同的屏幕大小使用不同的宽度，那么这将是合适的：

class="col-md-3 col-lg-4 col-sm-5 col-xs-8"
class="col-md-4 col-lg-7 col-xs-6 col-sm-5"

最后，如果您使用的是引导网格系统，那么通常您希望将列宽相加为12：

<div class="col-md-4"></div><div class="col-md-5"></div><div class="col-md-3"></div>

---

我建议您阅读引导网格系统：

首先，您不需要像以前那样使用这两行：

<div class="col-md-4 col-lg-4 col-sm-4 col-xs-4">
<div class="col-md-7 col-lg-7 col-xs-7 col-sm-7">

这些行最好这样写：

<div class="col-xs-4">
<div class="col-xs-7">

但即使在技术上，这也是一个潜在的问题，因为在xtra小屏幕上，您通常（并非总是）希望项目在整个屏幕上延伸

因此，更好的做法是从中小屏幕大小开始编写媒体查询类，并让下面的每个屏幕大小使用默认的100%宽度。看起来是这样的：

<div class="col-md-4">
<div class="col-md-7">

此外，这并不一定是错误的，但是您忘记了将引导Javascript添加到文档中。注意：您还需要在引导Javascript之前包含jQuery，这样它才能工作。引导JS依赖于jQuery

最后，在css中，您正在设置通用元素的样式。您要做的是将组件CSS复制并粘贴到所有默认引导类中，然后将另一个自定义类添加到要编辑的项中，使其看起来不同

因此，这一行：

<ul class="nav nav-pills nav-stacked" role="tablist">

应该是这样的：

<ul class="nav nav-pills nav-stacked my-awesome-custom-element" role="tablist">

---

然后，您可以为

my awesome custom element

编写CSS，它只针对您的自定义元素，而不会影响底层引导CSS样式。

将此添加到标题中

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>