ຕົວຢ່າງເລີ່ມຕົ້ນໄວ

ຕ້ອງການແມ່ແບບດ່ວນບໍ? ກວດເບິ່ງຕົວຢ່າງພື້ນຖານເຫຼົ່ານີ້ທີ່ພວກເຮົາໄດ້ເອົາຮ່ວມກັນ:

ຕາຂ່າຍເລີ່ມຕົ້ນ

ລະບົບຕາຂ່າຍໄຟຟ້າເລີ່ມຕົ້ນທີ່ສະຫນອງໃຫ້ເປັນສ່ວນຫນຶ່ງຂອງ Bootstrap ແມ່ນຕາຂ່າຍໄຟຟ້າ 16 ຖັນກວ້າງ 940px. ມັນເປັນການປຸງລົດຊາດຂອງລະບົບຕາຂ່າຍໄຟຟ້າ 960 ທີ່ນິຍົມ, ແຕ່ບໍ່ມີຂອບ / padding ເພີ່ມເຕີມຢູ່ດ້ານຊ້າຍແລະຂວາ.

ຕົວຢ່າງເຄື່ອງຫມາຍຕາຕະລາງ

ດັ່ງທີ່ສະແດງຢູ່ນີ້, ຮູບແບບພື້ນຖານສາມາດຖືກສ້າງຂື້ນດ້ວຍສອງ "ຖັນ," ແຕ່ລະອັນກວມເອົາຈໍານວນ 16 ຖັນພື້ນຖານທີ່ພວກເຮົາກໍານົດເປັນສ່ວນຫນຶ່ງຂອງລະບົບຕາຂ່າຍໄຟຟ້າຂອງພວກເຮົາ. ເບິ່ງຕົວຢ່າງຂ້າງລຸ່ມນີ້ສໍາລັບການປ່ຽນແປງເພີ່ມເຕີມ.

<div class = "row" > 
  <div class = "span6" > 
    ...
  </div>
  <div class = "span10" > 
    ...
  </div>
</div>

ຖັນຮັງ

Nest ເນື້ອຫາຂອງທ່ານຖ້າທ່ານຕ້ອງການໂດຍການສ້າງ .rowພາຍໃນຖັນທີ່ມີຢູ່ແລ້ວ.

ຕົວຢ່າງຂອງຖັນທີ່ຕິດກັນ

<div class = "row" > 
  <div class = "span12" > 
    ລະດັບ 1 ຂອງຖັນ
    <div class = "row" > 
      <div class = "span6" > 
        ລະດັບ 2
      </div>
      <div class = "span6" > 
        ລະດັບ 2
      </div>
    </div>
  </div>
</div>

ມ້ວນຕາຂ່າຍໄຟຟ້າຂອງທ່ານເອງ

ສ້າງຂຶ້ນໃນ Bootstrap ແມ່ນຕົວແປຈຳນວນໜຶ່ງສຳລັບການປັບແຕ່ງລະບົບຕາຂ່າຍ 940px ເລີ່ມຕົ້ນ. ດ້ວຍການປັບແຕ່ງເລັກນ້ອຍ, ທ່ານສາມາດດັດແປງຂະຫນາດຂອງຖັນ, gutters ຂອງພວກມັນ, ແລະຖັງທີ່ເຂົາເຈົ້າອາໄສຢູ່.

ພາຍໃນຕາຂ່າຍໄຟຟ້າ

ຕົວແປທີ່ຈໍາເປັນເພື່ອດັດແປງລະບົບຕາຂ່າຍໄຟຟ້າໃນປັດຈຸບັນທັງຫມົດຢູ່ໃນ variables.less.

ຕອນນີ້ເພື່ອປັບແຕ່ງ

ການແກ້ໄຂຕາຂ່າຍໄຟຟ້າຫມາຍເຖິງການປ່ຽນແປງສາມ @grid-*ຕົວແປແລະລວບລວມໄຟລ໌ຫນ້ອຍລົງ.

Bootstrap ມາພ້ອມເພື່ອຈັດການລະບົບຕາຂ່າຍໄຟຟ້າທີ່ມີເຖິງ 24 ຖັນ; ຄ່າເລີ່ມຕົ້ນແມ່ນພຽງແຕ່ 16. ນີ້ແມ່ນວິທີທີ່ຕົວແປຕາຂ່າຍໄຟຟ້າຂອງທ່ານຈະມີລັກສະນະປັບແຕ່ງເປັນຕາໜ່າງ 24 ຖັນ.

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

ເມື່ອລວບລວມຄືນໃຫມ່, ເຈົ້າຈະຖືກຕັ້ງ!

ຮູບແບບຄົງທີ່

