Question

所以我计划使用bootstrap使我的登录页面响应。但是当我在我的代码中添加bootstrap链接时，我的HTML显示因某些原因而受到影响。我想知道为什么会这样，你能不能给我一个提示如何让我的登录页面响应？如果添加了引导链接，则为以下图像：

如果没有引导链接，这是图像：

我的代码：

body {
    width: auto;
    margin:0;
    padding:0;


}

@font-face {
    font-family: "Gidole";
    src: url(CODE Light.otf);
}

h2 {
    text-align: center;

}

.container {
    width: 960px;
    height: 500px;
    margin-left: auto;
    margin-right: auto;
    position: relative;

}


.row {
    width: 320px;
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%); 
    color: #191919; 
    background-color: green;    
    box-shadow: 0 1px 1px #ABBEB5;
    font-family: "Gidole", sans-serif;
    padding: 10px 55px 40px;    
    border: 1px solid black;

}   


input[type=text],[type=password] {
    width: 97%;
    height: 22px;
    padding-left: 5px;
    margin-bottom: 20px;
    margin-top: 8px;
    color: #191919;
    font-family: "Gidole", sans-serif;
    margin-top:5px;


}

#login {
    width: 100%;
    margin-top: 5px;
    padding: 10px;
    font-weight: bold;
    cursor: pointer;
    /* display: block; use for centering  */
    display: block;
    color: #000000;

}

#signup {
    color: #191919; 
    margin-top: 5px;
    cursor: pointer;
    font-size: 12px;
    text-align: center;
    display: block

}

#forgotpass {
    color: #191919; 
    cursor: pointer;
    font-size: 12px;
    text-align: center;
    display: block
}

<link rel="stylesheet" href="bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css" />

<div class="container">
    <div class="row">
        <h2> User Login </h1>
        <div class="myForm1">
            <form action="p1.php" method="POST">
                <input type="text" name="username" placeholder="Username" /> <br/>  
                <input type="password" name="password" placeholder="Password" /> <br/>
                <input type="submit" name="submit" id="login"/>
            </form>

            <form action="register.php" method="POST">

                <p> <a href="register.php" name="register" id="signup"> Sign up </a> </p>
                <p> <a href="" name="register" id="forgotpass"> Forgot password? </a> </p>

            </form>
        </div>
    </div>
</div>

Answer 1

Twitter Bootstrap是准备在您的项目中使用的css和js组件的集合。

您在项目中使用了Bootstrap使用的一些类名。在不加载Bootstrap的情况下，库中为这些类定义的规则不适用，因为您没有加载库。加载时，它们会应用。

您使用的某些类以及哪些类型的Bootstrap是：container和row。您应该花一些时间查看他们的示例，并检查应用的CSS规则，以便更好地了解每个规则。

此外，当您决定使用Bootstrap时，最佳实践（到目前为止）是从他们提供的示例开始，并尝试将修改保持在最低限度，尤其是关于布局。

请注意，Bootstrap为大多数常见布局问题提供了修复和解决方案，例如

浏览器呈现差异
响应

但是，再一次。 Bootstrap不是分析和修复页面的机器人。它只是CSS个规则，@media个查询（有时是小js个摘要）的集合。如果您打算使用它，您需要了解每个组件的功能。

假装它开箱即用就像是假装一架飞机自行飞行。有些人会这样做，但是如果自动系统出现故障，你知道如何驾驶，着陆和起飞仍然是最好的。

Answer 2

为了进一步阐述@Andrei Gheorghiu回答的问题，请打开在您的Google Chrome浏览器上启动您的控制台（右键单击“检查元素＆＃39;或按Ctrl + Shift + I或F12”）

您可以在图片中看到[style.css]中的类{容器} {boot}属性被Twitter Bootstrap [bootstrap.min.css] class {container}属性覆盖（检查您的控制台）。

CSS属性将根据css文件的导入顺序而改变。在这种情况下，我按以下顺序导入css文件：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" href="style.css" />

这意味着css属性将从[bootstrap.min.css]开始，然后是[style.css] 所以，如果我们颠倒这样的顺序：

<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>

这将发生：

这一个......

现在，Twitter Bootstrap [bootstrap.min.css]类{container}属性会覆盖[style.css]类{container}属性。

您还可以看到这里有一个前缀＆＃39; @ media＆＃39;。您可以了解有关使用@media查询的更多信息在此处使您的登录页面响应：https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

但是就像@Andrei提到的那样，您可以从Bootstrap提供的示例开始登录页面布局，并尽可能将样式保持在最低限度。希望这对你有所帮助。

添加bootstrap链接后，我的代码显示会发生变化吗？

2 个答案: