ข้างบน

ซ้าย

ขวา

ด้านล่าง

Bootstrap จาก Twitter

Bootstrap เป็นชุดเครื่องมือจาก Twitter ที่ออกแบบมาเพื่อเริ่มต้นการพัฒนาเว็บแอพและเว็บไซต์
ประกอบด้วย CSS และ HTML พื้นฐานสำหรับการพิมพ์ แบบฟอร์ม ปุ่ม ตาราง กริด การนำทาง และอื่นๆ

การแจ้งเตือนแบบเนิร์ด: Bootstrap สร้างขึ้นด้วย Lessและได้รับการออกแบบมาให้ทำงานนอกเกตโดยคำนึงถึงเบราว์เซอร์ที่ทันสมัย

Hotlink ที่ CSS

เพื่อการเริ่มต้นที่รวดเร็วและง่ายที่สุด เพียงคัดลอกข้อมูลโค้ดนี้ลงในหน้าเว็บของคุณ

ใช้กับ Less

แฟนของการใช้ Less? ไม่มีปัญหา เพียงโคลน repo และเพิ่มบรรทัดเหล่านี้:

แยกบน GitHub

ดาวน์โหลด แยก ดึง ปัญหาไฟล์ และอื่นๆ ด้วย Bootstrap repo อย่างเป็นทางการบน Github

Bootstrap บน GitHub »

ปัจจุบันv1.3.0

ประวัติศาสตร์

วิศวกรของ Twitter ในอดีตเคยใช้ห้องสมุดเกือบทุกแห่งที่พวกเขาคุ้นเคยเพื่อให้ตรงตามข้อกำหนดส่วนหน้า Bootstrap เริ่มเป็นคำตอบสำหรับความท้าทายที่นำเสนอ ด้วยความช่วยเหลือจากคนที่ยอดเยี่ยม Bootstrap ได้เติบโตขึ้นอย่างมาก

อ่านเพิ่มเติมเกี่ยวกับdev.twitter.com ›

รองรับเบราว์เซอร์

Bootstrap ได้รับการทดสอบและสนับสนุนในเบราว์เซอร์สมัยใหม่ที่สำคัญเช่น Chrome, Safari, Internet Explorer และ Firefox

ผ่านการทดสอบและรองรับใน Chrome, Safari, Internet Explorer และ Firefox

Safari ล่าสุด
Google Chrome ล่าสุด
Firefox 4+
Internet Explorer 7+
Opera 11

รวมอะไรบ้าง

Bootstrap มาพร้อมกับ CSS ที่คอมไพล์แล้ว คอมไพล์แล้ว และเทมเพลตตัวอย่าง

ใหม่ใน 1.3 Javascript plugins
ไฟล์ .less ดั้งเดิมทั้งหมด
CSS . ที่คอมไพล์แล้วและย่อให้เล็กสุด
เอกสารคู่มือสไตล์ฉบับสมบูรณ์
หน้าตัวอย่างสามหน้าที่มีเลย์เอาต์ต่างกัน

ตัวอย่างการเริ่มต้นอย่างรวดเร็ว

ต้องการเทมเพลตด่วนหรือไม่? ดูตัวอย่างพื้นฐานเหล่านี้ที่เรารวบรวมไว้:

ตารางเริ่มต้น

ระบบกริดเริ่มต้นที่ให้ไว้เป็นส่วนหนึ่งของ Bootstrap คือกริด 16 คอลัมน์กว้าง 940px มันเป็นรสชาติของระบบกริด 960 ยอดนิยม แต่ไม่มีขอบ / ช่องว่างภายในเพิ่มเติมที่ด้านซ้ายและด้านขวา

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

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

< คลาสdiv = "แถว" > 
  < คลาสdiv = "span6" > 
    ...
  </div>
  < คลาสdiv = "span10" > 
    ...
  </div>
</div>

1/3

2/3

คอลัมน์ออฟเซ็ต

8 ออฟเซ็ต 4

1/3 ออฟเซ็ต 2/3 วินาที

4 ออฟเซ็ต 4

5 ออฟเซ็ต 3

10 ออฟเซ็ต 6

เสาทำรัง

ซ้อนเนื้อหาของคุณหากคุณต้องการโดยการสร้าง.rowภายในคอลัมน์ที่มีอยู่

ตัวอย่างคอลัมน์ที่ซ้อนกัน

ระดับ 1 ของคอลัมน์

ระดับ 2

< คลาสdiv = "แถว" > 
  < คลาสdiv = "span12" > 
    ระดับ 1 ของคอลัมน์
    < คลาสdiv = "แถว" > 
      < คลาสdiv = "span6" > 
        ระดับ 2
      </div>
      < คลาสdiv = "span6" > 
        ระดับ 2
      </div>
    </div>
  </div>
</div>

ม้วนกริดของคุณเอง

