[ASP.NET MVC] 使用Bootsnipp样式

前言

在「[ASP.NET MVC] 使用Bootstrap套件」这篇文章中，介绍了如何在Web项目里使用Bootstrap套件，让用户界面更加的美观大气，增加客户对于项目产出的好感度。但是部分跟我一样欠缺美感的开发人员会发现，就算Bootstrap提供了美美的样式与组件，可是经过自己的组合处理之后，总是会产出不美观的用户接口。这时开发人员可以到Bootsnipp官网浏览开发前辈所贡献的精美样式，并且直接复制喜欢的样式到项目中使用，透过这样的方式就能节省开发人员调整接口外观的时间、也让产出的用户接口更加美观。本篇文章介绍如何在Web项目里使用Bootsnipp样式，为自己留个纪录也希望能帮助到有需要的开发人员。

Bootsnipp官网

加入Bootstrap参考

Bootsnipp中的样式是以Bootstrap做为底层框架，来提供各式的接口组合样式，所以在使用这些样式之前，开发人员必须要先为Web项目加入Bootstrap的参考，才能接着套用Bootsnipp中的样式。开发人员可以照着「[ASP.NET MVC] 使用Bootstrap套件」的内容，来为项目加入Bootstrap参考，并且产出下列的基础页面内容：

<html lang="en">

<head>

    <meta name="viewport" content="width=device-width" />

    <title>Index</title>

    <!-- Styles -->

    <link href="/Content/bootstrap.css" rel="stylesheet">

</head>

<body>

    <!-- Contents -->

    <!-- Scripts -->

    <script src="/Scripts/jquery-1.9.0.js"></script>

    <script src="/Scripts/bootstrap.js"></script>

</body>

</html>

使用Bootsnipp样式

加入Bootstrap参考后，开发人员就可以到Bootsnipp官网，浏览符合项目需求的样式，并且点击样式项目的View按钮，来进入样式内容展示页面。

确认样式内容符合项目需求后，开发人员点击页面上方的CSS按钮来取得该样式的CSS内容，并且复制CSS内容，到先前建立的基础页面内容的Styles区块内备用。

接着，开发人员同样点击页面上方的HTML按钮来取得该样式的HTML内容，并且复制HTML内容，到先前建立的基础页面内容的Contents区块内备用。

最后，储存并执行基础页面的内容，就可以在浏览器上看到Bootsnipp上的样式，已经正常的在Web项目中执行。后续只需要依照项目需求，来调整页面中的HTML内容，就可以完成项目用户接口的开发工作。

<html lang="en">

<head>

    <meta name="viewport" content="width=device-width" />

    <title>Index</title>

    <!-- Styles -->

    <link href="/Content/bootstrap.css" rel="stylesheet">

    <style type="text/css">

        .form-signin {

            max-width: 330px;

            padding: 15px;

            margin: 0 auto;

            padding-top: 5px;

        }

        .form-signin .form-signin-heading, .form-signin .checkbox {

            margin-bottom: 10px;

        }

        .form-signin .checkbox {

            font-weight: normal;

        }

        .form-signin .form-control {

            position: relative;

            font-size: 16px;

            height: auto;

            padding: 10px;

            -webkit-box-sizing: border-box;

            -moz-box-sizing: border-box;

            box-sizing: border-box;

        }

            .form-signin .form-control:focus {

                z-index: 2;

            }

        .form-signin input[type="password"] {

            margin-bottom: 10px;

        }

        .account-wall {

            margin-top: 20px;

            padding: 40px 0px 20px 0px;

            background-color: #f7f7f7;

            -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);

            -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);

            box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);

        }

        .login-title {

            color: #555;

            font-size: 18px;

            font-weight: 400;

            display: block;

        }

        .profile-img {

            width: 96px;

            height: 96px;

            margin: 0 auto 10px;

            display: block;

            -moz-border-radius: 50%;

            -webkit-border-radius: 50%;

            border-radius: 50%;

        }

        .profile-name {

            font-size: 16px;

            font-weight: bold;

            text-align: center;

            margin: 10px 0 0;

            height: 1em;

        }

        .profile-email {

            display: block;

            padding: 0 8px;

            font-size: 15px;

            color: #404040;

            line-height: 2;

            font-size: 14px;

            text-align: center;

            overflow: hidden;

            text-overflow: ellipsis;

            white-space: nowrap;

            -moz-box-sizing: border-box;

            -webkit-box-sizing: border-box;

            box-sizing: border-box;

        }

        .need-help {

            display: block;

            margin-top: 10px;

        }

        .new-account {

            display: block;

            margin-top: 10px;

        }

    </style>

</head>

<body>

    <!-- Contents -->

    <div class="container">

        <div class="row">

            <div class="col-sm-6 col-md-4 col-md-offset-4">

                <h1 class="text-center login-title">Sign in to continue to Gmail</h1>

                <div class="account-wall">

                    <img class="profile-img" src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=120"

                         alt="">

                    <p class="profile-name">Bhaumik Patel</p>

                    <span class="profile-email">example@gmail.com</span>

                    <form class="form-signin">

                        <input type="password" class="form-control" placeholder="Password" required autofocus>

                        <button class="btn btn-lg btn-primary btn-block" type="submit">

                            Sign in

                        </button>

                        <a href="#" class="need-help">Need help? </a><span class="clearfix"></span>

                    </form>

                </div>

                <a href="#" class="text-center new-account">Sign in with a different account</a>

            </div>

        </div>

    </div>

    <!-- Scripts -->

    <script src="/Scripts/jquery-1.9.0.js"></script>

    <script src="/Scripts/bootstrap.js"></script>

</body>

</html>

参考数据