ฐาน CSS

องค์ประกอบ HTML พื้นฐานได้รับการจัดรูปแบบและปรับปรุงด้วยคลาสที่ขยายได้ ที่ด้านบนของโครงนั่งร้าน เพื่อให้รูปลักษณ์และความรู้สึกที่สดใหม่และสม่ำเสมอ

หัวเรื่อง & สำเนาเนื้อหา

มาตราส่วนการพิมพ์

ตารางการพิมพ์ทั้งหมดอ้างอิงจากตัวแปร Less สองตัวในไฟล์ variables.less ของเรา: @baseFontSizeและ@baseLineHeight. อันแรกคือขนาดฟอนต์พื้นฐานที่ใช้ตลอด และอันที่สองคือความสูงของบรรทัดฐาน

เราใช้ตัวแปรเหล่านั้น และคณิตศาสตร์บางส่วน เพื่อสร้างระยะขอบ ช่องว่างภายใน และความสูงของเส้นทุกประเภทของเราและอีกมากมาย

ตัวอย่างเนื้อความ

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 ยานพาหนะ

สำเนาเนื้อตะกั่ว

ทำให้ย่อหน้าโดดเด่นด้วยการ.leadเพิ่ม

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

ชั่วโมง1. หัวเรื่อง 1

ชั่วโมง2. หัวเรื่อง 2

ชั่วโมง3. หัวเรื่อง 3

ชั่วโมง4. หัวเรื่อง 4

h5. หัวเรื่อง 5
h6. หัวเรื่อง 6

เน้น ที่อยู่ และตัวย่อ

ธาตุ การใช้งาน ไม่จำเป็น
<strong> สำหรับการเน้นตัวอย่างข้อความที่สำคัญ ไม่มี
<em> สำหรับการเน้นตัวอย่างข้อความที่มีความเครียด ไม่มี
<abbr> ตัดคำย่อและคำย่อเพื่อแสดงเวอร์ชันขยายบน hover

รวมtitleแอตทริบิวต์เสริมสำหรับข้อความที่ขยาย

ใช้.initialismclass เป็นตัวย่อตัวพิมพ์ใหญ่
<address> สำหรับข้อมูลติดต่อของบรรพบุรุษที่ใกล้ที่สุดหรือหน่วยงานทั้งหมด คงรูปแบบไว้โดยลงท้ายทุกบรรทัดด้วย<br>

ใช้การเน้น

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. เมซีนาส เฟาซิบัส มอลลิส อินเตอร์ดัม Nulla vitae elit libero, pharetra augue.

หมายเหตุ:อย่าลังเลที่จะใช้<b>และ<i>ใน HTML5 แต่การใช้งานมีการเปลี่ยนแปลงเล็กน้อย <b>มีขึ้นเพื่อเน้นคำหรือวลีโดยไม่แสดงความสำคัญเพิ่มเติม ในขณะที่<i>ส่วนใหญ่ใช้สำหรับเสียง คำศัพท์ทางเทคนิค ฯลฯ

ตัวอย่างที่อยู่

ต่อไปนี้คือตัวอย่างการใช้<address>แท็ก 2 ตัวอย่าง:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
ชื่อ-นามสกุล
[email protected]

ตัวอย่างคำย่อ

คำย่อที่มีtitleแอตทริบิวต์จะมีเส้นขอบด้านล่างเป็นเส้นประสีอ่อนและเคอร์เซอร์ช่วยเมื่อวางเมาส์เหนือ สิ่งนี้ทำให้ผู้ใช้ระบุเพิ่มเติมว่าบางสิ่งจะแสดงเมื่อวางเมาส์เหนือ

เพิ่มinitialismชั้นเรียนลงในตัวย่อเพื่อเพิ่มความกลมกลืนของการพิมพ์โดยให้ขนาดตัวอักษรเล็กลงเล็กน้อย

HTMLเป็นสิ่งที่ดีที่สุดตั้งแต่หั่นขนมปัง

ตัวย่อของแอตทริบิวต์ word คือattr

Blockquotes

ธาตุ การใช้งาน ไม่จำเป็น
<blockquote> องค์ประกอบระดับบล็อกสำหรับการอ้างอิงเนื้อหาจากแหล่งอื่น