สร้างขึ้นใน Bootstrap เป็นตัวแปรจำนวนหนึ่งสำหรับปรับแต่งระบบกริดเริ่มต้น 940px ด้วยการปรับแต่งเล็กน้อย คุณสามารถปรับเปลี่ยนขนาดของคอลัมน์ รางน้ำ และคอนเทนเนอร์ที่พวกมันอาศัยอยู่

ภายในกริด

ตัวแปรที่จำเป็นในการปรับเปลี่ยนระบบกริดในปัจจุบันทั้งหมดอยู่ในpreboot.less.

ตัวแปร	ค่าเริ่มต้น	คำอธิบาย
`@gridColumns`	16	จำนวนคอลัมน์ภายในตาราง
`@gridColumnWidth`	40px	ความกว้างของแต่ละคอลัมน์ภายในตาราง
`@gridGutterWidth`	20px	ช่องว่างเชิงลบระหว่างแต่ละคอลัมน์
`@siteWidth`	ผลรวมที่คำนวณของคอลัมน์และรางน้ำทั้งหมด	เราใช้การจับคู่พื้นฐานเพื่อนับจำนวนคอลัมน์และรางน้ำ และกำหนดความกว้างของ`.fixed-container()`มิกซ์อิน

ตอนนี้ปรับแต่ง

การปรับเปลี่ยนกริดหมายถึงการเปลี่ยน@grid-*ตัวแปรทั้งสามและคอมไพล์ไฟล์ Less ใหม่

Bootstrap มาพร้อมกับระบบกริดที่มีมากถึง 24 คอลัมน์; ค่าดีฟอลต์คือ 16 นี่คือลักษณะที่ตัวแปรกริดของคุณจะปรับแต่งให้เป็นกริดแบบ 24 คอลัมน์

@gridColumns : 24 ;       
@gridColumnWidth : 20px ;   
@gridGutterWidth : 20px ;

เมื่อคอมไพล์ใหม่แล้ว คุณก็พร้อม!

เค้าโครงคงที่

เลย์เอาต์กึ่งกลางกว้าง 940px ที่เป็นค่าเริ่มต้นและเรียบง่ายสำหรับเว็บไซต์หรือหน้าเว็บใดๆ ที่จัดทำโดยไฟล์<div.container>.

<body>
  < คลาสdiv = "คอนเทนเนอร์" > 
    ...
  </div>
</body>

เลย์เอาต์ของไหล

โครงสร้างหน้าแบบไหลทางเลือกที่ยืดหยุ่นพร้อมความกว้างต่ำสุดและสูงสุด และแถบด้านข้างทางซ้ายมือ เหมาะสำหรับแอปและเอกสาร

<body>
  <div class = "container-fluid" > 
    < คลาสdiv = "แถบด้านข้าง" > 
      ...
    </div>
    <div class = "เนื้อหา" > 
      ...
    </div>
  </div>
</body>

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

ลำดับชั้นการพิมพ์มาตรฐานสำหรับการจัดโครงสร้างหน้าเว็บของคุณ

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

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

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

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

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

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

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

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

ย่อหน้าตัวอย่าง

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 vehicula ut id elit

ตัวอย่างหัวเรื่องมีหัวเรื่องย่อย…

อื่น ๆ. องค์ประกอบ

การใช้การเน้น ที่อยู่ และตัวย่อ

<strong> <em> <address> <abbr>

เมื่อใดควรใช้

แท็กเน้น ( <strong>และ<em>) ควรใช้เพื่อระบุความสำคัญเพิ่มเติมหรือเน้นคำหรือวลีที่สัมพันธ์กับสำเนาโดยรอบ ใช้สำหรับ<strong>ความสำคัญและเน้นความเครียด<em>

เน้นในย่อหน้า

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]

หมายเหตุ:แต่ละบรรทัดใน a <address>ต้องลงท้ายด้วยตัวแบ่งบรรทัด ( <br />) หรือห่อด้วยแท็กระดับบล็อก (เช่น<p>) เพื่อจัดโครงสร้างเนื้อหาอย่างเหมาะสม

ตัวย่อ

สำหรับตัวย่อและตัวย่อ ให้ใช้<abbr>แท็ก ( <acronym>เลิกใช้แล้วในHTML5 ) ใส่แบบฟอร์มชวเลขภายในแท็กและตั้งชื่อสำหรับชื่อเต็ม

Blockquotes

<blockquote> <p> <small>

วิธีอ้าง

<blockquote>หากต้องการใส่ blockquote ให้ห่อ<p>และ<small>แท็ก ใช้<small>องค์ประกอบเพื่ออ้างอิงแหล่งที่มาของคุณและคุณจะได้รับ em dash —ก่อนหน้านั้น

Lorem ipsum dolor sit amet, consectetur adipiscing elit. โลเรม อิปซัม โดลอร์ จำนวนเต็ม posuere erat ante venenatis dapibus posuere velit aliquet
ดร.จูเลียส ฮิบเบิร์ต

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. โลเรม อิปซัม โดลอร์ ซิท อะเมท จำนวนเต็ม posuere erat ante venenatis dapibus posuere velit aliquet </p>
  <small> ดร.จูเลียส ฮิบเบิร์ต</small>