ຮູບແບບເລີ່ມຕົ້ນ ແລະງ່າຍດາຍ 940px-wide, ສູນກາງສໍາລັບພຽງແຕ່ກ່ຽວກັບເວັບໄຊທ໌ໃດຫນຶ່ງຫຼືຫນ້າທີ່ສະຫນອງໃຫ້ໂດຍດຽວ <div.container>.

<ຮ່າງກາຍ>
  <div class = "container" > 
    ...
  </div>
</body>

ຮູບແບບຂອງນ້ໍາ

ເປັນທາງເລືອກ, ໂຄງສ້າງຫນ້າຂອງນ້ໍາທີ່ມີຄວາມຍືດຫຍຸ່ນທີ່ມີ min- ແລະ max-widths ແລະແຖບດ້ານຊ້າຍມື. ດີຫຼາຍສຳລັບແອັບ ແລະເອກະສານ.

<ຮ່າງກາຍ>
  <div class = "container-fluid" > 
    <div class = "ແຖບດ້ານຂ້າງ" > 
      ...
    </div>
    <div class = "ເນື້ອໃນ" > 
      ...
    </div>
  </div>
</body>

ຫົວຂໍ້ & ສໍາເນົາ

ລຳດັບຕົວພິມມາດຕະຖານສຳລັບການຈັດໂຄງສ້າງໜ້າເວັບຂອງທ່ານ.

ຕາໜ່າງການພິມທັງໝົດແມ່ນອີງໃສ່ຕົວແປ Less ສອງຕົວໃນໄຟລ໌ variables.less ຂອງພວກເຮົາ: @basefontແລະ @baseline. ອັນທໍາອິດແມ່ນຂະຫນາດຕົວອັກສອນພື້ນຖານທີ່ໃຊ້ຕະຫຼອດແລະທີສອງແມ່ນເສັ້ນພື້ນຖານ - ຄວາມສູງ.

ພວກເຮົາໃຊ້ຕົວແປເຫຼົ່ານັ້ນ, ແລະຄະນິດສາດບາງອັນ, ເພື່ອສ້າງຂອບ, paddings, ແລະ line-heights ຂອງທຸກປະເພດຂອງພວກເຮົາ ແລະອື່ນໆອີກ.

h1. ຫົວຂໍ້ 1

h2. ຫົວຂໍ້ 2

h3. ຫົວຂໍ້ 3

h4. ຫົວຂໍ້ 4

h5. ຫົວຂໍ້ 5

h6. ຫົວຂໍ້ 6

ຕົວຢ່າງວັກ

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et 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. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

ຫມາຍເຫດ: ມັນຍັງບໍ່ເປັນຫຍັງທີ່ຈະໃຊ້ <b>ແລະ <i>tags ໃນ HTML5 ແລະພວກມັນບໍ່ຈໍາເປັນຕ້ອງມີຮູບແບບຕົວຫນາແລະຕົວອຽງຕາມລໍາດັບ (ເຖິງແມ່ນວ່າມີອົງປະກອບ semantic ຫຼາຍ, ໃຊ້ມັນ). <b>ແມ່ນຫມາຍເຖິງການເນັ້ນຄໍາສັບຫຼືປະໂຫຍກໂດຍບໍ່ມີການສະແດງຄວາມສໍາຄັນເພີ່ມເຕີມ, ໃນຂະນະທີ່ <i>ສ່ວນໃຫຍ່ແມ່ນສໍາລັບສຽງ, ຄໍາສັບດ້ານວິຊາການ, ແລະອື່ນໆ.

ທີ່ຢູ່

ອົງ ປະ <address>ກອບແມ່ນໃຊ້ສໍາລັບຂໍ້ມູນຕິດຕໍ່ສໍາລັບບັນພະບຸລຸດທີ່ໃກ້ທີ່ສຸດຂອງຕົນ, ຫຼືຮ່າງກາຍທັງຫມົດຂອງການເຮັດວຽກ. ນີ້ແມ່ນສອງຕົວຢ່າງຂອງວິທີທີ່ມັນສາມາດຖືກນໍາໃຊ້:

ໝາຍເຫດ: ແຕ່ລະແຖວ <address>ຕ້ອງຈົບລົງດ້ວຍຕົວແບ່ງແຖວ ( <br />) ຫຼືຖືກຫໍ່ດ້ວຍແທັກລະດັບບລັອກ (ຕົວຢ່າງ, <p>) ເພື່ອຈັດໂຄງສ້າງເນື້ອຫາໃຫ້ຖືກຕ້ອງ.

ຕົວຫຍໍ້

