ส่วนประกอบการ์ดบูตสแตรป

เราขึ้นไป 1 พิกเซลเป็น 768 และพวกมันเปลี่ยนเป็นตรงกันข้าม:

ส่วนประกอบย่อยของการ์ด

มาลองใช้พลังของการ์ดอย่างเต็มที่โดยลองใช้ส่วนประกอบย่อยทั้งหมด

การ์ดที่มีส่วนหัวและส่วนท้าย

<div class="card">
            <div class="card-header text-center p-4">I'm a header</div>
            <div class="card-body">
              <p class="card-text">
                first paragraph
              </p>
              <p class="card-text">
                second paragraph
              </p>
              <a href="#" class="card-link">Link 1</a>
              <a href="#" class="card-link">Link 2</a>
              <a href="#" class="card-link">Link 3</a>
            </div>
            <div class="card-footer">
              Footer of a Bootstrap card
            </div>
          </div>

เราได้สร้างการ์ดที่มีส่วนหัวของการ์ดอยู่ตรงกลาง ซึ่งมีเส้นขอบและพื้นหลังสีเทาอ่อน และตัวการ์ดด้านล่าง ซึ่งทำให้มีช่องว่างภายใน

ในส่วนเนื้อหา เรามีย่อหน้าที่มี CARD-TEXT สองสามย่อหน้าสำหรับการจัดแนว และบางลิงก์กับ CARD-LINK จึงเป็นสีฟ้าและวางชิดกัน

ในตอนท้าย เราสร้างส่วนท้ายของการ์ดซึ่งมีรูปแบบเหมือนกับส่วนหัว แต่ครั้งนี้ไม่ได้จัดกึ่งกลางข้อความ

การ์ดพร้อมฝาปิดรูปภาพ

ครั้งนี้ เราจะเพิ่มภาพแคปให้กับการ์ด ชื่อและคำบรรยายให้กับเนื้อหาของการ์ด และกลุ่มรายการที่มีลิงก์เป็นรายการ:

<div class="card">
            <img
              src="https://via.placeholder.com/100"
              alt=""
              class="card-img-top"
            />
            <div class="card-body">
              <h3 class="card-title">card title in the card's body</h3>
              <h4 class="card-subtitle mb-4">card subtitle</h4>
 
              <p>list group with links inside:</p>
              <ul class="list-group">
                <li class="list-group-item">
                  <a href="#" class="card-link">List link 1</a>
                </li>
                <li class="list-group-item">
                  <a href="#" class="card-link">List link 2</a>
                </li>
                <li class="list-group-item">
                  <a href="#" class="card-link">List link 3</a>
                </li>
              </ul>
            </div>
          </div>

ฉันใช้เครื่องมือที่สะดวกมากสำหรับรูปภาพที่เรียกว่าตัวยึดตำแหน่ง ตัวเลขที่อยู่ท้ายสุดคือความกว้างพิกเซล x ความสูงของภาพ แต่ค่านี้จะถูกละเว้นเมื่อ CARD-IMG-TOP ขยาย (หรือย่อ) ภาพให้เต็มความกว้างของการ์ด ชื่อเรื่องและคำบรรยายมีการจัดรูปแบบที่ดีและเราใช้ยูทิลิตี้การวางแนวของ Bootstrap สำหรับการเว้นและระยะขอบ MB-4 ที่คุณเห็นในคำบรรยายหมายถึงขอบด้านล่าง

การเว้นระยะขอบรองเท้าและการวางแนวขอบ:

• pt/mt – padding/margin top
• pb/mb – padding/margin bottom
• pl/ml – padding/margin left
• pr/mr – padding/margin right
• py/my – padding/margin แกน y (บนและล่าง)
• px/mx – padding/margin x axis (ซ้ายและขวา)

จากนั้นเราก็มีกลุ่มรายการซึ่งห่อหุ้มรายการอีกครั้งและเป็นองค์ประกอบแต่ละองค์ประกอบที่มีเส้นขอบโค้งมนสีอ่อน นี่คือผลลัพธ์ของเรา:

ฝาปิดรูปภาพด้านล่าง

ไม่มี CARD-IMG-BOTTOM ในบูตสแตรป แต่เราสามารถ "ปลอม" สิ่งนี้ได้อย่างง่ายดายโดยสร้าง div ที่ด้านล่างของการ์ดและวาง

