ミライ創造学舎

事業の最新情報の更新及び開発手法・おすすめのテクニックの紹介をさせて頂きます。

Bootstrapを活用しよう! 【Ⅰ. 環境の準備】

こんにちわ、暑くて...

作業場も近所のファミレスかカフェにしがちな

本ブログ管理人の流離の言霊です(⌒∇⌒)

 

今年の夏は一際、暑いですね....苦💦

夜中の部屋の中ですら30℃はやばい... 

 

そんな過酷な季節ではありますが、本日の本題に入っていきたいと思います。



 

 

 

Bootstrapの活用法 : 環境の準備

 

 

Bootstrap [ホームページ]にてダウンロード

https://getbootstrap.com/

f:id:Varth-Connect:20190822204839p:plain

Bootstrap [ダウンロードページ]
 

 

 

ダウンロードしたファイルを理解していく。

【説明】

bootstrap-[バージョン]-dist というようなファイル名で指定の場所にダウンロードされるためその中に入っているcssフォルダとjsフォルダ内に入っているものだけを実際には使用します。



✫ もっと細かくしますと、以下を使用します。

cssフォルダ内のbootstrap.min.css

jsファルダ内のbootstrap.min.js
 


実際に動かすためにはjQueryもHTMLファイル上で受け取れるようにしないといけないですが、後ほど説明しますのでご安心ください。

 

 

 

ダウンロードしたファイルを分割する。

  → 使いやすくするためです。

 
bootstrap-[バージョン]-dist というファイルに入っているcssフォルダとjsフォルダを取り出して、HTMLファイルがある場所に移動させる。
今回は、Bootstrap_sampleという新規のフォルダを作成し、そこにcssフォルダと jsフォルダ、HTMLファイルを配置しております。


f:id:Varth-Connect:20190822212939p:plain

     
新規のフォルダを作成し、
ダウンロードしたファイルとHTMLファイルを配置する。


 

これで配置上の準備は完了です(`・ω・´)b

 

 

 

 

早速、HTMLファイルに取り込む。

   ※ HTMLファイルの準備は、各自でお願い致します。


もし、
準備が間に合わなかった場合は以下のコードを使用してみてください。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <!-- 文字化けをする場合はShift-JISからUTF-8に変更してください。 -->
    <meta charset="Shift_JIS">
    <!-- ページタイトル -->
    <title>Bootstrap Sample</title>
  </head>
  <body> 
     内容を記述
  </body>
</html>


■ 準備が完了したら、以下のコードをheadタグ内に記述してください。


   jQueryに関しましても
   同じように記述して頂ければ問題御座いません!!(⌒∇⌒)

<!-- BootstrapのCSS読み込み -->
<link href="css/bootstrap.min.css" rel="stylesheet">
    
<!-- jQuery読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    
<!-- BootstrapのJS読み込み -->
<script src="js/bootstrap.min.js"></script> 

 

 

 

入力が完了したら動きを確認してみる。


■ 試しに通知バッチを画面に表示させてみる。

以下のようにbodyタグ内にバッチ用のコードを入力する。

classに指定されているCSSの詳細は、次回の【バッチの作成】にて説明致します。

今回は、Bootstrapが適用されるかの動作確認をしてみましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <!-- 文字化けをする場合はShift-JISからUTF-8に変更してください。 -->
    <meta charset="Shift_JIS">
    <!-- ページタイトル -->
    <title>Bootstrap Sample</title>
    
    <!-- BootstrapのCSS読み込み -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    
    <!-- jQuery読み込み -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    
    <!-- BootstrapのJS読み込み -->
    <script src="js/bootstrap.min.js"></script> 
  </head>
  <body>
    <main>
      <div>
        <br>
        <!-- 通知バッチ -->
        <span>[通知バッチ]</span><br>
        <button type="button" class="btn badge-danger">
		  通知が届いています。 <span class="badge badge-light">3</span>
	</button>
      </div>
   </main>
  </body>
</html>


                ↓


f:id:Varth-Connect:20190822215343p:plain
[ 通知バッチ : 実行結果 ]


               ↑↑

上記のような通知バッチが画面に表示されれば
成功です!!!


 

 

 

 

 

実行時に通知バッチが正常に表示されなかった場合は、Bootstrapが適用されていな いため、ファイルの場所やHTMLファイルのheadタグ内のコー ドの誤りがないかを確認してみてください。OSはWindows/Mac同様に実行確認済みのためどちらでも上記の方法で実行可能です。



その他、不明点や環境準備がうまくいかない場合は、コメント頂ければ対応させて頂きますので、遠慮なくご相談ください。

 

 

 

 

 

 次回は、

 今回動作の確認で使用した

  「通知バッチも含めたバッチの作成方法」

 になります。

 

 今後とも皆様方のホームページ制作及び

    Webシステム・アプリ開発に貢献出来るような

    情報を公開していきますので楽しみに待っていてください(o^―^o)

 

 

===========================================

↓↓ 以下のSNSでも情報の掲載などしております。

===========================================