1.起動テンプレートの起動

使用するには、次のコードをブートサイトに貼り付ける必要があります。

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
    integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
    crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
    crossorigin="anonymous"></script>

<title>스파르타코딩클럽 | 부트스트랩 연습하기</title>

これで始めましょう。

2.ブートコードの受信位置

https://getbootstrap.com/docs/4.0/components/alerts/

3.Bootstrapを利用して、私の以前の方法は一緒に使うことができますか?

-YES!

4.スパルタが提案したページと同じように作成する。

Webページ
https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/web101/week01/06.+%EB%82%98%ED%99%80%EB%A1%9C%EB%A9%94%EB%AA%A8%EC%9E%A5%EB%BC%88%EB%8C%80.html
Boot Strepに入り、必要なコードをコピーして私のFiエリアに貼り付けます.

必要なのは、コードがブロックであれば、先に貼ってください.
「Naverカテゴリの名前を変更する形式」でコードを確認し、確認後不要なコードを削除します.

入力Jumbotronとcard column

ネット上の写真を引き寄せる方法

不要なコードを削除し、ネット写真srcの後ろに入力します.

Card Columnの追加

Column Cardをコピーして貼り付けるだけでいいです

前にスパルタで見せたページのようです.
グレーのボックスのサイズを変更します.
体の中
div class=「wrap」を使用
まだあります.
headでstyleを作成する
width: 900px;
margin: auto;
入力

<1>QUIZ-同一の

写真だけ違いますが他は同じです。

Styleで*完全フォントfont-family設定
font-family: 'Stylish', sans-serif;
スタイルの前にfontを入力する場所を指定する必要があります.
だから下のURLを貼ります.

Bodyのcard-titleにhrefインターネットアドレスを入力
a href="http://naver.com/ "class="card-title">
次にStyleでcard-title色を設定します
color: dodgeblue;

最後のcard-textの2つの項目
スタイルの色、フォント、および余白の変更
color: blue;
font-weight: bold;
margin: 10px 0px 10px 0px;

Pychatコードが長すぎて、スクリーンショットが難しいです.
次の福貼-Styleの下のBodyの内容が反映できないので5つのCard-textを外して1つだけ残しました

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>

<title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&family=Stylish&display=swap" rel="stylesheet">
<style>
    .wrap {
        width: 900px;
        margin: auto; }

    .card-text2 {
        margin 10px 0px 10px 0px;
        color: blue;
        font-weight: bold;       }

    .card-title {
        color: dodgerblue; }

    * {
        font-family: 'Stylish', sans-serif; }
</style>

自分のリンク手帳!

後で表示するための重要なリンクを保存
アンカーボックスを開く

ここにニュースのタイトルがあります。
記事の概要.神はわが国の万歳木槿花三千里の華麗な江山を守ってくれた...
ここにコメントがあります

<2> Quiz2

上記の例では、新しいboxはBootstrapでForms(Overview)を表示します.
formに設定されたコードの先頭と末尾をdivに置き換えます.私が学んだレベルはこれが気持ちがいいです.

CSS borderコメントサイト

https://developer.mozilla.org/en-US/docs/Web/CSS/border
https://www.w3schools.com/css/css_border.asp

フルコピーおよびインポートされたForms(概要)コード
div class=名前は「post-box」です.

Styleでpost-boxを設定する
width: 500px;
margin: 0px auto 20px auto;
border: 3px solid black;
border-radius: 10px;
padding: 30px;

Forms(Overview)コードから不要なコンテンツを削除します.
テキストを置換し、ブラウザの2番目のテキスト入力ウィンドウをインポート部分として消去し、一部ExamplextAreaコードのみをForms(Form Control)で検索して貼り付けます.

私のPychatch-index 1-11.htmlファイルを参照してください.
次のコードは追加された内容のみを記録します.
エンティティURL
コメント
投稿