我正在尝试使用bootstrap 4 - 尝试创建一个看起来像这样的表单http://getbootstrap.com/docs/4.0/examples/sign-in/
我的样子如下:显然原因是因为bootstrap示例文件包含
<link href="signin.css" rel="stylesheet">
一旦我复制了这个CSS,我的表格看起来很好。
但我很困惑 - 我希望我的整个用户界面以简单的引导方式进行设计。我错过了某种全局应用的样式表吗?为什么在这个示例页面中有一小段css?如何将纯引导样式应用于整个站点?有些例子让我想知道如何设置风格似乎很奇怪?
答案 0 :(得分:1)
要使它看起来相同(几乎完全相同),唯一需要做的就是将表单代码放入一个内部有自动列的容器中,并将整个内容置于mx-auto
类的中心,将内容集中在text-center
类中,如下所示:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid bg-light">
<div class="row">
<div class="col-auto mx-auto my-5 text-center">
<form class="form-signin">
<img class="mb-4" src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
<h1 class="h3 px-5 mb-3 font-weight-normal">Please sign in</h1>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control form-control-lg" placeholder="Email address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control form-control-lg" placeholder="Password" required>
<div class="checkbox mb-3 mt-2">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
<p class="mt-5 mb-3 text-muted">© 2017-2018</p>
</form>
</div>
</div>
</div>
&#13;
我还在列中添加了my-5
类,以便在顶部和底部提供更多的余量。将form-control-lg
类添加到表单输入中以使它们更大一些。并将mt-2
(margin-top 2个单位)添加到复选框。并且bg-light
已添加到容器中以获取背景颜色。就是这样。所有100%本机Bootstrap类都没有任何自定义css。