ສຳລັບຕົວຫຍໍ້ ແລະຄຳຫຍໍ້, ໃຫ້ໃຊ້ <abbr>ແທັກ ( <acronym>ຖືກຍົກເລີກໃນ HTML5 ). ໃສ່ແບບຟອມຫຍໍ້ພາຍໃນແທັກແລະຕັ້ງຫົວຂໍ້ສໍາລັບຊື່ທີ່ສົມບູນ.

Blockquotes

<blockquote> <p> <small>

ວິທີການອ້າງອີງ

ເພື່ອລວມເອົາ blockquote, ຫໍ່ <blockquote>ຮອບ <p>ແລະ <small>tags. ໃຊ້ <small>ອົງປະກອບເພື່ອອ້າງອີງແຫຼ່ງຂອງທ່ານແລະທ່ານຈະໄດ້ຮັບ em dash —ກ່ອນມັນ.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

ທ່ານດຣ Julius Hibbert

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
  <small> ທ່ານດຣ Julius Hibbert </small>
</blockquote>

ບໍ່ມີຄໍາສັ່ງ<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• Facilisis ໃນ pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat ຢູ່
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

ບໍ່ມີຮູບແບບ<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• Facilisis ໃນ pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat ຢູ່
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

ສັ່ງແລ້ວ<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
4. Facilisis ໃນ pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

ລາຍລະອຽດdl

ລາຍ​ລະ​ອຽດ​

ບັນຊີລາຍຊື່ຄໍາອະທິບາຍແມ່ນດີເລີດສໍາລັບການກໍານົດຂໍ້ກໍານົດ.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

ລະຫັດ

<code> <pre>

Pimp ລະຫັດຂອງທ່ານໃນແບບທີ່ມີສອງແທັກງ່າຍໆ. ສໍາລັບຄວາມຫນ້າຫວາດສຽວຫຼາຍໂດຍຜ່ານ javascript, ຫຼຸດລົງໃນຫ້ອງສະຫມຸດລະຫັດຂອງ Google prettify ແລະທ່ານກໍາລັງຕັ້ງ.

ກຳລັງນຳສະເໜີລະຫັດ

ລະຫັດ, ບລັອກຂອງຫຼືພຽງແຕ່ snippets ໃນແຖວ, ສາມາດສະແດງດ້ວຍຮູບແບບພຽງແຕ່ຫໍ່ຢູ່ໃນແທັກທີ່ຖືກຕ້ອງ. ສໍາລັບບລັອກຂອງລະຫັດທີ່ກວມເອົາຫຼາຍເສັ້ນ, ໃຫ້ໃຊ້ <pre>ອົງປະກອບ. ສໍາລັບລະຫັດ inline, ໃຊ້ <code>ອົງປະກອບ.

<div>
  <h1>ຫົວຂໍ້</h1>
  <p>ມີບາງຢ່າງຢູ່ນີ້...</p>
</div>

<div> <h1> ຫົວ​ຂໍ້ </h1> <p> ບາງ​ອັນ​ຢູ່​ທີ່​ນີ້... </p> </div>
  
  

ປ້າຍຊື່ໃນແຖວ

<span class="label">

ຮຽກຮ້ອງຄວາມສົນໃຈ ຫຼືໝາຍຄຳສັບໃດໜຶ່ງຢູ່ໃນຂໍ້ຄວາມຕົວໜັງສືຂອງເຈົ້າ.

ປ້າຍຊື່ຫຍັງ

ຕ້ອງ​ການ​ຫນຶ່ງ​ຂອງ​ທີ່​ມີ​ຄວາມ​ຝັນ ​ໃຫມ່​! ຫຼື ທຸງ ທີ່ສໍາຄັນ ໃນເວລາທີ່ຂຽນລະຫັດ? ແລ້ວ, ດຽວນີ້ເຈົ້າມີພວກມັນ. ນີ້ແມ່ນສິ່ງທີ່ລວມຢູ່ຕາມຄ່າເລີ່ມຕົ້ນ:

ຕາຂ່າຍສື່

ສະແດງຮູບຫຍໍ້ຂອງຂະຫນາດທີ່ແຕກຕ່າງກັນຢູ່ໃນຫນ້າທີ່ມີ footprint HTML ຕ່ໍາແລະຮູບແບບຫນ້ອຍ.

ຮູບຕົວຢ່າງ

ຮູບຫຍໍ້ໃນ .media-gridສາມາດມີຂະຫນາດໃດກໍ່ຕາມ, ແຕ່ພວກມັນເຮັດວຽກໄດ້ດີທີ່ສຸດເມື່ອມີແຜນທີ່ໂດຍກົງກັບລະບົບຕາຂ່າຍໄຟຟ້າ Bootstrap. ຄວາມກວ້າງຂອງຮູບພາບເຊັ່ນ: 90, 210, ແລະ 330 ສົມທົບກັບສອງສາມ pixels ຂອງ padding ເພື່ອໃຫ້ເທົ່າກັບ ຂະຫນາດ .span2, .span4, ແລະ .span6ຖັນ.

