MENU

【スキルハックス】Bootstrapを使って便利さを体験する

今回は実際にBootstrapを使ってみて、どれぐらい便利なのかみていきましょう。

まずは画像をBootstrapのフォルダに入れるために、CSSフォルダから『なばなの里』の画像をDuplicate(複製)します。

Duplicateするとnabana.1.jpgというファイルが出来ます。

nabana.1.jpgをBootstrapのフォルダに移動します。

ファイルの名前をnabana.jpgに変更します。

画像を表示させます。

プレビューをすると画像が表示されました。

次にBootstrapのサイトから3系を選択して、上記のCSSをクリックします。

CSSからimagesをクリックします。

画像を丸くするためには、class=”img-circle”を書く必要があります。

上記のようにclass=”img-circle”を書きます。

画像を丸くすることができました。

なぜ丸くなったのか?というとBootstrapを使うために入れた7行目の上記のリンクをコピーして説明します。

上記のような文字が表示されます。

img-circleで検索すると、囲った部分のborder-radiusを50%と書かれています。そのために画像が丸くなっています。

次にbootstrap-practice.cssのファイルを作ります。

先ほど作ったbootstrap-practice.cssを連動させます。

class=”img-circle”の後にmyclassと書きます

bootstrap-practice.cssで上記のように書きます。

Bootstrapで丸くした画像のサイズを小さくすることができました。このようにBootstrapとは別にCSSを作る事で、簡単により複雑なデザインをあてることができるようになります。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

目次
閉じる