Inflearn brand logo image
Inflearn brand logo image

N

Inflearn brand logo image
Programming

/

Front-end

[Web開発フルスタックコース]ブートストラップ基礎

この講義は、フルスタックWeb開発者を育成するための[Web開発フルスタックコース]講義シリーズのブートストラップの基礎についての講義です。ブートストラップの基礎を学び、高品質のレスポンシブウェブをすばやく構築する方法を学びます。

（5.0）受講レビュー 33件

受講生 1,634名

  • realprogrammers
부트스트랩
bootstrap
Bootstrap
Thumbnail

学習した受講者のレビュー

こんなことが学べます

  • ブートストラップデザイン

  • レスポンシブウェブ

  • グリッドシステム

ブートストラップで素敵なウェブをたっぷり！
レスポンシブウェブサイトをすばやく構築する✨

✅このレッスンは、[フルスタックWeb開発者ロードマップ]シリーズのレッスンです。

  • 本講義は、フルスタックウェブ開発者養成のための「ウェブ開発フルスタックコース」講義シリーズの中で、ブートストラップの基礎を扱う講義です。
  • Web開発フルスタックコースには、HTML＆CSS→バニラJavaScript→ブートストラップ→Vue.js→データベース→Node.js→ポートフォリオまで、フルスタックWeb開発のための全コースが含まれています。
  • Web開発フルスタックコースをすべて受講すると、Web開発の基礎だけでなく、実践にすぐに適用できるスキルを身につけることができます。
  • 本講義を受講する前 [ウェブ開発フルスタックコース] HTML&CSS → [ウェブ開発フルスタックコース] バニラJavaScript講義を順次受講することをおすすめします。

What is Bootstrap?

Bootstrap logo.svg - Wikimedia Commons

レスポンシブ Web を 1 つのコードにすばやく作成できるようにする HTML/CSS/JS フレームワークです。

ブートストラップは、レスポンシブWebをすばやく作成するのに役立つHTML、CSS、JSフレームワークです。 1つのコードで、スマートフォン、タブレット、デスクトップなど、さまざまなサイズのデバイスに最適化されたWebを作成し、事前作成されたコンポーネントに基づいてWebを簡単に実装できます。

ブートストラップ、なぜ学ぶべきですか？


迅速な開発、一貫性、互換性...効率的にWebページを作成したい場合！

迅速な開発

ブートストラップは、レスポンシブとモバイルFirstのウェブサイトをすばやく構築するのに役立つフロントエンドフレームワークです。組み込みのCSSスタイル、コンポーネント、およびJavaScriptプラグインを使用して、ウェブサイトを開発するための時間と労力を節約できます。

一貫性と互換性

ブートストラップはレスポンシブグリッドシステムを提供し、さまざまな画面サイズに最適化されたウェブサイトを簡単に作成できます。これにより、モバイル、タブレット、デスクトップでウェブサイトがユーザーに正しく配信されるようになります。

コミュニティサポート

ブートストラップには開発者コミュニティとよく整理されたドキュメントがあり、助けが必要な場合は簡単に見つけることができます。また、さまざまなプラグイン、テーマ、およびサンプルが提供され、ウェブサイトをより豊かにすることができます。

メンテナンス

ブートストラップは一貫したスタイルガイドを提供するため、コードを効果的に維持できます。

この講義の特徴！

簡単かつ詳細に
実務応用中心
サンプルコードまで！
  • ブートストラップの基本的な文法と使い方を次々とお知らせします。
  • Web開発プロジェクトに必要なブートストラップを適用してみます。
  • すべてのサンプルコードはFitHubを介して提供されています。

何を学びますか？

VSCode
BootStrap
  • 開発 IDE ツールとしては、Visual Studio Codeを使用します。ビジュアルスタジオコードを使った開発方法と有用な拡張プログラムを知ります。
  • ブートストラップ Layout、Contents、Forms、Components、Helpers、Utilities、Extendについて学びます。
  • ブートストラップをCRUD画面に適用してみます。
  • ブートストラップのテーマ市場を理解し、テーマを使用してWebをすばやく作成する方法を教えてください。