ຂະຫນາດໃຫຍ່

ຂະຫນາດກາງ

ຂະຫນາດນ້ອຍ

ການຂຽນລະຫັດໃຫ້ເຂົາເຈົ້າ

ຕາຂ່າຍສື່ແມ່ນງ່າຍທີ່ຈະໃຊ້ແລະງ່າຍດາຍຫຼາຍໃນດ້ານ markup. ຂະຫນາດຂອງພວກມັນແມ່ນອີງໃສ່ຂະຫນາດຂອງຮູບພາບທີ່ລວມຢູ່.

<ul class = "media-grid" > 
  <li>
    <a href="#"> _ _ _ 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
  <li>
    <a href="#"> _ _ _ 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
</ul>

ຕາຕະລາງການກໍ່ສ້າງ

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

ຕາຕະລາງແມ່ນດີຫຼາຍ - ສໍາລັບຫຼາຍຢ່າງ. ຕາຕະລາງທີ່ຍິ່ງໃຫຍ່, ແນວໃດກໍ່ຕາມ, ຕ້ອງການ markup ເລັກນ້ອຍເພື່ອໃຫ້ເປັນປະໂຫຍດ, ສາມາດຂະຫຍາຍໄດ້, ແລະສາມາດອ່ານໄດ້ (ໃນລະດັບລະຫັດ). ນີ້ແມ່ນຄໍາແນະນໍາບາງຢ່າງທີ່ຈະຊ່ວຍ.

ຫໍ່ສ່ວນຫົວຄໍລຳຂອງເຈົ້າຢູ່ໃນ <thead>ລຳດັບລຳດັບ ສະເໝີ <thead>> <tr>> <th>.

ຄ້າຍຄືກັນກັບສ່ວນຫົວຖັນ, ເນື້ອໃນເນື້ອໃນຂອງຕາຕະລາງທັງໝົດຂອງທ່ານຄວນຈະຖືກຫໍ່ໄວ້ເປັນແຖວ <tbody>ເພື່ອໃຫ້ລໍາດັບຊັ້ນຂອງເຈົ້າເປັນ <tbody>> <tr>> <td>.

ຕົວຢ່າງ: ຮູບແບບຕາຕະລາງເລີ່ມຕົ້ນ

ຕາຕະລາງທັງຫມົດຈະຖືກຈັດຮູບແບບອັດຕະໂນມັດໂດຍມີພຽງແຕ່ຂອບທີ່ສໍາຄັນເພື່ອຮັບປະກັນການອ່ານແລະຮັກສາໂຄງສ້າງ. ບໍ່ຈໍາເປັນຕ້ອງເພີ່ມຊັ້ນຮຽນເພີ່ມເຕີມຫຼືຄຸນລັກສະນະ.

<ຕາຕະລາງ>
  ...
</table>

ຕົວຢ່າງ: ຕາຕະລາງ condensed

ສໍາລັບຕາຕະລາງທີ່ຕ້ອງການຂໍ້ມູນເພີ່ມເຕີມໃນຊ່ອງທີ່ເຄັ່ງຄັດ, ໃຊ້ລົດຊາດຂົ້ນທີ່ຕັດ padding ໃນເຄິ່ງຫນຶ່ງ. ມັນຍັງສາມາດຖືກນໍາໃຊ້ຮ່ວມກັນກັບຊາຍແດນແລະເສັ້ນດ່າງ zebra, ຄືກັນກັບຮູບແບບຕາຕະລາງເລີ່ມຕົ້ນ.

ຕົວຢ່າງ: ຕາຕະລາງທີ່ມີຂອບ

ເຮັດໃຫ້ຕາຕະລາງຂອງທ່ານເບິ່ງເປັນເງົາເລັກນ້ອຍໂດຍການມ້ຽນມຸມຂອງພວກມັນ ແລະເພີ່ມຂອບໃສ່ທຸກດ້ານ.

<ຕາຕະລາງ class = "bordered-table" > 
  ...
</table>

ຕົວຢ່າງ: Zebra-tried

ສ້າງຄວາມແປກໃໝ່ໃຫ້ກັບໂຕະຂອງເຈົ້າໂດຍການເພີ່ມລາຍເສັ້ນມ້າລາຍ—ພຽງແຕ່ເພີ່ມ .zebra-stripedຊັ້ນຮຽນ.

