bootstrap

ブートストラップのpushとpullの機能と使い方の紹介

投稿日:

Pocket

うも、チャーさんです。

 

あなたはブートストラップの、

pullとpushってなに?

と思っていませんか?

 

この記事では、ブートストラップの、

pushとpullを具体例と一緒に説明します。

 

 

またレスポンシブでも役にたつ、

pushとpullの使い方も紹介してます。

 

なので、あなたがこの記事を読めば、

ブートストラップのpushとpullが理解でき、

自分で使えるようになります。

 

そのためあなたが、ブートストラップの、

pushとpullに興味があり、使い方も知りたい場合、

ぜひこのまま下にスクロールして読んでください。

 

 

*この記事で紹介するブートストラップの、

バージョンは、バージョン3です。

バージョン4を使うと、pushとpull使えないので注意です。

 

スポンサードサーチ

ブートストラップのpushとpullとはなに?

 

で、まず結論ですが、

ブートストラップのpushとpullですが、

これは要素の表示位置を入れ替えるクラスです。

 

具体的には、

 

pushのクラス名をつけた要素が、

画面上で右に配置され、

pullのクラス名をつけた要素は左に配置されます。

 

 

とはいえ文字の説明だけだとイメージしづらいので、

早速具体例をみてみましょう。

 

まずブートストラップで、

カラムを作って普通にかくと、

先に書いたタグが左に配置されますよね。

 

(以下の画像のように)

 

 

ですが、ここにブートストラップの、

pushとpullというクラスをつけると、

以下の画像のように表示が左右逆になります。

 

 

というわけで、

ブートストラップのpushとpullと言うのは、

見た目上の左右を逆にする機能というわけです。

 

また、左右の配置についてですが、

pushをつけた要素が画面上で右にいき、

pullをつけた要素が画面上で左に配置されます。

 

なので、pushが右、pullが左と、

覚えればいいですね。

 

スポンサードサーチ

ブートストラップのpushとpullの使い道は?

 

またこれなんの役にたつの?と、

思うかもしれませんが、

レスポンシブで役に立ちます。

 

例えば、デザイン上、

文章を左、画像を右に置きたいとします。

 

そしてスマホサイズになった時には、

画像が上、文章が下になるように配置したいとします。

 

 

するとコードを普通こう書くと思います。

 

 

しかし、この書き方をすると、

スマホサイズにした時に、

 

 

画像が下になってしまいます。

 

これでは意図していたようになりません。

 

で、そんな時に、

pushとpullの出番です。

 

 

でpushとpullをつけると、

スマホサイズでは、ちゃんと上が画像、

下が文章になってくれて、

 

 

かつ、パソコンサイズでは、

 

 

画像が右で、文章が左になってくれました。

 

このように、ブートストラップのpushとpullを、

使うことで、パソコンサイズでは画像が右、

スマホサイズでは画像が上になる。

 

というようなデザインが可能になるわけです。

 

 

なので、ブートストラップのpushとpullを、

使えるとwebページの制作の幅が、

広がるので、参考にしてみてください。

 

スポンサードサーチ

ブートストラップのpushとpullを使う手順

 

ではどうやってブートストラップのpushと、

pullが使えるか手順を説明します。

 

まずは、ブートストラップの環境設定をしましょう。

 

 

次に、クラスをつけましょう。

右に配置したいものはpush、

左に配置したいものにはpullのクラス名をつけましょう。

 

<div class=”container”>

 <div class=”row”>

  <div class=”col-sm-6 col-sm-push-6″>

  </div>  <!–この要素が右に配置されます–>

  <div class=”col-sm-6 col-sm-pull-6″>

  </div> <!–この要素が左に配置されます–>

 </div>

</div>

 

すると、要素が左右逆になって配置されますよ。

 

スポンサードサーチ

注意

 

またブートストラップのpushとpullですが、

新しくなったブートストラップ4では、

名前が変わりました。

 

ブートストラップのバージョン4では、

pushとpullの代わりに、order-1 order-2 、

といったようなクラス名で要素の配置順を動かします。

 

なのでpushやpullを使う場合、

バージョンに注意しましょう。

バージョン変わるとクラス書いても動かないので。

 

スポンサードサーチ

まとめ

 

それではまとめに入ります。

ブートストラップのpushとpullとは、

要素の表示位置を変える機能のことです。

 

pushとつけた要素は画面上で右に配置され、

pullとつけた要素は画面上で左に配置されるので、

そのように覚えておきましょう。

 

 

それでは早速ブートストラップの環境を準備し、

pushやpullを試しましょう。

その際はブートストラップのバージョンに気をつけましょう。

 

バージョン3ではpushとpull使えますよ。

 

 

それでは読んでもらってありがとうございました。

 

 

チャーさん

 

 

-bootstrap


スポンサードサーチ

関連記事

no image

bootstrapのhiddenとは?使い方を紹介

どうも、チャーさんです。   あなたはbootstrapのhiddenとは、 何だろう?と思っていませんか?   この記事ではbootstrapのhiddenとは、 何かを説明して …

no image

ブートストラップを使う利点をわかりやすく説明します。習得方法も紹介。

  どうもチャーさんです。   あなたはブートストラップを使う利点は、 何だろうと思っていませんか?   css使えばデザインなんてできる、 何でわざわざブートストラップ …

no image

ブートストラップの使い方を初心者向けに紹介

どうも、チャーさんです。   あなたはブートストラップを使ってみたい、 または使わないといけないけど、 使い方がわからない。   導入の仕方も、何したらいいかもわからない。 そんな …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。