เพิ่มciteแอตทริบิวต์สำหรับ URL ต้นทาง

การใช้.pull-leftและ.pull-rightคลาสสำหรับตัวเลือกแบบลอยตัว
<small> องค์ประกอบเสริมสำหรับการเพิ่มการอ้างอิงถึงผู้ใช้ ซึ่งโดยทั่วไปแล้วจะเป็นผู้เขียนที่มีชื่องาน วาง<cite>รอบชื่อเรื่องหรือชื่อของแหล่งที่มา

หากต้องการรวม blockquote ให้<blockquote>ครอบHTMLเป็นเครื่องหมายคำพูด สำหรับคำพูดตรงๆ เราขอแนะนำ<p>a

รวม<small>องค์ประกอบเสริมเพื่ออ้างอิงแหล่งที่มาของคุณและคุณจะได้รับ em dash &mdash;ก่อนองค์ประกอบดังกล่าวเพื่อการจัดแต่งทรง

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. โลเรม อิปซัม โดลอร์ ซิท อะเมท จำนวนเต็ม posuere erat ante venenatis </p>
  3. <small> คนที่มีชื่อเสียง</small>
  4. </blockquote>

ตัวอย่างบล็อคโควต

blockquotes เริ่มต้นมีรูปแบบดังนี้:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. โลเรม อิปซัม โดลอร์ จำนวนเต็ม posuere erat ante venenatis

คนดังในเรื่อง Body of work

หากต้องการลอย blockquote ของคุณไปทางขวา ให้เพิ่มclass="pull-right":

Lorem ipsum dolor sit amet, consectetur adipiscing elit. โลเรม อิปซัม โดลอร์ จำนวนเต็ม posuere erat ante venenatis

คนดังในเรื่อง Body of work

รายการ

ไม่เรียงลำดับ

<ul>

  • ลอเรม อิปซัม ดอเลอร์ ซิท เอเม็ท
  • 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="unstyled">

  • ลอเรม อิปซัม ดอเลอร์ ซิท เอเม็ท
  • 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

สั่งซื้อ

<ol>

  1. ลอเรม อิปซัม ดอเลอร์ ซิท เอเม็ท
  2. Consectetur adipiscing elit
  3. จำนวนเต็ม โมเลสตี้ โลเร็ม ที่ มาสสา
  4. สิ่งอำนวยความสะดวกใน pretium nisl aliquet
  5. นุลลา โวลุตพัฒน์ อะลิควัม เวลิต
  6. Faucibus porta lacus fringilla vel
  7. อิเนียนนั่งเอรัต erat nunc
  8. Eget porttitor lorem

คำอธิบาย

<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

คำอธิบายแนวนอน

<dl class="dl-horizontal">

รายการคำอธิบาย
รายการคำอธิบายเหมาะสำหรับการกำหนดเงื่อนไข
อุยมอด
ขนถ่าย 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

หัวขึ้น! text-overflowรายการคำอธิบายแนวนอนจะตัดคำที่ยาวเกินกว่าจะใส่ลงในคอลัมน์ ด้านซ้าย ในวิวพอร์ตที่แคบลง พวกเขาจะเปลี่ยนเป็นเลย์เอาต์แบบเรียงซ้อนเริ่มต้น

อินไลน์

ตัดข้อมูลโค้ดแบบอินไลน์ด้วย<code>.

  1. ตัวอย่างเช่น<code> ส่วน< / code > ควรห่อเป็นแบบอินไลน์

บล็อกพื้นฐาน

ใช้<pre>สำหรับโค้ดหลายบรรทัด อย่าลืมหลีกเลี่ยงวงเล็บเหลี่ยมในโค้ดเพื่อการเรนเดอร์ที่เหมาะสม

<p>ตัวอย่างข้อความที่นี่...</p>
  1. <pre>
  2. <p>ตัวอย่างข้อความที่นี่...</p>
  3. </pre>

หมายเหตุ:อย่าลืมเก็บโค้ดไว้ใน<pre>แท็กให้ชิดซ้ายมากที่สุด มันจะแสดงแท็บทั้งหมด

คุณสามารถเลือกเพิ่ม.pre-scrollableคลาสซึ่งจะตั้งค่าความสูงสูงสุด 350px และให้แถบเลื่อนแกน y

Google Prettify

