CSS
การตั้งค่า CSS ส่วนกลาง องค์ประกอบ HTML พื้นฐานที่จัดรูปแบบและปรับปรุงด้วยคลาสที่ขยายได้ และระบบกริดขั้นสูง
ภาพรวม
รับข้อมูลเบื้องต้นเกี่ยวกับโครงสร้างพื้นฐานของ Bootstrap รวมถึงแนวทางการพัฒนาเว็บที่ดีขึ้น เร็วขึ้น และแข็งแกร่งขึ้น
ประเภทเอกสาร HTML5
Bootstrap ใช้ประโยชน์จากองค์ประกอบ HTML และคุณสมบัติ CSS บางอย่างที่ต้องใช้ประเภทเอกสาร HTML5 รวมไว้ที่จุดเริ่มต้นของโครงการทั้งหมดของคุณ
<!doctype html>
<html lang="en">
...
</html>มือถือก่อน
ด้วย Bootstrap 2 เราได้เพิ่มรูปแบบที่เป็นมิตรกับอุปกรณ์พกพาสำหรับประเด็นสำคัญของเฟรมเวิร์ก ด้วย Bootstrap 3 เราได้เขียนโปรเจ็กต์ใหม่เพื่อให้เหมาะกับอุปกรณ์พกพาตั้งแต่เริ่มต้น แทนที่จะเพิ่มสไตล์สำหรับอุปกรณ์พกพาที่เป็นตัวเลือก อันที่จริงBootstrap เป็นมือถือก่อน รูปแบบ Mobile first สามารถพบได้ทั่วทั้งไลบรารี แทนที่จะพบในไฟล์ที่แยกจากกัน
เพื่อให้แน่ใจว่าการเรนเดอร์ที่เหมาะสมและการซูมแบบสัมผัส ให้เพิ่มเมตาแท็กวิวพอร์ตใน<head>.
<meta name="viewport" content="width=device-width, initial-scale=1">คุณสามารถปิดใช้งานความสามารถในการซูมบนอุปกรณ์มือถือโดยเพิ่มuser-scalable=noในเมตาแท็กวิวพอร์ต การดำเนินการนี้จะปิดใช้งานการซูม ซึ่งหมายความว่าผู้ใช้สามารถเลื่อนได้เท่านั้น และส่งผลให้ไซต์ของคุณรู้สึกเหมือนแอปพลิเคชันที่มาพร้อมเครื่องมากขึ้น โดยรวมแล้ว เราไม่แนะนำสิ่งนี้ในทุกไซต์ ดังนั้นโปรดใช้ความระมัดระวัง!
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">วิชาการพิมพ์และลิงค์
Bootstrap ตั้งค่าการแสดงผลแบบโกลบอล ตัวพิมพ์ และสไตล์ลิงก์ โดยเฉพาะอย่างยิ่ง เรา:
- ตั้ง
background-color: #fff;อยู่บนbody - ใช้
@font-family-base,@font-size-base, และ@line-height-baseคุณลักษณะเป็นฐานการพิมพ์ของเรา - กำหนดสีลิงค์สากลผ่าน
@link-colorและใช้ลิงค์ที่ขีดเส้นใต้เท่านั้นบน:hover
รูปแบบเหล่านี้สามารถพบได้scaffolding.lessภายใน
Normalize.css
เพื่อการเรนเดอ ร์ข้ามเบราว์เซอร์ที่ดีขึ้น เราใช้Normalize.cssซึ่งเป็นโครงการโดยNicolas GallagherและJonathan Neal
ตู้คอนเทนเนอร์
Bootstrap ต้องการองค์ประกอบที่มีเพื่อห่อเนื้อหาไซต์และจัดเก็บระบบกริดของเรา คุณสามารถเลือกหนึ่งในสองคอนเทนเนอร์เพื่อใช้ในโครงการของคุณ โปรดทราบว่าเนื่องจากpaddingและอื่น ๆ คอนเทนเนอร์ไม่สามารถซ้อนกันได้
ใช้.containerสำหรับคอนเทนเนอร์ความกว้างคงที่ที่ตอบสนอง
<div class="container">
...
</div>ใช้.container-fluidสำหรับคอนเทนเนอร์เต็มความกว้าง ขยายความกว้างทั้งหมดของวิวพอร์ตของคุณ
<div class="container-fluid">
...
</div>ระบบกริด
Bootstrap มีระบบกริดแบบไหลแรกที่ตอบสนองและเคลื่อนที่ได้ ซึ่งปรับขนาดได้อย่างเหมาะสมถึง 12 คอลัมน์เมื่อขนาดอุปกรณ์หรือวิวพอร์ตเพิ่มขึ้น ประกอบด้วยคลาสที่กำหนดไว้ล่วงหน้าสำหรับตัวเลือกเลย์เอาต์ที่ง่าย เช่นเดียวกับมิกซ์อินที่ทรงพลังสำหรับการสร้างเลย์เอาต์ที่มีความหมายมากขึ้น
บทนำ
ระบบกริดใช้สำหรับสร้างเค้าโครงหน้าผ่านชุดของแถวและคอลัมน์ที่เก็บเนื้อหาของคุณ นี่คือวิธีการทำงานของระบบกริด Bootstrap:
- ต้องวางแถวภายใน
.container(ความกว้างคงที่) หรือ.container-fluid(ความกว้างเต็ม) เพื่อการจัดตำแหน่งและช่องว่างภายในที่เหมาะสม - ใช้แถวเพื่อสร้างกลุ่มคอลัมน์แนวนอน
- ควรวางเนื้อหาภายในคอลัมน์ และเฉพาะคอลัมน์เท่านั้นที่อาจเป็นแถวย่อยของแถว
- คลาสกริดที่กำหนดไว้ล่วงหน้าเช่น
.rowและ.col-xs-4พร้อมสำหรับการสร้างเลย์เอาต์กริดอย่างรวดเร็ว สามารถใช้มิกซ์อินน้อยลงสำหรับเลย์เอาต์ที่มีความหมายมากขึ้น - คอลัมน์สร้างรางน้ำ (ช่องว่างระหว่างเนื้อหาคอลัมน์) ผ่าน
padding. ช่องว่างภายในนั้นถูกชดเชยเป็นแถวสำหรับคอลัมน์แรกและคอลัมน์สุดท้ายโดยใช้ระยะขอบติดลบบน.rows - ระยะขอบติดลบคือสาเหตุที่ตัวอย่างด้านล่างเยื้องออก เนื้อหาภายในคอลัมน์กริดจึงถูกจัดเรียงด้วยเนื้อหาที่ไม่ใช่กริด
- คอลัมน์กริดถูกสร้างขึ้นโดยการระบุจำนวนคอลัมน์ที่มีอยู่สิบสองคอลัมน์ที่คุณต้องการขยาย ตัวอย่างเช่น สามคอลัมน์ที่เท่ากันจะใช้สาม
.col-xs-4คอลัมน์ - หากวางมากกว่า 12 คอลัมน์ภายในแถวเดียว กลุ่มของคอลัมน์พิเศษแต่ละกลุ่มจะรวมเป็นหนึ่งหน่วยในบรรทัดใหม่
- คลาสกริดใช้กับอุปกรณ์ที่มีความกว้างหน้าจอมากกว่าหรือเท่ากับขนาดเบรกพอยต์ และแทนที่คลาสกริดที่กำหนดเป้าหมายไปที่อุปกรณ์ขนาดเล็ก ดังนั้น เช่น การใช้
.col-md-*คลาสใดๆ กับองค์ประกอบจะไม่เพียงส่งผลต่อสไตล์ของมันบนอุปกรณ์ขนาดกลางเท่านั้น แต่ยังส่งผลต่ออุปกรณ์ขนาดใหญ่ด้วยหากไม่มี.col-lg-*คลาส
ดูตัวอย่างสำหรับการนำหลักการเหล่านี้ไปใช้กับโค้ดของคุณ
คำถามสื่อ
เราใช้แบบสอบถามสื่อต่อไปนี้ในไฟล์ Less ของเราเพื่อสร้างเบรกพอยต์ที่สำคัญในระบบกริดของเรา
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }เราขยายการสืบค้นสื่อเหล่านี้เป็นครั้งคราวเพื่อรวม a max-widthเพื่อจำกัด CSS ให้อยู่ในชุดอุปกรณ์ที่แคบลง
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }ตัวเลือกกริด
ดูว่าแง่มุมต่างๆ ของระบบกริด Bootstrap ทำงานอย่างไรในอุปกรณ์หลายเครื่องด้วยตารางที่ใช้งานสะดวก
| อุปกรณ์ขนาดเล็กพิเศษโทรศัพท์ (<768px) | อุปกรณ์ขนาดเล็กแท็บเล็ต (≥768px) | อุปกรณ์ขนาดกลางเดสก์ท็อป (≥992px) | อุปกรณ์ขนาดใหญ่เดสก์ท็อป (≥1200px) | |
|---|---|---|---|---|
| พฤติกรรมของกริด | แนวนอนตลอดเวลา | ยุบเพื่อเริ่มต้น แนวนอนเหนือเบรกพอยต์ | ||
| ความกว้างของคอนเทนเนอร์ | ไม่มี (อัตโนมัติ) | 750px | 970px | 1170px |
| คำนำหน้าชั้นเรียน | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| # ของคอลัมน์ | 12 | |||
| ความกว้างของคอลัมน์ | รถยนต์ | ~62px | ~81px | ~97px |
| ความกว้างของรางน้ำ | 30px (15px ในแต่ละด้านของคอลัมน์) | |||
| Nestable | ใช่ | |||
| ออฟเซ็ต | ใช่ | |||
| การเรียงลำดับคอลัมน์ | ใช่ | |||
ตัวอย่าง: Stacked-to-horizontal
ด้วยการใช้คลาสกริดชุดเดียว.col-md-*คุณสามารถสร้างระบบกริดพื้นฐานที่เริ่มต้นจากสแต็กบนอุปกรณ์มือถือและอุปกรณ์แท็บเล็ต (ช่วงเล็กพิเศษถึงเล็ก) ก่อนที่จะกลายเป็นแนวนอนบนอุปกรณ์เดสก์ท็อป (ขนาดกลาง) วางคอลัมน์กริดใน.rowไฟล์.
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>ตัวอย่าง: ภาชนะบรรจุของเหลว
เปลี่ยนเค้าโครงตารางความกว้างคงที่เป็นเค้าโครงแบบเต็มความกว้างโดยเปลี่ยนนอกสุดของคุณ.containerเป็น.container-fluid.
<div class="container-fluid">
<div class="row">
...
</div>
</div>ตัวอย่าง: มือถือและเดสก์ท็อป
ไม่ต้องการให้คอลัมน์ของคุณซ้อนกันในอุปกรณ์ขนาดเล็กใช่หรือไม่ ใช้คลาสกริดอุปกรณ์ขนาดเล็กและขนาดกลางพิเศษโดยเพิ่ม.col-xs-* .col-md-*ลงในคอลัมน์ของคุณ ดูตัวอย่างด้านล่างสำหรับแนวคิดที่ดีขึ้นเกี่ยวกับวิธีการทำงานทั้งหมด
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>ตัวอย่าง: มือถือ แท็บเล็ต เดสก์ท็อป
สร้างจากตัวอย่างก่อนหน้านี้ด้วยการสร้างเค้าโครงแบบไดนามิกและทรงพลังยิ่งขึ้นด้วย.col-sm-*คลาส แท็บเล็ต
.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>ตัวอย่าง: การตัดคอลัมน์
หากวางมากกว่า 12 คอลัมน์ภายในแถวเดียว กลุ่มของคอลัมน์พิเศษแต่ละกลุ่มจะรวมเป็นหนึ่งหน่วยในบรรทัดใหม่
.col-xs-9
.col-xs-4
ตั้งแต่ 9 + 4 = 13 > 12 div ทั้ง 4 คอลัมน์นี้จะถูกรวมเข้ากับบรรทัดใหม่เป็นหน่วยที่ต่อเนื่องกัน
ตั้งแต่ 9 + 4 = 13 > 12 div ทั้ง 4 คอลัมน์นี้จะถูกรวมเข้ากับบรรทัดใหม่เป็นหน่วยที่ต่อเนื่องกัน
.col-xs-6
คอลัมน์ที่ตามมาจะดำเนินต่อไปในบรรทัดใหม่
คอลัมน์ที่ตามมาจะดำเนินต่อไปในบรรทัดใหม่
<div class="row">
<div class="col-xs-9">.col-xs-9</div>
<div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>รีเซ็ตคอลัมน์ตอบสนอง
ด้วยกริดสี่ระดับที่พร้อมใช้งาน คุณจะต้องพบกับปัญหาที่คอลัมน์ของคุณไม่ชัดเจนในบางจุด เนื่องจากอันหนึ่งสูงกว่าอีกอันหนึ่ง ในการแก้ไขปัญหานั้น ให้ใช้ a .clearfixและคลาสยูทิลิตี้ที่ตอบสนอง ของเรา ร่วมกัน
.col-xs-6 .col-sm-3
ปรับขนาดวิวพอร์ตของคุณหรือดูตัวอย่างในโทรศัพท์ของคุณ
ปรับขนาดวิวพอร์ตของคุณหรือดูตัวอย่างในโทรศัพท์ของคุณ
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>นอกเหนือจากการล้างคอลัมน์ที่จุดสั่งหยุดที่ตอบสนองแล้ว คุณอาจต้องรีเซ็ตออฟเซ็ต ผลัก หรือดึง ดูการดำเนินการนี้ในตัวอย่างกริด
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>ถอดรางน้ำ
นำรางน้ำออกจากแถวและเป็นคอลัมน์ของ.row-no-guttersชั้นเรียน
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
<div class="row row-no-gutters">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>คอลัมน์ออฟเซ็ต
ย้ายคอลัมน์ไปทางขวาโดยใช้.col-md-offset-*คลาส ชั้นเรียนเหล่านี้เพิ่มระยะขอบด้านซ้ายของคอลัมน์ทีละ*คอลัมน์ ตัวอย่างเช่น.col-md-offset-4ย้าย.col-md-4มากกว่าสี่คอลัมน์
.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>คุณยังสามารถแทนที่ออฟเซ็ตจากระดับกริดที่ต่ำกว่าด้วย.col-*-offset-0คลาส
<div class="row">
<div class="col-xs-6 col-sm-4">
</div>
<div class="col-xs-6 col-sm-4">
</div>
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
</div>
</div>เสาทำรัง
หากต้องการซ้อนเนื้อหาของคุณด้วยกริดเริ่มต้น ให้เพิ่มคอลัมน์ใหม่.rowและชุดของ.col-sm-*คอลัมน์ภายในคอลัมน์ที่มี.col-sm-*อยู่ แถวที่ซ้อนกันควรมีชุดของคอลัมน์ที่รวมกันได้ไม่เกิน 12 คอลัมน์ (คุณไม่จำเป็นต้องใช้คอลัมน์ที่มีอยู่ทั้งหมด 12 คอลัมน์)
ระดับ 1: .col-sm-9
ระดับ 2: .col-xs-8 .col-sm-6
ระดับ 2: .col-xs-4 .col-sm-6
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>การเรียงลำดับคอลัมน์
เปลี่ยนลำดับของคอลัมน์กริดในตัวของเราด้วย.col-md-push-*และ.col-md-pull-*ปรับเปลี่ยนคลาสได้อย่างง่ายดาย
.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>มิกซ์อินและตัวแปรน้อยลง
นอกเหนือจากคลาสกริดที่สร้างไว้ล่วงหน้าสำหรับเลย์เอาต์ที่รวดเร็ว Bootstrap ยังมีตัวแปร Less และมิกซ์อินเพื่อสร้างเลย์เอาต์ที่เรียบง่ายและมีความหมายของคุณเองอย่างรวดเร็ว
ตัวแปร
ตัวแปรกำหนดจำนวนคอลัมน์ ความกว้างของรางน้ำ และจุดสอบถามสื่อที่จะเริ่มต้นคอลัมน์แบบลอย เราใช้สิ่งเหล่านี้เพื่อสร้างคลาสกริดที่กำหนดไว้ล่วงหน้าที่บันทึกไว้ด้านบน เช่นเดียวกับมิกซ์อินแบบกำหนดเองที่แสดงด้านล่าง
@grid-columns: 12;
@grid-gutter-width: 30px;
@grid-float-breakpoint: 768px;มิกซ์อิน
ใช้มิกซ์อินร่วมกับตัวแปรกริดเพื่อสร้าง CSS เชิงความหมายสำหรับคอลัมน์กริดแต่ละคอลัมน์
// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
// Then clear the floated columns
.clearfix();
@media (min-width: @screen-sm-min) {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
// Negative margin nested rows out to align the content of columns
.row {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
}
// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @grid-float-breakpoint) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-sm-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the small column offsets
.make-sm-column-offset(@columns) {
@media (min-width: @screen-sm-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-push(@columns) {
@media (min-width: @screen-sm-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-pull(@columns) {
@media (min-width: @screen-sm-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-md-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the medium column offsets
.make-md-column-offset(@columns) {
@media (min-width: @screen-md-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-md-column-push(@columns) {
@media (min-width: @screen-md-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-md-column-pull(@columns) {
@media (min-width: @screen-md-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-lg-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the large column offsets
.make-lg-column-offset(@columns) {
@media (min-width: @screen-lg-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-push(@columns) {
@media (min-width: @screen-lg-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-pull(@columns) {
@media (min-width: @screen-lg-min) {
right: percentage((@columns / @grid-columns));
}
}ตัวอย่างการใช้งาน
คุณสามารถแก้ไขตัวแปรให้เป็นค่าที่คุณกำหนดเอง หรือเพียงแค่ใช้มิกซ์อินกับค่าเริ่มต้นของพวกมัน ต่อไปนี้คือตัวอย่างการใช้การตั้งค่าเริ่มต้นเพื่อสร้างเค้าโครงแบบสองคอลัมน์โดยมีช่องว่างระหว่าง
.wrapper {
.make-row();
}
.content-main {
.make-lg-column(8);
}
.content-secondary {
.make-lg-column(3);
.make-lg-column-offset(1);
}<div class="wrapper">
<div class="content-main">...</div>
<div class="content-secondary">...</div>
</div>วิชาการพิมพ์
หัวเรื่อง
มีหัวเรื่อง HTML ทั้งหมด<h1>ผ่าน<h6>, .h1ผ่าน.h6ชั้นเรียนได้เช่นกัน สำหรับเมื่อคุณต้องการจับคู่รูปแบบตัวอักษรของหัวเรื่อง แต่ยังต้องการให้ข้อความของคุณแสดงแบบอินไลน์
ชั่วโมง1. Bootstrap หัวเรื่อง |
เซมิโบลด์ 36px |
ชั่วโมง2. Bootstrap หัวเรื่อง |
Semibold 30px |
ชั่วโมง3. Bootstrap หัวเรื่อง |
เซมิโบลด์ 24px |
ชั่วโมง4. Bootstrap หัวเรื่อง |
เซมิโบลด์ 18px |
h5. Bootstrap หัวเรื่อง |
เซมิโบลด์ 14px |
h6. Bootstrap หัวเรื่อง |
เซมิโบลด์ 12px |
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>สร้างข้อความรองที่เบากว่าในหัวข้อใดก็ได้ด้วย<small>แท็กทั่วไปหรือใน.smallชั้นเรียน
ชั่วโมง1. Bootstrap หัวเรื่องข้อความรอง |
ชั่วโมง2. Bootstrap หัวเรื่องข้อความรอง |
ชั่วโมง3. Bootstrap หัวเรื่องข้อความรอง |
ชั่วโมง4. Bootstrap หัวเรื่องข้อความรอง |
h5. Bootstrap หัวเรื่องข้อความรอง |
h6. Bootstrap หัวเรื่องข้อความรอง |
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>สำเนาร่างกาย
ค่าเริ่มต้นทั่วโลกของ Bootstrap font-sizeคือ14pxโดยมีค่าline-heightเท่ากับ1.428 สิ่งนี้ใช้กับ<body>วรรคและทั้งหมด นอกจากนี้<p>(ย่อหน้า) ได้รับระยะขอบด้านล่างครึ่งหนึ่งของความสูงบรรทัดที่คำนวณ (10px โดยค่าเริ่มต้น)
Nullam quis risus eget urna mollis ornare vel eu leo Cum sociis natoque penatibus และ magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies ยานพาหนะ
Cum sociis natoque penatibus และ magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est ไม่ใช่ commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit Donec ullamcorper nulla non metus auctor fringilla.
Maecenas sed diam eget risus varius blandit นั่ง amet non magna. Donec id elit non mi porta gravida ที่ eget metus Duis mollis, est ไม่ใช่ commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit
<p>...</p>สำเนาเนื้อตะกั่ว
ทำให้ย่อหน้าโดดเด่นด้วยการ.leadเพิ่ม
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<p class="lead">...</p>สร้างด้วย Less
มาตราส่วนการพิมพ์ขึ้นอยู่กับตัวแปร Less สองตัวในvariables.less : @font-size-baseและ @line-height-baseอันแรกคือขนาดฟอนต์พื้นฐานที่ใช้ตลอด และอันที่สองคือความสูงของบรรทัดฐาน เราใช้ตัวแปรเหล่านั้นและคณิตศาสตร์ง่ายๆ เพื่อสร้างระยะขอบ ช่องว่างภายใน และความสูงของเส้นทุกประเภทของเราและอีกมากมาย ปรับแต่งและ Bootstrap ปรับ
องค์ประกอบข้อความแบบอินไลน์
ข้อความที่ทำเครื่องหมาย
สำหรับการเน้นข้อความที่รันเนื่องจากความเกี่ยวข้องในบริบทอื่น ให้ใช้<mark>แท็ก
คุณสามารถใช้แท็กเครื่องหมายเพื่อไฮไลท์ข้อความ.
You can use the mark tag to <mark>highlight</mark> text.ข้อความที่ถูกลบ
สำหรับการระบุบล็อคข้อความที่ถูกลบไปแล้ว ให้ใช้<del>แท็ก
ข้อความบรรทัดนี้มีขึ้นเพื่อเป็นข้อความที่ถูกลบ
<del>This line of text is meant to be treated as deleted text.</del>ข้อความขีดทับ
สำหรับการระบุกลุ่มข้อความที่ไม่เกี่ยวข้องอีกต่อไป ให้ใช้<s>แท็ก
ข้อความบรรทัดนี้มีไว้เพื่อให้ถือว่าไม่ถูกต้องอีกต่อไป
<s>This line of text is meant to be treated as no longer accurate.</s>แทรกข้อความ
สำหรับการระบุส่วนเพิ่มเติมในเอกสารให้ใช้<ins>แท็ก
ข้อความบรรทัดนี้มีขึ้นเพื่อใช้เป็นส่วนเสริมของเอกสาร
<ins>This line of text is meant to be treated as an addition to the document.</ins>ข้อความที่ขีดเส้นใต้
หากต้องการขีดเส้นใต้ข้อความให้ใช้<u>แท็ก
ข้อความบรรทัดนี้จะแสดงเป็นขีดเส้นใต้
<u>This line of text will render as underlined</u>ใช้แท็กเน้นเริ่มต้นของ HTML ที่มีสไตล์น้ำหนักเบา
ข้อความขนาดเล็ก
สำหรับการไม่เน้นข้อความในบรรทัดหรือบล็อกข้อความ ให้ใช้<small>แท็กเพื่อตั้งค่าข้อความที่ขนาดพาเรนต์ 85% องค์ประกอบส่วนหัวจะได้รับองค์ประกอบที่font-sizeซ้อนกัน เป็นของตัวเอง<small>
หรือคุณอาจใช้องค์ประกอบแบบอินไลน์.smallแทนที่<small>.
ข้อความบรรทัดนี้มีขึ้นเพื่อเป็นการพิมพ์ที่ดี
<small>This line of text is meant to be treated as fine print.</small>ตัวหนา
สำหรับเน้นตัวอย่างข้อความที่มีน้ำหนักแบบอักษรที่หนักกว่า
ตัวอย่างข้อความต่อไปนี้จะ แสดงเป็นข้อความ ตัวหนา
<strong>rendered as bold text</strong>ตัวเอียง
สำหรับเน้นตัวอย่างข้อความด้วยตัวเอียง
ตัวอย่างข้อความต่อไปนี้จะ แสดงเป็นข้อความ ตัวเอียง
<em>rendered as italicized text</em>องค์ประกอบสำรอง
รู้สึกอิสระที่จะใช้<b>และ<i>ใน HTML5 <b>มีขึ้นเพื่อเน้นคำหรือวลีโดยไม่แสดงความสำคัญเพิ่มเติม ในขณะที่<i>ส่วนใหญ่ใช้สำหรับเสียง คำศัพท์ทางเทคนิค ฯลฯ
คลาสการจัดตำแหน่ง
ปรับข้อความใหม่เป็นส่วนประกอบได้อย่างง่ายดายด้วยคลาสการจัดตำแหน่งข้อความ
ข้อความชิดซ้าย
ข้อความที่จัดกึ่งกลาง
ข้อความชิดขวา
ข้อความที่มีเหตุผล
ไม่มีข้อความตัด
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>คลาสการแปลงร่าง
แปลงข้อความในส่วนประกอบด้วยคลาสการใช้อักษรตัวพิมพ์ใหญ่
ข้อความตัวพิมพ์เล็ก
ข้อความตัวพิมพ์ใหญ่
ข้อความตัวพิมพ์ใหญ่
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>ตัวย่อ
การนำ<abbr>องค์ประกอบ HTML ไปใช้อย่างมีสไตล์สำหรับตัวย่อและตัวย่อเพื่อแสดงเวอร์ชันขยายเมื่อวางเมาส์เหนือ ตัวย่อที่มีtitleแอตทริบิวต์จะมีขอบด้านล่างเป็นเส้นประสีอ่อนและเคอร์เซอร์ความช่วยเหลือเมื่อวางเมาส์เหนือ ซึ่งให้บริบทเพิ่มเติมเกี่ยวกับโฮเวอร์และสำหรับผู้ใช้เทคโนโลยีอำนวยความสะดวก
ตัวย่อพื้นฐาน
ตัวย่อของแอตทริบิวต์ word คือattr
<abbr title="attribute">attr</abbr>อักษรย่อ
เพิ่ม.initialismคำย่อสำหรับขนาดตัวอักษรที่เล็กกว่าเล็กน้อย
HTMLเป็นสิ่งที่ดีที่สุดตั้งแต่หั่นขนมปัง
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>ที่อยู่
แสดงข้อมูลติดต่อสำหรับบรรพบุรุษที่ใกล้ที่สุดหรือทั้งหน่วยงาน คง รูปแบบไว้โดยลงท้ายทุกบรรทัดด้วย<br>.
Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 ชื่อ-นามสกุล
[email protected]
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 ชื่อ-นามสกุล
[email protected]
<address>
<strong>Twitter, Inc.</strong><br>
1355 Market Street, Suite 900<br>
San Francisco, CA 94103<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">[email protected]</a>
</address>Blockquotes
สำหรับการอ้างอิงบล็อกของเนื้อหาจากแหล่งอื่นภายในเอกสารของคุณ
blockquote เริ่มต้น
ล้อม<blockquote>รอบHTML ใด ๆ เป็นใบเสนอราคา สำหรับราคาที่ตรงไปตรงมา เราขอแนะนำ<p>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. โลเรม อิปซัม โดลอร์ จำนวนเต็ม posuere erat ante
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>ตัวเลือก Blockquote
การเปลี่ยนแปลงรูปแบบและเนื้อหาสำหรับรูปแบบที่เรียบง่ายใน<blockquote>มาตรฐาน
การตั้งชื่อแหล่งที่มา
เพิ่ม<footer>เพื่อระบุแหล่งที่มา ตัดชื่องานต้นฉบับใน<cite>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. โลเรม อิปซัม โดลอร์ จำนวนเต็ม posuere erat ante
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>จอแสดงผลสำรอง
เพิ่ม.blockquote-reverseสำหรับ blockquote ที่มีเนื้อหาจัดชิดขวา
<blockquote class="blockquote-reverse">
...
</blockquote>รายการ
ไม่เรียงลำดับ
รายการของรายการที่ไม่สำคัญอย่างชัดเจน
- ลอเรม อิปซัม ดอเลอร์ ซิท เอเม็ท
- Consectetur adipiscing elit
- จำนวนเต็ม โมเลสตี้ โลเร็ม ที่ มาสสา
- สิ่งอำนวยความสะดวกใน pretium nisl aliquet
- นุลลา โวลุตพัฒน์ อะลิควัม เวลิต
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat ที่
- Faucibus porta lacus fringilla vel
- อิเนียนนั่งเอรัต erat nunc
- Eget porttitor lorem
<ul>
<li>...</li>
</ul>สั่งซื้อ
รายการสินค้าที่การสั่งซื้อมีความ สำคัญ อย่างชัดเจน
- ลอเรม อิปซัม ดอเลอร์ ซิท เอเม็ท
- Consectetur adipiscing elit
- จำนวนเต็ม โมเลสตี้ โลเร็ม ที่ มาสสา
- สิ่งอำนวยความสะดวกใน pretium nisl aliquet
- นุลลา โวลุตพัฒน์ อะลิควัม เวลิต
- Faucibus porta lacus fringilla vel
- อิเนียนนั่งเอรัต erat nunc
- Eget porttitor lorem
<ol>
<li>...</li>
</ol>ไม่มีสไตล์
ลบค่าเริ่มต้นlist-styleและระยะขอบซ้ายของรายการ (รายการย่อยเท่านั้น) ใช้ได้เฉพาะกับรายการย่อยในทันทีซึ่งหมายความว่าคุณจะต้องเพิ่มคลาสสำหรับรายการที่ซ้อนกันด้วยเช่นกัน
- ลอเรม อิปซัม ดอเลอร์ ซิท เอเม็ท
- Consectetur adipiscing elit
- จำนวนเต็ม โมเลสตี้ โลเร็ม ที่ มาสสา
- สิ่งอำนวยความสะดวกใน pretium nisl aliquet
- นุลลา โวลุตพัฒน์ อะลิควัม เวลิต
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat ที่
- Faucibus porta lacus fringilla vel
- อิเนียนนั่งเอรัต erat nunc
- Eget porttitor lorem
<ul class="list-unstyled">
<li>...</li>
</ul>อินไลน์
วางรายการทั้งหมดไว้ในบรรทัดเดียวด้วยdisplay: inline-block;และช่องว่างภายในบางส่วน
- ลอเรม อิปซัม
- Phasellus iaculis
- นุลลา โวลุตพัฒน์
<ul class="list-inline">
<li>...</li>
</ul>คำอธิบาย
รายการคำศัพท์พร้อมคำอธิบายที่เกี่ยวข้อง
- รายการคำอธิบาย
- รายการคำอธิบายเหมาะสำหรับการกำหนดเงื่อนไข
- อุยมอด
- ขนถ่าย id ligula porta felis euismod semper eget lacinia odio sem nec elit
- Donec id elit non mi porta gravida ที่ eget metus
- Malesuada porta
- Etiam porta sem malesuada magna มอลลิส euismod
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>คำอธิบายแนวนอน
จัดทำข้อกำหนดและคำอธิบาย<dl>เรียงต่อกัน เริ่มต้นแบบเรียงซ้อนเหมือนค่าเริ่มต้น<dl>แต่เมื่อแถบนำทางขยาย ให้ทำสิ่งเหล่านี้
- รายการคำอธิบาย
- รายการคำอธิบายเหมาะสำหรับการกำหนดเงื่อนไข
- อุยมอด
- ขนถ่าย id ligula porta felis euismod semper eget lacinia odio sem nec elit
- Donec id elit non mi porta gravida ที่ eget metus
- Malesuada porta
- Etiam porta sem malesuada magna มอลลิส euismod
- เฟลิส euismod semper eget lacinia
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo นั่ง amet risus
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>ตัดทอนอัตโนมัติ
รายการคำอธิบายแนวนอนจะตัดคำที่ยาวเกินกว่าจะใส่ลงในคอลัมน์ด้านซ้ายtext-overflowด้วย ในวิวพอร์ตที่แคบลง พวกเขาจะเปลี่ยนเป็นเลย์เอาต์แบบเรียงซ้อนเริ่มต้น
รหัส
อินไลน์
ตัดข้อมูลโค้ดแบบอินไลน์ด้วย<code>.
ตัวอย่างเช่น
<section>ควรห่อแบบอินไลน์
For example, <code><section></code> should be wrapped as inline.ข้อมูลผู้ใช้
ใช้<kbd>เพื่อระบุอินพุตที่ปกติแล้วจะป้อนผ่านแป้นพิมพ์
หากต้องการเปลี่ยนไดเร็กทอรี ให้พิมพ์
cdตามด้วยชื่อของไดเร็กทอรี
หากต้องการแก้ไขการตั้งค่า ให้กด ctrl + ,
หากต้องการแก้ไขการตั้งค่า ให้กด ctrl + ,
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>บล็อกพื้นฐาน
ใช้<pre>สำหรับโค้ดหลายบรรทัด อย่าลืมหลีกเลี่ยงวงเล็บเหลี่ยมในโค้ดเพื่อการเรนเดอร์ที่เหมาะสม
<p>ตัวอย่างข้อความที่นี่...</p>
<pre><p>Sample text here...</p></pre>คุณสามารถเลือกเพิ่ม.pre-scrollableคลาส ซึ่งจะตั้งค่าความสูงสูงสุด 350px และให้แถบเลื่อนแกน y
ตัวแปร
สำหรับการระบุตัวแปรให้ใช้<var>แท็ก
y = ม. x + b
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>ผลลัพธ์ตัวอย่าง
สำหรับการระบุบล็อคเอาต์พุตตัวอย่างจากโปรแกรม ให้ใช้<samp>แท็ก
ข้อความนี้มีขึ้นเพื่อใช้เป็นตัวอย่างผลลัพธ์จากโปรแกรมคอมพิวเตอร์
<samp>This text is meant to be treated as sample output from a computer program.</samp>โต๊ะ
ตัวอย่างพื้นฐาน
สำหรับการจัดรูปแบบพื้นฐาน—ช่องว่างภายในแบบเบาและเฉพาะตัวแบ่งแนวนอน—ให้เพิ่มคลาสฐาน.tableให้กับ<table>ไฟล์ . อาจดูซ้ำซากจำเจ แต่ด้วยการใช้ตารางอย่างแพร่หลายสำหรับปลั๊กอินอื่นๆ เช่น ปฏิทินและเครื่องมือเลือกวันที่ เราจึงเลือกที่จะแยกสไตล์ตารางที่กำหนดเองของเราออก
| # | ชื่อจริง | นามสกุล | ชื่อผู้ใช้ |
|---|---|---|---|
| 1 | เครื่องหมาย | อ็อตโต | @mdo |
| 2 | เจคอบ | ธอร์นตัน | @อ้วน |
| 3 | แลร์รี่ | นก | @ทวิตเตอร์ |
<table class="table">
...
</table>แถวลาย
ใช้.table-stripedเพื่อเพิ่มลายทางม้าลายให้กับแถวของตารางภายในไฟล์<tbody>.
ความเข้ากันได้ข้ามเบราว์เซอร์
ตารางลายถูกกำหนดสไตล์โดยใช้:nth-childตัวเลือก CSS ซึ่งไม่มีใน Internet Explorer 8
| # | ชื่อจริง | นามสกุล | ชื่อผู้ใช้ |
|---|---|---|---|
| 1 | เครื่องหมาย | อ็อตโต | @mdo |
| 2 | เจคอบ | ธอร์นตัน | @อ้วน |
| 3 | แลร์รี่ | นก | @ทวิตเตอร์ |
<table class="table table-striped">
...
</table>ขอบโต๊ะ
เพิ่ม.table-borderedเส้นขอบทุกด้านของตารางและเซลล์
| # | ชื่อจริง | นามสกุล | ชื่อผู้ใช้ |
|---|---|---|---|
| 1 | เครื่องหมาย | อ็อตโต | @mdo |
| 2 | เจคอบ | ธอร์นตัน | @อ้วน |
| 3 | แลร์รี่ | นก | @ทวิตเตอร์ |
<table class="table table-bordered">
...
</table>เลื่อนแถว
เพิ่ม.table-hoverเพื่อเปิดใช้งานสถานะโฮเวอร์บนแถวของตารางภายในไฟล์<tbody>.
| # | ชื่อจริง | นามสกุล | ชื่อผู้ใช้ |
|---|---|---|---|
| 1 | เครื่องหมาย | อ็อตโต | @mdo |
| 2 | เจคอบ | ธอร์นตัน | @อ้วน |
| 3 | แลร์รี่ | นก | @ทวิตเตอร์ |
<table class="table table-hover">
...
</table>โต๊ะควบแน่น
เพิ่ม.table-condensedเพื่อทำให้ตารางมีขนาดเล็กลงโดยการตัดเซลล์บุรองไว้ครึ่งหนึ่ง
| # | ชื่อจริง | นามสกุล | ชื่อผู้ใช้ |
|---|---|---|---|
| 1 | เครื่องหมาย | อ็อตโต | @mdo |
| 2 | เจคอบ | ธอร์นตัน | @อ้วน |
| 3 | ลาร์รีเดอะเบิร์ด | @ทวิตเตอร์ | |
<table class="table table-condensed">
...
</table>ชั้นเรียนตามบริบท
ใช้คลาสตามบริบทเพื่อระบายสีแถวตารางหรือแต่ละเซลล์
| ระดับ | คำอธิบาย |
|---|---|
.active |
ใช้สีโฮเวอร์กับแถวหรือเซลล์ที่ต้องการ |
.success |
บ่งบอกถึงความสำเร็จหรือการกระทำในเชิงบวก |
.info |
บ่งชี้การเปลี่ยนแปลงหรือการกระทำข้อมูลที่เป็นกลาง |
.warning |
ระบุคำเตือนที่อาจต้องให้ความสนใจ |
.danger |
บ่งบอกถึงการกระทำที่เป็นอันตรายหรืออาจเป็นลบ |
| # | ส่วนหัวของคอลัมน์ | ส่วนหัวของคอลัมน์ | ส่วนหัวของคอลัมน์ |
|---|---|---|---|
| 1 | เนื้อหาคอลัมน์ | เนื้อหาคอลัมน์ | เนื้อหาคอลัมน์ |
| 2 | เนื้อหาคอลัมน์ | เนื้อหาคอลัมน์ | เนื้อหาคอลัมน์ |
| 3 | เนื้อหาคอลัมน์ | เนื้อหาคอลัมน์ | เนื้อหาคอลัมน์ |
| 4 | เนื้อหาคอลัมน์ | เนื้อหาคอลัมน์ | เนื้อหาคอลัมน์ |
| 5 | เนื้อหาคอลัมน์ | เนื้อหาคอลัมน์ | เนื้อหาคอลัมน์ |
| 6 | เนื้อหาคอลัมน์ | เนื้อหาคอลัมน์ | เนื้อหาคอลัมน์ |
| 7 | เนื้อหาคอลัมน์ | เนื้อหาคอลัมน์ | เนื้อหาคอลัมน์ |
| 8 | เนื้อหาคอลัมน์ | เนื้อหาคอลัมน์ | เนื้อหาคอลัมน์ |
| 9 | เนื้อหาคอลัมน์ | เนื้อหาคอลัมน์ | เนื้อหาคอลัมน์ |
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>ถ่ายทอดความหมายสู่เทคโนโลยีอำนวยความสะดวก
การใช้สีเพื่อเพิ่มความหมายให้กับแถวของตารางหรือแต่ละเซลล์เป็นเพียงการแสดงภาพเท่านั้น ซึ่งจะไม่ถูกถ่ายทอดไปยังผู้ใช้เทคโนโลยีอำนวยความสะดวก เช่น โปรแกรมอ่านหน้าจอ ตรวจสอบให้แน่ใจว่าข้อมูลที่แสดงด้วยสีนั้นชัดเจนจากตัวเนื้อหาเอง (ข้อความที่มองเห็นได้ในแถว/เซลล์ของตารางที่เกี่ยวข้อง) หรือรวมไว้ด้วยวิธีการอื่น เช่น ข้อความเพิ่มเติมที่ซ่อนอยู่ใน.sr-onlyชั้นเรียน
ตารางตอบสนอง
สร้างตารางที่ตอบสนองโดยการใส่ส่วนใดก็ได้เพื่อให้เลื่อนในแนวนอนบนอุปกรณ์ขนาดเล็ก (ต่ำกว่า 768px .table) .table-responsiveเมื่อดูบนสิ่งที่กว้างกว่า 768px คุณจะไม่เห็นความแตกต่างในตารางเหล่านี้
การตัด/การตัดในแนวตั้ง
ตารางที่ปรับเปลี่ยนตามอุปกรณ์ใช้ประโยชน์จากoverflow-y: hiddenซึ่งตัดเนื้อหาใดๆ ที่เกินขอบด้านล่างหรือขอบด้านบนของตาราง โดยเฉพาะอย่างยิ่งสิ่งนี้สามารถตัดเมนูแบบเลื่อนลงและวิดเจ็ตของบุคคลที่สามอื่น ๆ
Firefox และ fieldsets
Firefox มีรูปแบบชุดฟิลด์ที่น่าอึดอัดใจwidthซึ่งขัดขวางตารางตอบสนอง สิ่งนี้ไม่สามารถแทนที่ได้หากไม่มีแฮ็คเฉพาะของ Firefox ที่เราไม่ได้ให้ไว้ใน Bootstrap:
@-moz-document url-prefix() {
fieldset { display: table-cell; }
}สำหรับข้อมูลเพิ่มเติม อ่านคำตอบ Stack Overflow
| # | หัวตาราง | หัวตาราง | หัวตาราง | หัวตาราง | หัวตาราง | หัวตาราง |
|---|---|---|---|---|---|---|
| 1 | เซลล์ตาราง | เซลล์ตาราง | เซลล์ตาราง | เซลล์ตาราง | เซลล์ตาราง | เซลล์ตาราง |
| 2 | เซลล์ตาราง | เซลล์ตาราง | เซลล์ตาราง | เซลล์ตาราง | เซลล์ตาราง | เซลล์ตาราง |
| 3 | เซลล์ตาราง | เซลล์ตาราง | เซลล์ตาราง | เซลล์ตาราง | เซลล์ตาราง | เซลล์ตาราง |
| # | หัวตาราง | หัวตาราง | หัวตาราง | หัวตาราง | หัวตาราง | หัวตาราง |
|---|---|---|---|---|---|---|
| 1 | เซลล์ตาราง | เซลล์ตาราง | เซลล์ตาราง | เซลล์ตาราง | เซลล์ตาราง | เซลล์ตาราง |
| 2 | เซลล์ตาราง | เซลล์ตาราง | เซลล์ตาราง | เซลล์ตาราง | เซลล์ตาราง | เซลล์ตาราง |
| 3 | เซลล์ตาราง | เซลล์ตาราง | เซลล์ตาราง | เซลล์ตาราง | เซลล์ตาราง | เซลล์ตาราง |
<div class="table-responsive">
<table class="table">
...
</table>
</div>แบบฟอร์ม
ตัวอย่างพื้นฐาน
การควบคุมแบบฟอร์มแต่ละรายการจะได้รับสไตล์สากลบางส่วนโดยอัตโนมัติ ข้อความทั้งหมด<input>, <textarea>, และ<select>องค์ประกอบที่มี.form-controlถูกกำหนดเป็นค่าwidth: 100%;เริ่มต้น ติด ฉลากและส่วนควบคุม.form-groupเพื่อให้มีระยะห่างที่เหมาะสมที่สุด
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>อย่าผสมกลุ่มแบบฟอร์มกับกลุ่มอินพุต
อย่าผสมกลุ่มแบบฟอร์มกับกลุ่มอินพุตโดยตรง ให้ซ้อนกลุ่มอินพุตภายในกลุ่มแบบฟอร์มแทน
แบบฟอร์มอินไลน์
เพิ่ม.form-inlineในแบบฟอร์มของคุณ (ซึ่งไม่จำเป็นต้องเป็น<form>) สำหรับการควบคุมแบบชิดซ้ายและแบบอินไลน์บล็อก ใช้ได้เฉพาะกับฟอร์มภายในวิวพอร์ตที่มีความกว้างอย่างน้อย 768px
อาจต้องใช้ความกว้างที่กำหนดเอง
อินพุตและตัวเลือกwidth: 100%;ถูกนำไปใช้โดยค่าเริ่มต้นใน Bootstrap ภายในแบบฟอร์มอินไลน์ เราตั้งค่าใหม่เพื่อwidth: auto;ให้การควบคุมหลายรายการอยู่ในบรรทัดเดียวกัน อาจต้องใช้ความกว้างที่กำหนดเองเพิ่มเติมทั้งนี้ขึ้นอยู่กับเค้าโครงของคุณ
เพิ่มป้ายกำกับเสมอ
โปรแกรมอ่านหน้าจอจะมีปัญหากับฟอร์มของคุณ หากคุณไม่ได้ใส่ป้ายกำกับสำหรับทุกอินพุต สำหรับแบบฟอร์มอินไลน์เหล่านี้ คุณสามารถซ่อนป้ายกำกับโดยใช้.sr-onlyชั้นเรียน aria-labelมีวิธีการอื่นในการจัดเตรียมฉลากสำหรับเทคโนโลยีอำนวย ความสะดวก เช่นแอตทริบิวต์aria-labelledbyหรือ titleหากไม่มีสิ่งเหล่านี้ โปรแกรมอ่านหน้าจออาจหันไปใช้placeholderแอตทริบิวต์ หากมี แต่โปรดทราบว่าplaceholderไม่แนะนำให้ใช้แทนวิธีการติดฉลากอื่นๆ
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form><form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form><form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">.00</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Transfer cash</button>
</form>รูปแบบแนวนอน
ใช้คลาสกริดที่กำหนดไว้ล่วงหน้าของ Bootstrap เพื่อจัดแนวป้ายชื่อและกลุ่มของตัวควบคุมแบบฟอร์มในเค้าโครงแนวนอนโดยเพิ่ม.form-horizontalลงในแบบฟอร์ม (ซึ่งไม่จำเป็นต้องเป็น<form>) การทำเช่นนี้จะเปลี่ยน.form-groupการทำงานเป็นแถวกริด ดังนั้นจึงไม่จำเป็นต้องใช้.row.
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>การควบคุมที่รองรับ
ตัวอย่างของตัวควบคุมฟอร์มมาตรฐานที่สนับสนุนในเค้าโครงแบบฟอร์มตัวอย่าง
อินพุต
ตัวควบคุมฟอร์มทั่วไปส่วนใหญ่ ฟิลด์ป้อนข้อมูลแบบข้อความ รวมการสนับสนุน HTML5 ทุกประเภท: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, , telและcolor
ต้องการประกาศประเภท
อินพุตจะถูกจัดรูปแบบอย่างสมบูรณ์ก็ต่อเมื่อtypeมีการประกาศอย่างถูกต้องเท่านั้น
<input type="text" class="form-control" placeholder="Text input">กลุ่มอินพุต
หากต้องการเพิ่มข้อความหรือปุ่มแบบรวมก่อนและ/หรือหลังแบบข้อความ<input>ให้ ตรวจ สอบส่วนประกอบกลุ่มอินพุต
Textarea
การควบคุมแบบฟอร์มที่รองรับข้อความหลายบรรทัด เปลี่ยนrowsแอตทริบิวต์ตามความจำเป็น
<textarea class="form-control" rows="3"></textarea>ช่องทำเครื่องหมายและวิทยุ
ช่องทำเครื่องหมายมีไว้สำหรับเลือกหนึ่งตัวเลือกหรือหลายตัวเลือกในรายการ ในขณะที่วิทยุมีไว้สำหรับเลือกตัวเลือกหนึ่งตัวเลือกจากหลายตัวเลือก
รองรับช่องทำเครื่องหมายและวิทยุที่ปิดใช้งาน แต่เพื่อให้เคอร์เซอร์ "ไม่อนุญาต" บนโฮเวอร์ของ<label>พาเรนต์ คุณจะต้องเพิ่ม.disabledคลาสใน พาเรน ต์.radio, .radio-inline, .checkbox, หรือ.checkbox-inline
ค่าเริ่มต้น (ซ้อน)
<div class="checkbox">
<label>
<input type="checkbox" value="">
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
Option two is disabled
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>ช่องทำเครื่องหมายและวิทยุแบบอินไลน์
ใช้.checkbox-inlineor .radio-inlineกับชุดของช่องทำเครื่องหมายหรือวิทยุสำหรับตัวควบคุมที่ปรากฏในบรรทัดเดียวกัน
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>ช่องทำเครื่องหมายและวิทยุที่ไม่มีข้อความป้ายกำกับ
หากคุณไม่มีข้อความอยู่ภายใน<label>อินพุตจะถูกจัดตำแหน่งตามที่คุณคาดหวัง ขณะนี้ใช้งานได้เฉพาะกับช่องทำเครื่องหมายและวิทยุที่ไม่ใช่แบบอินไลน์ อย่าลืมจัดเตรียมฉลากบางรูปแบบสำหรับเทคโนโลยีอำนวยความสะดวก (เช่น การใช้aria-label)
<div class="checkbox">
<label>
<input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</label>
</div>เลือก
โปรดทราบว่าเมนูเลือกแบบเนทีฟจำนวนมาก เช่น ใน Safari และ Chrome มีมุมมนที่ไม่สามารถแก้ไขได้ผ่านborder-radiusคุณสมบัติ
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>สำหรับ<select>การควบคุมที่มีmultipleแอตทริบิวต์ หลายตัวเลือกจะแสดงตามค่าเริ่มต้น
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>การควบคุมแบบสถิต
เมื่อคุณต้องการวางข้อความธรรมดาถัดจากป้ายชื่อแบบฟอร์มภายในแบบฟอร์ม ให้ใช้.form-control-staticชั้นเรียนในไฟล์<p>.
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static">[email protected]</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</form><form class="form-inline">
<div class="form-group">
<label class="sr-only">Email</label>
<p class="form-control-static">[email protected]</p>
</div>
<div class="form-group">
<label for="inputPassword2" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Confirm identity</button>
</form>สถานะโฟกัส
เราลบoutlineสไตล์เริ่มต้นของตัวควบคุมฟอร์มบางตัวและใช้ a box-shadowแทนสำหรับ:focus.
:focusสถานะสาธิต
ตัวอย่างอินพุตด้านบนใช้สไตล์ที่กำหนดเองในเอกสารประกอบของเราเพื่อแสดง:focusสถานะในไฟล์.form-control.
สถานะคนพิการ
เพิ่มdisabledแอตทริบิวต์บูลีนบนอินพุตเพื่อป้องกันการโต้ตอบของผู้ใช้ อินพุตที่ปิดใช้งานจะสว่างขึ้นและเพิ่มnot-allowedเคอร์เซอร์
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>ชุดฟิลด์สำหรับผู้พิการ
เพิ่มdisabledแอตทริบิวต์เพื่อ<fieldset>ปิดใช้งานการควบคุมทั้งหมดภายใน<fieldset>ครั้งเดียว
คำเตือนเกี่ยวกับฟังก์ชันลิงก์ของ<a>
ตามค่าเริ่มต้น เบราว์เซอร์จะถือว่าตัวควบคุมฟอร์มดั้งเดิมทั้งหมด ( <input>, <select>และ<button>องค์ประกอบ) ภายใน a <fieldset disabled>ถูกปิดใช้งาน ป้องกันไม่ให้มีการโต้ตอบระหว่างแป้นพิมพ์และเมาส์ อย่างไรก็ตาม หากแบบฟอร์มของคุณมี<a ... class="btn btn-*">องค์ประกอบด้วย สิ่งเหล่านี้จะได้รับสไตล์เป็นpointer-events: noneเท่านั้น ตามที่ระบุไว้ในส่วนเกี่ยวกับสถานะปิดใช้งานสำหรับปุ่ม (และโดยเฉพาะในส่วนย่อยสำหรับองค์ประกอบจุดยึด) คุณสมบัติ CSS นี้ยังไม่ได้รับมาตรฐานและไม่ได้รับการสนับสนุนอย่างเต็มที่ใน Opera 18 และต่ำกว่า หรือใน Internet Explorer 11 และได้รับรางวัล ไม่ได้ป้องกันไม่ให้ผู้ใช้แป้นพิมพ์สามารถโฟกัสหรือเปิดใช้งานลิงก์เหล่านี้ได้ เพื่อความปลอดภัย ให้ใช้ JavaScript ที่กำหนดเองเพื่อปิดใช้งานลิงก์ดังกล่าว
ความเข้ากันได้ข้ามเบราว์เซอร์
แม้ว่า Bootstrap จะใช้สไตล์เหล่านี้กับทุกเบราว์เซอร์ แต่ Internet Explorer 11 และต่ำกว่านั้นไม่รองรับdisabledแอตทริบิวต์ในไฟล์<fieldset>. ใช้ JavaScript ที่กำหนดเองเพื่อปิดใช้งาน fieldset ในเบราว์เซอร์เหล่านี้
<form>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Can't check this
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>สถานะอ่านอย่างเดียว
เพิ่มreadonlyแอตทริบิวต์บูลีนบนอินพุตเพื่อป้องกันการแก้ไขค่าของอินพุต อินพุตแบบอ่านอย่างเดียวจะสว่างกว่า (เช่นเดียวกับอินพุตที่ปิดใช้งาน) แต่ยังคงเคอร์เซอร์มาตรฐานไว้
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>ข้อความช่วยเหลือ
ข้อความช่วยเหลือระดับบล็อกสำหรับการควบคุมฟอร์ม
การเชื่อมโยงข้อความช่วยเหลือกับการควบคุมแบบฟอร์ม
ข้อความช่วยเหลือควรเชื่อมโยงอย่างชัดเจนกับตัวควบคุมแบบฟอร์มที่เกี่ยวข้องกับการใช้aria-describedbyแอตทริบิวต์ เพื่อให้แน่ใจว่าเทคโนโลยีอำนวยความสะดวก เช่น โปรแกรมอ่านหน้าจอ จะประกาศข้อความช่วยเหลือนี้เมื่อผู้ใช้โฟกัสหรือเข้าสู่การควบคุม
<label for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>สถานะการตรวจสอบ
Bootstrap มีสไตล์การตรวจสอบสำหรับสถานะข้อผิดพลาด คำเตือน และความสำเร็จบนตัวควบคุมฟอร์ม เพื่อใช้ เพิ่ม.has-warning, .has-errorหรือ.has-successองค์ประกอบหลัก ใดๆ.control-label, .form-controlและ.help-blockภายในองค์ประกอบนั้นจะได้รับรูปแบบการตรวจสอบความถูกต้อง
กำลังถ่ายทอดสถานะการตรวจสอบไปยังเทคโนโลยีอำนวยความสะดวกและผู้ใช้ที่ตาบอดสี
การใช้รูปแบบการตรวจสอบความถูกต้องเหล่านี้เพื่อระบุสถานะของตัวควบคุมฟอร์มจะแสดงเฉพาะการแสดงภาพที่ใช้สีเท่านั้น ซึ่งจะไม่ถูกถ่ายทอดไปยังผู้ใช้เทคโนโลยีอำนวยความสะดวก เช่น โปรแกรมอ่านหน้าจอ หรือผู้ใช้ที่ตาบอดสี
ตรวจสอบให้แน่ใจว่ามีการระบุสถานะอื่นด้วย ตัวอย่างเช่น คุณสามารถใส่คำใบ้เกี่ยวกับสถานะใน<label>ข้อความของตัวควบคุมฟอร์มได้เอง (เช่นเดียวกับในตัวอย่างโค้ดต่อไปนี้) รวมGlyphicon (พร้อมข้อความแสดงแทนที่เหมาะสมโดยใช้.sr-onlyคลาส - ดูตัวอย่าง Glyphicon ) หรือโดยการจัดเตรียมบล็อกข้อความช่วยเหลือเพิ่มเติม โดยเฉพาะสำหรับเทคโนโลยีอำนวยความสะดวก การควบคุมแบบฟอร์มที่ไม่ถูกต้องสามารถกำหนดaria-invalid="true"แอตทริบิวต์ได้
<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
<span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError1">Input with error</label>
<input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxSuccess" value="option1">
Checkbox with success
</label>
</div>
</div>
<div class="has-warning">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxWarning" value="option1">
Checkbox with warning
</label>
</div>
</div>
<div class="has-error">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxError" value="option1">
Checkbox with error
</label>
</div>
</div>พร้อมไอคอนเสริม
คุณยังสามารถเพิ่มไอคอนคำติชมที่เป็นตัวเลือกได้ด้วยการเพิ่ม.has-feedbackและไอคอนด้านขวา
ไอคอนคำติชมใช้งานได้กับ<input class="form-control">องค์ประกอบที่เป็นข้อความเท่านั้น
ไอคอน ป้ายกำกับ และกลุ่มอินพุต
จำเป็นต้องมีการวางตำแหน่งไอคอนคำติชมด้วยตนเองสำหรับอินพุตที่ไม่มีป้ายกำกับ และสำหรับกลุ่มอินพุตที่มีส่วนเสริมทางด้านขวา ขอแนะนำให้คุณระบุป้ายกำกับสำหรับอินพุตทั้งหมดด้วยเหตุผลด้านการเข้าถึง หากคุณต้องการป้องกันไม่ให้มีการแสดงป้ายกำกับ ให้ซ่อนไว้กับ.sr-onlyชั้นเรียน หากคุณต้องทำโดยไม่มีป้ายกำกับ ให้ปรับtopค่าของไอคอนคำติชม สำหรับกลุ่มอินพุต ให้ปรับrightค่าเป็นค่าพิกเซลที่เหมาะสมโดยขึ้นอยู่กับความกว้างของส่วนเสริมของคุณ
ถ่ายทอดความหมายของไอคอนสู่เทคโนโลยีอำนวยความสะดวก
เพื่อให้แน่ใจว่าเทคโนโลยีอำนวยความสะดวก เช่น โปรแกรมอ่านหน้าจอ สื่อความหมายของไอคอนได้อย่างถูกต้อง ควรรวมข้อความที่ซ่อนอยู่เพิ่มเติมใน.sr-onlyชั้นเรียน และเชื่อมโยงอย่างชัดเจนกับตัวควบคุมแบบฟอร์มที่เกี่ยวข้องกับการaria-describedbyใช้ อีกทางหนึ่ง ตรวจสอบให้แน่ใจว่าความหมาย (เช่น ความจริงที่ว่ามีคำเตือนสำหรับฟิลด์ป้อนข้อความเฉพาะ) ถูกถ่ายทอดในรูปแบบอื่น เช่น การเปลี่ยนข้อความของข้อมูลจริงที่<label>เกี่ยวข้องกับตัวควบคุมฟอร์ม
แม้ว่าตัวอย่างต่อไปนี้จะกล่าวถึงสถานะการตรวจสอบความถูกต้องของตัวควบคุมแบบฟอร์มที่เกี่ยวข้องใน<label>ข้อความแล้วก็ตาม เทคนิคข้างต้น (โดยใช้.sr-onlyข้อความ และaria-describedby) ได้รวมไว้เพื่อจุดประสงค์ในการอธิบาย
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
<span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess1">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>ไอคอนเสริมในรูปแบบแนวนอนและอินไลน์
<form class="form-horizontal">
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess3Status" class="sr-only">(success)</span>
</div>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
</div>
</div>
</form><form class="form-inline">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess4">Input with success</label>
<input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess4Status" class="sr-only">(success)</span>
</div>
</form>
<form class="form-inline">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess3">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
</div>
</form>ไอคอนเสริมพร้อม.sr-onlyป้ายกำกับ ที่ซ่อนอยู่
หากคุณใช้.sr-onlyคลาสเพื่อซ่อนตัวควบคุมฟอร์ม<label>(แทนที่จะใช้ตัวเลือกการติดป้ายกำกับอื่น ๆ เช่นaria-labelแอตทริบิวต์) Bootstrap จะปรับตำแหน่งของไอคอนโดยอัตโนมัติเมื่อเพิ่มเข้าไปแล้ว
(ความสำเร็จ)
@
(ความสำเร็จ)
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
<input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>ควบคุมขนาด
กำหนดความสูงโดยใช้คลาสเช่น.input-lgและกำหนดความกว้างโดยใช้คลาสคอลัมน์กริด.col-lg-*เช่น
ขนาดความสูง
สร้างตัวควบคุมฟอร์มที่ยาวขึ้นหรือสั้นลงซึ่งตรงกับขนาดของปุ่ม
<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">
<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>ขนาดกลุ่มแบบฟอร์มแนวนอน
ปรับขนาดป้ายชื่อและตัวควบคุมแบบฟอร์มภายในอย่างรวดเร็วโดย.form-horizontalการเพิ่ม.form-group-lgหรือ.form-group-sm
<form class="form-horizontal">
<div class="form-group form-group-lg">
<label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
</div>
</div>
</form>ขนาดคอลัมน์
ล้อมอินพุตในคอลัมน์กริดหรือองค์ประกอบพาเรนต์ที่กำหนดเองใดๆ เพื่อบังคับใช้ความกว้างที่ต้องการได้อย่างง่ายดาย
<div class="row">
<div class="col-xs-2">
<input type="text" class="form-control" placeholder=".col-xs-2">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder=".col-xs-4">
</div>
</div>ปุ่ม
แท็กปุ่ม
ใช้คลาสปุ่มบนองค์ประกอบ<a>, <button>, หรือ<input>
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">การใช้งานเฉพาะบริบท
แม้ว่าคลาสของปุ่มจะใช้ได้<a>และ<button>องค์ประกอบ แต่<button>รองรับเฉพาะองค์ประกอบภายในคอมโพเนนต์ nav และ navbar ของเรา
ลิงค์ที่ทำหน้าที่เป็นปุ่ม
หาก<a>องค์ประกอบถูกใช้เพื่อทำหน้าที่เป็นปุ่ม – เรียกใช้ฟังก์ชันในหน้า แทนที่จะนำทางไปยังเอกสารหรือส่วนอื่นภายในหน้าปัจจุบัน – องค์ประกอบเหล่านี้ควรได้รับrole="button".
การแสดงผลข้ามเบราว์เซอร์
ตามแนวทางปฏิบัติที่ดีที่สุดเราขอแนะนำให้ใช้<button>องค์ประกอบนี้ทุกครั้งที่ทำได้เพื่อให้แน่ใจว่ามีการเรนเดอร์ข้ามเบราว์เซอร์ที่ตรงกัน
เหนือสิ่งอื่นใด มีจุดบกพร่องใน Firefox <30ที่ป้องกันไม่ให้เราตั้งค่า ปุ่ม line-heightจาก<input>- ซึ่งทำให้ปุ่มเหล่านี้ไม่ตรงกับความสูงของปุ่มอื่นๆ บน Firefox
ตัวเลือก
ใช้คลาสปุ่มที่มีอยู่เพื่อสร้างปุ่มที่มีสไตล์อย่างรวดเร็ว
<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>ถ่ายทอดความหมายสู่เทคโนโลยีอำนวยความสะดวก
การใช้สีเพื่อเพิ่มความหมายให้กับปุ่มเป็นเพียงการแสดงภาพเท่านั้น ซึ่งจะไม่ถูกถ่ายทอดไปยังผู้ใช้เทคโนโลยีอำนวยความสะดวก เช่น โปรแกรมอ่านหน้าจอ ตรวจสอบให้แน่ใจว่าข้อมูลที่ระบุด้วยสีนั้นชัดเจนจากตัวเนื้อหาเอง (ข้อความที่มองเห็นได้ของปุ่ม) หรือรวมไว้ด้วยวิธีการอื่น เช่น ข้อความเพิ่มเติมที่ซ่อนอยู่ใน.sr-onlyชั้นเรียน
ขนาด
แฟนซีปุ่มขนาดใหญ่หรือเล็ก? เพิ่ม.btn-lg, .btn-smหรือ.btn-xsสำหรับขนาดเพิ่มเติม
<p>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-default">Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>
<button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>สร้างปุ่มระดับบล็อก—ปุ่มที่ขยายเต็มความกว้างของพาเรนต์— โดยเพิ่ม.btn-block.
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>สถานะใช้งาน
ปุ่มต่างๆ จะปรากฏขึ้นเมื่อกด (โดยมีพื้นหลังที่เข้มกว่า เส้นขอบที่เข้มกว่า และเงาที่ใส่เข้าไป) เมื่อเปิดใช้งาน สำหรับ<button>องค์ประกอบ ทำได้ผ่าน:active. สำหรับ<a>องค์ประกอบ จะทำด้วย.active. อย่างไรก็ตาม คุณสามารถใช้.activeon <button>s (และรวมaria-pressed="true"แอตทริบิวต์) ได้หากต้องการจำลองสถานะแอ็คทีฟโดยทางโปรแกรม
องค์ประกอบปุ่ม
ไม่จำเป็นต้องเพิ่ม:activeเพราะเป็นคลาสหลอก แต่ถ้าคุณต้องการบังคับให้มีลักษณะเหมือนกัน ให้เพิ่ม.active.
<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>องค์ประกอบสมอ
เพิ่ม.activeคลาสให้กับ<a>ปุ่ม
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>สถานะคนพิการ
ทำให้ปุ่มต่างๆ ดูเหมือนคลิกไม่ได้โดยทำให้ปุ่มเหล่านั้นจางกลับด้วยopacity.
องค์ประกอบปุ่ม
เพิ่มdisabledแอตทริบิวต์ให้กับ<button>ปุ่ม
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>ความเข้ากันได้ข้ามเบราว์เซอร์
หากคุณเพิ่มdisabledแอตทริบิวต์ใน a <button>Internet Explorer 9 และต่ำกว่าจะทำให้ข้อความเป็นสีเทาพร้อมเงาข้อความที่น่ารังเกียจซึ่งเราไม่สามารถแก้ไขได้
องค์ประกอบสมอ
เพิ่ม.disabledคลาสให้กับ<a>ปุ่ม
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>เราใช้.disabledเป็นคลาสยูทิลิตี้ที่นี่ คล้ายกับ.activeคลาสทั่วไป ดังนั้นจึงไม่จำเป็นต้องมีคำนำหน้า
คำเตือนฟังก์ชั่นการเชื่อมโยง
คลาสนี้ใช้pointer-events: noneเพื่อพยายามปิดใช้งานฟังก์ชันลิงก์ของ<a>s แต่คุณสมบัติ CSS นั้นยังไม่เป็นมาตรฐานและไม่ได้รับการสนับสนุนอย่างสมบูรณ์ใน Opera 18 และต่ำกว่า หรือใน Internet Explorer 11 นอกจากนี้ แม้ในเบราว์เซอร์ที่รองรับpointer-events: noneแป้นพิมพ์ การนำทางยังคงไม่ได้รับผลกระทบ หมายความว่าผู้ใช้คีย์บอร์ดที่มองเห็นและผู้ใช้เทคโนโลยีอำนวยความสะดวกจะยังสามารถเปิดใช้งานลิงก์เหล่านี้ได้ เพื่อความปลอดภัย ให้ใช้ JavaScript ที่กำหนดเองเพื่อปิดใช้งานลิงก์ดังกล่าว
รูปภาพ
ภาพที่ตอบสนอง
รูปภาพใน Bootstrap 3 สามารถทำให้ตอบสนองได้ง่ายผ่านการเพิ่ม.img-responsiveคลาส สิ่งนี้นำไปใช้max-width: 100%;และheight: auto;กับdisplay: block;รูปภาพเพื่อให้ปรับขนาดอย่างเหมาะสมกับองค์ประกอบหลัก
หากต้องการจัดรูปภาพที่ใช้.img-responsiveคลาสให้อยู่ตรงกลาง ให้ใช้.center-blockแทน.text-center. ดูส่วนคลาสตัวช่วยสำหรับรายละเอียดเพิ่มเติมเกี่ยวกับ.center-blockการใช้งาน
ภาพ SVG และ IE 8-10
ใน Internet Explorer 8-10 รูปภาพ SVG ที่.img-responsiveมีขนาดไม่สมส่วน ในการแก้ไขปัญหานี้ ให้เพิ่มwidth: 100% \9;เมื่อจำเป็น Bootstrap ไม่ใช้สิ่งนี้โดยอัตโนมัติเนื่องจากทำให้เกิดความยุ่งยากกับรูปแบบภาพอื่น ๆ
<img src="..." class="img-responsive" alt="Responsive image">รูปร่างของภาพ
เพิ่มคลาสให้กับ<img>องค์ประกอบเพื่อจัดรูปแบบรูปภาพในโครงการใดๆ ได้อย่างง่ายดาย
ความเข้ากันได้ข้ามเบราว์เซอร์
โปรดทราบว่า Internet Explorer 8 ไม่รองรับมุมโค้งมน
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">คลาสตัวช่วย
สีตามบริบท
ถ่ายทอดความหมายผ่านสีด้วยคลาสยูทิลิตี้การเน้นจำนวนหนึ่ง สิ่งเหล่านี้อาจถูกนำไปใช้กับลิงก์ และจะมืดลงเมื่อวางเมาส์เหนือ เช่นเดียวกับสไตล์ลิงก์เริ่มต้นของเรา
Fusce dapibus, tellus ac cursus คอมโมโด, tortor mauris nibh
Nullam id dolor id nibh ultricies vehicula ut id elit
Duis mollis, est non commodo luctus, นิซิ erat porttitor ligula
Maecenas sed diam eget risus varius blandit นั่ง amet non magna.
Etiam porta sem malesuada magna มอลลิส euismod
Donec ullamcorper nulla non metus auctor fringilla.
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>การจัดการกับความจำเพาะ
บางครั้งไม่สามารถใช้คลาสการเน้นได้เนื่องจากความจำเพาะของตัวเลือกอื่น ในกรณีส่วนใหญ่ วิธีแก้ปัญหาที่เพียงพอคือการตัดข้อความของคุณใน<span>ชั้นเรียน
ถ่ายทอดความหมายสู่เทคโนโลยีอำนวยความสะดวก
การใช้สีเพื่อเพิ่มความหมายเป็นเพียงการแสดงภาพเท่านั้น ซึ่งจะไม่ถูกถ่ายทอดไปยังผู้ใช้เทคโนโลยีอำนวยความสะดวก เช่น โปรแกรมอ่านหน้าจอ ตรวจสอบให้แน่ใจว่าข้อมูลที่แสดงด้วยสีนั้นชัดเจนจากเนื้อหา (สีตามบริบทใช้เพื่อเสริมความหมายที่มีอยู่แล้วในข้อความ/มาร์กอัป) หรือรวมไว้ด้วยวิธีการอื่น เช่น ข้อความเพิ่มเติมที่ซ่อนอยู่ใน.sr-onlyชั้นเรียน .
ภูมิหลังตามบริบท
คล้ายกับคลาสสีข้อความตามบริบท ตั้งค่าพื้นหลังขององค์ประกอบเป็นคลาสตามบริบทได้อย่างง่ายดาย ส่วนประกอบ Anchor จะมืดลงเมื่อวางเมาส์เหนือ เช่นเดียวกับคลาสข้อความ
Nullam id dolor id nibh ultricies vehicula ut id elit
Duis mollis, est non commodo luctus, นิซิ erat porttitor ligula
Maecenas sed diam eget risus varius blandit นั่ง amet non magna.
Etiam porta sem malesuada magna มอลลิส euismod
Donec ullamcorper nulla non metus auctor fringilla.
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>การจัดการกับความจำเพาะ
บางครั้งไม่สามารถใช้คลาสพื้นหลังตามบริบทได้เนื่องจากความจำเพาะของตัวเลือกอื่น ในบางกรณี วิธีแก้ปัญหาที่เพียงพอคือการห่อเนื้อหาขององค์ประกอบใน<div>คลาสด้วย
ถ่ายทอดความหมายสู่เทคโนโลยีอำนวยความสะดวก
เช่นเดียวกับสีตามบริบทตรวจสอบให้แน่ใจว่าความหมายใดๆ ที่สื่อผ่านสีนั้นถูกถ่ายทอดในรูปแบบที่ไม่ได้เป็นเพียงการนำเสนอเท่านั้น
ปิดไอคอน
ใช้ไอคอนปิดทั่วไปเพื่อปิดเนื้อหา เช่น โมดอลและการแจ้งเตือน
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>คาเร็ต
ใช้คาเร็ตเพื่อระบุฟังก์ชันและทิศทางแบบเลื่อนลง โปรดทราบว่าเครื่องหมายรูปหมวกเริ่มต้นจะย้อนกลับโดยอัตโนมัติในเมนูแบบเลื่อนลง
<span class="caret"></span>ลอยอย่างรวดเร็ว
ลอยองค์ประกอบไปทางซ้ายหรือขวาด้วยคลาส !importantรวมไว้เพื่อหลีกเลี่ยงปัญหาความจำเพาะ ชั้นเรียนสามารถใช้เป็นมิกซ์อินได้
<div class="pull-left">...</div>
<div class="pull-right">...</div>// Classes
.pull-left {
float: left !important;
}
.pull-right {
float: right !important;
}
// Usage as mixins
.element {
.pull-left();
}
.another-element {
.pull-right();
}ศูนย์เนื้อหาบล็อก
ตั้งค่าองค์ประกอบเป็นdisplay: blockและจัดกึ่งกลางผ่านmargin. มีให้เลือกทั้งแบบมิกซ์อินและคลาส
<div class="center-block">...</div>// Class
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage as a mixin
.element {
.center-block();
}Clearfix
ล้างได้อย่างง่ายดายfloatโดยการเพิ่ม.clearfix องค์ประกอบหลัก ใช้ micro clearfixที่Nicolas Gallagher นิยมใช้ สามารถใช้เป็นส่วนผสมได้
<!-- Usage as a class -->
<div class="clearfix">...</div>// Mixin itself
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage as a mixin
.element {
.clearfix();
}การแสดงและซ่อนเนื้อหา
บังคับให้แสดงหรือซ่อนองค์ประกอบ ( รวมถึงโปรแกรมอ่านหน้าจอ ) ด้วยการใช้.showและ.hiddenคลาส คลาสเหล่านี้ใช้!importantเพื่อหลีกเลี่ยงความขัดแย้งเฉพาะ เช่นเดียวกับการลอยด่วน ใช้ได้เฉพาะการสลับระดับบล็อกเท่านั้น พวกเขายังสามารถใช้เป็นมิกซ์อิน
.hideพร้อมใช้งาน แต่จะไม่มีผลกับโปรแกรมอ่านหน้าจอเสมอไป และเลิกใช้งานแล้วตั้งแต่ v3.0.1 ใช้.hiddenหรือ.sr-onlyแทน
นอกจากนี้.invisibleสามารถใช้เพื่อสลับเฉพาะการมองเห็นองค์ประกอบ หมายความว่าองค์ประกอบdisplayจะไม่ถูกแก้ไข และองค์ประกอบยังคงส่งผลต่อการไหลของเอกสาร
<div class="show">...</div>
<div class="hidden">...</div>// Classes
.show {
display: block !important;
}
.hidden {
display: none !important;
}
.invisible {
visibility: hidden;
}
// Usage as mixins
.element {
.show();
}
.another-element {
.hidden();
}โปรแกรมอ่านหน้าจอและเนื้อหาการนำทางด้วยแป้นพิมพ์
ซ่อนองค์ประกอบไปยังอุปกรณ์ทั้งหมดยกเว้นโปรแกรมอ่านหน้าจอที่มี.sr-only. รวม.sr-onlyกับ.sr-only-focusableเพื่อแสดงองค์ประกอบอีกครั้งเมื่อมีการโฟกัส (เช่น โดยผู้ใช้คีย์บอร์ดเท่านั้น) จำเป็นสำหรับแนวทางปฏิบัติที่ดีที่สุดในการช่วยสำหรับการเข้าถึง ต่อไป นี้ สามารถใช้เป็นส่วนผสมได้
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>// Usage as a mixin
.skip-navigation {
.sr-only();
.sr-only-focusable();
}การเปลี่ยนภาพ
ใช้.text-hideคลาสหรือมิกซ์อินเพื่อช่วยแทนที่เนื้อหาข้อความขององค์ประกอบด้วยรูปภาพพื้นหลัง
<h1 class="text-hide">Custom heading</h1>// Usage as a mixin
.heading {
.text-hide();
}สาธารณูปโภคที่ตอบสนอง
เพื่อการพัฒนาที่เป็นมิตรกับอุปกรณ์พกพาที่รวดเร็วขึ้น ให้ใช้คลาสยูทิลิตี้เหล่านี้เพื่อแสดงและซ่อนเนื้อหาตามอุปกรณ์ผ่านการสืบค้นสื่อ รวมถึงคลาสยูทิลิตี้สำหรับการสลับเนื้อหาเมื่อพิมพ์
พยายามใช้สิ่งเหล่านี้อย่างจำกัด และหลีกเลี่ยงการสร้างเว็บไซต์เดียวกันในเวอร์ชันที่ต่างไปจากเดิมอย่างสิ้นเชิง ให้ใช้สิ่งเหล่านี้เพื่อเสริมการนำเสนอของอุปกรณ์แต่ละเครื่องแทน
ชั้นเรียนที่มีอยู่
ใช้คลาสเดียวหรือหลายคลาสที่มีอยู่เพื่อสลับเนื้อหาข้ามเบรกพอยต์ของวิวพอร์ต
| อุปกรณ์ขนาดเล็กพิเศษโทรศัพท์ (<768px) | อุปกรณ์ขนาดเล็กแท็บเล็ต (≥768px) | อุปกรณ์ขนาดกลางเดสก์ท็อป (≥992px) | อุปกรณ์ขนาดใหญ่เดสก์ท็อป (≥1200px) | |
|---|---|---|---|---|
.visible-xs-* |
มองเห็นได้ | ที่ซ่อนอยู่ | ที่ซ่อนอยู่ | ที่ซ่อนอยู่ |
.visible-sm-* |
ที่ซ่อนอยู่ | มองเห็นได้ | ที่ซ่อนอยู่ | ที่ซ่อนอยู่ |
.visible-md-* |
ที่ซ่อนอยู่ | ที่ซ่อนอยู่ | มองเห็นได้ | ที่ซ่อนอยู่ |
.visible-lg-* |
ที่ซ่อนอยู่ | ที่ซ่อนอยู่ | ที่ซ่อนอยู่ | มองเห็นได้ |
.hidden-xs |
ที่ซ่อนอยู่ | มองเห็นได้ | มองเห็นได้ | มองเห็นได้ |
.hidden-sm |
มองเห็นได้ | ที่ซ่อนอยู่ | มองเห็นได้ | มองเห็นได้ |
.hidden-md |
มองเห็นได้ | มองเห็นได้ | ที่ซ่อนอยู่ | มองเห็นได้ |
.hidden-lg |
มองเห็นได้ | มองเห็นได้ | มองเห็นได้ | ที่ซ่อนอยู่ |
ตั้งแต่ v3.2.0 .visible-*-*คลาสสำหรับแต่ละเบรกพอยต์จะมีสามรูปแบบ หนึ่งคลาสสำหรับค่าคุณสมบัติ CSS แต่ละdisplayรายการที่แสดงด้านล่าง
| กลุ่มวิชา | CSSdisplay |
|---|---|
.visible-*-block |
display: block; |
.visible-*-inline |
display: inline; |
.visible-*-inline-block |
display: inline-block; |
xsตัวอย่างเช่น สำหรับหน้าจอขนาดเล็กพิเศษ ( ) .visible-*-*คลาสที่ใช้ได้คือ: .visible-xs-block, .visible-xs-inline, และ.visible-xs-inline-block.
คลาส.visible-xs, .visible-sm, .visible-md, และ.visible-lgยังมีอยู่ แต่ เลิกใช้ แล้วตั้งแต่ v3.2.0 มีค่าประมาณเทียบเท่ากับ.visible-*-blockยกเว้นกรณีพิเศษเพิ่มเติมสำหรับการสลับ<table>องค์ประกอบที่เกี่ยวข้องกับ การสลับ
ชั้นเรียนการพิมพ์
คล้ายกับคลาสตอบสนองปกติ ใช้สิ่งเหล่านี้เพื่อสลับเนื้อหาสำหรับพิมพ์
| ชั้นเรียน | เบราว์เซอร์ | พิมพ์ |
|---|---|---|
.visible-print-block.visible-print-inline.visible-print-inline-block |
ที่ซ่อนอยู่ | มองเห็นได้ |
.hidden-print |
มองเห็นได้ | ที่ซ่อนอยู่ |
คลาส.visible-printยังมีอยู่แต่เลิกใช้งานแล้วตั้งแต่ v3.2.0 มีค่าประมาณเทียบเท่ากับ.visible-print-blockยกเว้นกรณีพิเศษเพิ่มเติมสำหรับ<table>องค์ประกอบที่เกี่ยวข้อง
กรณีทดสอบ
ปรับขนาดเบราว์เซอร์ของคุณหรือโหลดบนอุปกรณ์ต่าง ๆ เพื่อทดสอบคลาสยูทิลิตี้ที่ตอบสนอง
ปรากฏบน...
เครื่องหมายถูกสีเขียวแสดงว่าองค์ประกอบนั้นมองเห็นได้ในวิวพอร์ตปัจจุบันของคุณ
เล็กพิเศษ
✔ มองเห็นได้บน x-small
เล็ก
✔มองเห็นได้บนขนาดเล็ก
ปานกลาง
✔มองเห็นได้บนสื่อ
ใหญ่
✔มองเห็นได้กว้าง
✔ มองเห็นได้บน x-small และ small
✔ มองเห็นได้บนขนาดกลางและขนาดใหญ่
✔ มองเห็นได้บน x-small และ medium
✔มองเห็นได้ทั้งขนาดเล็กและขนาดใหญ่
✔ มองเห็นได้บน x-small และ large
✔มองเห็นได้บนขนาดเล็กและขนาดกลาง
ซ่อนบน...
ที่นี่ เครื่องหมายถูกสีเขียวยังระบุว่าองค์ประกอบนั้นซ่อนอยู่ในวิวพอร์ตปัจจุบันของคุณ
ใช้ Less
CSS ของ Bootstrap สร้างขึ้นจาก Less ซึ่งเป็นตัวประมวลผลล่วงหน้าที่มีฟังก์ชันเพิ่มเติม เช่น ตัวแปร มิกซ์อิน และฟังก์ชันสำหรับการคอมไพล์ CSS ผู้ที่ต้องการใช้ซอร์สไฟล์ Less แทนไฟล์ CSS ที่คอมไพล์แล้ว สามารถใช้ตัวแปรและมิกซ์อินมากมายที่เราใช้ตลอดทั้งเฟรมเวิร์ก
ตัวแปรกริดและมิกซ์อินจะครอบคลุมอยู่ในส่วนระบบกริด
กำลังรวบรวม Bootstrap
Bootstrap สามารถใช้ได้อย่างน้อยสองวิธี: กับ CSS ที่คอมไพล์แล้วหรือกับไฟล์ Less ต้นทาง ในการคอมไพล์ไฟล์ Less ให้ศึกษาส่วนการเริ่มต้นใช้งานสำหรับวิธีตั้งค่าสภาพแวดล้อมการพัฒนาของคุณเพื่อรันคำสั่งที่จำเป็น
เครื่องมือคอมไพล์ของบุคคลที่สามอาจใช้งานได้กับ Bootstrap แต่ไม่ได้รับการสนับสนุนจากทีมงานหลักของเรา
ตัวแปร
ตัวแปรถูกใช้ทั่วทั้งโปรเจ็กต์เพื่อรวมศูนย์และแบ่งปันค่าที่ใช้กันทั่วไป เช่น สี ระยะห่าง หรือฟอนต์สแต็ค สำหรับรายละเอียดทั้งหมด โปรดดูที่เครื่องมือปรับแต่ง
สี
ใช้โทนสีสองแบบได้อย่างง่ายดาย: ระดับสีเทาและความหมาย เฉดสีเทาช่วยให้เข้าถึงเฉดสีดำที่ใช้กันทั่วไปได้อย่างรวดเร็ว ในขณะที่ความหมายรวมถึงสีต่างๆ ที่กำหนดให้กับค่าตามบริบทที่มีความหมาย
@gray-darker: lighten(#000, 13.5%); // #222
@gray-dark: lighten(#000, 20%); // #333
@gray: lighten(#000, 33.5%); // #555
@gray-light: lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info: #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger: #d9534f;ใช้ตัวแปรสีใดๆ เหล่านี้ตามที่เป็นอยู่ หรือกำหนดให้กับตัวแปรที่มีความหมายมากขึ้นสำหรับโครงการของคุณ
// Use as-is
.masthead {
background-color: @brand-primary;
}
// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
background-color: @alert-message-background;
}นั่งร้าน
ตัวแปรจำนวนหนึ่งสำหรับการปรับแต่งองค์ประกอบหลักของโครงร่างเว็บไซต์ของคุณอย่างรวดเร็ว
// Scaffolding
@body-bg: #fff;
@text-color: @black-50;ลิงค์
จัดรูปแบบลิงก์ของคุณได้อย่างง่ายดายด้วยสีที่เหมาะสมด้วยค่าเดียว
// Variables
@link-color: @brand-primary;
@link-hover-color: darken(@link-color, 15%);
// Usage
a {
color: @link-color;
text-decoration: none;
&:hover {
color: @link-hover-color;
text-decoration: underline;
}
}โปรดทราบว่าการ@link-hover-colorใช้ฟังก์ชันซึ่งเป็นเครื่องมือที่ยอดเยี่ยมอีกอย่างหนึ่งจาก Less เพื่อสร้างสีโฮเวอร์ที่ถูกต้องโดยอัตโนมัติ คุณสามารถใช้darken, lighten, , saturateและdesaturate
วิชาการพิมพ์
ตั้งค่าแบบอักษร ขนาดข้อความ นำหน้า และอื่นๆ ได้อย่างง่ายดายด้วยตัวแปรด่วนสองสามตัว Bootstrap ใช้ประโยชน์จากสิ่งเหล่านี้เช่นกันเพื่อให้มิกซ์อินการพิมพ์ที่ง่าย
@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif: Georgia, "Times New Roman", Times, serif;
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base: @font-family-sans-serif;
@font-size-base: 14px;
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
@font-size-h1: floor((@font-size-base * 2.6)); // ~36px
@font-size-h2: floor((@font-size-base * 2.15)); // ~30px
@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5: @font-size-base;
@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
@line-height-base: 1.428571429; // 20/14
@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
@headings-font-family: inherit;
@headings-font-weight: 500;
@headings-line-height: 1.1;
@headings-color: inherit;ไอคอน
ตัวแปรด่วน 2 ตัวสำหรับกำหนดตำแหน่งและชื่อไฟล์ของไอคอนเอง
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";ส่วนประกอบ
ส่วนประกอบใน Bootstrap ใช้ประโยชน์จากตัวแปรดีฟอลต์บางตัวสำหรับการตั้งค่าทั่วไป นี่คือรายการที่ใช้บ่อยที่สุด
@padding-base-vertical: 6px;
@padding-base-horizontal: 12px;
@padding-large-vertical: 10px;
@padding-large-horizontal: 16px;
@padding-small-vertical: 5px;
@padding-small-horizontal: 10px;
@padding-xs-vertical: 1px;
@padding-xs-horizontal: 5px;
@line-height-large: 1.33;
@line-height-small: 1.5;
@border-radius-base: 4px;
@border-radius-large: 6px;
@border-radius-small: 3px;
@component-active-color: #fff;
@component-active-bg: @brand-primary;
@caret-width-base: 4px;
@caret-width-large: 5px;ผู้ขายมิกซ์อิน
มิกซ์อินของผู้ขายคือมิกซ์อินที่จะช่วยสนับสนุนเบราว์เซอร์หลายตัวโดยรวมคำนำหน้าของผู้ขายที่เกี่ยวข้องทั้งหมดใน CSS ที่คอมไพล์ของคุณ
ขนาดกล่อง
รีเซ็ตโมเดลกล่องส่วนประกอบของคุณด้วยมิกซ์อินเดียว สำหรับบริบท โปรดดู บทความที่เป็นประโยชน์ นี้จาก Mozilla
มิกซ์อิน เลิกใช้แล้ว ตั้งแต่ v3.2.0 โดยมีการเปิดตัว Autoprefixer เพื่อรักษาความเข้ากันได้แบบย้อนหลัง Bootstrap จะยังคงใช้มิกซ์อินภายในจนถึง Bootstrap v4.0
.box-sizing(@box-model) {
-webkit-box-sizing: @box-model; // Safari <= 5
-moz-box-sizing: @box-model; // Firefox <= 19
box-sizing: @box-model;
}มุมโค้งมน
border-radiusปัจจุบันเบราว์เซอร์ที่ทันสมัยทั้งหมดรองรับ คุณสมบัติที่ไม่มีคำนำหน้า ด้วยเหตุนี้จึงไม่มี.border-radius()มิกซ์อิน แต่ Bootstrap มีทางลัดสำหรับการปัดเศษสองมุมอย่างรวดเร็วในด้านใดด้านหนึ่งของวัตถุ
.border-top-radius(@radius) {
border-top-right-radius: @radius;
border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
border-bottom-right-radius: @radius;
border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
border-bottom-right-radius: @radius;
border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
border-bottom-left-radius: @radius;
border-top-left-radius: @radius;
}กล่อง (วาง) เงา
หากกลุ่มเป้าหมายของคุณใช้เบราว์เซอร์และอุปกรณ์ล่าสุดและดีที่สุด อย่าลืมใช้ พร็อพเพอ box-shadowร์ตี้เพียงอย่างเดียว หากคุณต้องการการสนับสนุนสำหรับอุปกรณ์ Android รุ่นเก่า (รุ่นก่อน v4) และ iOS (รุ่นก่อน iOS 5) ให้ใช้มิกซ์อินที่เลิกใช้งานแล้วเพื่อเลือกรายการที่จำเป็น-webkitคำนำหน้าที่ จำเป็น
มิกซ์อิน เลิกใช้งาน ตั้งแต่ v3.1.0 เนื่องจาก Bootstrap ไม่รองรับแพลตฟอร์มที่ล้าสมัยอย่างเป็นทางการซึ่งไม่รองรับคุณสมบัติมาตรฐาน เพื่อรักษาความเข้ากันได้แบบย้อนหลัง Bootstrap จะยังคงใช้มิกซ์อินภายในจนถึง Bootstrap v4.0
อย่าลืมใช้rgba()สีในเงากล่องของคุณเพื่อให้กลมกลืนกับพื้นหลังได้อย่างลงตัวที่สุด
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
box-shadow: @shadow;
}การเปลี่ยนผ่าน
ส่วนผสมหลายอย่างเพื่อความยืดหยุ่น ตั้งค่าข้อมูลการเปลี่ยนทั้งหมดด้วยข้อมูลเดียว หรือระบุการหน่วงเวลาและระยะเวลาแยกต่างหากตามต้องการ
มิกซ์อิน เลิกใช้งาน ตั้งแต่ v3.2.0 โดยมีการแนะนำ Autoprefixer เพื่อรักษาความเข้ากันได้แบบย้อนหลัง Bootstrap จะยังคงใช้มิกซ์อินภายในจนถึง Bootstrap v4.0
.transition(@transition) {
-webkit-transition: @transition;
transition: @transition;
}
.transition-property(@transition-property) {
-webkit-transition-property: @transition-property;
transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
-webkit-transition-delay: @transition-delay;
transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
-webkit-transition-duration: @transition-duration;
transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
-webkit-transition-timing-function: @timing-function;
transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
-webkit-transition: -webkit-transform @transition;
-moz-transition: -moz-transform @transition;
-o-transition: -o-transform @transition;
transition: transform @transition;
}การแปลงร่าง
หมุน ปรับขนาด แปล (ย้าย) หรือเอียงวัตถุใดๆ
มิกซ์อิน เลิกใช้งาน ตั้งแต่ v3.2.0 โดยมีการแนะนำ Autoprefixer เพื่อรักษาความเข้ากันได้แบบย้อนหลัง Bootstrap จะยังคงใช้มิกซ์อินภายในจนถึง Bootstrap v4.0
.rotate(@degrees) {
-webkit-transform: rotate(@degrees);
-ms-transform: rotate(@degrees); // IE9 only
transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
-webkit-transform: scale(@ratio, @ratio-y);
-ms-transform: scale(@ratio, @ratio-y); // IE9 only
transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
-webkit-transform: translate(@x, @y);
-ms-transform: translate(@x, @y); // IE9 only
transform: translate(@x, @y);
}
.skew(@x; @y) {
-webkit-transform: skew(@x, @y);
-ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
-webkit-transform: translate3d(@x, @y, @z);
transform: translate3d(@x, @y, @z);
}
.rotateX(@degrees) {
-webkit-transform: rotateX(@degrees);
-ms-transform: rotateX(@degrees); // IE9 only
transform: rotateX(@degrees);
}
.rotateY(@degrees) {
-webkit-transform: rotateY(@degrees);
-ms-transform: rotateY(@degrees); // IE9 only
transform: rotateY(@degrees);
}
.perspective(@perspective) {
-webkit-perspective: @perspective;
-moz-perspective: @perspective;
perspective: @perspective;
}
.perspective-origin(@perspective) {
-webkit-perspective-origin: @perspective;
-moz-perspective-origin: @perspective;
perspective-origin: @perspective;
}
.transform-origin(@origin) {
-webkit-transform-origin: @origin;
-moz-transform-origin: @origin;
-ms-transform-origin: @origin; // IE9 only
transform-origin: @origin;
}แอนิเมชั่น
มิกซ์อินเดียวสำหรับการใช้คุณสมบัติแอนิเมชั่นของ CSS3 ทั้งหมดในการประกาศครั้งเดียวและมิกซ์อินอื่นๆ สำหรับแต่ละพร็อพเพอร์ตี้
มิกซ์อิน เลิกใช้งาน ตั้งแต่ v3.2.0 โดยมีการแนะนำ Autoprefixer เพื่อรักษาความเข้ากันได้แบบย้อนหลัง Bootstrap จะยังคงใช้มิกซ์อินภายในจนถึง Bootstrap v4.0
.animation(@animation) {
-webkit-animation: @animation;
animation: @animation;
}
.animation-name(@name) {
-webkit-animation-name: @name;
animation-name: @name;
}
.animation-duration(@duration) {
-webkit-animation-duration: @duration;
animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
-webkit-animation-timing-function: @timing-function;
animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
-webkit-animation-delay: @delay;
animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
-webkit-animation-iteration-count: @iteration-count;
animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
-webkit-animation-direction: @direction;
animation-direction: @direction;
}ความทึบ
ตั้งค่าความทึบสำหรับเบราว์เซอร์ทั้งหมดและจัดเตรียมทางfilterเลือกสำรองสำหรับ IE8
.opacity(@opacity) {
opacity: @opacity;
// IE8 filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
}ข้อความตัวยึดตำแหน่ง
จัดเตรียมบริบทสำหรับการควบคุมแบบฟอร์มภายในแต่ละฟิลด์
.placeholder(@color: @input-color-placeholder) {
&::-moz-placeholder { color: @color; } // Firefox
&:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
&::-webkit-input-placeholder { color: @color; } // Safari and Chrome
}คอลัมน์
สร้างคอลัมน์ผ่าน CSS ภายในองค์ประกอบเดียว
.content-columns(@width; @count; @gap) {
-webkit-column-width: @width;
-moz-column-width: @width;
column-width: @width;
-webkit-column-count: @count;
-moz-column-count: @count;
column-count: @count;
-webkit-column-gap: @gap;
-moz-column-gap: @gap;
column-gap: @gap;
}ไล่โทนสี
เปลี่ยนสีสองสีให้กลายเป็นการไล่ระดับสีพื้นหลังได้อย่างง่ายดาย ก้าวไปอีกขั้นและกำหนดทิศทาง ใช้สามสี หรือใช้การไล่ระดับสีในแนวรัศมี ด้วยมิกซ์อินเดียว คุณจะได้รับไวยากรณ์นำหน้าทั้งหมดที่คุณต้องการ
#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);คุณยังสามารถระบุมุมของการไล่ระดับสีเชิงเส้นสองสีแบบมาตรฐานได้:
#gradient > .directional(#333; #000; 45deg);หากคุณต้องการการไล่ระดับสีสไตล์ช่างตัดผม นั่นก็ง่ายเช่นกัน เพียงระบุสีเดียว แล้วเราจะวางแถบสีขาวโปร่งแสงทับซ้อน
#gradient > .striped(#333; 45deg);ขึ้น ante และใช้สามสีแทน ตั้งค่าสีแรก สีที่สอง หยุดสีของสีที่สอง (ค่าเปอร์เซ็นต์ เช่น 25%) และสีที่สามด้วยมิกซ์อินเหล่านี้:
#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);หัวขึ้น! หากคุณต้องการลบการไล่ระดับสี อย่าลืมลบเฉพาะ IE ที่filterคุณเพิ่มไว้ คุณสามารถทำได้โดยใช้.reset-filter()มิกซ์อินควบคู่ไปbackground-image: none;กับ
ยูทิลิตี้ผสม
ยูทิลิตี้มิกซ์อินคือมิกซ์อินที่รวมคุณสมบัติ CSS ที่ไม่เกี่ยวข้องเข้าด้วยกันเพื่อให้บรรลุเป้าหมายหรืองานที่เฉพาะเจาะจง
Clearfix
ลืมการเพิ่มclass="clearfix"องค์ประกอบใด ๆ และเพิ่ม.clearfix()มิกซ์อินแทนตามความเหมาะสม ใช้micro clearfixจากNicolas Gallagher
// Mixin
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage
.container {
.clearfix();
}การจัดกึ่งกลางแนวนอน
จัดองค์ประกอบใด ๆ ภายในพาเรนต์อย่างรวดเร็ว ต้องมีwidthหรือmax-widthกำหนด
// Mixin
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage
.container {
width: 940px;
.center-block();
}ตัวช่วยขนาด
ระบุขนาดของวัตถุได้ง่ายขึ้น
// Mixins
.size(@width; @height) {
width: @width;
height: @height;
}
.square(@size) {
.size(@size; @size);
}
// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }พื้นที่ข้อความที่ปรับขนาดได้
กำหนดค่าตัวเลือกการปรับขนาดสำหรับพื้นที่ข้อความหรือองค์ประกอบอื่นๆ ได้อย่างง่ายดาย ค่าดีฟอลต์เป็นพฤติกรรมเบราว์เซอร์ปกติ ( both)
.resizable(@direction: both) {
// Options: horizontal, vertical, both
resize: @direction;
// Safari fix
overflow: auto;
}การตัดทอนข้อความ
ตัดข้อความอย่างง่ายดายด้วยจุดไข่ปลาด้วยมิกซ์อินเดียว กำหนดให้องค์ประกอบเป็นblockหรือinline-blockระดับ
// Mixin
.text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// Usage
.branch-name {
display: inline-block;
max-width: 200px;
.text-overflow();
}ภาพเรตินา
ระบุพาธรูปภาพสองเส้นทางและขนาดรูปภาพ @1x และ Bootstrap จะจัดเตรียมคิวรีสื่อ @2x หากคุณมีรูปภาพจำนวนมากที่จะให้บริการ ให้ลองเขียน CSS ของรูปภาพเรตินาด้วยตนเองในคิวรี่สื่อเดียว
.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
background-image: url("@{file-1x}");
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
background-image: url("@{file-2x}");
background-size: @width-1x @height-1x;
}
}
// Usage
.jumbotron {
.img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}ใช้ Sass
ในขณะที่ Bootstrap สร้างขึ้นจาก Less แต่ก็มีพอร์ต Sass อย่างเป็นทางการ เราเก็บรักษาไว้ในที่เก็บ GitHub แยกต่างหากและจัดการการอัปเดตด้วยสคริปต์การแปลง
รวมอะไรบ้าง
เนื่องจากพอร์ต Sass มี repo แยกต่างหากและให้บริการผู้ชมที่แตกต่างกันเล็กน้อย เนื้อหาของโปรเจ็กต์จึงแตกต่างจากโปรเจ็กต์ Bootstrap หลักอย่างมาก สิ่งนี้ทำให้มั่นใจได้ว่าพอร์ต Sass จะเข้ากันได้กับระบบที่ใช้ Sass ให้ได้มากที่สุด
| เส้นทาง | คำอธิบาย |
|---|---|
lib/ |
รหัสอัญมณีทับทิม (การกำหนดค่า Sass, การรวม Rails และ Compass) |
tasks/ |
สคริปต์ตัวแปลง (เปลี่ยนอัพสตรีม Less เป็น Sass) |
test/ |
การทดสอบการรวบรวม |
templates/ |
รายการแพ็คเกจเข็มทิศ |
vendor/assets/ |
ไฟล์ Sass, JavaScript และฟอนต์ |
Rakefile |
งานภายใน เช่น เรคและแปลง |
ไปที่ที่เก็บ GitHub ของพอร์ต Sassเพื่อดูการทำงานของไฟล์เหล่านี้
การติดตั้ง
สำหรับข้อมูลเกี่ยวกับวิธีการติดตั้งและใช้งาน Bootstrap for Sass โปรดดูที่GitHub repository readme เป็นแหล่งข้อมูลล่าสุดและมีข้อมูลสำหรับใช้กับโครงการ Rails, Compass และ Sass มาตรฐาน