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

时间:2017-03-01 13:21:47

标签: css twitter-bootstrap

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

enter image description here

如果没有引导链接,这是图像:

enter image description here

我的代码:

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>

2 个答案:

答案 0 :(得分:1)

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

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

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

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

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

  • 浏览器呈现差异
  • 响应

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

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

答案 1 :(得分:1)

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

enter image description here

您可以在图片中看到[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"/>

这将发生: enter image description here

这一个...... enter image description here

现在,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提供的示例开始登录页面布局,并尽可能将样式保持在最低限度。希望这对你有所帮助。