Rainbow Engine

IT技術を分かりやすく簡潔にまとめることによる学習の効率化、また日常の気付きを記録に残すことを目指します。

C#

ASP.NETのbootstrapとは?概要と入手・適用方法のご紹介

投稿日:2021年6月30日 更新日:

 

<目次>

(1) ASP.NETのbootstrapとは?概要と入手・適用方法のご紹介
 (1-1) bootstrapとは?
 (1-2) bootstrapの入手方法~プロジェクトへの追加
  (1-2-1) テーマ選択
  (1-2-2) イメージの確認
  (1-2-3) cssのダウンロード
  (1-2-4) cssをASP.NETプロジェクトへ追加
  (1-2-5) Viewにcssを適用
 (1-3) おまけ

(1) ASP.NETのbootstrapとは?概要と入手・適用方法のご紹介

(1-1) bootstrapとは?

「bootstrap」はASP.NET MVCにて使用できるフリー(無料)でオープンソースの「cssのフレームワーク」です。ASP.NET MVCのプロジェクトを作ると既にデフォルトでも入っており、初めてASP.NETを作る時によく見かける次のような画面イメージです。

(図111)デフォルトのbootstrap

しかし、bootstrapを使うと非常に手軽にこの画面のテーマ(見た目のデザイン)をチェンジする事ができます。そして「Bootswatch」では下図のように様々なスタイルの選択肢があるので、好みのテーマに簡単に変更する事ができます。
 
(図112)様々なテーマの選択肢がある
 

目次にもどる

(1-2) bootstrapの入手方法~プロジェクトへの追加

bootstrapの入手元は様々あり、Google検索すると沢山出てきますが、今回は「https://bootswatch.com/」からダウンロードしてみます。

(図121)Bootswatchのサイト

(1-2-1) テーマ選択

メニューから「THEMES」を選択し、リストの中から好みのテーマを選択します。

(図122)好きなテーマを選択
 
下にスクロールすると、各テーマの実際のイメージを確認する事ができます。
(図123)
 

目次にもどる

(1-2-2) イメージの確認

テーマを選択すると、そのテーマの各部品(ボタン、ナビゲーションバー)などのイメージが表示されるので、イメージと合っているか?を確認できます(以下はPulseテーマの例)。

(図124)
 

目次にもどる

(1-2-3) cssのダウンロード

テーマを決めたら実際のcssをダウンロードします。メニューから「Pulse」を選び(この名前はテーマの名前なので、選んだテーマによって違います)、そこから「bootstrap.css」を選択します。

(図125)
 

目次にもどる

(1-2-4) cssをASP.NETプロジェクトへ追加

cssを任意の場所に配置し、ASP.NETプロジェクトの「Content」フォルダ(cssを格納されるフォルダ)を「右クリック」⇒「追加」⇒「既存の項目」と選択して、先程のcssを追加します(もしContentフォルダが無い場合は、プロジェクトを「右クリック」⇒「追加」⇒「新しいフォルダー」で作成できます)。

(図126)
 
(図127)追加完了
 

目次にもどる

(1-2-5) Viewにcssを適用

Viewの中で<link>タグを記述して、スタイルシート(css)を適用します。

<link href=" ~/Content/bootstrap-pulse.css" rel="stylesheet" type="text/css">

F5等でアプリケーションを実行し、画面の見た目が変化したら成功です。

(図128)

 

BeforeとAfterを並べてみると次のような感じです。
(図129)
 

目次にもどる

(1-3) おまけ

以下、Bootstrapが効いているか?を簡単にチェックするために、Viewのサンプルコードを添付します。サクッと見た目の変化を確認したい時などにご利用ください。

(サンプルView)

@model BookLibrarySystem.Models.TextBook

<h2>@Model.Name</h2>

@{
    ViewBag.Title = "Home Page";
}

<div class="jumbotron">
    <h1>ASP.NET</h1>
    <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
    <p><a href="https://asp.net" class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
</div>

<div class="row">
    <div class="col-md-4">
        <h2>Getting started</h2>
        <p>
            ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
            enables a clean separation of concerns and gives you full control over markup
            for enjoyable, agile development.
        </p>
        <p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301865">Learn more &raquo;</a></p>
    </div>
    <div class="col-md-4">
        <h2>Get more libraries</h2>
        <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
        <p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p>
    </div>
    <div class="col-md-4">
        <h2>Web Hosting</h2>
        <p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>
        <p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301867">Learn more &raquo;</a></p>
    </div>
</div>

 

目次にもどる

Adsense審査用広告コード


Adsense審査用広告コード


-C#

執筆者:


comment

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

関連記事

ASP.NET MVCのルーティングの基本

<目次> (1) ASP.NET MVCのルーティングの基本  (1-1) 構文  (1-2) サンプルプログラム   ・RouteConfig.cs   ・Controller   ・View  ( …

Xamarin.FormsでHelloworldする手順+Buttonコントロール追加のサンプルコード紹介

<目次> (1) Xamarin.FormsでHelloworldする手順  (1-1) Xamarin.Formsプロジェクト構成の概要  (1-2) MainPage.xamlの修正  (1-3) …

ASP.NET MVCでformをSubmitする方法

<目次> (1) ASP.NET MVCでformをSubmitする方法  (1-1) 概要  (1-2) HTMLを使ってformをsubmitする方法  (1-3) サンプルプログラム  (1-4 …

ASP.NETのViewBagとは?構文やサンプルプログラムもご紹介

  <目次> (1) ASP.NETのViewBagとは?構文やサンプルプログラムもご紹介  (1-1) 概要  (1-2) 構文  (1-3) サンプルプログラム (1) ASP.NETの …

ASP.NET MVCのRouteConfigを追加する方法を2つご紹介

  <目次> (1) ASP.NET MVCのRouteConfigを追加する方法を2つご紹介  (1-1) やりたい事の整理  (1-2) 方法1:通常のルーティング  (1-3) 方法2 …

  • English (United States)
  • 日本語
Top