D4mations.com

【Bootstrap入門】Bootstrapでレスポンシブなサイトを1時間で作る Bootstrap tutorial

[ad_1]
https://i.ytimg.com/vi/fou-ZR9LhGM/hqdefault.jpg



作ったサイト
https://shimotmk.com/BootStrap-YouTube-lp/

回答コード例:index.html
https://drive.google.com/open?id=1JB0J3Qg7sSVQ10aO8G-co415H-04-l6l

BootStrap公式サイト
https://getbootstrap.com/

この動画を元に書籍化しました！
よかったらご覧ください
https://amzn.to/2VowuY7

Kindle Unlimitedに入れば無料です
https://amzn.to/3eGY4rx

✅目次
00:00　イントロ
03:27　ナビゲーションバーを作る
06:48　スライダーを作る
11:12　3つの特徴を作る(column)
14:27　お客様の声を作る(Flex)
20:46　タブを作る(nav-tabs)
29:17　YouTubeの埋め込みを作る(embed)
30:54　モーダル(modal)
41:22　Bootstrapカード(card)
45:47　アコーディオン(accordion)
48:14　お問い合わせ(validation-form)
53:27　footerを作る

■使ったコンポーネント
Navbar
https://getbootstrap.com/docs/4.4/components/navbar/#nav

Carousel Slides
https://getbootstrap.com/docs/4.4/components/carousel/#with-captions

Row columns
https://getbootstrap.com/docs/4.4/layout/grid/#row-columns

Flex
https://getbootstrap.com/docs/4.4/utilities/flex/

nav tab
https://getbootstrap.com/docs/4.4/components/navs/#javascript-behavior

Embeds
https://getbootstrap.com/docs/4.4/utilities/embed/

modal
https://getbootstrap.com/docs/4.4/components/modal/#vertically-centered

Cards
https://getbootstrap.com/docs/4.4/components/card/

Accordion
https://getbootstrap.com/docs/4.4/components/collapse/#accordion-example

Bootstrapのおすすめ動画はこちら
・Bootstrap 4入門 #01：コンテナとスペーシング

・Responsive Bootstrap Website Start To Finish with Bootstrap 4, HTML5 & CSS3

・Build A Complete HTML & CSS Website with Bootstrap 4

チャンネル登録はこちら😌
https://www.youtube.com/channel/UChbGtmE4qQP_HrPqMCxgoxw?sub_confirmation=1

———————————————————————–
SNS
———————————————————————–

【Twitter】

【Portfolio】
https://shimotmk.com/Portfolio/

【お問い合わせフォーム】
https://forms.gle/PfiFd68r32R6kiv58

【BLOG】
https://shimotmk.com/

【BLOG】
http://nabla72.com/

■ お知らせ
Web制作や動画編集の営業マンを募集しています！
興味のある方はこちらの動画をご覧ください

■ 販売しているもの
ゼロからはじめる　はじめてのWordPress自作テーマ制作
https://amzn.to/2UEmXv4

Kindle Unlimitedなら無料で読めます
https://amzn.to/2wGjWlY

———————————————————————–
使用機材
———————————————————————–

■ 映像
MacBook Pro
https://amzn.to/2JjEgw5

■ 音声
SHUREマイク
https://amzn.to/2WLFKal

■編集ソフト
Adobe Creative Cloud
https://amzn.to/2wFXI3u

Original source

d4mer

,
, , , , ,

12 responses to “【Bootstrap入門】Bootstrapでレスポンシブなサイトを1時間で作る Bootstrap tutorial”

  4. 19:49あたりの <col-md-6 col-12 p-0 align-self-center h3 p-4>のコードですが、
    p-0の後にp-4を書き足してますが、前者は消してもいいですか？
    あとcol-12も消しても動作変わりませんでした。

  7. こんにちは
    スライドショーの画像の部分なのですが、自分でネットから拾ってきたものだと、サイズがバラバラになってしまうのですが
    その時は、直接CSSで調整すればよいのでしょうか？

  8. 今までで一番実践的で分かりやすいです。これからも事例を元に解説して頂ければ嬉しいです！自分でコードを書いてアップロードするのが夢でした。昨日ともきさんのおかげで夢が叶いました。ありがとうございます。

  9. 動画拝見しました。すごくわかりやすくて参考になりました。ウェブの模写をしているのですが、bootstrapの使い方が良くわからなかったのでHTMLとCSSで進めていたのですが上手くいきませんでした。これはbootstrapを勉強せねばと思っていたところにこちらの動画に出会いました。その晩マナブさんのTwitterにしもむらさんのお名前が出てきましたので、秒でチャンネル登録させていただいましたｗありがとうございました。

  11. こんにちは😃
    私もbootstrapよく使っていますが、しもむらさんの動画の書き方めっちゃ参考にさせていただいています。
    わかりやすい！

Leave a Reply