Bootstrap

ฐาน CSS

องค์ประกอบ HTML พื้นฐานที่จัดรูปแบบและปรับปรุงด้วยคลาสที่ขยายได้

วิชาการพิมพ์

หัวเรื่อง

ส่วนหัว HTML ทั้งหมด<h1>พร้อม<h6>ใช้งาน

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

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

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

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

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

สำเนาร่างกาย

ค่าเริ่มต้นทั่วโลกของ Bootstrap font-sizeคือ14pxโดยมีค่าline-heightเท่ากับ20px สิ่งนี้ใช้กับ<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 = "ลีด" > ... </p>

สร้างด้วย Less

มาตราส่วนการพิมพ์ขึ้นอยู่กับตัวแปร LESS สองตัวในvariables.less : @baseFontSizeและ @baseLineHeightอันแรกคือขนาดฟอนต์พื้นฐานที่ใช้ตลอด และอันที่สองคือความสูงของบรรทัดฐาน เราใช้ตัวแปรเหล่านั้นและคณิตศาสตร์ง่ายๆ เพื่อสร้างระยะขอบ ช่องว่างภายใน และความสูงของเส้นทุกประเภทของเราและอีกมากมาย ปรับแต่งและ Bootstrap ปรับ

เน้น

ใช้แท็กเน้นเริ่มต้นของ HTML ที่มีสไตล์น้ำหนักเบา

<small>

หากต้องการยกเลิกการเน้นข้อความในบรรทัดหรือบล็อกข้อความ ให้ใช้แท็กขนาดเล็ก

ข้อความบรรทัดนี้มีขึ้นเพื่อเป็นการพิมพ์ที่ดี

<p> <small> ข้อความบรรทัดนี้มีไว้เพื่อใช้เป็นงานพิมพ์ที่ดี </small> </p>

ตัวหนา

สำหรับการเน้นตัวอย่างข้อความที่มีน้ำหนักแบบอักษรที่หนักกว่า

ตัวอย่างข้อความต่อไปนี้จะ แสดงเป็นข้อความ ตัวหนา

<strong> แสดงผลเป็นตัวหนา</strong>

ตัวเอียง

สำหรับเน้นตัวอย่างข้อความด้วยตัวเอียง

ตัวอย่างข้อความต่อไปนี้จะ แสดงเป็นข้อความ ตัวเอียง

<em> แสดงผลเป็นตัวเอียง</em>

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

คลาสการจัดตำแหน่ง

ปรับข้อความใหม่เป็นส่วนประกอบได้อย่างง่ายดายด้วยคลาสการจัดตำแหน่งข้อความ

ข้อความชิดซ้าย

ข้อความที่จัดกึ่งกลาง

ข้อความชิดขวา

  1. <p class = "text-left" > ข้อความชิดซ้าย </p> 
  2. <p class = "text-center" > ข้อความที่จัดกึ่งกลาง </p> 
  3. <p class = "text-right" > ข้อความชิดขวา </p>

เน้นคลาส

ถ่ายทอดความหมายผ่านสีด้วยคลาสยูทิลิตี้การเน้นจำนวนหนึ่ง

Fusce dapibus, tellus ac cursus คอมโมโด, tortor mauris nibh

Etiam porta sem malesuada magna มอลลิส euismod

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, นิซิ erat porttitor ligula

  1. <p class = "ปิดเสียง" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p> 
  2. <p class = "ข้อความเตือน" > Etiam porta sem malesuada magna mollis euismod. </p> 
  3. <p class = "text-error" > Donec ullamcorper nulla ไม่ใช่ผู้ประมูล fringilla </p> 
  4. <p class = "text-info" > Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis. </p> 
  5. <p class = "ข้อความสำเร็จ" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula </p>

ตัวย่อ

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

<abbr>

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

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

<abbr title = "แอตทริบิวต์" > attr </abbr>

<abbr class="initialism">

เพิ่ม.initialismคำย่อสำหรับขนาดตัวอักษรที่เล็กกว่าเล็กน้อย

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

<abbr title = "HyperText Markup Language" class = "initialism" > HTML </abbr>

ที่อยู่

แสดงข้อมูลติดต่อสำหรับบรรพบุรุษที่ใกล้ที่สุดหรือทั้งหน่วยงาน

<address>

คง รูปแบบไว้โดยลงท้ายทุกบรรทัดด้วย<br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
ชื่อ-นามสกุล
[email protected] 
  1. <ที่อยู่>
  2.   <strong> Twitter, Inc. </strong><br>
  3.   795 Folsom Ave, Suite 600 <br>
  4.   San Francisco, CA 94107 <br>
  5.   <abbr title = "โทรศัพท์" > ป: </abbr> (123) 456-7890 
  6. </address>
  7.  
  8. <ที่อยู่>
  9.   <strong> ชื่อเต็ม</strong><br>
  10.   <a href = "mailto:#" > [email protected] </a> 
  11. </address>

