如何在我的网站上正确使用 bootstrap？

Question

我刚开始使用 bootstrap，我正在使用它创建一个网站。但是有人告诉我我没有正确使用它。有人可以告诉我如何正确使用 bootstrap 吗？感谢您的帮助。

body{
    overflow: hidden;
    background-color: #1C213D;
    background-image: url("background.png");
}

.nav{
    position: absolute;
    width: 250px;
    height: 5000px;
    background-color: rgba(0, 0, 0, .2);
    border: 2px solid rgba(56, 179, 206, .4);
}

.nav-pills li a{
   /* 0.5s is the amount of time it take to change colors */
   transition: .3s background ease-in-out;
}

ul li{
    position: relative;
    text-align: center;
    list-style: none;
    font-family: "Play";
    display: block;
    color: lightsteelblue;
    margin-top: 200px;
    font-size: 20px;
    padding: 10px;
}

p{
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: left;
    font-size: 18px;
    color: whitesmoke;
}

.container{
    position: absolute;
    width: 800px;
    height: 450px;
    margin-top: 200px;
    margin-left: 265px;
    background-color: rgba(0, 0, 0, .8);
    border-top: 2px solid rgba(56, 179, 206, 1);
    border-bottom: 2px solid rgba(56, 179, 206, 1);
    border-right: 2px solid rgba(56, 179, 206, 1);
}

.project1{
    position: absolute;
    width: 400px;
    height: 275px;
    margin-top: 80px;
    margin-left: 800px;
    border: 2px solid rgba(56, 179, 206, 1);
    background-color: rgba(0, 0, 0, .2);
}

.project2{
    position: absolute;
    width: 400px;
    height: 275px;
    margin-top: 80px;
    margin-left: 350px;
    border: 2px solid rgba(56, 179, 206, 1);
    background-color: rgba(0, 0, 0, .2);
}

.project3{
    position: absolute;
    width: 400px;
    height: 275px;
    margin-top: 400px;
    margin-left: 350px;
    border: 2px solid rgba(56, 179, 206, 1);
    background-color: rgba(0, 0, 0, .2);
}

.project4{
    position: absolute;
    width: 400px;
    height: 275px;
    margin-top: 400px;
    margin-left: 800px;
    border: 2px solid rgba(56, 179, 206, 1);
    background-color: rgba(0, 0, 0, .2);
}

img{
    position: absolute;
    margin-left: 54px;
    margin-top: 25px;
}

i{
    margin-top: 675px;
    font-size: 40px;
    color: white;
}

<!DOCTYPE html>

<html>
<head>
    <link href="https://fonts.googleapis.com/css?family=Play" rel="stylesheet">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <title>Home</title>
</head>  
<body>
  
    <div class="container-fluid">
       <div class="col-md-4 col-lg-4 col-sm-4 col-xs-4">
            <ul class="nav nav-pills nav-stacked" role="tablist">
                    <img src="logo.png">
                    <li class="active"><a href="home.html">Home</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="projects.html">Projects</a></li>
                    <li><a href="contact.html">Contact</a></li>        
            </ul>
      </div>
        <div class="container">
      <div class="col-md-7 col-lg-7 col-xs-7 col-sm-7">
             <p>This is the home page.</p>
            </div>
      </div>
    </div>
</body>
</html>

Answer 1

您没有包含 bootstrap js（或所需的 jQuery）文件。看到这个 link:

http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-get-started.php

此外，这是多余的：

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"

最后，如果您使用的是 bootstrap 网格系统，那么通常您希望列宽加起来为 12：

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

我建议阅读 bootstrap 网格系统：http://getbootstrap.com/css/

Answer 2

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

<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">

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

所以更好的做法是编写媒体查询 classes 从小屏幕或中屏幕尺寸开始，让下面的每个屏幕尺寸都使用默认的 100% 宽度。看起来像这样：

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

此外，这不一定是错误的，但您忘记将 Bootstrap Javascript 添加到文档中。注意：您还需要在 Bootstrap Javascript 之前包含 jQuery 以便它起作用。 Bootstrap JS依赖于jQuery.

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

所以，这一行：

<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，它只会针对您的自定义元素而不会弄乱底层 Bootstrap CSS 样式。

Answer 3

将此添加到 header

<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>

如何在我的网站上正确使用 bootstrap？

How can I properly use bootstrap on my site?

html

css

rows

twitter-bootstrap

responsive