</blockquote>

รายการ

ไม่เรียงลำดับ`<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.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>`

ลอเรม อิปซัม ดอเลอร์ ซิท เอเม็ท
Consectetur adipiscing elit
จำนวนเต็ม โมเลสตี้ โลเร็ม ที่ มาสสา
สิ่งอำนวยความสะดวกใน pretium nisl aliquet
นุลลา โวลุตพัฒน์ อะลิควัม เวลิต
Faucibus porta lacus fringilla vel
อิเนียนนั่งเอรัต erat nunc
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

รหัส

<code> <pre>

แมงดาโค้ดของคุณอย่างมีสไตล์ด้วยแท็กง่ายๆ สองแท็ก เพื่อความยอดเยี่ยมยิ่งขึ้นด้วย javascript ให้วางโค้ดของ Google prettify library และคุณพร้อมแล้ว

แสดงรหัส

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

ธาตุ ผลลัพธ์

<code> ในบรรทัดข้อความเช่นนี้ โค้ดที่ห่อหุ้มของคุณจะมีลักษณะเช่น>html<นี้

ธาตุ	ผลลัพธ์
`<code>`	ในบรรทัดข้อความเช่นนี้ โค้ดที่ห่อหุ้มของคุณจะมีลักษณะเช่น`>html<`นี้
`<pre>`	<div> <h1>หัวเรื่อง</h1> <p>มีบางอย่างอยู่ที่นี่...</p> </div> หมายเหตุ:อย่าลืมเก็บโค้ดไว้ใน`pre`แท็กให้ชิดซ้ายมากที่สุด มันจะแสดงแท็บทั้งหมด
`<pre class="prettyprint">`	เมื่อใช้ไลบรารี google-code-prettify คุณจะเป็นบล็อกของโค้ดที่มีรูปแบบภาพที่แตกต่างออกไปเล็กน้อยและการเน้นไวยากรณ์อัตโนมัติ <div> <h1> หัวเรื่อง</h1> <p> มีบางอย่างอยู่ที่นี่... </p> </div> ดาวน์โหลด google-code-prettifyและดูวิธีใช้งาน readme

<pre>

<div>
  <h1>หัวเรื่อง</h1>
  <p>มีบางอย่างอยู่ที่นี่...</p>
</div>

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

<pre class="prettyprint">

เมื่อใช้ไลบรารี google-code-prettify คุณจะเป็นบล็อกของโค้ดที่มีรูปแบบภาพที่แตกต่างออกไปเล็กน้อยและการเน้นไวยากรณ์อัตโนมัติ

<div> <h1> หัวเรื่อง</h1> <p> มีบางอย่างอยู่ที่นี่... </p> </div>

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

ป้ายอินไลน์

<span class="label">

เรียกร้องความสนใจหรือตั้งค่าสถานะวลีใดๆ ในเนื้อหาของคุณ

ป้ายอะไรก็ได้

เคยต้องการหนึ่งในแฟนซีเหล่านั้นใหม่! หรือ แฟล็ก สำคัญเมื่อเขียนโค้ด? ตอนนี้คุณมีพวกเขาแล้ว นี่คือสิ่งที่รวมอยู่ในค่าเริ่มต้น:

ฉลาก	ผลลัพธ์
`<span class="label">Default</span>`	ค่าเริ่มต้น
`<span class="label success">New</span>`	ใหม่
`<span class="label warning">Warning</span>`	คำเตือน
`<span class="label important">Important</span>`	สำคัญ
`<span class="label notice">Notice</span>`	สังเกต

สื่อตาราง

แสดงภาพขนาดย่อของขนาดต่างๆ บนหน้าเว็บที่มีรอยเท้า HTML ต่ำและรูปแบบน้อยที่สุด

ตัวอย่างภาพขนาดย่อ

ภาพขนาดย่อใน.media-gridขนาดใดก็ได้ แต่จะทำงานได้ดีที่สุดเมื่อจับคู่กับระบบกริด Bootstrap ในตัวโดยตรง ความกว้างของรูปภาพ เช่น 90, 210 และ 330 รวมกับช่องว่างภายในสองสามพิกเซลเพื่อให้เท่ากับขนาด.span2, .span4, และ.span6คอลัมน์

ใหญ่

ปานกลาง

เล็ก

การเข้ารหัสพวกเขา

กริดสื่อนั้นใช้งานง่ายและค่อนข้างง่ายในด้านมาร์กอัป ขนาดของพวกเขาขึ้นอยู่กับขนาดของภาพที่รวมอยู่ล้วนๆ

<ul class = "media-grid" > 
  <li>
    <a href = "#" > 
      <img class = "ภาพขนาดย่อ" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
  <li>
    <a href = "#" > 
      <img class = "ภาพขนาดย่อ" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
</ul>

สร้างโต๊ะ

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