ブートストラップで作成画面を作成する

ブートストラップで編集画面を作成する

選手の知識を確認してください！

  • HTMLに関する基本的な知識が必要です。
  • CSSを知る必要があります。
  • JavaScriptを知る必要があります。
  • 本講義を受講する前に[ウェブ開発フルスタックコース] HTML&CSS→[ウェブ開発フルスタックコース]バニラJavaScript講義を受講することをおすすめします。

この講義をした人は
誰ですか？

開発者の品格

ソフトウェア技術を通じて世界に良い影響力を与えたい24年次ソフトウェア開発者。
知識を分かち合うのが好きで、常に新しいスキルを身につけることを楽しんでいます。

国内外60社を超えるグローバル企業ERPシステムを構築するコンサルタントおよび開発者として活動し、直接開発したソフトウェアを国内はもちろん海外有数の企業に販売した経験も持っています。 ITスタートアップ代表取締役でもあります。

開発者だけでなく、UXコンサルタントとして、時にはビジネスコンサルタントとして働きながら、アプリケーションやサービス開発時の企画から開発まで、全過程について数多くの経験を積んできました。今は20年以上の実務経験をもとに、後輩たちに本当に必要な技術、本当にきちんとした知識を伝える使命感を持って知識を分かち合うことをしています。

もっと学びましょうか？

【ウェブ開発フルスタックコース】シリーズ集めてみる

こんな方に
おすすめです

学習対象は
誰でしょう？

  • ブートストラップを使用してレスポンシブWebを作成したい人

  • デザインシステムを体験したい人

前提知識、
必要でしょうか？

  • HTML

  • CSS

  • JavaScript

こんにちは
です。

10,938

受講生

248

受講レビュー

152

回答

4.9

講座評価

8

講座

소프트웨어 기술을 통해 세상에 선한 영향력을 주고 싶은 24년차 소프트웨어 개발자.
지식을 나누는 것을 좋아하고 항상 새로운 기술을 익히는 것을 즐겨요.

국내외 60개가 넘는 글로벌 기업 ERP 시스템을 구축하는 컨설턴트 및 개발자로 활동하였고, 직접 개발한 소프트웨어를 국내는 물론 해외 유수의 기업에 판매를 한 경험 또한 가지고 있어요. IT스타트업 대표이사 이기도 해요.

개발자 뿐만 아니라, UX 컨설턴트로, 때로는 비즈니스 컨설턴트로 일하면서 애플리케이션과 서비스 개발 시 기획에서 개발까지 전과정에 대한 수많은 경험을 쌓았고, 이제는 20년이 넘는 실무 경험을 바탕으로 후배들에게 정말 필요한 기술, 정말 제대로 된 지식을 전달하는 사명감을 갖고 지식 나눔에 일을 하고 있어요.

 

  • (현)주식회사 더그레잇 대표이사
  • (현)주식회사 썬슈어 CTO
  • (현)주식회사 리턴밸류 CTO
  • (현)팬임팩트코리아 유한회사 기술전문위원

 

이메일 - seungwon.go@gmail.com

カリキュラム

全体

13件 ∙ (4時間 52分)

講座掲載日: 
最終更新日: 

受講レビュー

全体

33件

5.0