ใช้<pre>อิลิเมนต์เดียวกันและเพิ่มคลาสทางเลือกสองคลาสสำหรับการเรนเดอร์ขั้นสูง

  1. <p> ตัวอย่างข้อความที่นี่... </p>
  1. < พรี คลาส= "prettyprint
  2. เส้น" >
  3. <p>ตัวอย่างข้อความที่นี่...</p>
  4. </pre>

ดาวน์โหลด google-code-prettifyและดูวิธีใช้งาน readme

มาร์กอัปตาราง

แท็ก คำอธิบาย
<table> การห่อองค์ประกอบสำหรับแสดงข้อมูลในรูปแบบตาราง
<thead> องค์ประกอบคอนเทนเนอร์สำหรับแถวส่วนหัวของตาราง ( <tr>) เพื่อติดป้ายกำกับคอลัมน์ตาราง
<tbody> องค์ประกอบคอนเทนเนอร์สำหรับแถวตาราง ( <tr>) ในเนื้อหาของตาราง
<tr> องค์ประกอบคอนเทนเนอร์สำหรับชุดของเซลล์ตาราง ( <td>หรือ<th>) ที่ปรากฏในแถวเดียว
<td> เซลล์ตารางเริ่มต้น
<th> เซลล์ตารางพิเศษสำหรับป้ายชื่อคอลัมน์ (หรือแถว ขึ้นอยู่กับขอบเขตและตำแหน่ง)
ต้องใช้ภายใน a<thead>
<caption> คำอธิบายหรือบทสรุปของสิ่งที่อยู่ในตาราง มีประโยชน์อย่างยิ่งสำหรับโปรแกรมอ่านหน้าจอ
  1. <ตาราง>
  2. <หัว>
  3. <tr>
  4. <th> </th>
  5. <th> </th>
  6. </tr>
  7. </thead>
  8. <tbody>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </tr>
  13. </tbody>
  14. </table>

ตัวเลือกตาราง

ชื่อ ระดับ คำอธิบาย
ค่าเริ่มต้น ไม่มี ไม่มีสไตล์ มีแต่คอลัมน์และแถว
ขั้นพื้นฐาน .table เฉพาะเส้นแนวนอนระหว่างแถว
ติดขอบ .table-bordered ปัดเศษมุมและเพิ่มขอบด้านนอก
ลายทางม้าลาย .table-striped เพิ่มสีพื้นหลังสีเทาอ่อนให้กับแถวคี่ (1, 3, 5, ฯลฯ )
ย่อ .table-condensed ลดช่องว่างภายในแนวตั้งลงครึ่งหนึ่งจาก 8px เป็น 4px ภายในทั้งหมดtdและthองค์ประกอบ

ตารางตัวอย่าง

1. รูปแบบตารางเริ่มต้น

ตารางจะถูกจัดรูปแบบโดยอัตโนมัติด้วยเส้นขอบเพียงไม่กี่เส้นเพื่อให้แน่ใจว่าสามารถอ่านได้และรักษาโครงสร้างไว้ ด้วย 2.0 .tableจำเป็นต้องมีคลาส

  1. <table class = "table" >
  2. </table>
# ชื่อจริง นามสกุล ชื่อผู้ใช้
1 เครื่องหมาย อ็อตโต @mdo
2 เจคอบ ธอร์นตัน @อ้วน
3 แลร์รี่ นก @ทวิตเตอร์

2. โต๊ะลาย

เพิ่มความเก๋ไก๋ให้กับโต๊ะของคุณด้วยการเพิ่มลายทางม้าลาย—เพียงเพิ่ม.table-stripedชั้นเรียน

หมายเหตุ:ตารางแบบสไทรพ์ใช้:nth-childตัวเลือก CSS และไม่มีให้ใน IE7-IE8

  1. <table class = "table table-striped" >
  2. </table>
# ชื่อจริง นามสกุล ชื่อผู้ใช้
1 เครื่องหมาย อ็อตโต @mdo
2 เจคอบ ธอร์นตัน @อ้วน
3 แลร์รี่ นก @ทวิตเตอร์

3. โต๊ะมีขอบ

เพิ่มเส้นขอบรอบโต๊ะทั้งโต๊ะและมุมมนเพื่อความสวยงาม

  1. <table class = "table table-bordered" >
  2. </table>
