Latest web development tutorials
×

Bootstrap หลักสูตร

Bootstrap หลักสูตร Bootstrap แนะนำโดยย่อ Bootstrap สภาพแวดล้อมในการติดตั้ง

Bootstrap CSS

Bootstrap CSS ภาพรวม Bootstrap ระบบกริด Bootstrap การเรียงพิมพ์ Bootstrap รหัส Bootstrap ตาราง Bootstrap ฟอร์ม Bootstrap ปุ่มกด Bootstrap ภาพ Bootstrap ชั้นเสริม Bootstrap ยูทิลิตี้ที่ตอบสนองต่อ

Bootstrap ส่วนประกอบเค้าโครง

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

Bootstrap วิดเจ็ต

Bootstrap Plug-สรุป Bootstrap ผลการเปลี่ยนแปลง Bootstrap กล่อง Modal Bootstrap เมนูแบบเลื่อนลง Bootstrap จอภาพเลื่อน Bootstrap แถบ Bootstrap เคล็ดลับเครื่องมือ Bootstrap กล่องป๊อปอัพ Bootstrap กล่องเตือน Bootstrap ปุ่มกด Bootstrap พับ Bootstrap ม้าหมุน Bootstrap นำทางเพิ่มเติม

Bootstrap อื่น ๆ

Bootstrap UI บรรณาธิการ Bootstrap V2 หลักสูตร Bootstrap HTML มาตรฐานการเข้ารหัส Bootstrap CSS มาตรฐานการเข้ารหัส

แผงบูต

บทนี้จะอธิบายแผง Bootstrap (แผ่น) ประกอบแผง DOM สำหรับการชุมนุมถูกแทรกลงในกล่อง สร้างแผงขั้นพื้นฐานจะต้อง <div>และเพิ่มระดับชั้น.panel .panel เริ่มต้นสามารถเป็นที่แสดงในตัวอย่างต่อไปนี้:

ตัวอย่าง

<div class = "แผงแผงเริ่มต้น" > <div class = "แผงร่างกาย"> นี้เป็นแผงพื้นฐาน </ div> </ div>

ลอง»

ผลมีดังนี้

แผงเริ่มต้น

ชื่อแผง

เรามีสองวิธีที่ดีในการเพิ่มชื่อแผง:

  • ใช้คลาส .panel หัวข้อก็สามารถเพิ่มชื่อเพื่อภาชนะแผงสามารถเพิ่มภาชนะหัวข้อที่แผงของคุณ
  • ใช้กับการเรียน .panel ชื่อของ <h1> - <H6> เพื่อเพิ่มลักษณะหัวเรื่องที่กำหนดไว้ล่วงหน้า

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงนี้ในสองวิธี

ตัวอย่าง

<div class = "แผงแผงเริ่มต้น" > <div class = "แผงหัวข้อ"> ชื่อแผงไม่มีชื่อ </ div> <div class = "แผงร่างกาย"> แผงเนื้อหา </ div> </ div> <div class = "แผงแผงเริ่มต้น" > <div class = "แผงหัวข้อ"> <H3 class = "แผงชื่อ"> มีชื่อของชื่อแผง </ h3> </ div> <div class = "แผงร่างกาย"> แผงเนื้อหา </ div> </ div>

ลอง»

ผลมีดังนี้

ชื่อแผง

แผงเชิงอรรถ

เราสามารถเพิ่มเชิงอรรถในแผงเพียงแค่ใส่ข้อความบนปุ่มหรือระดับ .panel ท้ายด้วย <div> สามารถตัวอย่างต่อไปนี้แสดงให้เห็นถึงจุดนี้:

ตัวอย่าง

<div class = "แผงแผงเริ่มต้น" > <div class = "แผงร่างกาย"> นี้เป็นแผงพื้นฐาน </ div> <div class = "แผงท้าย"> แผงเชิงอรรถ </ div> </ div>

ลอง»

ผลมีดังนี้

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

แผงบริบทที่มีสี

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

ตัวอย่าง

