Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

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

此外，这不一定是不正确的，但您忘记将Bootstrap Javascript添加到文档中。注意：您还需要在Bootstrap Javascript之前包含jQuery以使其正常工作。 Bootstrap 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，它只会定位你的自定义元素，而不会弄乱底层的Bootstrap CSS样式。

Answer 2

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

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"

最后，如果你使用的是自举网格系统，那么通常你想让你的列宽加起来为12：

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

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

Answer 3

在标题

中添加此内容

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

3 个答案: