Bootstrapにおける小さい画面(767px以下)でカテゴリーを上に表示する方法(pushとpullを使って) | About push and pull in Bootstrap

記事タイトル

北海道を自転車で旅を始めて4日目。果てしない一本道をひたすら進む。地平線に向かってひたすら進む。ゴールの見えない旅。自分に打ち勝つ旅。

孤独との闘い。自分を見つめなおす旅。自分のちっぽけさをこの広い台地で感じる。クマが出てきて襲われたらどうしよう。

Copyright ©自転車旅行



HTML <div class="container">

<div class="row">
<div class="col-sm-12">
<div class="header">
<h1><a href="#"><img src="bicycle.png" alt="" class="logo">BICYCLE</a></h1>
</div>
</div><!--col-->
</div><!--row-->

<!-- 2行目 -->
<div class="row">
<div class="col-sm-12">
<div class="menu">
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Bootstrap</a></li>
<li><a href="#">Javascript</a></li>
</ul>
</div>
</div><!--col-->
</div><!--row-->

<!-- 3行目 -->
<div class="row">

<div class="col-sm-4 col-sm-push-8">
<div class="menu">
   <h3>カテゴリー</h3>
<ul>
<li><a href="#">旅の思い出</a></li>
<li><a href="#">おすすめのサイクリングロード</a></li>
<li><a href="#">ハプニング</a></li>
<li><a href="#">気を付けること</a></li>
</ul>
</div>
</div><!--col-->

<div class="col-sm-8 col-sm-pull-4">
<div class="entry">
<img src="photo.jpg" alt="" >
<h3>記事タイトル</h3>
<div class="added">
<p>
<a href="#" >自転車の旅</a><br>
<a href="#" >おすすめのサイクリングロードはこちら</a>
</p>
</div>
<p>北海道を~。</p>
<p>孤独との~。</p>
</div>
</div><!--col-->
</div> <!--row-->

<!-- 4行目 -->
<div class="row">
<div class="col-sm-12">
<p>Copyright ©自転車旅行</p>
</div><!--col-->
</div><!--row-->

</div><!--container-->


記事タイトル~ 、カテゴリー~の順番で記述していると、極小画面(767px以下)では記事の下にカテゴリーが表示されます。| If you write in the order of article title ~, category ~, the category will be displayed below the article on the very small screen (767px or less).


そこで、カテゴリー~、記事タイトルの順に入れ替えます。これでカテゴリーは極小画面で上に表示されますが、push、pullを設定しないと画面を大きくしたときにカテゴリーは左側に表示されてしまいます。| Therefore, replace the categories in the order of the article titles. With this, the category will be displayed on the top on the tiny screen, but if you do not set push and pull, the category will be displayed on the left side when the screen is enlarged.


そこで大きい画面(768px以上)で表示したときのカテゴリーの配置を右(push)に8幅分、記事の配置を左(pull)に4幅分だけずらすように指定します。すると本来の位置の右側に表示されます。| Therefore, specify that the category layout when displayed on a large screen (768px or more) should be shifted to the right (push) by 8 widths, and the article layout should be shifted to the left (pull) by 4 widths. Then it will be displayed on the right side of the original position.


*尚、ここではBootstapバージョン3.1.1を使用しています。 こちらからダウンロードできます。新しいバージョンをご使用だと機能しない部分も出てきます。| If you use a new version, some parts may not work.



この本を参考に学び、完成させることができました。しかし、ここではプログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません(ToT)
その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^)、実際、初心者の私でもわかりやすかったです。身に付け消えないスキルが3,000円程ならコスパよく、買っておいてよかったと満足してます。


やっぱり詳しい人から深く学びたい人はこちらをどうぞ。| If you want to learn more from those who are familiar with it, please click here.

キャリアアップに必要なスキルを取得しよう。| Get the skills you need to advance your career.

オンラインで受講ができるスクールですので、全国どこからでも。 | Since it is a school where you can take classes online, you can take it from anywhere in the country.