Blockquotes

สำหรับการอ้างอิงบล็อกของเนื้อหาจากแหล่งอื่นภายในเอกสารของคุณ

blockquote เริ่มต้น

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

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

  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. โลเรม อิปซัม โดลอร์ ซิท อะเมท จำนวนเต็ม posuere erat ante </p>
  3. </blockquote>

ตัวเลือก Blockquote

การเปลี่ยนแปลงรูปแบบและเนื้อหาสำหรับรูปแบบง่ายๆ ใน blockquote มาตรฐาน

การตั้งชื่อแหล่งที่มา

เพิ่ม<small>แท็กเพื่อระบุแหล่งที่มา ตัดชื่องานต้นฉบับใน<cite>.

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

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

จอแสดงผลสำรอง

ใช้.pull-rightสำหรับ blockquote แบบลอยและจัดชิดขวา

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

คนที่มีชื่อเสียงในSource Title 
  1. <blockquote class = "pull-right" > 
  2.   ...
  3. </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
  • เอเลี่ยนนั่งเอรัทเอรัทนุน
  • Eget porttitor lorem
  1. <ul>
  2.   <li> ... </li>
  3. </ul>

สั่งซื้อ

รายการสินค้าที่การสั่งซื้อมีความ สำคัญ อย่างชัดเจน

  1. ลอเรม อิปซัม ดอเลอร์ ซิท เอเม็ท
  2. Consectetur adipiscing elit
  3. จำนวนเต็ม โมเลสตี้ โลเร็ม ที่ มาสสา
  4. สิ่งอำนวยความสะดวกใน pretium nisl aliquet
  5. นุลลา โวลุตพัฒน์ อะลิควัม เวลิต
  6. Faucibus porta lacus fringilla vel
  7. เอเลี่ยนนั่งเอรัทเอรัทนุน
  8. Eget porttitor lorem
  1. <ol>
  2.   <li> ... </li>
  3. </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
  • เอเลี่ยนนั่งเอรัทเอรัทนุน
  • Eget porttitor lorem
  1. <ul class = "ไม่มีสไตล์" > 
  2.   <li> ... </li>
  3. </ul>

อินไลน์

วางรายการทั้งหมดในบรรทัดเดียวด้วยinline-blockและช่องว่างภายในบางส่วน

  • ลอเรม อิปซัม
  • Phasellus iaculis
  • นุลลา โวลุตพัฒน์
  1. <ul class = "อินไลน์" > 
  2.   <li> ... </li>
  3. </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 
  1. <dl>
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </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 
  1. <dl class = "dl-แนวนอน" > 
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

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

รหัส

อินไลน์

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

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

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

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

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

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

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

โต๊ะ

สไตล์เริ่มต้น

สำหรับการจัดรูปแบบพื้นฐาน—ช่องว่างภายในแบบเบาและเฉพาะตัวแบ่งแนวนอน—ให้เพิ่มคลาสฐาน.tableให้กับ<table>ไฟล์ .

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

คลาสเสริม

เพิ่มคลาสใด ๆ ต่อไปนี้ในคลาส.tableพื้นฐาน

.table-striped

เพิ่มลายทางม้าลายให้กับแถวของตารางภายในตัวเลือก CSS (ไม่มีใน IE7-8 <tbody>):nth-child

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

.table-bordered

เพิ่มเส้นขอบและมุมมนให้กับตาราง

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

.table-hover

เปิดใช้งานสถานะโฮเวอร์บนแถวตารางภายในไฟล์<tbody>.

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

.table-condensed

ทำให้ตารางมีขนาดเล็กลงโดยการตัดเซลล์บุรองไว้ครึ่งหนึ่ง

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

คลาสแถวเสริม

ใช้คลาสตามบริบทเพื่อกำหนดสีแถวของตาราง

