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

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

関連記事

Xamarin.Formsで画面遷移を実装する手順について+ソースコードも紹介

<目次> (1) Xamarin.Formsで画面遷移を実装する手順について  (1-1) 遷移先ページの追加  (1-2) 画面遷移ロジック追加   (1-2-1) ボタンコントロールの追加   ( …

ASP.NETのActionResultの戻り値の種類について

  <目次> (1) ASP.NETのActionResultの戻り値の種類について  (1-1) はじめに  (1-2) ASP.NETのActionResultの戻り値の種類  (1-3 …

C#のエラー「CS1069~このアセンブリへの参照を追加する事を検討してください」の対処方法+実際のソース例も掲載

<目次> (1) C#のエラー「CS1069~このアセンブリへの参照を追加する事を検討してください」の対処方法  (1-1) 発生状況・エラーメッセージ  (1-2) 原因  (1-3) 対処法 (1 …

C#で型をStringからintに変更する方法~TryParseメソッドによる型変換~

<目次> (1) C#で型をStringからintに変更する方法  (1-1) 構文  (1-2) サンプルプログラム  (1-3) プログラム補足「'{0}’や'{1}’」に …

C#のデリゲートが分からない・・を解決!初心者向けになるべく分かり易く説明してみた

<目次> (1) C#のデリゲートが分からない・・を解決!初心者向けになるべく分かり易く説明してみた  (1-1) デリゲートとは?「関数へのポインタ」だけでは説明しきれない・・  (1-2) デリゲ …

  • English (United States)
  • 日本語
Top