# ชื่อจริง นามสกุล ชื่อผู้ใช้
1 เครื่องหมาย อ็อตโต @mdo
เครื่องหมาย อ็อตโต @getbootstrap
2 เจคอบ ธอร์นตัน @อ้วน
3 ลาร์รีเดอะเบิร์ด @ทวิตเตอร์

4. โต๊ะแบบย่อ

ทำให้ตารางของคุณกะทัดรัดยิ่งขึ้นด้วยการเพิ่ม.table-condensedคลาสเพื่อตัดช่องว่างภายในเซลล์ของตารางลงครึ่งหนึ่ง (จาก 8px เป็น 4px)

  1. <table class = "table table-condensed" >
  2. </table>
# ชื่อจริง นามสกุล ชื่อผู้ใช้
1 เครื่องหมาย อ็อตโต @mdo
2 เจคอบ ธอร์นตัน @อ้วน
3 ลาร์รีเดอะเบิร์ด @ทวิตเตอร์

5. รวมทั้งหมดเข้าด้วยกัน!

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

  1. <table class = "table table-striped table-bordered table-condensed" >
  2. ...
  3. </table>
ชื่อเต็ม
# ชื่อจริง นามสกุล ชื่อผู้ใช้
1 เครื่องหมาย อ็อตโต @mdo
2 เจคอบ ธอร์นตัน @อ้วน
3 ลาร์รีเดอะเบิร์ด @ทวิตเตอร์

HTML และ CSS ที่ยืดหยุ่น

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

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

รวมสี่เลย์เอาต์

Bootstrap มาพร้อมกับการรองรับเค้าโครงแบบฟอร์มสี่ประเภท:

  • แนวตั้ง (ค่าเริ่มต้น)
  • ค้นหา
  • อินไลน์
  • แนวนอน

เค้าโครงแบบฟอร์มประเภทต่างๆ ต้องการการเปลี่ยนแปลงบางอย่างในการมาร์กอัป แต่ตัวควบคุมจะยังคงเหมือนเดิมและทำงานเหมือนเดิม

สถานะการควบคุมและอื่น ๆ

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

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

แบบฟอร์มสี่ประเภท

Bootstrap จัดเตรียมมาร์กอัปและสไตล์อย่างง่ายสำหรับฟอร์มเว็บทั่วไปสี่สไตล์

ชื่อ ระดับ คำอธิบาย
แนวตั้ง (ค่าเริ่มต้น) .form-vertical (ไม่จำเป็นต้องใช้) ป้ายกำกับที่เรียงซ้อนกันทางซ้ายเหนือตัวควบคุม
อินไลน์ .form-inline ป้ายกำกับที่จัดชิดซ้ายและตัวควบคุมแบบอินไลน์บล็อกสำหรับรูปแบบกะทัดรัด
ค้นหา .form-search การป้อนข้อความที่โค้งมนเป็นพิเศษเพื่อความสวยงามในการค้นหาทั่วไป
แนวนอน .form-horizontal ลอยป้ายกำกับชิดซ้ายและชิดขวาในบรรทัดเดียวกับตัวควบคุม

ตัวอย่างแบบฟอร์มที่ใช้เพียงแค่การควบคุมแบบฟอร์ม ไม่มีมาร์กอัปเพิ่มเติม

แบบฟอร์มพื้นฐาน

ค่าเริ่มต้นที่ชาญฉลาดและมีน้ำหนักเบาโดยไม่มีมาร์กอัปเพิ่มเติม

ตัวอย่างข้อความช่วยเหลือระดับบล็อกที่นี่

  1. <form class = "ดี" >
  2. <label> ชื่อป้ายกำกับ</label>
  3. <input type = "text" class = "span3" placeholder = "พิมพ์อะไรบางอย่าง…" >
  4. <span class = "help-block" > ตัวอย่างข้อความช่วยเหลือระดับบล็อกที่นี่ </span>
  5. <label class = "ช่องทำเครื่องหมาย" >
  6. <input type = "checkbox" > ลองดูสิ
  7. </label>
  8. <button type = "submit" class = "btn" > ส่ง</button>
  9. </form>

แบบฟอร์มการค้นหา