ระดับ คำอธิบาย
.success บ่งบอกถึงการกระทำที่ประสบความสำเร็จหรือเป็นบวก
.error บ่งบอกถึงการกระทำที่เป็นอันตรายหรืออาจเป็นลบ
.warning ระบุคำเตือนที่อาจต้องให้ความสนใจ
.info ใช้เป็นทางเลือกแทนรูปแบบเริ่มต้น
# ผลิตภัณฑ์ ชำระเงินแล้ว สถานะ
1 วัณโรค - รายเดือน 01/04/2012 ที่ได้รับการอนุมัติ
2 วัณโรค - รายเดือน 02/04/2012 ปฏิเสธ
3 วัณโรค - รายเดือน 03/04/2012 รอดำเนินการ
4 วัณโรค - รายเดือน 04/04/2012 โทรเข้ามายืนยัน 
  1. ...
  2.   < tr class = "สำเร็จ" >
  3.     <td> 1 < /td>
  4.     <td>TB - รายเดือน</ td >
  5.     <td> 01 / 04 / 2012 < /td>
  6.     <td>อนุมัติ</ td >
  7.   </ tr >
  8. ...

มาร์กอัปตารางที่รองรับ

รายการองค์ประกอบ HTML ของตารางที่รองรับและวิธีใช้งาน

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

แบบฟอร์ม

สไตล์เริ่มต้น

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

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

เลย์เอาต์ที่เลือกได้

รวมอยู่ใน Bootstrap เป็นรูปแบบทางเลือกสามแบบสำหรับกรณีการใช้งานทั่วไป

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

เพิ่ม.form-searchลงในแบบฟอร์ม และ สำหรับ .search-queryการ<input>ป้อนข้อความแบบกลมพิเศษ

  1. <form class = "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 = "form-inline" > 
  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>

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

จัดแนวป้ายด้านขวาและลอยไปทางซ้ายเพื่อให้ปรากฏในบรรทัดเดียวกับตัวควบคุม ต้องการการเปลี่ยนแปลงมาร์กอัปส่วนใหญ่จากแบบฟอร์มเริ่มต้น:

  • เพิ่ม.form-horizontalในแบบฟอร์ม
  • ห่อฉลากและตัวควบคุมใน.control-group
  • เพิ่ม.control-labelในฉลาก
  • ล้อมการควบคุมที่เกี่ยวข้อง.controlsเพื่อการจัดตำแหน่งที่เหมาะสม
  1. <form class = "รูปแบบแนวนอน" > 
  2.   < คลาสdiv = "กลุ่มควบคุม" > 
  3.     <label class = "control-label" for = "inputEmail" > Email </label>  
  4.     < คลาสdiv = "ตัวควบคุม" > 
  5.       <input type = "text" id = "inputEmail" ตัวยึด= "Email" >   
  6.     </div>
  7.   </div>
  8.   < คลาสdiv = "กลุ่มควบคุม" > 
  9.     <label class = "control-label" for = "inputPassword" > รหัสผ่าน</label>  
  10.     < คลาสdiv = "ตัวควบคุม" > 
  11.       <input type = "password" id = "inputPassword" placeholder = "รหัสผ่าน" >   
  12.     </div>
  13.   </div>
  14.   < คลาสdiv = "กลุ่มควบคุม" > 
  15.     < คลาสdiv = "ตัวควบคุม" > 
  16.       <label class = "ช่องทำเครื่องหมาย" > 
  17.         <input type = "checkbox" > จำฉันไว้ 
  18.       </label>
  19.       <button type = "submit" class = "btn" > ลงชื่อเข้าใช้ </button>  
  20.     </div>
  21.   </div>
  22. </form>

รองรับการควบคุมแบบฟอร์ม

ตัวอย่างของตัวควบคุมฟอร์มมาตรฐานที่สนับสนุนในเค้าโครงแบบฟอร์มตัวอย่าง

อินพุต

การควบคุมแบบฟอร์มที่พบบ่อยที่สุด ฟิลด์ป้อนข้อมูลแบบข้อความ รองรับ HTML5 ทุกประเภท: ข้อความ, รหัสผ่าน, วันที่เวลา, วันที่เวลาท้องถิ่น, วันที่, เดือน, เวลา, สัปดาห์, หมายเลข, อีเมล, URL, ค้นหา, โทร และสี

ต้องใช้ตามtypeที่ระบุตลอดเวลา

  1. < ประเภท อินพุต = ตัวยึดตำแหน่ง"ข้อความ" = "การป้อนข้อความ" >

Textarea

การควบคุมแบบฟอร์มที่รองรับข้อความหลายบรรทัด เปลี่ยนrowsแอตทริบิวต์ตามความจำเป็น

  1. < แถว ข้อความ = "3" ></textarea>

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

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