33件の受講レビュー

  • parrier1777님의 프로필 이미지
    parrier1777

    受講レビュー 3

    ∙

    平均評価 5.0

    5

    62% 受講後に作成

    Tôi rất thích nó. Thật tuyệt vời để có cái nhìn tổng quan nhanh chóng về các khái niệm.

    • indie2k7300님의 프로필 이미지
      indie2k7300

      受講レビュー 3

      ∙

      平均評価 5.0

      5

      100% 受講後に作成

      Nó thực sự hữu ích. Cảm ơn

      • icnit님의 프로필 이미지
        icnit

        受講レビュー 3

        ∙

        平均評価 4.7

        5

        100% 受講後に作成

        Mặc dù đây là một bài giảng miễn phí nhưng nó rất giàu thông tin, tôi không biết phải làm gì và áp dụng nó như thế nào khi xem chủ đề bootstrap, nhưng tôi biết mình phải làm gì.

        • shinechan4661님의 프로필 이미지
          shinechan4661

          受講レビュー 2

          ∙

          平均評価 5.0

          5

          100% 受講後に作成

          Lời giải thích rất đơn giản nên rất dễ hiểu ngay lập tức!

          • heopoint0077님의 프로필 이미지
            heopoint0077

            受講レビュー 5

            ∙

            平均評価 5.0

            5

            62% 受講後に作成

            Giải thích tốt

            無料

            realprogrammersの他の講座

            知識共有者の他の講座を見てみましょう！

            [Khóa học toàn diện về phát triển web] Từ những điều cơ bản về JavaScript thuần túy đến đào tạo thực tế강의 썸네일

            [Khóa học toàn diện về phát triển web] Từ những điều cơ bản về JavaScript thuần túy đến đào tạo thực tế

            realprogrammers

            Bài giảng này nói về JavaScript trong chuỗi bài giảng [Khóa học toàn tập về phát triển web] để đào tạo các nhà phát triển web full stack. Bài giảng này dựa trên nội dung cuốn sách của người chia sẻ kiến ​​thức, <Vanilla JavaScript>.

            초급

            초급

            JavaScript, vanilla-javascript

            [Khóa học toàn diện về phát triển web] Từ những điều cơ bản về JavaScript thuần túy đến đào tạo thực tế강의 썸네일

            [Khóa học toàn diện về phát triển web] Từ những điều cơ bản về JavaScript thuần túy đến đào tạo thực tế

            realprogrammers

            [Khóa học toàn tập về phát triển web] Khái niệm cơ bản về HTML&CSS강의 썸네일

            [Khóa học toàn tập về phát triển web] Khái niệm cơ bản về HTML&CSS

            realprogrammers

            Bài giảng này về HTML&CSS trong chuỗi bài giảng [Khóa học toàn tập về phát triển web] để đào tạo các nhà phát triển web toàn diện. Thông qua bài giảng này, bạn sẽ hiểu HTML, khuôn khổ phát triển web và CSS, giúp trang web trở nên đẹp mắt.

            입문

            입문

            HTML/CSS

            [Khóa học toàn tập về phát triển web] Khái niệm cơ bản về HTML&CSS강의 썸네일

            [Khóa học toàn tập về phát triển web] Khái niệm cơ bản về HTML&CSS

            realprogrammers

            [Khóa học toàn tập về phát triển web] Portfolio - Bán sản phẩm Phát triển ứng dụng web mini강의 썸네일

            [Khóa học toàn tập về phát triển web] Portfolio - Bán sản phẩm Phát triển ứng dụng web mini

            realprogrammers

            Bài giảng này nói về phát triển dự án danh mục đầu tư, phần cuối cùng của loạt bài giảng [Khóa học phát triển web toàn tập] để đào tạo các nhà phát triển web full-stack. Bằng cách kết hợp mọi thứ bạn đã học trong [Khóa học toàn diện về phát triển web], bạn sẽ có thể hiểu những gì mình đã học và áp dụng trực tiếp các chức năng cơ bản trong khi phát triển một ứng dụng web thực tế.

            초급

            초급

            Portfolio, Web Application

            [Khóa học toàn tập về phát triển web] Portfolio - Bán sản phẩm Phát triển ứng dụng web mini강의 썸네일

            [Khóa học toàn tập về phát triển web] Portfolio - Bán sản phẩm Phát triển ứng dụng web mini

            realprogrammers

            [Khóa học phát triển web Full Stack] Một tuần trước khi triển khai dự án Node.js - từ cơ bản đến thực hành강의 썸네일

            [Khóa học phát triển web Full Stack] Một tuần trước khi triển khai dự án Node.js - từ cơ bản đến thực hành

            realprogrammers

            Bài giảng này nói về phần phụ trợ của chuỗi bài giảng [Khóa học phát triển web toàn ngăn xếp] để đào tạo các nhà phát triển web full stack. Bài giảng này dựa trên nội dung sách của giảng viên <Một tuần trước khi bắt đầu dự án Node.js>.

            초급

            초급

            Node.js, MySQL, Express

            [Khóa học phát triển web Full Stack] Một tuần trước khi triển khai dự án Node.js - từ cơ bản đến thực hành강의 썸네일

            [Khóa học phát triển web Full Stack] Một tuần trước khi triển khai dự án Node.js - từ cơ bản đến thực hành

            realprogrammers

            [Khóa học phát triển web toàn tập] Kiến thức cơ bản về cơ sở dữ liệu được học qua phân tích của Netflix và Carrot Market강의 썸네일

            [Khóa học phát triển web toàn tập] Kiến thức cơ bản về cơ sở dữ liệu được học qua phân tích của Netflix và Carrot Market

            realprogrammers

            Bài giảng này trình bày những kiến ​​thức cơ bản về cơ sở dữ liệu trong chuỗi bài giảng [Khóa học toàn tập về phát triển web] để đào tạo các nhà phát triển web full stack. Bài giảng này là quá trình tìm hiểu thiết kế cơ sở dữ liệu trong khi phân tích Netflix và Carrot Market. Đây là bài giảng cơ bản để tìm hiểu các nguyên tắc thiết kế cơ sở dữ liệu cơ bản và SQL.

            입문

            입문

            DBMS/RDBMS, MySQL, SQL

            [Khóa học phát triển web toàn tập] Kiến thức cơ bản về cơ sở dữ liệu được học qua phân tích của Netflix và Carrot Market강의 썸네일

            [Khóa học phát triển web toàn tập] Kiến thức cơ bản về cơ sở dữ liệu được học qua phân tích của Netflix và Carrot Market

            realprogrammers

            [Khóa học phát triển web Full Stack] Một tuần trước khi triển khai dự án Vue.js - từ cơ bản đến thực hành강의 썸네일

            [Khóa học phát triển web Full Stack] Một tuần trước khi triển khai dự án Vue.js - từ cơ bản đến thực hành

            realprogrammers

            Bài giảng này nói về phần front-end của chuỗi bài giảng [Khóa học phát triển web toàn ngăn xếp] để đào tạo các nhà phát triển web full-stack. Bài giảng này dựa trên nội dung sách của giảng viên <Một tuần trước khi bắt đầu dự án Vue.js>.

            초급

            초급

            Vue.js

            [Khóa học phát triển web Full Stack] Một tuần trước khi triển khai dự án Vue.js - từ cơ bản đến thực hành강의 썸네일

            [Khóa học phát triển web Full Stack] Một tuần trước khi triển khai dự án Vue.js - từ cơ bản đến thực hành

            realprogrammers

            Bạn có muốn học JavaScript đúng cách không?강의 썸네일

            Bạn có muốn học JavaScript đúng cách không?

            realprogrammers

            Đây là khóa học cơ bản vững chắc nhất dành cho người mới bắt đầu muốn học JavaScript đúng cách. Khóa học này sẽ đóng vai trò là điểm khởi đầu để hiểu ngôn ngữ được gọi là JavaScript và bạn sẽ có thể chuẩn bị hoàn hảo những điều cơ bản để trở thành nhà phát triển front-end (Vue, React, Angular) và nhà phát triển máy chủ (Node.js).

            초급

            초급

            JavaScript, ES6, HTML/CSS

            Bạn có muốn học JavaScript đúng cách không?강의 썸네일

            Bạn có muốn học JavaScript đúng cách không?

            realprogrammers

            似ている講座

            同じ分野の他の講座を見てみましょう！

            [Bootstrap 5] Tạo website nhanh chóng và thông minh | Dành cho người mới bắt đầu sử dụng Bootsrap강의 썸네일

            [Bootstrap 5] Tạo website nhanh chóng và thông minh | Dành cho người mới bắt đầu sử dụng Bootsrap

            codethem

            Từ việc tạo trang web danh mục đầu tư được cá nhân hóa của riêng bạn đến phân phối với Bootstrap 5! Bộ công cụ thiết kế web được sử dụng nhiều nhất trên thế giới! Khởi động 5

            입문

            입문

            HTML/CSS, Bootstrap

            [Bootstrap 5] Tạo website nhanh chóng và thông minh | Dành cho người mới bắt đầu sử dụng Bootsrap강의 썸네일

            [Bootstrap 5] Tạo website nhanh chóng và thông minh | Dành cho người mới bắt đầu sử dụng Bootsrap

            codethem

            Hướng dẫn về khung Bootstrap 4 & 3 của Jaeseong Yoon강의 썸네일

            Hướng dẫn về khung Bootstrap 4 & 3 của Jaeseong Yoon

            softcampus

            Đối với Bootstrap 4, bạn có thể phát triển các ứng dụng web front-end thông qua thư viện khung web HTML5 và các lớp CSS.

            초급

            초급

            Bootstrap

            Hướng dẫn về khung Bootstrap 4 & 3 của Jaeseong Yoon강의 썸네일

            Hướng dẫn về khung Bootstrap 4 & 3 của Jaeseong Yoon

            softcampus

            Bootcamp thực hành: Thiết kế web responsive với Bootstrap강의 썸네일

            Bootcamp thực hành: Thiết kế web responsive với Bootstrap

            youngcodikimssam

            Trong buổi học thực hành của khóa học "Xây dựng trang web phản hồi bằng BOOTSTRAP [Ấn bản sửa đổi năm 2024]", chúng ta sẽ trực tiếp xây dựng một trang web thực tế có bố cục thay đổi theo thiết bị, sử dụng Bootstrap 4.

            초급

            초급

            Bootstrap, Responsive Web, Web Design

            Bootcamp thực hành: Thiết kế web responsive với Bootstrap강의 썸네일

            Bootcamp thực hành: Thiết kế web responsive với Bootstrap

            youngcodikimssam

            Tạo trang web phản hồi bằng BOOTSTRAP3강의 썸네일

            Tạo trang web phản hồi bằng BOOTSTRAP3

            usefulit

            Đây là bài giảng về cách sử dụng Bootstrap để tạo một trang web phản hồi có bố cục thay đổi tùy theo thiết bị.

            초급

            초급

            Bootstrap, Responsive Web

            Tạo trang web phản hồi bằng BOOTSTRAP3강의 썸네일

            Tạo trang web phản hồi bằng BOOTSTRAP3

            usefulit

            Sử dụng Bootstrap để tạo trang web phản hồi [Phần khái niệm cơ bản] Bootcamp강의 썸네일

            Sử dụng Bootstrap để tạo trang web phản hồi [Phần khái niệm cơ bản] Bootcamp

            youngcodikimssam

            Đây là bài giảng về cách sử dụng Bootstrap để tạo trang web phản hồi, tức là trang web có bố cục thay đổi tùy theo thiết bị. [Phiên bản sửa đổi]

            초급

            초급

            Bootstrap, Responsive Web, Web Design

            Sử dụng Bootstrap để tạo trang web phản hồi [Phần khái niệm cơ bản] Bootcamp강의 썸네일

            Sử dụng Bootstrap để tạo trang web phản hồi [Phần khái niệm cơ bản] Bootcamp

            youngcodikimssam

            Blog Vue-Django-Bootstrap nhanh chóng강의 썸네일

            Blog Vue-Django-Bootstrap nhanh chóng

            bestdjango

            인기 3 bộ ba (Vue + Django + Bootstrap) giúp bạn tạo ra một blog đẹp mắt và dễ dàng. Trang web có khả năng phản hồi và có thể xem trên cả điện thoại thông minh.

            초급

            초급

            Vue.js, Django, Bootstrap

            Blog Vue-Django-Bootstrap nhanh chóng강의 썸네일

            Blog Vue-Django-Bootstrap nhanh chóng

            bestdjango

            Tạo trang chủ cá nhân với Bootstrap강의 썸네일

            Tạo trang chủ cá nhân với Bootstrap

            ndb7965622

            Nếu tham gia khóa học này, bạn sẽ có thể phát triển trang web cá nhân hoặc công ty của riêng mình nhanh hơn và dễ dàng hơn bất kỳ ai khác trong một khoảng thời gian rất ngắn! Khóa học này giải thích từng bước cách tạo trang portfolio cá nhân của riêng bạn bằng cách sử dụng mẫu có tên Bootstrap, hiển thị từng bước của quy trình. Bootstrap là một framework phát triển trang web cho phép ngay cả những lập trình viên không giỏi thiết kế hoặc những người có ít kiến ​​​​thức về HTML cũng có thể dễ dàng phát triển trang chủ. Khi kết thúc khóa học này, bạn sẽ có trang chủ của riêng mình mà bất kỳ ai cũng có thể truy cập.

            초급

            초급

            Bootstrap

            Tạo trang chủ cá nhân với Bootstrap강의 썸네일

            Tạo trang chủ cá nhân với Bootstrap

            ndb7965622

            코알못 từ khởi chạy dịch vụ web: Trại huấn luyện lập trình Jeju 2021 (Django)강의 썸네일

            코알못 từ khởi chạy dịch vụ web: Trại huấn luyện lập trình Jeju 2021 (Django)

            jejucoding

            Khóa huấn luyện tại Jeju hiện đã có trực tuyến! Tạo dịch vụ của riêng bạn một cách nhanh chóng! :)

            입문

            입문

            JavaScript, Python, Django

            코알못 từ khởi chạy dịch vụ web: Trại huấn luyện lập trình Jeju 2021 (Django)강의 썸네일

            코알못 từ khởi chạy dịch vụ web: Trại huấn luyện lập trình Jeju 2021 (Django)

            jejucoding

            Lập trình web Python Django do một kỹ sư ở Thung lũng Silicon giảng dạy강의 썸네일

            Lập trình web Python Django do một kỹ sư ở Thung lũng Silicon giảng dạy

            altoformula

            Mọi thứ về những điều cơ bản và khía cạnh thực tế của phát triển web Python và Django chỉ có thể được học bởi các kỹ sư phần mềm ở Thung lũng Silicon! Đừng bỏ lỡ cơ hội học lập trình web bằng framework Django dựa trên Python! Hãy nhớ tận dụng cơ hội duy nhất này để học HTML và Bootstrap để ngay cả những người mới bắt đầu cũng có thể bắt đầu lập trình web mà không gặp bất kỳ gánh nặng nào!

            초급

            초급

            Python, Django, REST API

            Lập trình web Python Django do một kỹ sư ở Thung lũng Silicon giảng dạy강의 썸네일

            Lập trình web Python Django do một kỹ sư ở Thung lũng Silicon giảng dạy

            altoformula

            Do It! Django + Bootstrap: Nguyên tắc phát triển web bằng Python강의 썸네일

            Do It! Django + Bootstrap: Nguyên tắc phát triển web bằng Python

            sungyonglee

            Học phát triển web Python A to Z khi thực hành! Học từ cơ bản về web cho đến phát triển và triển khai blog chỉ trong một lần.

            초급

            초급

            Python, Django, Bootstrap

            Do It! Django + Bootstrap: Nguyên tắc phát triển web bằng Python강의 썸네일

            Do It! Django + Bootstrap: Nguyên tắc phát triển web bằng Python

            sungyonglee

            Blog đơn giản được tạo bằng Google Trang tính!강의 썸네일

            Blog đơn giản được tạo bằng Google Trang tính!

            jejucoding

            Hãy nhanh chóng tạo một blog đơn giản chạy miễn phí 24 giờ mỗi ngày bằng cách sử dụng Bảng tính Google + tập lệnh ứng dụng Google + Google drive + Bootstrap!

            초급

            초급

            Bootstrap, Google Apps Script, VSCode

            Blog đơn giản được tạo bằng Google Trang tính!강의 썸네일

            Blog đơn giản được tạo bằng Google Trang tính!

            jejucoding