所以我计划使用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>
答案 0 :(得分:1)
Twitter Bootstrap是准备在您的项目中使用的css
和js
组件的集合。
您在项目中使用了Bootstrap使用的一些类名。在不加载Bootstrap
的情况下,库中为这些类定义的规则不适用,因为您没有加载库。加载时,它们会应用。
您使用的某些类以及哪些类型的Bootstrap是:container
和row
。您应该花一些时间查看他们的示例,并检查应用的CSS规则,以便更好地了解每个规则。
此外,当您决定使用Bootstrap时,最佳实践(到目前为止)是从他们提供的示例开始,并尝试将修改保持在最低限度,尤其是关于布局。
请注意,Bootstrap为大多数常见布局问题提供了修复和解决方案,例如
但是,再一次。 Bootstrap不是分析和修复页面的机器人。它只是CSS
个规则,@media
个查询(有时是小js
个摘要)的集合。如果您打算使用它,您需要了解每个组件的功能。
假装它开箱即用就像是假装一架飞机自行飞行。有些人会这样做,但是如果自动系统出现故障,你知道如何驾驶,着陆和起飞仍然是最好的。
答案 1 :(得分:1)
为了进一步阐述@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提供的示例开始登录页面布局,并尽可能将样式保持在最低限度。希望这对你有所帮助。