ໝາຍເຫດ: Zebra-striping ແມ່ນການປັບປຸງແບບກ້າວກະໂດດທີ່ບໍ່ສາມາດໃຊ້ໄດ້ສໍາລັບຕົວທ່ອງເວັບທີ່ເກົ່າແກ່ເຊັ່ນ IE8 ແລະຂ້າງລຸ່ມນີ້.

<ຕາຕະລາງ class = "zebra-striped" > 
  ...
</table>

ຕົວຢ່າງ: Zebra-striped w/ TableSorter.js

ເອົາຕົວຢ່າງທີ່ຜ່ານມາ, ພວກເຮົາປັບປຸງປະໂຫຍດຂອງຕາຕະລາງຂອງພວກເຮົາໂດຍການສະຫນອງການທໍາງານການຈັດລຽງໂດຍຜ່ານ jQuery ແລະ Tablesorter plugin. ຄລິກສ່ວນຫົວຂອງຖັນໃດນຶ່ງເພື່ອປ່ຽນການຈັດຮຽງ.

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script > 
  $ ( ຟັງຊັນ () { 
    $ ( "table#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<ຕາຕະລາງ class = "zebra-striped" > 
  ...
</table>

ຮູບແບບເລີ່ມຕົ້ນ

ຮູບແບບທັງໝົດແມ່ນໃຫ້ຮູບແບບເລີ່ມຕົ້ນເພື່ອນຳສະເໜີພວກມັນໃນແບບທີ່ອ່ານໄດ້ ແລະສາມາດຂະຫຍາຍໄດ້. ຮູບແບບແມ່ນສະໜອງໃຫ້ສຳລັບການປ້ອນຂໍ້ຄວາມ, ເລືອກລາຍການ, ພື້ນທີ່ຂໍ້ຄວາມ, ປຸ່ມວິທະຍຸ ແລະກ່ອງກາໝາຍ, ແລະປຸ່ມຕ່າງໆ.

ຮູບແບບຊ້ອນກັນ

ເພີ່ມໃສ່ .form-stackedHTML ຂອງແບບຟອມຂອງເຈົ້າ ແລະເຈົ້າຈະມີປ້າຍຊື່ຢູ່ດ້ານເທິງຂອງຊ່ອງຂໍ້ມູນຂອງເຂົາເຈົ້າ ແທນທີ່ຈະຢູ່ທາງຊ້າຍຂອງພວກມັນ. ນີ້ເຮັດວຽກໄດ້ດີຖ້າແບບຟອມຂອງທ່ານສັ້ນຫຼືທ່ານມີສອງຖັນຂອງວັດສະດຸປ້ອນສໍາລັບແບບຟອມທີ່ຫນັກກວ່າ.

ຂະໜາດຊ່ອງໃສ່ແບບຟອມ

ປັບແຕ່ງຮູບແບບ input, select, ຫຼື textareaຄວາມກວ້າງໂດຍການເພີ່ມພຽງແຕ່ສອງສາມຊັ້ນໃສ່ເຄື່ອງຫມາຍຂອງທ່ານ.

ເປັນຂອງ v1.3.0, ພວກເຮົາໄດ້ເພີ່ມຫ້ອງຮຽນຂະຫນາດຕາມຕາຂ່າຍໄຟຟ້າສໍາລັບອົງປະກອບແບບຟອມ. ກະລຸນາໃຊ້ສິ່ງເຫຼົ່ານີ້ຜ່ານ ຊັ້ນຮຽນ .mini, .small, ແລະອື່ນໆທີ່ມີຢູ່.

ປຸ່ມ

ໃນຖານະເປັນສົນທິສັນຍາ, ປຸ່ມຖືກນໍາໃຊ້ສໍາລັບການດໍາເນີນການໃນຂະນະທີ່ການເຊື່ອມຕໍ່ຖືກນໍາໃຊ້ສໍາລັບວັດຖຸ. ຕົວຢ່າງ, "ດາວໂຫລດ" ສາມາດເປັນປຸ່ມແລະ "ກິດຈະກໍາທີ່ຜ່ານມາ" ສາມາດເປັນການເຊື່ອມຕໍ່.

ປຸ່ມທັງໝົດເລີ່ມຕົ້ນເປັນຮູບແບບສີເທົາອ່ອນ, ແຕ່ບາງຊັ້ນຮຽນທີ່ມີປະໂຫຍດສາມາດນຳໃຊ້ໄດ້ສຳລັບຮູບແບບສີຕ່າງໆ. ຫ້ອງຮຽນເຫຼົ່ານີ້ປະກອບມີຫ້ອງຮຽນສີຟ້າ .primary, ຫ້ອງຮຽນສີຟ້າອ່ອນ .info, ຫ້ອງຮຽນສີຂຽວ .success, ແລະ .dangerຫ້ອງຮຽນສີແດງ.

ປຸ່ມຕົວຢ່າງ

ຮູບແບບປຸ່ມສາມາດຖືກນໍາໄປໃຊ້ກັບອັນໃດກໍໄດ້ທີ່ມີການ .btnນຳໃຊ້. ໂດຍປົກກະຕິເຈົ້າຈະຕ້ອງໃຊ້ສິ່ງເຫຼົ່ານີ້ໃສ່ພຽງແຕ່ <a>, <button>, ແລະເລືອກ <input>ອົງປະກອບເທົ່ານັ້ນ. ນີ້ແມ່ນວິທີທີ່ມັນເບິ່ງຄືວ່າ:

ຂະໜາດສຳຮອງ

ຕ້ອງການປຸ່ມໃຫຍ່ ຫຼືນ້ອຍກວ່າບໍ? ມີຢູ່!

ສະຖານະຄົນພິການ

ສຳລັບປຸ່ມທີ່ບໍ່ເຄື່ອນໄຫວ ຫຼືຖືກປິດການນຳໃຊ້ໂດຍແອັບຯດ້ວຍເຫດຜົນອັນໜຶ່ງ ຫຼືອີກອັນໜຶ່ງ, ໃຫ້ໃຊ້ສະຖານະທີ່ຖືກປິດການນຳໃຊ້. ນັ້ນແມ່ນ .disabledສໍາລັບການເຊື່ອມຕໍ່ແລະ :disabledສໍາລັບ <button>ອົງປະກອບ.

ລິ້ງຄ໌

ປຸ່ມ

ມັນ​ແມ່ນ​ຫຍັງ

ແຖບເທິງຂອງພວກເຮົາແມ່ນແຖບຄົງທີ່ທີ່ຕັ້ງໂລໂກ້ ຫຼືຊື່ຂອງເວັບໄຊທ໌, ການນໍາທາງຫຼັກ ແລະແບບຟອມຄົ້ນຫາ.

ສາມາດປັບແຕ່ງໄດ້

ອົງປະກອບທັງຫມົດພາຍໃນ, ແລະແຖບເທິງທັງຫມົດເຊັ່ນດຽວກັນ, ແມ່ນທາງເລືອກ. ທ່ານ​ສາ​ມາດ​ເລືອກ​ທີ່​ຈະ​ປະ​ກອບ​ມີ​ສັນ​ຍາ​ລັກ / ຊື່​, nav​, ການ​ຄົ້ນ​ຫາ​, ແລະ​ການ​ນໍາ​ພາ​ຮອງ​ຫຼື​ການ​ປະ​ສົມ​ຂອງ​ມັນ​.

ລວມມີລາຍການແບບເລື່ອນລົງ

ເປັນສ່ວນຫນຶ່ງຂອງການນໍາທາງຕົ້ນຕໍ, ພວກເຮົາໄດ້ລວມເອົາຄວາມສາມາດສໍາລັບທ່ານທີ່ຈະເພີ່ມ dropdowns ໃສ່ navigation ຂອງທ່ານ. ກວດເບິ່ງການນໍາທາງທີສອງຂ້າງເທິງ (ຈັດຮຽງຂວາ) ເພື່ອເບິ່ງວ່າມັນເຮັດໄດ້ຢ່າງໃດ. liແທັກ ແບບ ເລື່ອນລົງ ຍັງຮອງຮັບ .activeການສະແດງການເລືອກໜ້າປັດຈຸບັນ.

ແຖບແລະຢາ

ສ້າງການນໍາທາງຂັ້ນສອງແບບງ່າຍດາຍດ້ວຍ a <ul>. ແລກປ່ຽນລະຫວ່າງແຖບຫຼືຢາໂດຍການເພີ່ມຊັ້ນທີ່ເຫມາະສົມ.

ດີເລີດສໍາລັບພາກສ່ວນຍ່ອຍຂອງເນື້ອຫາເຊັ່ນຫນ້າການຕັ້ງຄ່າບັນຊີຂອງພວກເຮົາແລະໄລຍະເວລາຂອງຜູ້ໃຊ້ສໍາລັບການສະຫຼັບລະຫວ່າງຫນ້າຂອງເນື້ອຫາ. ມີຢູ່ໃນຮູບແບບເມັດຫຼືຢາ.

ຕົວຢ່າງແຖບພື້ນຖານ

ແຖບສາມາດຖືກນໍາໃຊ້ເປັນການນໍາທາງແບບປົກກະຕິ (ການໂຫຼດຫນ້າພາຍນອກຢູ່ໃນແຖບດຽວກັນ) ຫຼືເປັນແຖບເນື້ອຫາທີ່ສາມາດປ່ຽນໄດ້ສໍາລັບການປ່ຽນແຖບເນື້ອຫາ. ພວກເຮົາມີ ແທັບ plugin ທີ່ສາມາດໃຊ້ເພື່ອປະສົມປະສານອັນສຸດທ້າຍ.

• ບ້ານ
• ໂປຣໄຟລ໌
• ຂໍ້ຄວາມ
• ການຕັ້ງຄ່າ
• ຕິດຕໍ່
• ເລື່ອນລົງ
  • ການເຊື່ອມຕໍ່ທີສອງ
  • ບາງສິ່ງບາງຢ່າງທີ່ນີ້
  • ການເຊື່ອມຕໍ່ອື່ນ

<ul class = "tabs" > 
  <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 = "pills" > 
  <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>

ເຂົ້າໜົມປັງ

ການນໍາທາງ Breadcrumb ຖືກໃຊ້ເປັນວິທີທີ່ຈະສະແດງໃຫ້ຜູ້ໃຊ້ຮູ້ວ່າພວກເຂົາຢູ່ບ່ອນໃດພາຍໃນແອັບຯຫຼືເວັບໄຊທ໌ໃດຫນຶ່ງ, ແຕ່ບໍ່ແມ່ນສໍາລັບການນໍາທາງຕົ້ນຕໍ.

• ບ້ານ

• ຫນ້າທໍາອິດ /
• ໜ້າກາງ

• ຫນ້າທໍາອິດ /
• ໜ້າກາງ /
• ອີກອັນນຶ່ງ

• ຫນ້າທໍາອິດ /
• ໜ້າກາງ /
• ອີກອັນໜຶ່ງ /
• ເຈົ້າ​ຢູ່​ທີ່​ນີ້

<ul class = "breadcrumb" > 
  <li><a href="#"> ຫນ້າ ທໍາ ອິດ </a> < span class = "divider" > / </span></li>   
  <li><a href="#"> ໜ້າ ກາງ </a> < span class = " divider" > / </span></li>   
  <li><a href="#"> ອີກ ອັນ ໜຶ່ງ </a> < span class = "divider" > / </span></li>   
  <li class = "active" > ເຈົ້າຢູ່ນີ້ </li> 
</ul>

Pagination

ການສ້າງໜ້າແບບລຽບງ່າຍ ແລະ ໜ້ອຍທີ່ສຸດທີ່ໄດ້ຮັບແຮງບັນດານໃຈຈາກ Rdio. ຕັນຂະຫນາດໃຫຍ່ແມ່ນຍາກທີ່ຈະພາດ, ຂະຫຍາຍໄດ້ງ່າຍ, ແລະສະຫນອງພື້ນທີ່ຄລິກຂະຫນາດໃຫຍ່.

<div class = "page" > 
  <ul>
    <li class = "prev disabled" ><a href = "#" > ← ທີ່ຜ່ານມາ </a></li>  
    <li class = "active" > <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="#"> ຕໍ່ ໄປ &rarr ; </a></li>  
  </ul>
</div>

ການແຈ້ງເຕືອນພື້ນຖານ

.alert-message

ຂໍ້ຄວາມແຖວດຽວສໍາລັບການເນັ້ນຄວາມລົ້ມເຫລວ, ຄວາມລົ້ມເຫຼວທີ່ເປັນໄປໄດ້, ຫຼືຄວາມສໍາເລັດຂອງການກະທໍາ. ໂດຍສະເພາະທີ່ເປັນປະໂຫຍດສໍາລັບແບບຟອມ.

ເອົາ javascript »

ລະຫັດຕົວຢ່າງ

<div class = "ການເຕືອນ-ຂໍ້ຄວາມເຕືອນ" > 
  <a class="close" href="#"> × </a> _ _ _ _ _  
  <p><strong> ບໍລິສຸດ guacamole! </strong> ກວດເບິ່ງຕົວເອງທີ່ດີທີ່ສຸດ, ເຈົ້າເບິ່ງບໍ່ດີເກີນໄປ. </p>
</div>

ບລັອກຂໍ້ຄວາມ

.alert-message.block-message

ສໍາລັບຂໍ້ຄວາມທີ່ຕ້ອງການຄໍາອະທິບາຍເລັກນ້ອຍ, ພວກເຮົາມີການແຈ້ງເຕືອນແບບຫຍໍ້ຫນ້າ. ເຫຼົ່ານີ້ແມ່ນດີເລີດສໍາລັບການ bubbling ເຖິງຂໍ້ຄວາມຄວາມຜິດພາດທີ່ຍາວກວ່າ, ເຕືອນຜູ້ໃຊ້ຂອງການປະຕິບັດທີ່ຍັງຄ້າງ, ຫຼືພຽງແຕ່ນໍາສະເຫນີຂໍ້ມູນຂ່າວສານສໍາລັບການເນັ້ນຫນັກໃສ່ຫຼາຍໃນຫນ້າ.

ເອົາ javascript »

ລະຫັດຕົວຢ່າງ

<div class = "ການເຕືອນ-ຂໍ້ຄວາມຕັນ-ຂໍ້ຄວາມເຕືອນ" > 
  <a class="close" href="#"> × </a> _ _ _ _ _  
  <p><strong> ບໍລິສຸດ guacamole! ອັນນີ້ເປັນການເຕືອນໄພ! </strong> ກວດເບິ່ງຕົວເອງທີ່ດີທີ່ສຸດ, ເຈົ້າເບິ່ງບໍ່ດີເກີນໄປ. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
  <div class = "alert-actions" > 
    <a class="btn small" href="#"> ເຮັດ ອັນ ນີ້ </a> <a class="btn small" href="#"> ຫຼື ເຮັດ ອັນ ນີ້ </a> _ _ _     
  </div>
</div>

ໂມດູນ

Modals-dialogs ຫຼື lightboxes-ແມ່ນດີເລີດສໍາລັບການດໍາເນີນການຕາມບໍລິບົດໃນສະຖານະການທີ່ມັນສໍາຄັນທີ່ຈະຮັກສາສະພາບການພື້ນຫລັງ.

ເອົາ javascript »

ຄຳແນະນຳ

Twipsies ແມ່ນມີປະໂຫຍດຫຼາຍສໍາລັບການຊ່ວຍຜູ້ໃຊ້ທີ່ສັບສົນແລະຊີ້ໃຫ້ພວກເຂົາໄປໃນທິດທາງທີ່ຖືກຕ້ອງ.

ເອົາ javascript »

Popovers

ໃຊ້ popovers ເພື່ອສະຫນອງຂໍ້ມູນ subtextual ກັບຫນ້າໃດຫນຶ່ງໂດຍບໍ່ມີຜົນກະທົບຕໍ່ການຈັດວາງ.

ເອົາ javascript »

ການເລີ່ມຕົ້ນ

ການເຊື່ອມໂຍງ javascript ກັບຫ້ອງສະຫມຸດ Bootstrap ແມ່ນງ່າຍທີ່ສຸດ. ຂ້າງລຸ່ມນີ້ພວກເຮົາຈະເວົ້າພື້ນຖານແລະສະຫນອງ plugins ທີ່ຫນ້າຫວາດສຽວໃຫ້ທ່ານເລີ່ມຕົ້ນ!

ເບິ່ງເອກະສານ javascript »

ມີຫຍັງແດ່

ເອົາບາງອົງປະກອບຫຼັກຂອງ Bootstrap ມາສູ່ຊີວິດດ້ວຍ plugins ແບບກຳນົດເອງໃໝ່ທີ່ເຮັດວຽກກັບ jQuery ແລະ Ender . ພວກເຮົາຊຸກຍູ້ໃຫ້ທ່ານຂະຫຍາຍ ແລະດັດແປງພວກມັນໃຫ້ເໝາະສົມກັບຄວາມຕ້ອງການພັດທະນາສະເພາະຂອງທ່ານ.

javascript ມີຄວາມຈໍາເປັນບໍ?

ບໍ່! Bootstrap ໄດ້ຖືກອອກແບບທໍາອິດແລະສໍາຄັນທີ່ສຸດເພື່ອເປັນຫ້ອງສະຫມຸດ CSS. javascript ນີ້ສະຫນອງຊັ້ນໂຕ້ຕອບພື້ນຖານຢູ່ເທິງສຸດຂອງຄໍເຕົ້າໄຂ່ທີ່ລວມ.

ຢ່າງໃດກໍຕາມ, ສໍາລັບຜູ້ທີ່ຕ້ອງການ javascript, ພວກເຮົາໄດ້ສະຫນອງ plugins ຂ້າງເທິງເພື່ອຊ່ວຍໃຫ້ທ່ານເຂົ້າໃຈວິທີການປະສົມປະສານ Bootstrap ກັບ javascript ແລະເພື່ອໃຫ້ທ່ານມີທາງເລືອກທີ່ໄວ, ເບົາສໍາລັບຫນ້າທີ່ພື້ນຖານໃນທັນທີ.

ສໍາລັບຂໍ້ມູນເພີ່ມເຕີມແລະເພື່ອເບິ່ງບາງຕົວຢ່າງທີ່ມີຊີວິດ, ກະລຸນາເບິ່ງ ຫນ້າເອ ກະ ສານ plugin ຂອງພວກເຮົາ