ตารางดีมาก—สำหรับหลายสิ่งหลายอย่าง อย่างไรก็ตาม ตารางที่ยอดเยี่ยมนั้นต้องการมาร์กอัปเล็กน้อยจึงจะมีประโยชน์ ปรับขนาดได้ และสามารถอ่านได้ (ที่ระดับโค้ด) ต่อไปนี้คือเคล็ดลับเล็กๆ น้อยๆ ที่จะช่วยคุณได้

ล้อมส่วนหัวคอลัมน์ของคุณใน<thead>ลำดับชั้นเสมอ<thead>> <tr>><th>

เช่นเดียวกับส่วนหัวของคอลัมน์ เนื้อหาเนื้อหาของตารางทั้งหมดควรถูกห่อด้วย a <tbody>เพื่อให้ลำดับชั้นของคุณเป็น<tbody>> <tr>><td>

ตัวอย่าง: สไตล์ตารางเริ่มต้น

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

#	ชื่อจริง	นามสกุล	ภาษา
1	บาง	หนึ่ง	ภาษาอังกฤษ
2	โจ	กล้ามเนื้อหน้าท้องที่เป็นลอน	ภาษาอังกฤษ
3	สตู	บุ๋ม	รหัส

<ตาราง>
  ...
</table>

ตัวอย่าง: ลายทางม้าลาย

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

#	ชื่อจริง	นามสกุล	ภาษา
1	บาง	หนึ่ง	ภาษาอังกฤษ
2	โจ	กล้ามเนื้อหน้าท้องที่เป็นลอน	ภาษาอังกฤษ
3	สตู	บุ๋ม	รหัส

หมายเหตุ: Zebra-striping เป็นการปรับปรุงแบบก้าวหน้าที่ไม่มีในเบราว์เซอร์รุ่นเก่า เช่น IE8 หรือต่ำกว่า

<table class = "ลายทางม้าลาย" > 
...
</table>

ตัวอย่าง: ลายทางม้าลาย w/ TableSorter.js

จากตัวอย่างก่อนหน้านี้ เราปรับปรุงประโยชน์ของตารางของเราโดยจัดเตรียมฟังก์ชันการเรียงลำดับผ่านjQueryและปลั๊กอินTablesorter คลิกส่วนหัวของคอลัมน์ใดก็ได้เพื่อเปลี่ยนการจัดเรียง