ค่าเริ่มต้น (ซ้อน)


  1. <label class = "ช่องทำเครื่องหมาย" > 
  2.   < ประเภทอินพุต= "ช่องทำเครื่องหมาย" ค่า= "" >  
  3.   ทางเลือกที่หนึ่งคือสิ่งนี้และสิ่งนั้น—อย่าลืมใส่เหตุผลที่ยอดเยี่ยมด้วย
  4. </label>
  5.  
  6. <label class = "วิทยุ" > 
  7.   < ประเภทอินพุต= "วิทยุ" ชื่อ= "optionsRadios" id = "optionsRadios1" ค่า= "option1 " ถูกเลือก>     
  8.   ทางเลือกที่หนึ่งคือสิ่งนี้และสิ่งนั้น—อย่าลืมใส่เหตุผลที่ยอดเยี่ยมด้วย
  9. </label>
  10. <label class = "วิทยุ" > 
  11.   < ประเภท อินพุต = ชื่อ"วิทยุ" = "optionsRadios" id = "optionsRadios2" ค่า= "option2" >    
  12.   ตัวเลือกที่สองสามารถเป็นอย่างอื่นได้และการเลือกตัวเลือกนี้จะยกเลิกการเลือกตัวเลือกที่หนึ่ง
  13. </label>

ช่องทำเครื่องหมายแบบอินไลน์

เพิ่ม.inlineชั้นเรียนลงในชุดของช่องทำเครื่องหมายหรือวิทยุเพื่อให้ตัวควบคุมปรากฏในบรรทัดเดียวกัน

  1. <label class = "ช่องทำเครื่องหมายในบรรทัด" > 
  2.   < ประเภทอินพุต= "ช่องทำเครื่องหมาย" id = "inlineCheckbox1" ค่า= "ตัว เลือก 1" > 1   
  3. </label>
  4. <label class = "ช่องทำเครื่องหมายในบรรทัด" > 
  5.   < ประเภทอินพุต= "ช่องทำเครื่องหมาย" id = "inlineCheckbox2" ค่า= "option2" > 2   
  6. </label>
  7. <label class = "ช่องทำเครื่องหมายในบรรทัด" > 
  8.   < ประเภทอินพุต= "ช่องทำเครื่องหมาย" id = "inlineCheckbox3" ค่า= "ตัวเลือก 3" > 3   
  9. </label>

เลือก

ใช้ตัวเลือกเริ่มต้นหรือระบุ a multiple="multiple"เพื่อแสดงหลายตัวเลือกพร้อมกัน


  1. <select>
  2.   <ตัวเลือก> 1 </option>
  3.   <ตัวเลือก> 2 </option>
  4.   <ตัวเลือก> 3 </option>
  5.   <ตัวเลือก> 4 </option>
  6.   <ตัวเลือก> 5 </option>
  7. </select>
  8.  
  9. <เลือกหลายรายการ= "หลายรายการ" > 
  10.   <ตัวเลือก> 1 </option>
  11.   <ตัวเลือก> 2 </option>
  12.   <ตัวเลือก> 3 </option>
  13.   <ตัวเลือก> 4 </option>
  14.   <ตัวเลือก> 5 </option>
  15. </select>

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

การเพิ่มการควบคุมเบราว์เซอร์ที่มีอยู่ Bootstrap ยังรวมส่วนประกอบฟอร์มที่มีประโยชน์อื่นๆ

อินพุตที่เติมและต่อท้าย

เพิ่มข้อความหรือปุ่มก่อนหรือหลังการป้อนข้อความ โปรดทราบว่าselectองค์ประกอบไม่ได้รับการสนับสนุนที่นี่

ตัวเลือกเริ่มต้น

แรป an .add-onและ an inputด้วยหนึ่งในสองคลาสเพื่อเติมหรือผนวกข้อความเข้ากับอินพุต

@

.00 
  1. <div class = "input-prepend" > 
  2.   <span class = "ส่วนเสริม" > @ </span> 
  3.   < คลาสอินพุต= "span2" id = "prependedInput" ประเภท= "ข้อความ" ตัวยึด= "ชื่อผู้ใช้" >    
  4. </div>
  5. <div class = "input-append" > 
  6.   <input class = "span2" id = "appendedInput" type = "text" >   
  7.   <span class = "ส่วนเสริม" > .00 </span> 
  8. </div>

รวม

ใช้ทั้งคลาสและสองอินสแตนซ์ของ.add-onเพื่อเติมและต่อท้ายอินพุต

$ .00 
  1. <div class = "input-prepend input-append" > 
  2.   <span class = "ส่วนเสริม" > $ </span> 
  3.   < คลาสอินพุต= "span2" id = "appendedPrependedInput" ประเภท= "ข้อความ" >   
  4.   <span class = "ส่วนเสริม" > .00 </span> 
  5. </div>

ปุ่มแทนข้อความ