เพิ่ม.form-searchลงในแบบฟอร์มและ.search-queryไปยังไฟล์input.

  1. <form class = "well form-search" >
  2. <input type = "text" class = "input-medium search-query" >
  3. <button type = "submit" class = "btn" > ค้นหา</button>
  4. </form>

แบบฟอร์มอินไลน์

เพิ่ม.form-inlineการจัดตำแหน่งแนวตั้งและระยะห่างของตัวควบคุมฟอร์ม

  1. <form class = "ดีแบบอินไลน์" >
  2. <input type = "text" class = "input-small" placeholder = "อีเมล" >
  3. <input type = "password" class = "input-small" placeholder = "รหัสผ่าน" >
  4. <label class = "ช่องทำเครื่องหมาย" >
  5. <input type = "checkbox" > จำฉันไว้
  6. </label>
  7. <button type = "submit" class = "btn" > ลงชื่อเข้าใช้ </button>
  8. </form>

รูปแบบแนวนอน

ทางด้านขวาแสดงการควบคุมแบบฟอร์มเริ่มต้นทั้งหมดที่เราสนับสนุน นี่คือรายการหัวข้อย่อย:

  • การป้อนข้อความ (ข้อความ รหัสผ่าน อีเมล ฯลฯ)
  • ช่องทำเครื่องหมาย
  • วิทยุ
  • เลือก
  • เลือกหลายรายการ
  • ไฟล์อินพุต
  • พื้นที่ข้อความ

นอกเหนือจากข้อความรูปแบบอิสระ การป้อนข้อมูลแบบข้อความ HTML5 ใดๆ จะปรากฏขึ้นในลักษณะนี้

ตัวอย่างมาร์กอัป

จากตัวอย่างเค้าโครงแบบฟอร์มด้านบน นี่คือมาร์กอัปที่เกี่ยวข้องกับอินพุตและกลุ่มควบคุมแรก ต้องใช้.control-group, .control-label, และ.controlsคลาสทั้งหมดสำหรับการจัดแต่งทรงผม

  1. <form class = "รูปแบบแนวนอน" >
  2. <fieldset>
  3. <ตำนาน> ข้อความในตำนาน</legend>
  4. < คลาสdiv = "กลุ่มควบคุม" >
  5. <label class = "control-label" for = "input01" > ป้อนข้อความ</label>
  6. < คลาสdiv = "ตัวควบคุม" >
  7. <input type = "text" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > รองรับข้อความช่วยเหลือ</p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

สถานะการควบคุมแบบฟอร์ม

Bootstrap นำเสนอสไตล์สำหรับการเน้นและdisabledสถานะ ที่รองรับเบราว์เซอร์ เราลบ Webkit เริ่มต้นoutlineและใช้ a box-shadowแทนสำหรับ:focus.


การตรวจสอบแบบฟอร์ม

นอกจากนี้ยังมีรูปแบบการตรวจสอบข้อผิดพลาด คำเตือน และความสำเร็จอีกด้วย หากต้องการใช้ ให้เพิ่มคลาสข้อผิดพลาดให้กับไฟล์.control-group.

  1. <fieldset
  2. class = "ข้อผิดพลาดของกลุ่มควบคุม" >
  3. </fieldset>
ค่าบางอย่างที่นี่
อาจมีบางอย่างผิดพลาด
โปรดแก้ไขข้อผิดพลาด
วู้ฮู!
วู้ฮู!

การขยายการควบคุมแบบฟอร์ม

เติมและผนวกอินพุต

กลุ่มอินพุตที่มีข้อความต่อท้ายหรือต่อท้าย ให้วิธีง่ายๆ ในการให้บริบทเพิ่มเติมสำหรับการป้อนข้อมูลของคุณ ตัวอย่างที่ดี ได้แก่ เครื่องหมาย @ สำหรับชื่อผู้ใช้ Twitter หรือ $ สำหรับการเงิน


ช่องทำเครื่องหมายและวิทยุ

Bootstrap ต้องใช้มาร์กอัปเพิ่มเติมในเวอร์ชัน 1.4 ขึ้นไปรอบๆ ช่องทำเครื่องหมายและวิทยุเพื่อสแต็ก ตอนนี้ เป็นเรื่องง่ายๆ ในการทำซ้ำ<label class="checkbox">ที่ครอบ<input type="checkbox">.