#	ชื่อจริง	นามสกุล	ภาษา
2	โจ	กล้ามเนื้อหน้าท้องที่เป็นลอน	ภาษาอังกฤษ
3	สตู	บุ๋ม	รหัส
1	ของคุณ	หนึ่ง	ภาษาอังกฤษ

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script > 
  $ ( ฟังก์ชัน() { 
    $ ( "table#sortTableExample" ) tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<table class = "ลายทางม้าลาย" > 
  ...
</table>

แถบด้านบนคงที่

มันคืออะไร

แถบด้านบนของเราเป็นแถบคงที่ซึ่งมีโลโก้หรือชื่อของเว็บไซต์ การนำทางหลัก และแบบฟอร์มการค้นหา

ปรับแต่งได้

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

รวมรายการแบบเลื่อนลง

ในส่วนของการนำทางหลัก เราได้รวมความสามารถในการเพิ่มดรอปดาวน์ลงในการนำทางของคุณ ตรวจสอบการนำทางรองด้านบน (จัดชิดขวา) เพื่อดูว่าดำเนินการอย่างไร liแท็ กดรอป ดาวน์ ยังรองรับ .activeการแสดงการเลือกหน้าปัจจุบันอีกด้วย

หมายเหตุ:เมื่อใช้แถบด้านบนในหน้าใดๆ อย่าลืมพิจารณาการทับซ้อนที่เกิดจากการเพิ่มpadding-top: 40px;ลงในbodyไฟล์ .

แท็บและยาเม็ด

สร้างการนำทางรองอย่างง่ายด้วยไฟล์<ul>. สลับระหว่างแท็บหรือยาเม็ดโดยเพิ่มคลาสที่เหมาะสม

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

<ul class = "แท็บ" > 
  <li class = "active" ><a href = "#" > หน้าแรก</a></li>  
  <li><a href = "#" > โปรไฟล์</a></li> 
  <li><a href = "#" > ข้อความ</a></li> 
  <li><a href = "#" > การตั้งค่า</a></li> 
  <li><a href = "#" > ติดต่อ</a></li> 
</ul>

<ul class = "ยา" > 
  <li class = "active" ><a href = "#" > หน้าแรก</a></li>  
  <li><a href = "#" > โปรไฟล์</a></li> 
  <li><a href = "#" > ข้อความ</a></li> 
  <li><a href = "#" > การตั้งค่า</a></li> 
  <li><a href = "#" > ติดต่อ</a></li> 
</ul>

เกล็ดขนมปัง

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

<ul class = "เกล็ดขนมปัง" > 
  <li><a href = "#" > หน้าแรก</a> <span class = "ตัวแบ่ง" > / </span></li>   
  <li><a href = "#" > หน้ากลาง</a> <span class = "ตัวแบ่ง" > / </span></li>   
  <li><a href = "#" > อีกอันหนึ่ง</a> <span class = "ตัวแบ่ง" > / </span></li>   
  <li class = "active" > คุณอยู่ที่นี่</li> 
</ul>

การแบ่งหน้า

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

< คลาสdiv = "การแบ่งหน้า" > 
  <ul>
    <li class = "ก่อนหน้าถูกปิดใช้งาน" ><a href = "#" > ← ก่อนหน้า</a></li>  
    <li class = "ใช้งานอยู่" ><a href = "#" > 1 </a></li>  
    <li><a href = "#" > 2 </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > 4 </a></li> 
    <li><a href = "#" > 5 </a></li> 
    <li class = "next" ><a href = "#" > Next → </a></li>  
  </ul>
</div>

การแจ้งเตือนพื้นฐาน

.alert-message

ข้อความบรรทัดเดียวสำหรับเน้นความล้มเหลว ความล้มเหลวที่อาจเกิดขึ้น หรือความสำเร็จของการดำเนินการ มีประโยชน์อย่างยิ่งสำหรับแบบฟอร์ม

รับจาวาสคริปต์ »

กัวคาโมเล่ศักดิ์สิทธิ์! เช็คตัวเองให้ดีที่สุด คุณไม่ได้ดูดีเกินไป

อื้อหือ! เปลี่ยนสิ่งนี้และสิ่งนั้นแล้วลองอีกครั้ง

ทำได้ดี! คุณอ่านข้อความแจ้งเตือนนี้สำเร็จแล้ว

หัวขึ้น! นี่เป็นการแจ้งเตือนที่ต้องการความสนใจจากคุณ แต่ยังไม่มีความสำคัญมากนัก

ตัวอย่างโค้ด

<div class = "การเตือนข้อความเตือน" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> กัวคาโมเล่ศักดิ์สิทธิ์! </strong> เช็คตัวเองให้ดีที่สุด คุณไม่ดูดีเกินไป </p>
</div>

บล็อกข้อความ

.alert-message.block-message

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

รับจาวาสคริปต์ »

กัวคาโมเล่ศักดิ์สิทธิ์! นี่คือคำเตือน! เช็คตัวเองให้ดีที่สุด คุณไม่ได้ดูดีเกินไป Nulla vitae elit libero, pharetra augue. ส่ง commodo cursus magna, vel scelerisque nisl consectetur et.

ลงมือทำสิ่งนี้ หรือทำสิ่งนี้

อื้อหือ! คุณมีข้อผิดพลาด! เปลี่ยนสิ่งนี้และสิ่งนั้นแล้วลองอีกครั้ง

Duis mollis est non commodo luctus
Nisi erat porttitor ligula
Eget lacinia odio sem nec elit

ลงมือทำสิ่งนี้ หรือทำสิ่งนี้

ทำได้ดี! คุณอ่านข้อความแจ้งเตือนนี้สำเร็จแล้ว Cum sociis natoque penatibus และ magnis dis parturient montes, nascetur ridiculus mus. เมซีนาส เฟาซิบัส มอลลิส อินเตอร์ดัม

ลงมือทำสิ่งนี้ หรือทำสิ่งนี้

ตัวอย่างโค้ด

<div class = "alert-message block-message warning" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> กัวคาโมเล่ศักดิ์สิทธิ์! นี่คือคำเตือน! </strong> เช็คตัวเองให้ดีที่สุด คุณไม่ดูดีเกินไป Nulla vitae elit libero, pharetra augue. ส่ง commodo cursus magna, vel scelerisque nisl consectetur et. </p>
  <div class = "การแจ้งเตือนการดำเนินการ" > 
    <a class = "btn small" href = "#" > ดำเนินการนี้</a> <a class = "btn small" href = "#" > หรือทำเช่นนี้</a>     
  </div>
</div>

Modals

โมดอล—กล่องโต้ตอบหรือไลท์บ็อกซ์—เหมาะอย่างยิ่งสำหรับการดำเนินการตามบริบทในสถานการณ์ที่จำเป็นต้องรักษาบริบทพื้นหลังไว้

รับจาวาสคริปต์ »

เคล็ดลับเครื่องมือ

Twipsies มีประโยชน์มากในการช่วยผู้ใช้ที่สับสนและชี้ไปในทิศทางที่ถูกต้อง

รับจาวาสคริปต์ »

Lorem ipsum dolar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, ที่จริงแล้ว illo voluptatem ออกจาก perspiciatis laudantium rem doloremque ถึง voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit diabetesantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dicta quae diabetesantium fugit voluptas ne quasi fugit voluptas อะ

ป๊อปโอเวอร์

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

รับจาวาสคริปต์ »

เริ่มต้น

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

ดูเอกสารจาวาสคริปต์ »

รวมอะไรบ้าง

ทำให้องค์ประกอบหลักบางอย่างของ Bootstrap มีชีวิตชีวาด้วยปลั๊กอินแบบกำหนดเองใหม่ที่ทำงานร่วมกับjQueryและEnder เราขอแนะนำให้คุณขยายและแก้ไขเพื่อให้เหมาะสมกับความต้องการในการพัฒนาเฉพาะขอ��คุณ

ไฟล์	คำอธิบาย
bootstrap-modal.js	ปลั๊กอิน Modal ของเรานั้นเพรียวบางเป็นพิเศษสำหรับปลั๊กอิน modal js แบบดั้งเดิม! เราใช้ความระมัดระวังเป็นพิเศษในการรวมเฉพาะฟังก์ชันการทำงานเปล่าที่เราต้องการที่ twitter
bootstrap-alerts.js	ปลั๊กอินการแจ้งเตือนเป็นคลาสที่เล็กมากสำหรับการเพิ่มฟังก์ชันการทำงานที่ใกล้ชิดกับการแจ้งเตือน
bootstrap-dropdown.js	ปลั๊กอินนี้ใช้สำหรับเพิ่มการโต้ตอบแบบเลื่อนลงไปยังแถบด้านบนบูตสแตรปหรือการนำทางแบบแท็บ
bootstrap-scrollspy.js	ปลั๊กอิน ScrollSpy ใช้สำหรับเพิ่มการนำทางอัปเดตอัตโนมัติตามตำแหน่งการเลื่อนไปที่แถบด้านบนบูต
bootstrap-tabs.js	ปลั๊กอินนี้เพิ่มฟังก์ชันแท็บและยาเม็ดที่รวดเร็ว ไดนามิก สำหรับการวนรอบเนื้อหาในเครื่อง
bootstrap-twipsy.js	ตามปลั๊กอิน jQuery.tipsy ที่ยอดเยี่ยมที่เขียนโดย Jason Frame; twipsy เป็นเวอร์ชันที่อัปเดตซึ่งไม่พึ่งพารูปภาพ ใช้ css3 สำหรับแอนิเมชัน และแอตทริบิวต์ข้อมูลสำหรับการจัดเก็บชื่อในเครื่อง!
bootstrap-popover.js	ปลั๊กอินป๊อปโอเวอร์มีอินเทอร์เฟซที่เรียบง่ายสำหรับการเพิ่มป๊อปอัปในแอปพลิเคชันของคุณ มันขยาย ปลั๊กอิน boostrap-twipsy.jsดังนั้นอย่าลืมคว้าไฟล์นั้นด้วยเมื่อรวม popovers ไว้ในโปรเจ็กต์ของคุณ!

จาวาสคริปต์จำเป็นหรือไม่?

ไม่! Bootstrap ได้รับการออกแบบมาเป็นอันดับแรกและเป็นไลบรารี CSS จาวาสคริปต์นี้มีเลเยอร์แบบโต้ตอบพื้นฐานที่ด้านบนของสไตล์ที่รวมไว้

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

สำหรับข้อมูลเพิ่มเติมและดูการสาธิตสด โปรดดูที่หน้าเอกสารประกอบปลั๊กอินของ เรา

Bootstrap ถูกสร้างขึ้นด้วยPrebootซึ่งเป็นแพ็คโอเพ่นซอร์สของมิกซ์อินและตัวแปรที่จะใช้ร่วมกับLessซึ่งเป็นตัวประมวลผลล่วงหน้าของ CSS เพื่อการพัฒนาเว็บที่รวดเร็วและง่ายขึ้น

ตรวจสอบวิธีที่เราใช้ Preboot ใน Bootstrap และวิธีใช้งานหากคุณเลือกที่จะเรียกใช้ Less ในโครงการถัดไปของคุณ

วิธีใช้งาน

ใช้ตัวเลือกนี้เพื่อใช้ประโยชน์จากตัวแปร Less, มิกซ์อิน และการซ้อนใน CSS ของ Bootstrap อย่างเต็มที่ผ่านจาวาสคริปต์ในเบราว์เซอร์ของคุณ

<link rel = "stylesheet/less" href = "less/bootstrap.less" สื่อ= "ทั้งหมด" />    
<script src = "js/less-1.1.3.min.js" ></script>

ไม่รู้สึกวิธีแก้ปัญหา .js ใช่ไหม ลองใช้แอพ Less Macหรือใช้ Node.jsเพื่อคอมไพล์เมื่อคุณปรับใช้โค้ดของคุณ

รวมอะไรบ้าง

นี่คือไฮไลท์บางส่วนของสิ่งที่รวมอยู่ใน Twitter Bootstrap ซึ่งเป็นส่วนหนึ่งของ Bootstrap ตรงไปที่เว็บไซต์ Bootstrap หรือหน้าโครงการ Github เพื่อดาวน์โหลดและเรียนรู้เพิ่มเติม

ตัวแปร

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

// ลิงค์
@linkColor : #8b59c2;         
@linkColorHover :     ทำให้เข้ม ขึ้น ( @linkColor , 10 ); 
 
// เกรย์ส
@ดำ: #000;             
@grayDark :           สว่าง ขึ้น ( @black , 25 % %); 
@gray :               สว่าง ขึ้น ( @black , 50 % %); 
@grayLight :          ทำให้สว่าง ขึ้น ( @black , 70 % %); 
@grayLighter :        ทำให้สว่าง ขึ้น ( @black , 90 % %); 
@ขาว : #ffff ;             
 
// เน้นสี
@ฟ้า : # 08b5fb ;              
@กรีน : # 46a546 ;             
@แดง : # 9d261d ;               
@เหลือง : # ffc40d ;            
@สีส้ม : # f89406 ;            
@สีชมพู : # c3325f ;              
@สีม่วง : # 7a43b6 ;            
 
// ตารางพื้นฐาน
@basefont : 13px ;          
@baseline : 18px ;

แสดงความคิดเห็น

Less ยังให้รูปแบบการแสดงความคิดเห็นอื่นนอกเหนือจาก/* ... */ไวยากรณ์ ปกติของ CSS

// นี่คือความคิดเห็น
/* นี่คือความคิดเห็น */

ผสมวาซู

โดยทั่วไปแล้ว Mixins จะรวมหรือบางส่วนสำหรับ CSS ทำให้คุณสามารถรวมบล็อกของโค้ดเป็นหนึ่งเดียว เหมาะสำหรับคุณสมบัตินำหน้าผู้ขาย เช่นbox-shadowการไล่ระดับสีข้ามเบราว์เซอร์ กองแบบอักษร และอื่นๆ ด้านล่างนี้คือตัวอย่างมิกซ์อินที่มาพร้อมกับ Bootstrap

กองแบบอักษร

#แบบอักษร{
  . ชวเลข( @weight : ปกติ, @size : 14px , @lineHeight : 20px ) {     
    แบบอักษร- ขนาด: @size ; 
    แบบอักษร- น้ำหนัก: @weight ; 
    line - height : @lineHeight ; 
  }
  . sans - serif ( @weight : ปกติ, @size : 14px , @lineHeight : 20px ) {     
    แบบอักษร- ตระกูล: "Helvetica Neue" , Helvetica , Arial , sans - serif ;   
    แบบอักษร- ขนาด: @size ; 
    แบบอักษร- น้ำหนัก: @weight ; 
    line - height : @lineHeight ; 
  }
  ...
}

ไล่โทนสี

#การไล่ระดับสี {
  ...
  . แนวตั้ง( @startColor : #555, @endColor: #333) { 
    พื้นหลัง- สี: @endColor ; 
    พื้นหลัง- ซ้ำ: ซ้ำ- x ;
    พื้นหลัง- รูปภาพ: - khtml - การไล่ระดับสี( เชิงเส้น, บน ซ้าย , ล่างซ้าย, จาก( @startColor ) ถึง( @endColor )); // ผู้พิชิต   
    พื้นหลัง- รูปภาพ: - moz - เชิงเส้น- ไล่ระดับสี( @startColor , @endColor ); // FF 3.6+   
    พื้นหลัง- รูปภาพ: - ms - เชิงเส้น- ไล่ระดับสี( @startColor , @endColor ); // IE10   
    พื้นหลัง- รูปภาพ: - webkit - การไล่ระดับสี( เชิงเส้น, บน ซ้าย , ล่างซ้าย, สี- หยุด( 0 %, @startColor ), สี- หยุด( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    พื้นหลัง- ภาพ: - webkit - เชิงเส้น- ไล่ระดับสี( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    พื้นหลัง- รูปภาพ: - o - เชิงเส้น- ไล่ระดับสี( @startColor , @endColor ); // โอเปร่า 11.10   
    พื้นหลัง- รูปภาพ: เชิงเส้น- ไล่ระดับสี( @startColor , @endColor ); // มาตรฐาน  
  }
  ...
}

ปฏิบัติการ

จินตนาการและคำนวณเพื่อสร้างมิกซ์อินที่ยืดหยุ่นและทรงพลังดังตัวอย่างด้านล่าง

// เส้นกริด
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
@siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
 
// สร้างบางคอลัมน์
. คอลัมน์( @columnSpan : 1 ) {  
  width : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
}

รวบรวมน้อย

หลังจากแก้ไข.lessไฟล์ใน /lib/ คุณจะต้องคอมไพล์ใหม่เพื่อสร้างไฟล์ bootstrap-*.*.*.css และ bootstrap-*.*.*.min.css ใหม่ หากคุณกำลังส่งคำขอดึงไปยัง GitHub คุณต้องคอมไพล์ใหม่เสมอ

วิธีรวบรวม

วิธี	ขั้นตอน
โหนดด้วย makefile	ติดตั้งคอมไพเลอร์บรรทัดคำสั่งที่น้อยกว่าด้วย npm โดยรันคำสั่งต่อไปนี้: $ npm ติดตั้ง lessc เมื่อติดตั้งแล้ว ให้เรียกใช้`make`จากรูทของไดเร็กทอรีบูตสแตรปของคุณ เท่านี้คุณก็พร้อมแล้ว นอกจากนี้ หากคุณได้ ติดตั้ง watchrไว้ คุณอาจเรียกใช้`make watch`เพื่อให้ bootstrap สร้างใหม่โดยอัตโนมัติทุกครั้งที่คุณแก้ไขไฟล์ใน bootstrap lib (ไม่จำเป็น เพียงเป็นวิธีที่สะดวก)
Javascript	ดาวน์โหลด Less.js ล่าสุดและรวมพา ธ ไปที่มัน (และ Bootstrap) ในไฟล์`head`. <link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script> ในการคอมไพล์ไฟล์ .less ใหม่ เพียงแค่บันทึกและโหลดหน้าเว็บของคุณใหม่ Less.js รวบรวมและจัดเก็บไว้ในที่จัดเก็บในตัวเครื่อง
บรรทัดคำสั่ง	หากคุณมีเครื่องมือบรรทัดคำสั่งน้อยกว่าติดตั้งอยู่แล้ว ให้เรียกใช้คำสั่งต่อไปนี้: $ lessc ./lib/bootstrap.less > bootstrap.css อย่าลืมรวม`--compress`ไว้ในคำสั่งนั้นหากคุณพยายามบันทึกบางไบต์!
แอพ Mac น้อย	แอพ Mac ที่ไม่เป็นทางการดูไดเรกทอรีของไฟล์ .less และคอมไพล์โค้ดเป็นไฟล์ในเครื่องหลังจากบันทึกไฟล์ .less ที่ดูทุกครั้ง หากต้องการ คุณสามารถสลับการตั้งค่าในแอปสำหรับการลดขนาดอัตโนมัติและไดเร็กทอรีที่ไฟล์ที่คอมไพล์จะจบลง

Hotlink ที่ CSS

ใช้กับ Less

แยกบน GitHub

เกี่ยวกับ ประวัติย่อของ Bootstrap การสนับสนุนเบราว์เซอร์ และอื่นๆ

ประวัติศาสตร์

รองรับเบราว์เซอร์

รวมอะไรบ้าง

ตัวอย่างการเริ่มต้นอย่างรวดเร็ว

ระบบกริดเขย่ามาตรฐาน 940px หรือม้วนของคุณเอง

ตารางเริ่มต้น

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

คอลัมน์ออฟเซ็ต

เสาทำรัง

ตัวอย่างคอลัมน์ที่ซ้อนกัน

ม้วนกริดของคุณเอง

ภายในกริด

ตอนนี้ปรับแต่ง

เลย์เอาต์เทมเพลตพื้นฐานในการสร้างหน้าเว็บ

เค้าโครงคงที่

เลย์เอาต์ของไหล

หัวเรื่อง ย่อหน้ารายการ และองค์ประกอบประเภทอินไลน์อื่นๆ

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

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

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

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

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

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

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

ย่อหน้าตัวอย่าง

ตัวอย่างหัวเรื่องมีหัวเรื่องย่อย…

อื่น ๆ. องค์ประกอบ

เมื่อใดควรใช้

เน้นในย่อหน้า

ที่อยู่

ตัวย่อ

Blockquotes

วิธีอ้าง

รายการ

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

ไม่มีสไตล์<ul.unstyled>

สั่งซื้อ<ol>

คำอธิบายdl

รหัส

แสดงรหัส

ป้ายอินไลน์

ป้ายอะไรก็ได้

สื่อที่แสดงรูปภาพและวิดีโอ

สื่อตาราง

ตัวอย่างภาพขนาดย่อ

ใหญ่

ปานกลาง

เล็ก

การเข้ารหัสพวกเขา

Tables สำหรับ คุณเดาเอานะ ตาราง data

สร้างโต๊ะ

ตัวอย่าง: สไตล์ตารางเริ่มต้น

ตัวอย่าง: ลายทางม้าลาย

ตัวอย่าง: ลายทางม้าลาย w/ TableSorter.js

แบบฟอร์ม

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

แบบฟอร์มซ้อน

ขนาดช่องแบบฟอร์ม

ปุ่ม

ปุ่มตัวอย่าง

ขนาดอื่น

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

ลิงค์

ปุ่ม

การนำทาง

แถบด้านบนคงที่

ชื่อโครงการ

มันคืออะไร

ปรับแต่งได้

รวมรายการแบบเลื่อนลง

แท็บและยาเม็ด

เกล็ดขนมปัง

การแบ่งหน้า

Alerts & Errors รูปแบบสำหรับความสำเร็จ คำเตือน และข้อความแสดงข้อผิดพลาดหรือการแจ้งเตือน

การแจ้งเตือนพื้นฐาน

ตัวอย่างโค้ด

ไม่เรียงลำดับ`<ul>`

ไม่มีสไตล์`<ul.unstyled>`

สั่งซื้อ`<ol>`

คำอธิบาย`dl`