แทนที่จะใช้ a <span>พร้อมข้อความ ให้ใช้ a .btnเพื่อแนบปุ่ม (หรือสองปุ่ม) เข้ากับอินพุต

  1. <div class = "input-append" > 
  2.   < คลาสอินพุต= "span2" id = "appendedInputButton" ประเภท= "ข้อความ" >   
  3.   <button class = "btn" type = "button" > ไปกันเลย! </button>  
  4. </div>
  1. <div class = "input-append" > 
  2.   < คลาสอินพุต= "span2" id = "appendedInputButtons" ประเภท= "ข้อความ" >   
  3.   <button class = "btn" type = "button" > ค้นหา</button>  
  4.   <button class = "btn" type = "button" > ตัวเลือก</button>  
  5. </div>

ปุ่มแบบเลื่อนลง

  1. <div class = "input-append" > 
  2.   < คลาสอินพุต= "span2" id = "appendedDropdownButton" ประเภท= "ข้อความ" >   
  3.   <div class = "btn-group" > 
  4.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  5.       การกระทำ
  6.       <span class = "คาเร็ต" ></span> 
  7.     </button>
  8.     <ul class = "dropdown-menu" > 
  9.       ...
  10.     </ul>
  11.   </div>
  12. </div>
  1. <div class = "input-prepend" > 
  2.   <div class = "btn-group" > 
  3.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  4.       การกระทำ
  5.       <span class = "คาเร็ต" ></span> 
  6.     </button>
  7.     <ul class = "dropdown-menu" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   < คลาสอินพุต= "span2" id = "prependedDropdownButton" ประเภท= "ข้อความ" >   
  12. </div>
  1. <div class = "input-prepend input-append" > 
  2.   <div class = "btn-group" > 
  3.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  4.       การกระทำ
  5.       <span class = "คาเร็ต" ></span> 
  6.     </button>
  7.     <ul class = "dropdown-menu" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   < คลาสอินพุต= "span2" id = "appendedPrependedDropdownButton" ประเภท= "ข้อความ" >   
  12.   <div class = "btn-group" > 
  13.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  14.       การกระทำ
  15.       <span class = "คาเร็ต" ></span> 
  16.     </button>
  17.     <ul class = "dropdown-menu" > 
  18.       ...
  19.     </ul>
  20.   </div>
  21. </div>

แบ่งกลุ่มดรอปดาวน์

  1. <แบบฟอร์ม>
  2.   <div class = "input-prepend" > 
  3.     <div class = "btn-group" > ... </div> 
  4.     < ประเภทอินพุต= "ข้อความ" > 
  5.   </div>
  6.   <div class = "input-append" > 
  7.     < ประเภทอินพุต= "ข้อความ" > 
  8.     <div class = "btn-group" > ... </div> 
  9.   </div>
  10. </form>

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

  1. <form class = "form-search" > 
  2.   <div class = "input-append" > 
  3.     <input type = "text" class = "span2 search-query" >  
  4.     <button type = "submit" class = "btn" > ค้นหา</button>  
  5.   </div>
  6.   <div class = "input-prepend" > 
  7.     <button type = "submit" class = "btn" > ค้นหา</button>  
  8.     <input type = "text" class = "span2 search-query" >  
  9.   </div>
  10. </form>

ควบคุมขนาด

ใช้คลาสการปรับขนาดสัมพัทธ์ เช่น.input-largeหรือจับคู่อินพุตของคุณกับขนาดคอลัมน์กริดโดยใช้.span*คลาส

อินพุตระดับบล็อก

ทำให้องค์ประกอบใด ๆ<input>หรือ มี <textarea>ลักษณะเหมือนองค์ประกอบระดับบล็อก

  1. <input class = "input-block-level" type = "text" placeholder = ".input-block-level" >

ขนาดสัมพัทธ์

  1. <input class = "input-mini" type = "text" placeholder = ".input-mini" >   
  2. <input class = "input-small" type = "text" placeholder = ".input-small" >   
  3. <input class = "input-medium" type = "text" placeholder = ".input-medium" >   
  4. <input class = "input-large" type = "text" placeholder = ".input-large" >   
  5. < คลาส อินพุต = "input-xlarge" ประเภท= "ข้อความ" ตัวยึด= ".input-xlarge" >   
  6. < คลาส อินพุต = "input-xxlarge" ประเภท= "ข้อความ" ตัวยึด= ".input-xxlarge" >

หัวขึ้น!ในเวอร์ชันต่อๆ ไป เราจะปรับเปลี่ยนการใช้คลาสอินพุตที่เกี่ยวข้องเหล่านี้เพื่อให้ตรงกับขนาดปุ่มของเรา ตัวอย่างเช่น.input-largeจะเพิ่มช่องว่างภายในและขนาดตัวอักษรของอินพุต