<div class="card">
            <div class="card-body">
              <p class="card-text">
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quas
                unde corporis sed nam ad eius, pariatur, consectetur modi
                asperiores dolorem id quaerat eos quod nesciunt repudiandae aut
                temporibus rerum possimus.
              </p>
            </div>
            <img
              src="https://via.placeholder.com/100"
              alt=""
              class="card-img-top"
            />
          </div>

ฉันยังเพิ่ม lorem ipsum แบบเก่าที่ดีสำหรับการวัดที่ดี

ฝาปิดรูปภาพด้านข้าง

นอกจากนี้เรายังสามารถทำให้เป็นแนวนอนได้ด้วยการเพิ่ม ROW wrapper ภายในการ์ดของเราเพื่อจัดวางในแนวนอน จากนั้นใช้ COL เพื่อกำหนดขนาดของภาพและส่วนที่เหลือของการ์ด:

<div class="card">
            <div class="row">
              <img
                src="https://via.placeholder.com/100"
                alt=""
                class="card-img-top col-6"
              />
              <div class="card-body col-6">
                <h3 class="card-title">card title in the card's body</h3>
                <h4 class="card-subtitle mb-4">card subtitle</h4>
 
                <p>list group with links inside:</p>
                <ul class="list-group">
                  <li class="list-group-item">
                    <a href="#" class="card-link">List link 1</a>
                  </li>
                  <li class="list-group-item">
                    <a href="#" class="card-link">List link 2</a>
                  </li>
                  <li class="list-group-item">
                    <a href="#" class="card-link">List link 3</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>

เราเพิ่งห่อเนื้อหาทั้งหมดของการ์ดใน

และเพิ่ม COL-6 ให้ทั้งภาพและตัวการ์ดเพื่อให้การ์ด 50-50

ภาพการ์ดเป็นพื้นหลัง

นอกจากนี้เรายังสามารถขยายรูปภาพให้ทั่วทั้งการ์ดและวางข้อความ รายการ ลิงก์ ฯลฯ ไว้บนการ์ดได้ เราทำได้โดยให้ คลาสของ CARD-IMG แล้ววางทุกอย่างใน

ด้วยคลาส CARD-IMG-OVERLAY ข้างในนั้นเรากำหนดค่าองค์ประกอบตามที่เราต้องการ

<div class="card">
            <img
              src="https://via.placeholder.com/100"
              alt=""
              class="card-img"
            />
            <div class="card-img-overlay">
              <h4 class="card-title">Overlay Title</h4>
              <p class="card-text">
                Image text overlay
              </p>
              <p>second paragraph</p>
              <p>third paragraph</p>
              <p>fourth paragraph</p>
              <div class="btn-group w-100">
                <button class="btn btn-primary">blue</button>
                <button class="btn btn-info">teal</button>
                <button class="btn btn-danger">red</button>
                <button class="btn btn-dark">black</button>
                <button class="btn btn-success">green</button>
              </div>
            </div>
          </div>

ที่นี่เราใช้ยูทิลิตี้ความกว้างเป็นครั้งแรก W-100 บน BTN-GROUP

ยูทิลิตี้ความกว้างและความสูงของสายรัดรองเท้า:

w/h-25/50/75/100 – กว้าง/สูง 25%/50%/75%/100%

ในกรณีของเรา 100% ลบช่องว่างภายในแบบเดียวกับที่ใช้กับ CARD-BODY ซึ่งใช้ที่นี่โดย CARD-IMG-OVERLAY

คอลัมน์การ์ด

นอกจากนี้ยังมีตัวเลือกนี้ในการจัดวางการ์ดในคอลัมน์เพื่อให้ไปบนลงล่างก่อน และเฉพาะเมื่อเต็มคอลัมน์แล้ว จะเริ่มในการ์ดใหม่

<div class="card-columns">
        <div class="card">
          <h3 class="card-title text-center p-2">Title of card 1</h3>
          <div class="card-body">
            <p class="card-text">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam,
              rerum excepturi voluptate...
            </p>
          </div>
        </div>
        <div class="card">
          <h3 class="card-title text-center p-2">Title of card 2</h3>
          <div class="card-body">
            <p class="card-text">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam,
              rerum excepturi voluptate...
            </p>
          </div>
        </div>
        <div class="card">
          <h3 class="card-title text-center p-2">Title of card 3</h3>
          <div class="card-body">
            <p class="card-text">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam,
              rerum excepturi voluptate...
            </p>
          </div>
        </div>
        <div class="card">
          <h3 class="card-title text-center p-2">Title of card 4</h3>
          <div class="card-body">
            <p class="card-text">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam,
              rerum excepturi voluptate...
            </p>
          </div>
        </div>
      </div>

