Bootstrap Code Play

BootstrapのレッスンでレスポンシブWebデザインを学びましょう。編集とプレビューが可能です。Bootstrap Code Playは、解説、サンプルコード、そしてプレイグラウンドを連携させ、マークアップの変更がページにどのような影響を与えるかを実際に体験できます。

読む、変更する、プレビューする

トピックを選択し、その仕組みを理解したら、「試してみる」をタップしてエディターでサンプルを開きます。クラスを変更したり、コンテンツを調整したり、要素を追加したりできます。プレビューを開いて結果を確認したら、コードに戻って別の実験を始めましょう。

基本を学ぶ

レスポンシブグリッド、タイポグラフィ、ボタン、アラート、テーブル、フォームなどを練習しましょう。関連する学習トラックで、カード、ナビゲーションバー、アコーディオン、ダイアログなどのコンポーネントを探求します。ガイド付きレッスンでは、コードをただコピーするのではなく、理解を深めるために、手順、課題、よくある間違いなどが含まれています。プロジェクトレッスンでは、価格設定セクションやコンパクトなダッシュボードなどの例を通して、概念を統合的に学ぶことができます。

学習コースを選択

同梱のBootstrap 5.3.8コースを学習するか、古いプロジェクト向けにBootstrap 4.6.2および3.4​​.1を探索してください。古いコースはサポート終了となっており、学習および移行のために提供されています。Bootstrap 6アルファ版コースは実験的なもので、プレビューにはインターネット接続と最新のWebViewが必要です。

練習を続けましょう

トピックを検索するか、カテゴリ別に閲覧できます。レッスンを完了としてマークし、各バージョンの完了数を確認できます。プレイグラウンドを開いて独自のHTML実験を行い、ファイルを保存して、「保存済みファイル」から後でアクセスできます。

便利なツールで編集

例題に取り組む際は、構文ハイライト、元に戻す/やり直し、検索と置換、行移動などの機能を利用できます。「名前を付けて保存」で別のコピーを保存し、「コードを共有」で利用可能な共有オプションを使用してエディタのテキストを送信できます。

学生、自主学習者、レスポンシブレイアウトを再確認する開発者にとって、このアプリは実用的な学習ループを提供します。説明を読み、小さな変更を加え、出力を確認するという流れです。

このアプリには広告が含まれています。外部リソースを参照する例にはインターネット接続が必要です。リモートリソースの利用可否は状況によって異なります。