ขนาดกริด

ใช้.span1สำหรับ.span12อินพุตที่ตรงกับคอลัมน์กริดที่มีขนาดเท่ากัน

  1. < คลาส อินพุต = "span1" ประเภท= "ข้อความ" ตัวยึด= ".span1" >   
  2. < คลาสอินพุต= "span2" ประเภท= "ข้อความ" ตัวยึด= ".span2" >   
  3. < คลาส อินพุต = "span3" ประเภท= "ข้อความ" ตัวยึด= ".span3" >   
  4. <เลือกคลาส= "span1" > 
  5.   ...
  6. </select>
  7. <select class = "span2" > 
  8.   ...
  9. </select>
  10. <select class = "span3" > 
  11.   ...
  12. </select>

สำหรับอินพุตกริดหลายรายการต่อบรรทัด ให้ใช้.controls-rowคลาสตัวแก้ไขสำหรับระยะห่างที่เหมาะสม มันลอยอินพุตเพื่อยุบพื้นที่สีขาว กำหนดระยะขอบที่เหมาะสม และล้างการลอย

  1. < คลาสdiv = "ตัวควบคุม" > 
  2.   < คลาส อินพุต = "span5" ประเภท= "ข้อความ" ตัวยึด= ".span5" >   
  3. </div>
  4. <div class = "controls controls-row" > 
  5.   < คลาส อินพุต = "span4" ประเภท= "ข้อความ" ตัวยึด= ".span4" >   
  6.   < คลาส อินพุต = "span1" ประเภท= "ข้อความ" ตัวยึด= ".span1" >   
  7. </div>
  8. ...

อินพุตที่แก้ไขไม่ได้

นำเสนอข้อมูลในแบบฟอร์มที่ไม่สามารถแก้ไขได้โดยไม่ต้องใช้มาร์กอัปของฟอร์มจริง

ค่าบางอย่างที่นี่ 
  1. <span class = "input-xlarge uneditable-input" > บางค่าที่นี่</span>

การดำเนินการแบบฟอร์ม

จบฟอร์มด้วยกลุ่มของการกระทำ (ปุ่ม) เมื่อวางไว้ภายใน a .form-actionsปุ่มจะเยื้องโดยอัตโนมัติเพื่อให้สอดคล้องกับตัวควบคุมฟอร์ม

  1. <div class = "รูปแบบการกระทำ" > 
  2.   <button type = "submit" class = "btn btn-primary" > บันทึกการเปลี่ยนแปลง</button>  
  3.   <button type = "button" class = "btn" > ยกเลิก</button>  
  4. </div>

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

การสนับสนุนระดับอินไลน์และบล็อกสำหรับข้อความช่วยเหลือที่ปรากฏรอบๆ ตัวควบคุมฟอร์ม

ความช่วยเหลือแบบอินไลน์

ข้อความช่วยเหลือแบบอินไลน์ 
  1. <input type = "text" ><span class = "help-inline" > ข้อความช่วยเหลือแบบอินไลน์</span>

ตัวช่วยบล็อก

ข้อความช่วยเหลือที่ยาวขึ้นซึ่งขึ้นบรรทัดใหม่และอาจขยายเกินหนึ่งบรรทัด 
  1. <input type = "text" ><span class = "help-block" > บล็อกข้อความช่วยเหลือที่ยาวขึ้นซึ่งจะแตกไปยังบรรทัดใหม่และอาจขยายเกินหนึ่งบรรทัด </span>

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

ให้คำติชมแก่ผู้ใช้หรือผู้เยี่ยมชมด้วยสถานะคำติชมพื้นฐานเกี่ยวกับการควบคุมฟอร์มและป้ายกำกับ

อินพุตโฟกัส

เราลบoutlineสไตล์เริ่มต้นของตัวควบคุมฟอร์มบางตัวและใช้ a box-shadowแทนสำหรับ:focus.

  1. <input class = "input-xlarge" id = "focusedInput" type = "text" value = "นี่คือการโฟกัส..." >

อินพุตไม่ถูกต้อง

อินพุตรูปแบบผ่านฟังก์ชันเบราว์เซอร์เริ่มต้นด้วย:invalid. ระบุ a typeเพิ่มrequiredแอตทริบิวต์หากฟิลด์นี้ไม่บังคับ และ (ถ้ามี) ให้ระบุpattern.

ไม่มีในเวอร์ชันของ Internet Explorer 7-9 เนื่องจากขาดการสนับสนุนตัวเลือกหลอก CSS

  1. <input class = "span3" type = "email" ที่ต้องการ>