<div class = "แผงแผงหลัก" > <div class = "แผงหัวข้อ"> <H3 class = "แผงชื่อ"> ชื่อแผง </ h3> </ div> <div class = "แผงร่างกาย"> นี้เป็นแผงพื้นฐาน </ div> </ div> <div class = "แผงแผงประสบความสำเร็จ" > <div class = "แผงหัวข้อ"> <H3 class = "แผงชื่อ"> ชื่อแผง </ h3> </ div> <div class = "แผงร่างกาย"> นี้เป็นแผงพื้นฐาน </ div> </ div> <div class = "แผงแผงข้อมูล" > <div class = "แผงหัวข้อ"> <H3 class = "แผงชื่อ"> ชื่อแผง </ h3> </ div> <div class = "แผงร่างกาย"> นี้เป็นแผงพื้นฐาน </ div> </ div> <div class = "แผงแผงเตือน" > <div class = "แผงหัวข้อ"> <H3 class = "แผงชื่อ"> ชื่อแผง </ h3> </ div> <div class = "แผงร่างกาย"> นี้เป็นแผงพื้นฐาน </ div> </ div> <div class = "แผงแผงอันตราย" > <div class = "แผงหัวข้อ"> <H3 class = "แผงชื่อ"> ชื่อแผง </ h3> </ div> <div class = "แผงร่างกาย"> นี้เป็นแผงพื้นฐาน </ div> </ div>

ลอง»

ผลมีดังนี้

แผงบริบทที่มีสี

กับแผงตาราง

การสร้างตารางที่มีเส้นขอบในแผงไม่มีเราสามารถใช้ .tableชั้นในแผงสมมติว่ามี <div> มี.panel ร่างกายเราสามารถเพิ่มชายแดนเป็นพิเศษในด้านบนของตารางที่จะแยกถ้ามันไม่ได้.panel ร่างกายของ <div> ส่วนประกอบจะย้ายโดยไม่หยุดชะงักจากแผงไปหัวตาราง

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงจุดนี้:

ตัวอย่าง

<div class = "แผงแผงเริ่มต้น" > <div class = "แผงหัวข้อ"> <H3 class = "แผงชื่อ"> ชื่อแผง </ h3> </ div> <div class = "แผงร่างกาย"> นี้เป็นแผงพื้นฐาน </ div> <table class = "ตาราง"> <Th> ผลิตภัณฑ์ </ TH> <TH> ราคา </ TH> <tr> <td> ผลิตภัณฑ์ </ td> <td> 200 </ td> </ tr> <tr> <td> ผลิตภัณฑ์ B </ td> <td> 400 </ td> </ tr> </ table> </ div> <div class = "แผงแผงเริ่มต้น" > <div class = "แผงหัวข้อ"> ชื่อแผง </ div> <table class = "ตาราง"> <Th> ผลิตภัณฑ์ </ TH> <TH> ราคา </ TH> <tr> <td> ผลิตภัณฑ์ </ td> <td> 200 </ td> </ tr> <tr> <td> ผลิตภัณฑ์ B </ td> <td> 400 </ td> </ tr> </ table> </ div>

ลอง»

ผลมีดังนี้

กับแผงตาราง

ที่มีรายชื่อในกลุ่มของแผง

เราสามารถจะรวมอยู่ในรายชื่อของกลุ่มแผงใด ๆ โดยการเพิ่ม.panel และชั้น .panel เริ่มต้นใน<div> เพื่อสร้างแผงและเพิ่มรายชื่อของกลุ่มในแผงควบคุม คุณสามารถเลือกจาก รายการของกลุ่ม ที่จะเรียนรู้วิธีการสร้างกลุ่มรายชื่อบท

ตัวอย่าง

<div class = "แผงแผงเริ่มต้น" > <div class = "แผงหัวข้อ"> ชื่อแผง </ div> <div class = "แผงร่างกาย"> <p> นี่คือเนื้อหาพื้นฐานของแผง นี่คือเนื้อหาพื้นฐานของแผง นี่คือเนื้อหาพื้นฐานของแผง นี่คือเนื้อหาพื้นฐานของแผง นี่คือเนื้อหาพื้นฐานของแผง นี่คือเนื้อหาพื้นฐานของแผง นี่คือเนื้อหาพื้นฐานของแผง นี่คือเนื้อหาพื้นฐานของแผง </ p> </ div> <ul class = "รายชื่อกลุ่ม"> <li class = "รายการกลุ่มรายการ "> ลงทะเบียนชื่อโดเมนฟรี </ li> <li class = "รายการกลุ่มรายการ "> ฟรีหน้าต่างพื้นที่โฮสติ้ง </ li> <li class = "รายการกลุ่มรายการ "> จำนวนภาพ </ li> <li class = "รายการกลุ่มรายการ "> 24 * 7 สนับสนุน </ li> <li class = "รายการกลุ่มรายการ "> การปรับปรุงค่าใช้จ่ายประจำปี </ li> </ ul> </ div>

ลอง»

ผลมีดังนี้

ที่มีรายชื่อในกลุ่มของแผง