รองรับช่องทำเครื่องหมายและวิทยุแบบอินไลน์ เพียงแค่เพิ่ม.inlineใด ๆ.checkboxหรือ.radioและคุณทำเสร็จแล้ว


แบบฟอร์มอินไลน์และต่อท้าย/เติมหน้า

หากต้องการใช้ส่วนเติมหน้าหรือต่อท้ายอินพุตในรูปแบบอินไลน์ ให้แน่ใจว่าได้วาง.add-onandinputบนบรรทัดเดียวกันโดยไม่มีช่องว่าง


แบบฟอร์มช่วยเหลือข้อความ

ในการเพิ่มข้อความช่วยเหลือสำหรับการป้อนแบบฟอร์มของคุณ ให้ใส่ข้อความช่วยเหลือแบบอินไลน์ด้วย<span class="help-inline">หรือบล็อกข้อความช่วยเหลือด้วย<p class="help-block">หลังองค์ประกอบอินพุต

ใช้.span*คลาสเดียวกันจากระบบกริดสำหรับขนาดอินพุต

คุณยังสามารถใช้คลาสสแตติกที่ไม่ได้แมปกับกริด ปรับให้เข้ากับสไตล์ CSS ที่ตอบสนอง หรือพิจารณาการควบคุมประเภทต่างๆ (เช่นinputvs. select)

@

นี่คือข้อความช่วยเหลือ

.00
นี่คือข้อความช่วยเหลือเพิ่มเติม
$ .00

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

ปุ่ม คลาส="" คำอธิบาย
btn ปุ่มสีเทามาตรฐานพร้อมการไล่ระดับสี
btn btn-primary ให้น้ำหนักภาพเพิ่มเติมและระบุการกระทำหลักในชุดปุ่ม
btn btn-info ใช้เป็นทางเลือกแทนรูปแบบเริ่มต้น
btn btn-success บ่งบอกถึงความสำเร็จหรือการกระทำในเชิงบวก
btn btn-warning บ่งชี้ว่าควรระมัดระวังด้วยการกระทำนี้
btn btn-danger บ่งบอกถึงการกระทำที่เป็นอันตรายหรืออาจเป็นลบ
btn btn-inverse สลับปุ่มสีเทาเข้ม ไม่ผูกกับความหมายหรือการใช้งาน

ปุ่มสำหรับการดำเนินการ

ตามแบบแผน ควรใช้ปุ่มสำหรับการดำเนินการเท่านั้นในขณะที่ใช้ไฮเปอร์ลิงก์สำหรับออบเจ็กต์ ตัวอย่างเช่น "ดาวน์โหลด" ควรเป็นปุ่ม ขณะที่ "กิจกรรมล่าสุด" ควรเป็นลิงก์

สไตล์ปุ่มสามารถนำไปใช้กับอะไรก็ได้ที่มี.btnคลาสที่ใช้ อย่างไรก็ตาม โดยทั่วไป คุณจะต้องใช้สิ่งเหล่านี้กับ<a>และ .เท่านั้น<button>องค์ประกอบ

ความเข้ากันได้ข้ามเบราว์เซอร์

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

หลายขนาด

แฟนซีปุ่มขนาดใหญ่หรือเล็ก? เพิ่ม.btn-large, .btn-smallหรือ.btn-miniสำหรับสองขนาดเพิ่มเติม


สถานะคนพิการ

สำหรับปุ่มที่ปิดใช้งาน ให้เพิ่ม.disabledคลาสในลิงก์และdisabledแอตทริบิวต์สำหรับ<button>องค์ประกอบ

ลิงค์หลัก ลิงค์

หัวขึ้น! เราใช้.disabledเป็นคลาสยูทิลิตี้ที่นี่ คล้ายกับ.activeคลาสทั่วไป ดังนั้นจึงไม่จำเป็นต้องมีคำนำหน้า

หนึ่งคลาส หลายแท็ก

ใช้.btnคลาสบนองค์ประกอบ<a>, <button>, หรือ<input>

ลิงค์
  1. <a class = "btn" href = "" > ลิงก์</a>
  2. <button class = "btn" type = "submit" >
  3. ปุ่ม
  4. </button>
  5. < คลาสอินพุต= "btn" ประเภท= "ปุ่ม"
  6. ค่า= "อินพุต" >
  7. <input class = "btn" type = "submit"
  8. ค่า= "ส่ง" >