อินพุตที่ปิดใช้งาน

เพิ่มdisabledแอตทริบิวต์ในอินพุตเพื่อป้องกันการป้อนข้อมูลของผู้ใช้และทริกเกอร์รูปลักษณ์ที่ต่างออกไปเล็กน้อย

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "ปิดการใช้งานอินพุตที่นี่ ... " ปิด การใช้งาน >

สถานะการตรวจสอบ

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

อาจมีบางอย่างผิดพลาด
โปรดแก้ไขข้อผิดพลาด
ชื่อผู้ใช้ถูกนำไปใช้
วู้ฮู! 
  1. <div class = "การเตือนกลุ่มควบคุม" > 
  2.   <label class = "control-label" for = "inputWarning" > อินพุตพร้อมคำเตือน</label>  
  3.   < คลาสdiv = "ตัวควบคุม" > 
  4.     < ประเภทอินพุต= "ข้อความ" id = "คำเตือนอินพุต" >  
  5.     <span class = "help-inline" > มีบางอย่างผิดพลาด</span> 
  6.   </div>
  7. </div>
  8.  
  9. <div class = "ข้อผิดพลาดของกลุ่มควบคุม" > 
  10.   <label class = "control-label" for = "inputError" > Input with error </label>  
  11.   < คลาสdiv = "ตัวควบคุม" > 
  12.     <input type = "text" id = "inputError" >  
  13.     <span class = "help-inline" > โปรดแก้ไขข้อผิดพลาด</span> 
  14.   </div>
  15. </div>
  16.  
  17. <div class = "ข้อมูลกลุ่มควบคุม" > 
  18.   <label class = "control-label" for = "inputInfo" > ป้อนข้อมูลด้วยข้อมูล</label>  
  19.   < คลาสdiv = "ตัวควบคุม" > 
  20.     <input type = "text" id = "inputInfo" >  
  21.     <span class = "help-inline" > ชื่อผู้ใช้นี้ถูกใช้ไปแล้ว</span> 
  22.   </div>
  23. </div>
  24.  
  25. <div class = "ความสำเร็จของกลุ่มควบคุม" > 
  26.   <label class = "control-label" for = "inputSuccess" > ป้อนข้อมูลด้วยความสำเร็จ</label>  
  27.   < คลาสdiv = "ตัวควบคุม" > 
  28.     <input type = "text" id = "inputSuccess" >  
  29.     <span class = "help-inline" > วู้ฮู! </span> 
  30.   </div>
  31. </div>

ปุ่ม

ปุ่มเริ่มต้น

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

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

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

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

ขนาดปุ่ม

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

  1. <p>
  2.   <button class = "btn btn-large btn-primary" type = "button" > ปุ่มขนาดใหญ่</button>  
  3.   <button class = "btn btn-large" type = "button" > ปุ่มขนาดใหญ่</button>  
  4. </p>
  5. <p>
  6.   <button class = "btn btn-primary" type = "button" > ปุ่มเริ่มต้น</button>  
  7.   <button class = "btn" type = "button" > ปุ่มเริ่มต้น</button>  
  8. </p>
  9. <p>
  10.   <button class = "btn btn-small btn-primary" type = "button" > ปุ่มเล็ก</button>  
  11.   <button class = "btn btn-small" type = "button" > ปุ่มเล็ก</button>  
  12. </p>
  13. <p>
  14.   <button class = "btn btn-mini btn-primary" type = "button" > ปุ่มมินิ</button>  
  15.   <button class = "btn btn-mini" type = "button" > ปุ่มมินิ</button>  
  16. </p>

สร้างปุ่มระดับบล็อก—ปุ่มที่ขยายเต็มความกว้างของพาเรนต์— โดยเพิ่ม.btn-block.

  1. <button class = "btn btn-large btn-block btn-primary" type = "button" > ปุ่มระดับบล็อก</button>  
  2. <button class = "btn btn-large btn-block" type = "button" > ปุ่มระดับบล็อก</button>

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

ทำให้ปุ่มต่างๆ ดูเหมือนคลิกไม่ได้โดยทำให้ปุ่มเหล่านั้นจางลง 50%

องค์ประกอบสมอ

เพิ่ม.disabledคลาสให้กับ<a>ปุ่ม

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

  1. <a href = "#" class = "btn btn-large btn-primary disabled" > ลิงก์หลัก</a>  
  2. <a href = "#" class = "btn btn-large ถูกปิดใช้งาน" > ลิงก์</a>

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

องค์ประกอบปุ่ม

