Bootstrap(CSS Framework) をFacebookアプリに適用する

Facebook アプリのイメージをかっこよくするために、Bootstrap(CSS Framework)を適用します。

Bootstrapのメニューをつける前

FB_VS2013_130

Bootstrapのメニューをつけた後

FB_Bootstrap010

実際に書き方サンプルはここ

http://www.asp.net/mvc/tutorials/mvc-4/aspnet-mvc-facebook-birthday-app

Bootstrapについては瀬尾さんが詳しく説明しています。

http://www.asp.net/mvc/tutorials/mvc-4/aspnet-mvc-facebook-birthday-app

最新のBootstrapを入れると、3.0.0が現在入るので、書き方がサンプルと違うので。

以下のようにパッケージマネジャーコンソールから 2.2.2のバージョン指定でインストールすること。

PM> Install-Package Twitter.Bootstrap -Version 2.2.2
‘Twitter.Bootstrap 2.2.2’ をインストールしています。
‘Twitter.Bootstrap 2.2.2’ が正常にインストールされました。
‘Twitter.Bootstrap 2.2.2’ を FB001 に追加しています。
‘Twitter.Bootstrap 2.2.2’ が FB001 に正常に追加されました。

App_Start/BundleConfig.cs

using System.Web;
using System.Web.Optimization;

namespace FB001
{
    public class BundleConfig
    {
        // Bundling の詳細については、http://go.microsoft.com/fwlink/?LinkId=254725 を参照してください
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                        "~/Scripts/jquery-ui-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate*"));

            // 開発と学習には、Modernizr の開発バージョンを使用します。次に、実稼働の準備が
            // できたら、http://modernizr.com にあるビルド ツールを使用して、必要なテストのみを選択します。
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include("~/Scripts/modernizr-*"));
//変更開始
            bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css", "~/Content/bootstrap.css", "~/Content/bootstrap-responsive.css"));
//変更終了

//削除開始

            //bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
            //            "~/Content/themes/base/jquery.ui.core.css",
            //            "~/Content/themes/base/jquery.ui.resizable.css",
            //            "~/Content/themes/base/jquery.ui.selectable.css",
            //            "~/Content/themes/base/jquery.ui.accordion.css",
            //            "~/Content/themes/base/jquery.ui.autocomplete.css",
            //            "~/Content/themes/base/jquery.ui.button.css",
            //            "~/Content/themes/base/jquery.ui.dialog.css",
            //            "~/Content/themes/base/jquery.ui.slider.css",
            //            "~/Content/themes/base/jquery.ui.tabs.css",
            //            "~/Content/themes/base/jquery.ui.datepicker.css",
            //            "~/Content/themes/base/jquery.ui.progressbar.css",
            //            "~/Content/themes/base/jquery.ui.theme.css"));
//削除終了

//追加開始
            bundles.Add(new ScriptBundle("~/bundles/app").Include("~/Scripts/bootstrap.js"));
//追加終了

        }
    }
}

Content/Site.css

body {
    font-family: "Segoe UI", Arial;
    margin: 0;
    padding: 0;
}

header {
    overflow: hidden;
    height: 229px;
    padding: 20px;
    margin: 0;
    width: 700px;
}

    header h1 {
        font-size: 80px;
        color: #004C66;
        /*削除*/
        /*margin: 0;*/
        padding-top: 20px;
        font-weight: normal;
    }

    header h2 {
        font-size: 25px;
        color: #004C66;
        margin: 0;
        font-weight: normal;
    }

Views/Shared/_Layout.cshtml

@*追加開始*@
@using Microsoft.AspNet.Mvc.Facebook
@*追加終了*@
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <title>@ViewBag.Title - マイ ASP.NET MVC アプリケーション</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
@*追加開始*@
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/app")
@*追加終了*@
</head>
<body>
    <script>
        window.fbAsyncInit = function () {
            FB.init({
                appId: '@Microsoft.AspNet.Mvc.Facebook.GlobalFacebookConfiguration.Configuration.AppId', // App ID
                status: true, // ログイン状態の確認
                cookie: true, // Cookie を有効にして、サーバーがセッションにアクセスすることを許可する
                xfbml: true  // XFBML の解析
            });
        };

        // SDK を非同期に読み込む
        (function (d) {
            var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
            if (d.getElementById(id)) { return; }
            js = d.createElement('script'); js.id = id; js.async = true;
            js.src = "//connect.facebook.net/en_US/all.js";
            ref.parentNode.insertBefore(js, ref);
        }(document));
    </script>

    <div id="wrapper">
@*追加開始*@
        <div class="navbar">
            <div class="navbar-inner">
                <div class="container">
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </a>
                    <a class="brand" target="_top" href="@GlobalFacebookConfiguration.Configuration.AppUrl@Url.Action("Index", "Home")">Birthday App</a>
                    <div class="nav-collapse collapse">
                        <ul class="nav">
                            <li><a target="_top" href="@GlobalFacebookConfiguration.Configuration.AppUrl@Url.Action("Index", "Home")">Home</a></li>
                            <li><a href="@Url.Action("About", "Home")">About</a></li>
                        </ul>
                        <form class="navbar-form pull-right" action="@Url.Action("Search", "Home")" method="get">
                            <input class="span2" type="text" name="friendName" placeholder="Friend's name" />
                            <button type="submit" class="btn">Search</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
@*追加終了*@


        <header id="topHeader">
@*追加開始*@
            <h1>Birthday App</h1>
            <h2>Time to buy your friend a birthday present.</h2>
@*追加終了*@
        </header>
        @RenderBody()
        <footer>
            <p>© @DateTime.Now.Year - マイ ASP.NET MVC アプリケーション</p>
        </footer>
    </div>
    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>
</html>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です