Twitter Bootstrap 4 - 默认样式在哪里?

时间:2018-03-15 00:32:10

标签: bootstrap-4

我正在尝试使用bootstrap 4 - 尝试创建一个看起来像这样的表单http://getbootstrap.com/docs/4.0/examples/sign-in/

enter image description here

我的样子如下:

enter image description here

显然原因是因为bootstrap示例文件包含

<link href="signin.css" rel="stylesheet">

一旦我复制了这个CSS,我的表格看起来很好。

但我很困惑 - 我希望我的整个用户界面以简单的引导方式进行设计。我错过了某种全局应用的样式表吗?为什么在这个示例页面中有一小段css?如何将纯引导样式应用于整个站点?有些例子让我想知道如何设置风格似乎很奇怪?

1 个答案:

答案 0 :(得分:1)

要使它看起来相同(几乎完全相同),唯一需要做的就是将表单代码放入一个内部有自动列的容器中,并将整个内容置于mx-auto类的中心,将内容集中在text-center类中,如下所示:

&#13;
&#13;
<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">&copy; 2017-2018</p>
            </form>
        </div>
    </div>
</div>
&#13;
&#13;
&#13;

我还在列中添加了my-5类,以便在顶部和底部提供更多的余量。将form-control-lg类添加到表单输入中以使它们更大一些。并将mt-2(margin-top 2个单位)添加到复选框。并且bg-light已添加到容器中以获取背景颜色。就是这样。所有100%本机Bootstrap类都没有任何自定义css。