เราเพียงแค่ห่อการ์ดทั้งหมดของเราใน

และเราได้รับสิ่งต่อไปนี้:

การจัดสไตล์การ์ด Bootstrap

เมื่อพูดถึงการใส่สไตล์การ์ดบูตสแตรป เราสามารถเปลี่ยนพื้นหลังและสีข้อความได้ เช่นเดียวกับสีและรูปลักษณ์ของเส้นขอบ

สามารถใช้สไตล์กับการ์ดทั้งใบ เป็นส่วนประกอบย่อยแยกกัน หรือทั้งสองอย่าง ต่อไปนี้คือการ์ดที่มีสไตล์บางส่วนให้เลือกดู:

<div class="card bg-primary">
          <div class="card-header"><h3>Header 1</h3></div>
          <div class="card-body">
            <p>Body 1</p>
          </div>
          <div class="card-footer"><p>Footer 1</p></div>
        </div>
        <div class="card bg-success text-white">
          <div class="card-header"><h3>Header 2</h3></div>
          <div class="card-body">
            <p>Body 2</p>
          </div>
          <div class="card-footer text-danger"><p>Footer 2</p></div>
        </div>
        <div class="card bg-info text-dark border-danger">
          <div class="card-header"><h3>Header 3</h3></div>
          <div class="card-body">
            <p>Body 3</p>
          </div>
          <div class="card-footer"><p>Footer 3</p></div>
        </div>
        <div class="card border-primary bg-dark text-white">
          <div class="card-header border-success"><h3>Header 4</h3></div>
          <div class="card-body text-danger">
            <p>Body 4</p>
          </div>
          <div class="card-footer bg-warning text-info"><p>Footer 4</p></div>
        </div>

ไพ่ใบแรกมีพื้นหลังสีน้ำเงิน (BG-PRIMARY) อยู่ที่ตัวการ์ด โดยกำหนดสไตล์ให้ทั้งการ์ด

การ์ดใบที่สองมีพื้นหลังสีเขียว (BG-SUCCESS) และข้อความสีขาว (TEXT-WHITE) บนการ์ดทั้งใบ แต่มีข้อความสีแดง (TEXT-DANGER) ในส่วนท้าย ซึ่งจะแทนที่ TEXT-WHITE ขององค์ประกอบหลัก

ไพ่ใบที่สามมีพื้นหลังสีน้ำเงินเข้ม (BG-INFO) ข้อความสีดำ (TEXT-DARK) และเส้นขอบสีแดง (BORDER-DANGER)

สุดท้าย ไพ่ใบที่สี่มีขอบสีน้ำเงิน (BORDER-PRIMARY) พื้นหลังสีดำ (BG-DARK) และข้อความสีขาว (TEXT-WHITE) บนการ์ดทั้งใบ

เส้นขอบสีเขียว (BORDER-SUCCESS) บนส่วนหัว ข้อความสีแดง (TEXT-DANGER) ในส่วนเนื้อหา และพื้นหลังสีเหลือง (BG-WARNING) และข้อความสีน้ำเงินเข้ม (TEXT-INFO) ในส่วนท้าย

นี่คือลักษณะของการ์ดสายรุ้งของเรา:

สรุป

การ์ด Bootstrap เป็นส่วนประกอบที่ค่อนข้างทรงพลังพร้อมตัวเลือกมากมาย พวกเขาสามารถจัดกลุ่มเป็นสำรับไพ่สำหรับส่วนที่แยกจากกัน เหนียวแน่น หรือเป็นกลุ่มไพ่เพื่อหลอมรวมเป็นเอนทิตีเดียว พวกเขาสามารถกระจายเป็นแถวหรือในคอลัมน์การ์ดเพื่อให้ดูแตกต่าง

พวกเขาสามารถโฮสต์รูปภาพ รายการ และลิงก์ ทั้งหมดในรูปแบบต่างๆ

พวกเขายังสามารถมีส่วนหัวและส่วนท้ายของตัวเอง ทั้งหมดนี้มีรูปแบบและการจัดรูปแบบที่กำหนดไว้ล่วงหน้า แต่เปิดให้เราปรับแต่งได้

พวกมันมีความยืดหยุ่นอย่างเหลือเชื่อ และอาจเป็นหนึ่งในตัวอย่างที่ดีที่สุดที่แสดงให้เห็นว่า Bootstrap ประสบความสำเร็จมากแค่ไหน ด้วยการตั้งค่าก่อนหน้าเพียงเล็กน้อยในเวลาอันสั้น