ตามแนวทางปฏิบัติที่ดีที่สุด พยายามจับคู่องค์ประกอบสำหรับบริบทของคุณเพื่อให้แน่ใจว่ามีการแสดงผลข้ามเบราว์เซอร์ที่ตรงกัน หากคุณมี ให้inputใช้ an <input type="submit">สำหรับปุ่มของคุณ

  • ไอคอนแก้ว
  • ไอคอนเพลง
  • ไอคอนค้นหา
  • ไอคอนซองจดหมาย
  • ไอคอนหัวใจ
  • ไอคอนดาว
  • ไอคอนดาวว่างเปล่า
  • ไอคอนผู้ใช้
  • ไอคอนฟิล์ม
  • ไอคอนขนาดใหญ่
  • icon-th
  • icon-th-list
  • ไอคอนโอเค
  • ไอคอนลบ
  • ไอคอนซูมเข้า
  • ไอคอนซูมออก
  • ไอคอนปิด
  • ไอคอนสัญญาณ
  • ไอคอนฟันเฟือง
  • ไอคอนถังขยะ
  • ไอคอนบ้าน
  • ไอคอนไฟล์
  • ไอคอนเวลา
  • ไอคอนถนน
  • icon-download-alt
  • ไอคอนดาวน์โหลด
  • ไอคอนอัพโหลด
  • ไอคอนกล่องจดหมาย
  • ไอคอนเล่นวงกลม
  • ไอคอนซ้ำ
  • ไอคอนรีเฟรช
  • icon-list-alt
  • ไอคอนล็อค
  • ไอคอนธง
  • ไอคอนหูฟัง
  • ไอคอนระดับเสียงปิด
  • ไอคอนลดระดับเสียง
  • ไอคอนเพิ่มระดับเสียง
  • icon-qrcode
  • ไอคอนบาร์โค้ด
  • ไอคอนแท็ก
  • ไอคอนแท็ก
  • ไอคอนหนังสือ
  • ไอคอนบุ๊คมาร์ค
  • ไอคอนพิมพ์
  • ไอคอนกล้อง
  • ไอคอนแบบอักษร
  • ไอคอนตัวหนา
  • ไอคอนตัวเอียง
  • ไอคอนข้อความความสูง
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • รายการไอคอน
  • icon-เยื้องซ้าย
  • icon-เยื้องขวา
  • icon-facetime-วิดีโอ
  • ไอคอนรูปภาพ
  • ไอคอนดินสอ
  • ไอคอนแผนที่เครื่องหมาย
  • ไอคอนปรับ
  • ไอคอนสี
  • ไอคอนแก้ไข
  • ไอคอนแชร์
  • ไอคอนตรวจสอบ
  • ไอคอนย้าย
  • ไอคอนก้าวถอยหลัง
  • icon-fast-backward
  • ไอคอนย้อนกลับ
  • ไอคอนเล่น
  • ไอคอนหยุดชั่วคราว
  • ไอคอนหยุด
  • ไอคอนไปข้างหน้า
  • icon-fast-forward
  • ไอคอนก้าวไปข้างหน้า
  • ไอคอนนำออก
  • icon-chevron-left
  • ไอคอนเชฟรอนขวา
  • ไอคอนบวกเครื่องหมาย
  • ไอคอนเครื่องหมายลบ
  • icon-remove-เครื่องหมาย
  • icon-ok-สัญญาณ
  • ไอคอนคำถามเครื่องหมาย
  • icon-info-sign
  • ไอคอนภาพหน้าจอ
  • ไอคอนลบวงกลม
  • icon-ok-วงกลม
  • ไอคอนแบนวงกลม
  • ไอคอนลูกศรซ้าย
  • ไอคอนลูกศรขวา
  • ไอคอนลูกศรขึ้น
  • ไอคอนลูกศรลง
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • ไอคอนบวก
  • ไอคอนลบ
  • ไอคอนเครื่องหมายดอกจัน
  • icon-exclamation-sign
  • ไอคอนของขวัญ
  • ไอคอนใบไม้
  • ไอคอนไฟ
  • ไอคอนตาเปิด
  • ไอคอนตาปิด
  • ไอคอนคำเตือนป้าย
  • ไอคอนเครื่องบิน
  • ไอคอนปฏิทิน
  • ไอคอนสุ่ม
  • ไอคอนความคิดเห็น
  • ไอคอนแม่เหล็ก
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-shopping-cart
  • ไอคอนโฟลเดอร์ปิด
  • ไอคอนโฟลเดอร์เปิด
  • icon-resize-vertical
  • ไอคอนปรับขนาดแนวนอน
  • icon-hdd
  • icon-bulhorn
  • ไอคอนระฆัง
  • ไอคอนใบรับรอง
  • ไอคอน-ยกนิ้วให้
  • icon-thumbs-down
  • ไอคอน-มือ-ขวา
  • ไอคอนมือซ้าย
  • ไอคอนยกมือ
  • ไอคอนมือลง
  • ไอคอนวงกลมลูกศรขวา
  • ไอคอนวงกลมลูกศรซ้าย
  • ไอคอนวงกลมลูกศรขึ้น
  • ไอคอนวงกลมลูกศรลง
  • ไอคอนลูกโลก
  • ไอคอนประแจ
  • ไอคอนงาน
  • ไอคอนตัวกรอง
  • ไอคอนกระเป๋าเอกสาร
  • icon-fullscreen

