Bootstrap の操作パート 2

まだまだ先へ!

カスタム見出しを作成する

タイトルとリラックスした猫の画像を同じ行に配置して、猫写真アプリの簡単な見出しを作成しましょう.

(チャレンジへのリンク) => https://www.freecodecamp.org/learn/front-end-development-libraries/bootstrap/create-a-custom-heading

最初の画像と h2 要素を単一の <div class="row"> 要素内にネストします.次に、h2 要素を <div class="col-xs-8"> 内にネストし、イメージを <div class="col-xs-4"> 内にネストして、それらが同じ行になるようにします.

回答:

  <div class="row">
    <div class="col-xs-8">
  <h2 class="text-primary text-center">CatPhotoApp</h2>
  </div>
<div class="col-xs-4">
  <a href="#"><img class="img-responsive thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
  </div>
  </div>

ボタンに Font Awesome アイコンを追加する

Font Awesome は便利なアイコンのライブラリです.これらのアイコンには、Web フォントまたはベクター グラフィックを使用できます.それらはフォントと同じように扱われます.

HTML の先頭に次のコードを追加することで、任意のアプリに含めることができます.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

Front Awesome クラスを i 要素に追加して、アイコンに変換することもできます.次に例を示します.

<i class="fas fa-thumbs-up"></i>

すべてのボタンに Font Awesome アイコンを追加する

Font Awesome を使用して、info-circle アイコンを情報ボタンに追加し、trash アイコンを削除ボタンに追加します.

コード

<div class="row">
    <div class="col-xs-4">
      <button class="btn btn-block btn-primary"><i class="fas fa-thumbs-up"></i>Like</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-info">Info</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-danger">Delete</button>
    </div>
  </div>

回答:

<div class="row">
    <div class="col-xs-4">
      <button class="btn btn-block btn-primary"><i class="fas fa-thumbs-up"></i> Like</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-info"><i class="fas fa-info-circle"></i>Info</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-danger"><i class="fas fa-trash"></i>Delete</button>
    </div>
  </div>

レスポンシブスタイルのラジオボタン

Bootstrap の `col-xs- classes on form` 要素も使用できます.このようにして、ラジオ ボタンがページ全体に均等に配置されます.

<div class="row"> 要素内に両方のラジオ ボタンを入れ子にしましょう.次に、それぞれを <div class="col-xs-6"> 要素内にネストします.

コード:

<label><input type="radio" name="indoor-outdoor"> Indoor</label>
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>

回答:

<div class="row">
    <div class="col-xs-6">
    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
    </div>
    <div class="col-xs-6">
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
     </div>
    </div>

レスポンシブスタイルのチェックボックス

Bootstrap の col-xs-* クラスはすべての form 要素に適合します.チェックボックスでも使用できます.

3 つのチェックボックスすべてを <div class="row"> 要素に入れ子にしましょう.次に、それぞれを <div class="col-xs-4"> 要素に入れ子にします.

<div class="row">
  <div class="col-xs-4">
    <label><input type="checkbox" name="personality"> Loving</label>
  </div>
  <div class="col-xs-4">
    <label><input type="checkbox" name="personality"> Lazy</label>
  </div>
  <div class="col-xs-4">
    <label><input type="checkbox" name="personality"> Crazy</label>
    </div>
  </div>

テキスト入力をフォーム コントロールとしてスタイル設定する

submit fa-paper-plane 要素内に <i class="fa fa-paper-plane"></i> を追加することで、button Font Awesome アイコンを追加できます.

ここで、FreeCodeCamp は、フォームのテキスト入力フィールドに form-control のクラスを与えることを望んでいます.また、送信ボタンにクラス btn btn-primary を指定します.最後に、このボタンに fa-paper-plane

の Font Awesome アイコンを指定します.

回答:

<input class="form-control" type="text" placeholder="cat photo URL" required>
    <button class="btn btn-primary" type="submit"><i class="fa fa-paper-plane"></i>Submit</button>

Bootstrap を使用してレスポンシブにフォーム要素を並べる

ここでは、フォーム input と提出物 button を同じ行に揃えてほしいだけです.以前ラジオ buttons とチェックボックス buttons を使用したのと同じように.

フォームのテキスト input を、クラス col-xs-7 の div 内にネストします.クラス col-xs-5 を使用して、フォームの送信ボタンを div にネストします.

回答:

 <div class="row">
      <div class="col-xs-7">
    <input type="text" class="form-control" placeholder="cat photo URL" required>
    </div>
    <div class="col-xs-5">
    <button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Submit</button>
    </div>
    </div>