เพิ่มdisabledแอตทริบิวต์ให้กับ<button>ปุ่ม

  1. <button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" > ปุ่มหลัก</button>   
  2. <button type = "button" class = "btn btn-large" ปิด การใช้งาน > ปุ่ม</button>

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

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

ลิงค์ 
  1. <a class = "btn" href = "" > ลิงก์</a>  
  2. <button class = "btn" type = "submit" > ปุ่ม</button>  
  3. <input class = "btn" type = "button" value = "Input" >   
  4. <input class = "btn" type = "submit" value = "Submit" >

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

รูปภาพ

เพิ่มคลาสให้กับ<img>องค์ประกอบเพื่อจัดรูปแบบรูปภาพในโครงการใดๆ ได้อย่างง่ายดาย

140x140 140x140 140x140 
  1. <img src = "..." class = "img ปัดเศษ" >  
  2. <img src = "..." class = "img-circle" >  
  3. <img src = "..." class = "img-โพลารอยด์" >

หัวขึ้น! .img-roundedและ.img-circleไม่ทำงานใน IE7-8 เนื่องจากขาดการborder-radiusสนับสนุน

ไอคอนโดยGlyphicons

ร่ายมนตร์ไอคอน

140 ไอคอนในรูปแบบสไปรท์ มีสีเทาเข้ม (ค่าเริ่มต้น) และสีขาว ให้บริการโดยGlyphicons

  • ไอคอนแก้ว
  • ไอคอนเพลง
  • ไอคอนค้นหา
  • ไอคอนซองจดหมาย
  • ไอคอนหัวใจ
  • ไอคอนดาว
  • ไอคอนดาวว่างเปล่า
  • ไอคอนผู้ใช้
  • ไอคอนฟิล์ม
  • ไอคอนขนาดใหญ่
  • 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

Glyphicons แสดงที่มา

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

วิธีใช้

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

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

นอกจากนี้ยังมีสไตล์สำหรับไอคอนกลับหัว (สีขาว) ที่มาพร้อมคลาสพิเศษหนึ่งคลาส เราจะบังคับใช้คลาสนี้โดยเฉพาะในสถานะโฮเวอร์และสถานะใช้งานสำหรับการนำทางและลิงก์ดรอปดาวน์

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

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

ตัวอย่างไอคอน

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

ปุ่ม

กลุ่มปุ่มในแถบเครื่องมือปุ่ม
  1. <div class = "btn-toolbar" > 
  2.   <div class = "btn-group" > 
  3.     <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
  4.     <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
  5.     <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
  6.     <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  7.   </div>
  8. </div>
ดรอปดาวน์ในกลุ่มปุ่ม
ผู้ใช้ 
  1. <div class = "btn-group" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> ผู้ใช้</a>   
  3.   <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  4.   <ul class = "dropdown-menu" > 
  5.     <li><a href = "#" ><i class = "ไอคอนดินสอ" ></i> แก้ไข</a></li>  
  6.     <li><a href = "#" ><i class = "ไอคอนถังขยะ" ></i> ลบ</a></li>  
  7.     <li><a href = "#" ><i class = "icon-ban-circle" ></i> แบน</a></li>  
  8.     <li class = "ตัวแบ่ง" ></li> 
  9.     <li><a href = "#" ><i class = "i" ></i> ตั้ง ผู้ดูแลระบบ</a></li>  
  10.   </ul>
  11. </div>
ขนาดปุ่ม
ดาว ดาว ดาว 
  1. <a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> ดาว</a>   
  2. <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> ดาว</a>   
  3. <a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> ดาว</a>

การนำทาง

  1. <ul class = "nav nav-list" > 
  2.   <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i> หน้าแรก</a></li>   
  3.   <li><a href = "#" ><i class = "icon-book" ></i> ห้องสมุด</a></li>  
  4.   <li><a href = "#" ><i class = "ไอคอนดินสอ" ></i> แอปพลิเคชัน</a></li>  
  5.   <li><a href = "#" ><i class = "i" ></i> เบ็ดเตล็ด</a></li>  
  6. </ul>

ช่องแบบฟอร์ม

  1. < คลาสdiv = "กลุ่มควบคุม" > 
  2.   <label class = "control-label" for = "inputIcon" > ที่อยู่อีเมล</label>  
  3.   < คลาสdiv = "ตัวควบคุม" > 
  4.     <div class = "input-prepend" > 
  5.       <span class = "ส่วนเสริม" ><i class = "ไอคอนซองจดหมาย" ></i></span>  
  6.       <input class = "span2" id = "inputIcon" type = "text" >   
  7.     </div>
  8.   </div>
  9. </div>