สร้างเป็นสไปรท์

แทนที่จะทำให้ทุกไอคอนเป็นคำขอพิเศษ เราได้รวบรวมพวกมันเป็นสไปรท์—กลุ่มของรูปภาพในไฟล์เดียวที่ใช้ CSS เพื่อวางตำแหน่งรูปภาพด้วยbackground-position. นี่เป็นวิธีเดียวกับที่เราใช้บน Twitter.com และได้ผลดีสำหรับเรา

คลาสไอคอนทั้งหมดถูกนำหน้าด้วย.icon-เนมสเปซและการกำหนดขอบเขตที่เหมาะสม เช่นเดียวกับองค์ประกอบอื่นๆ ของเรา ซึ่งจะช่วยหลีกเลี่ยงความขัดแย้งกับเครื่องมืออื่นๆ

Glyphiconsอนุญาตให้เราใช้ชุด Halflings ในชุดเครื่องมือโอเพนซอร์สของเรา ตราบใดที่เราให้ลิงก์และเครดิตที่นี่ในเอกสาร โปรดพิจารณาทำเช่นเดียวกันในโครงการของคุณ

วิธีใช้

Bootstrap ใช้<i>แท็กสำหรับไอคอนทั้งหมด แต่ไม่มีคลาสเคส—เฉพาะคำนำหน้าที่ใช้ร่วมกัน ในการใช้งาน ให้วางรหัสต่อไปนี้ได้ทุกที่:

  1. <i class = "ไอคอนค้นหา" ></i>

นอกจากนี้ยังมีสไตล์สำหรับไอคอนกลับหัว (สีขาว) ที่มาพร้อมคลาสพิเศษหนึ่งคลาส:

  1. <i class = "ไอคอนค้นหาไอคอนสีขาว" ></i>

มี 140 คลาสให้เลือกสำหรับไอคอนของคุณ เพียงเพิ่ม<i>แท็กที่มีชั้นเรียนที่เหมาะสม เท่านี้คุณก็พร้อมแล้ว คุณสามารถค้นหารายการทั้งหมดได้ในsprites.lessหรือที่นี่ในเอกสารนี้

หัวขึ้น! เมื่อใช้ข้างสตริงข้อความ เช่นเดียวกับในปุ่มหรือลิงก์นำทาง อย่าลืมเว้นวรรคหลัง<i>แท็กเพื่อให้มีระยะห่างที่เหมาะสม

กรณีการใช้งาน

ไอคอนนั้นยอดเยี่ยม แต่จะใช้ที่ไหน นี่คือแนวคิดบางประการ:

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

โดยพื้นฐานแล้ว ทุกที่ที่คุณสามารถใส่<i>แท็กได้ คุณสามารถใส่ไอคอนได้

ตัวอย่าง

ใช้ในปุ่ม กลุ่มปุ่มสำหรับแถบเครื่องมือ การนำทาง หรืออินพุตแบบฟอร์มที่เติมไว้ล่วงหน้า