กล่องใส่มูลนิธิ? ขนาด
คอลัมน์การใช้ตารางเพื่อกำหนดขนาดของกล่องใส่เช่น .large-6 , .medium-6 และอื่น ๆ
ความรู้เพิ่มเติมระบบกริดคุณสามารถคลิกบน ระบบกริด กวดวิชา
ตัวอย่าง
<form>
<ระดับ Div = "แถว">
<div class = "ขนาดใหญ่-10 ขนาด 7 คอลัมน์">
<label> ขนาดใหญ่ 10 กลาง 7 (100% ในขนาดเล็ก)
<ประเภทขาเข้า = "text" ยึด = "ชื่อ">
</ label>
</ div>
</ div>
<ระดับ Div = "แถว">
<div class = "ขนาดเล็ก 5 คอลัมน์">
<label> ขนาดเล็ก 5
<ประเภทขาเข้า = "text" ยึด = "ชื่อ">
</ label>
</ div>
</ div>
<ระดับ Div = "แถว">
<ระดับ Div = "ขนาด 3 คอลัมน์">
<label> กลาง 3 (100 % ขนาดเล็ก)
<ประเภทขาเข้า = "text" ยึด = "ชื่อ">
</ label>
</ div>
</ div>
</ form>
<ระดับ Div = "แถว">
<div class = "ขนาดใหญ่-10 ขนาด 7 คอลัมน์">
<label> ขนาดใหญ่ 10 กลาง 7 (100% ในขนาดเล็ก)
<ประเภทขาเข้า = "text" ยึด = "ชื่อ">
</ label>
</ div>
</ div>
<ระดับ Div = "แถว">
<div class = "ขนาดเล็ก 5 คอลัมน์">
<label> ขนาดเล็ก 5
<ประเภทขาเข้า = "text" ยึด = "ชื่อ">
</ label>
</ div>
</ div>
<ระดับ Div = "แถว">
<ระดับ Div = "ขนาด 3 คอลัมน์">
<label> กลาง 3 (100 % ขนาดเล็ก)
<ประเภทขาเข้า = "text" ยึด = "ชื่อ">
</ label>
</ div>
</ div>
</ form>
ลอง»
เท่ากับขนาดของคอลัมน์
ต่อไปนี้จะแสดงให้เห็นถึงตัวอย่างของคอลัมน์ที่มีขนาดเท่ากัน
ตัวอย่าง
<form>
<ระดับ Div = "แถว">
<ระดับ Div = "ขนาด 4 คอลัมน์">
<label> 4 ขนาดกลาง (100 % ขนาดเล็กซ้อนกัน)
<ประเภทขาเข้า = "text" ยึด = "ชื่อ">
</ label>
</ div>
<ระดับ Div = "ขนาด 4 คอลัมน์">
<label> 4 ขนาดกลาง (100 % ขนาดเล็กซ้อนกัน)
<ประเภทขาเข้า = "text" ยึด = "ชื่อ">
</ label>
</ div>
<ระดับ Div = "ขนาด 4 คอลัมน์">
<label> 4 ขนาดกลาง (100 % ขนาดเล็กซ้อนกัน)
<ประเภทขาเข้า = "text" ยึด = "ชื่อ">
</ label>
</ div>
</ div>
</ form>
<ระดับ Div = "แถว">
<ระดับ Div = "ขนาด 4 คอลัมน์">
<label> 4 ขนาดกลาง (100 % ขนาดเล็กซ้อนกัน)
<ประเภทขาเข้า = "text" ยึด = "ชื่อ">
</ label>
</ div>
<ระดับ Div = "ขนาด 4 คอลัมน์">
<label> 4 ขนาดกลาง (100 % ขนาดเล็กซ้อนกัน)
<ประเภทขาเข้า = "text" ยึด = "ชื่อ">
</ label>
</ div>
<ระดับ Div = "ขนาด 4 คอลัมน์">
<label> 4 ขนาดกลาง (100 % ขนาดเล็กซ้อนกัน)
<ประเภทขาเข้า = "text" ยึด = "ชื่อ">
</ label>
</ div>
</ div>
</ form>
ลอง»
แท็กอินไลน์
หากคุณต้องการเนื้อหาฉลากของคุณแสดงบนซ้าย (ไม่ได้ด้านบน) คุณสามารถติดแท็กป้ายองค์ประกอบบนกล่องกับอินพุตซ้ายของคอลัมน์ที่แตกต่างกันและใช้ .inline ระดับที่จะตั้งศูนย์แนวตั้ง:
ตัวอย่าง
<form>
<ระดับ Div = "แถว">
<ระดับ Div = "เล็ก-8 ">
<ระดับ Div = "แถว">
<div class = "ขนาดเล็ก 3 คอลัมน์">
<label สำหรับ = "ชื่อ" ชั้น = "ขวาแบบอินไลน์"> ชื่อ </ label>
</ div>
<div class = "ขนาดเล็ก 9 คอลัมน์">
<ประเภทขาเข้า = "text" id = "ชื่อ" ยึด = "ชื่อจริง .. ">
</ div>
</ div>
</ div>
</ div>
</ form>
<ระดับ Div = "แถว">
<ระดับ Div = "เล็ก-8 ">
<ระดับ Div = "แถว">
<div class = "ขนาดเล็ก 3 คอลัมน์">
<label สำหรับ = "ชื่อ" ชั้น = "ขวาแบบอินไลน์"> ชื่อ </ label>
</ div>
<div class = "ขนาดเล็ก 9 คอลัมน์">
<ประเภทขาเข้า = "text" id = "ชื่อ" ยึด = "ชื่อจริง .. ">
</ div>
</ div>
</ div>
</ div>
</ form>
ลอง»
ด้านหน้าและด้านหลังป้าย
คุณสามารถ <div class="row collapse"> > เพิ่มองค์ประกอบแท็บด้านหน้าและด้านหลัง: < element class="postfix"> หรือ < element class="prefix"> คุณสามารถใช้ระบบตารางเพื่อกำหนดขนาดของป้ายด้านหน้าและด้านหลัง:
ตัวอย่าง
<form>
<ระดับ Div = "แถว">
<div class = "ขนาดใหญ่ 6 คอลัมน์">
<ระดับ Div = "แถวยุบคำนำหน้า -radius">
<div class = "ขนาดเล็ก 3 คอลัมน์">
<span class = "คำนำหน้า"> คำนำหน้า </ span>
</ div>
<div class = "ขนาดเล็ก 9 คอลัมน์">
<ประเภทขาเข้า = "text" ยึด = "คุ้มค่า">
</ div>
</ div>
</ div>
<div class = "ขนาดใหญ่ 6 คอลัมน์">
<ระดับ Div = "แถวยุบ Postfix -radius">
<div class = "ขนาดเล็ก 9 คอลัมน์">
<ประเภทขาเข้า = "text" ยึด = "คุ้มค่า">
</ div>
<div class = "ขนาดเล็ก 3 คอลัมน์">
<span class = "Postfix"> Postfix </ span>
</ div>
</ div>
</ div>
</ div>
</ form>
<ระดับ Div = "แถว">
<div class = "ขนาดใหญ่ 6 คอลัมน์">
<ระดับ Div = "แถวยุบคำนำหน้า -radius">
<div class = "ขนาดเล็ก 3 คอลัมน์">
<span class = "คำนำหน้า"> คำนำหน้า </ span>
</ div>
<div class = "ขนาดเล็ก 9 คอลัมน์">
<ประเภทขาเข้า = "text" ยึด = "คุ้มค่า">
</ div>
</ div>
</ div>
<div class = "ขนาดใหญ่ 6 คอลัมน์">
<ระดับ Div = "แถวยุบ Postfix -radius">
<div class = "ขนาดเล็ก 9 คอลัมน์">
<ประเภทขาเข้า = "text" ยึด = "คุ้มค่า">
</ div>
<div class = "ขนาดเล็ก 3 คอลัมน์">
<span class = "Postfix"> Postfix </ span>
</ div>
</ div>
</ div>
</ div>
</ form>
ลอง»
ด้านหน้าและด้านหลังปุ่มแท็บ
คุณสามารถใช้ <a> เพิ่มองค์ประกอบ .button ชั้นเรียนเพื่อตั้งด้านหน้าและด้านหลังปุ่ม:
ด้านหน้าและปุ่มรอบฉลากด้านหลัง
ตัวอย่าง
<form>
<ระดับ Div = "แถว">
<div class = "ขนาดใหญ่ 6 คอลัมน์">
<ระดับ Div = "แถวยุบคำนำหน้า -radius">
<div class = "ขนาดเล็ก 3 คอลัมน์">
<span class = "คำนำหน้า"> คำนำหน้า </ span>
</ div>
<div class = "ขนาดเล็ก 9 คอลัมน์">
<ประเภทขาเข้า = "text" ยึด = "คุ้มค่า">
</ div>
</ div>
</ div>
<div class = "ขนาดใหญ่ 6 คอลัมน์">
<ระดับ Div = "แถวยุบ Postfix -radius">
<div class = "ขนาดเล็ก 9 คอลัมน์">
<ประเภทขาเข้า = "text" ยึด = "คุ้มค่า">
</ div>
<div class = "ขนาดเล็ก 3 คอลัมน์">
<span class = "Postfix"> Postfix </ span>
</ div>
</ div>
</ div>
</ div>
<ระดับ Div = "แถว">
<div class = "ขนาดใหญ่ 6 คอลัมน์">
<ระดับ Div = "แถวยุบคำนำหน้า ตลอดทั้งปี">
<div class = "ขนาดเล็ก 3 คอลัมน์">
<A href = "#" class = "button prefix"> ไป </ a>
</ div>
<div class = "ขนาดเล็ก 9 คอลัมน์">
<ประเภทขาเข้า = "text" ยึด = "คุ้มค่า">
</ div>
</ div>
</ div>
<div class = "ขนาดใหญ่ 6 คอลัมน์">
<ระดับ Div = "แถวยุบ Postfix ตลอดทั้งปี">
<div class = "ขนาดเล็ก 9 คอลัมน์">
<ประเภทขาเข้า = "text" ยึด = "คุ้มค่า">
</ div>
<div class = "ขนาดเล็ก 3 คอลัมน์">
<A href = "#" class = "button postfix"> ไป </ a>
</ div>
</ div>
</ div>
</ div>
</ form>
<ระดับ Div = "แถว">
<div class = "ขนาดใหญ่ 6 คอลัมน์">
<ระดับ Div = "แถวยุบคำนำหน้า -radius">
<div class = "ขนาดเล็ก 3 คอลัมน์">
<span class = "คำนำหน้า"> คำนำหน้า </ span>
</ div>
<div class = "ขนาดเล็ก 9 คอลัมน์">
<ประเภทขาเข้า = "text" ยึด = "คุ้มค่า">
</ div>
</ div>
</ div>
<div class = "ขนาดใหญ่ 6 คอลัมน์">
<ระดับ Div = "แถวยุบ Postfix -radius">
<div class = "ขนาดเล็ก 9 คอลัมน์">
<ประเภทขาเข้า = "text" ยึด = "คุ้มค่า">
</ div>
<div class = "ขนาดเล็ก 3 คอลัมน์">
<span class = "Postfix"> Postfix </ span>
</ div>
</ div>
</ div>
</ div>
<ระดับ Div = "แถว">
<div class = "ขนาดใหญ่ 6 คอลัมน์">
<ระดับ Div = "แถวยุบคำนำหน้า ตลอดทั้งปี">
<div class = "ขนาดเล็ก 3 คอลัมน์">
<A href = "#" class = "button prefix"> ไป </ a>
</ div>
<div class = "ขนาดเล็ก 9 คอลัมน์">
<ประเภทขาเข้า = "text" ยึด = "คุ้มค่า">
</ div>
</ div>
</ div>
<div class = "ขนาดใหญ่ 6 คอลัมน์">
<ระดับ Div = "แถวยุบ Postfix ตลอดทั้งปี">
<div class = "ขนาดเล็ก 9 คอลัมน์">
<ประเภทขาเข้า = "text" ยึด = "คุ้มค่า">
</ div>
<div class = "ขนาดเล็ก 3 คอลัมน์">
<A href = "#" class = "button postfix"> ไป </ a>
</ div>
</ div>
</ div>
</ div>
</ form>
ลอง»