ປະຫວັດສາດ

ໃນມື້ກ່ອນຫນ້າຂອງ Twitter, ວິສະວະກອນໃຊ້ເກືອບທຸກຫ້ອງສະຫມຸດທີ່ພວກເຂົາຄຸ້ນເຄີຍເພື່ອຕອບສະຫນອງຄວາມຕ້ອງການດ້ານຫນ້າ. Bootstrap ໄດ້ເລີ່ມຕົ້ນເປັນຄໍາຕອບຕໍ່ສິ່ງທ້າທາຍທີ່ນໍາສະເຫນີແລະການພັດທະນາຢ່າງໄວວາໃນໄລຍະ Hackweek ທໍາອິດຂອງ Twitter.

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

ອ່ານເພີ່ມເຕີມກ່ຽວກັບ dev.twitter.com ›

ຮອງຮັບຕົວທ່ອງເວັບ

Bootstrap ຖືກທົດສອບແລະສະຫນັບສະຫນູນໃນຕົວທ່ອງເວັບທີ່ທັນສະໄຫມທີ່ສໍາຄັນເຊັ່ນ Chrome, Safari, Internet Explorer, ແລະ Firefox.

• Safari ຫຼ້າສຸດ
• Google Chrome ຫຼ້າສຸດ
• Firefox 4+
• Internet Explorer 7+
• Opera 11

ມີຫຍັງແດ່

Bootstrap ມາພ້ອມກັບການລວບລວມ CSS, uncompiled, ແລະຕົວຢ່າງແມ່ແບບ.

• ໄຟລ໌ .less ຕົ້ນສະບັບທັງໝົດ
• ລວບລວມແລະຫຍໍ້ CSS ຢ່າງສົມບູນ
• ປະກອບເອກະສານຄູ່ມືຮູບແບບ
• ແມ່ແບບຫນ້າຕົວຢ່າງ (ມີເພີ່ມເຕີມທີ່ຈະມາໃນໄວໆນີ້)

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

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

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

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

<div class = "row" > 
  <div class = "span6 ຖັນ" > 
    ...
  </div>
  <div class = "span10 columns" > 
    ...
  </div>
</div>

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

ຮູບແບບເລີ່ມຕົ້ນ ແລະງ່າຍດາຍ 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 ໃນໄຟລ໌ preboot.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>ກອບແມ່ນໃຊ້ສໍາລັບຂໍ້ມູນຕິດຕໍ່ສໍາລັບບັນພະບຸລຸດທີ່ໃກ້ທີ່ສຸດຂອງຕົນ, ຫຼືຮ່າງກາຍທັງຫມົດຂອງການເຮັດວຽກ. ນີ້ແມ່ນວິທີທີ່ມັນເບິ່ງຄືວ່າ:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

ໝາຍເຫດ: ແຕ່ລະແຖວ <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

ບໍ່ມີຄໍາສັ່ງ<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.

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

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

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

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

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

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

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

#	ຊື່​ແທ້	ນາມ​ສະ​ກຸນ	ພາສາ
1	ບາງ	ຫນຶ່ງ	ພາສາອັງກິດ
2	ໂຈ	Sixpack	ພາສາອັງກິດ
3	ສະຕູ	ແຂ້ວ	ລະຫັດ

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

ຕົວຢ່າງ: Zebra-tried

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

#	ຊື່​ແທ້	ນາມ​ສະ​ກຸນ	ພາສາ
1	ບາງ	ຫນຶ່ງ	ພາສາອັງກິດ
2	ໂຈ	Sixpack	ພາສາອັງກິດ
3	ສະຕູ	ແຂ້ວ	ລະຫັດ

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

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

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

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

#	ຊື່​ແທ້	ນາມ​ສະ​ກຸນ	ພາສາ
1	ຂອງເຈົ້າ	ຫນຶ່ງ	ພາສາອັງກິດ
2	ໂຈ	Sixpack	ພາສາອັງກິດ
3	ສະຕູ	ແຂ້ວ	ລະຫັດ

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

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

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

ຕົວ​ຢ່າງ​ຮູບ​ແບບ​ນິ​ທານ​

ປ້ອນຂໍ້ມູນໃຫຍ່ X

ເລືອກ

1 2 3 4 5

ເລືອກ

1 2 3 4 5

ການປ້ອນຂໍ້ມູນທີ່ບໍ່ສາມາດແກ້ໄຂໄດ້

ບາງມູນຄ່າຢູ່ທີ່ນີ້

ປິດການປ້ອນຂໍ້ມູນ

ປ້ອນຂໍ້ມູນໃຫຍ່ X

ຂໍ້​ຄວາມ​ຊ່ວຍ​ເຫຼືອ​ຂະ​ຫນາດ​ນ້ອຍ​

ຕົວ​ຢ່າງ​ຮູບ​ແບບ​ນິ​ທານ​

ຂໍ້ຄວາມລ່ວງໜ້າ

@

ກ່ອງໝາຍຖືກກຽມໄວ້

ຕື່ມໃສ່ກ່ອງໝາຍຕິກ

ການປ້ອນຂໍ້ມູນໄຟລ໌

ຕົວ​ຢ່າງ​ຮູບ​ແບບ​ນິ​ທານ​

ລາຍຊື່ຕົວເລືອກ

• ທາງ​ເລືອກ​ທີ​ຫນຶ່ງ​ແມ່ນ​ນີ້​ແລະ​ທີ່ — ໃຫ້​ແນ່​ໃຈວ່​າ​ຈະ​ປະ​ກອບ​ເປັນ​ຫຍັງ​ມັນ​ດີ​ເລີດ​
• ທາງ​ເລືອກ​ທີ​ສອງ​ຍັງ​ສາ​ມາດ​ໄດ້​ຮັບ​ການ​ກວດ​ສອບ​ແລະ​ລວມ​ເຂົ້າ​ໃນ​ຜົນ​ໄດ້​ຮັບ​ຂອງ​ຮູບ​ແບບ​
• ທາງ​ເລືອກ​ທີ່​ສາມ​ສາ​ມາດ—ແມ່ນ​ແລ້ວ, ທ່ານ​ເດົາ​ມັນ—ຍັງ​ໄດ້​ຮັບ​ການ​ກວດ​ສອບ ແລະ​ລວມ​ເຂົ້າ​ໃນ​ຜົນ​ໄດ້​ຮັບ​ຂອງ​ແບບ​ຟອມ
• ທາງເລືອກສີ່ບໍ່ສາມາດກວດສອບໄດ້ຍ້ອນວ່າມັນຖືກປິດໃຊ້ງານ.

ໝາຍເຫດ: ປ້າຍກຳກັບອ້ອມຮອບຕົວເລືອກທັງໝົດສຳລັບພື້ນທີ່ຄລິກທີ່ໃຫຍ່ກວ່າ ແລະຮູບແບບທີ່ສາມາດໃຊ້ໄດ້ຫຼາຍກວ່າ.

ຊ່ວງວັນທີ

ກັບ ເວລາທັງໝົດແມ່ນສະແດງເປັນເວລາມາດຕະຖານປາຊີຟິກ (GMT -08:00).

Textarea

ບລັອກຂໍ້ຄວາມຊ່ວຍເຫຼືອເພື່ອອະທິບາຍຊ່ອງຂໍ້ມູນຂ້າງເທິງຖ້າຕ້ອງການ.

ລາຍຊື່ຕົວເລືອກ

• ທາງ​ເລືອກ​ທີ​ຫນຶ່ງ​ແມ່ນ​ນີ້​ແລະ​ທີ່ — ໃຫ້​ແນ່​ໃຈວ່​າ​ຈະ​ປະ​ກອບ​ເປັນ​ຫຍັງ​ມັນ​ດີ​ເລີດ​
• ທາງ​ເລືອກ​ທີ​ສອງ​ຍັງ​ສາ​ມາດ​ໄດ້​ຮັບ​ການ​ກວດ​ສອບ​ແລະ​ລວມ​ເຂົ້າ​ໃນ​ຜົນ​ໄດ້​ຮັບ​ຂອງ​ຮູບ​ແບບ​

ບັນ​ທຶກ​ການ​ປ່ຽນ​ແປງ  ຍົກເລີກ

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

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

ຕົວ​ຢ່າງ​ຮູບ​ແບບ​ນິ​ທານ​

ປ້ອນຂໍ້ມູນໃຫຍ່ X

ເລືອກ

1 2 3 4 5

ຕົວ​ຢ່າງ​ຮູບ​ແບບ​ນິ​ທານ​

ປ້ອນຂໍ້ມູນໃຫຍ່ X

ຂໍ້​ຄວາມ​ຊ່ວຍ​ເຫຼືອ​ຂະ​ຫນາດ​ນ້ອຍ​

ລາຍຊື່ຕົວເລືອກ

• ທາງ​ເລືອກ​ທີ​ຫນຶ່ງ​ແມ່ນ​ນີ້​ແລະ​ທີ່ — ໃຫ້​ແນ່​ໃຈວ່​າ​ຈະ​ປະ​ກອບ​ເປັນ​ຫຍັງ​ມັນ​ດີ​ເລີດ​
• ທາງ​ເລືອກ​ທີ​ສອງ​ຍັງ​ສາ​ມາດ​ໄດ້​ຮັບ​ການ​ກວດ​ສອບ​ແລະ​ລວມ​ເຂົ້າ​ໃນ​ຜົນ​ໄດ້​ຮັບ​ຂອງ​ຮູບ​ແບບ​

ໝາຍເຫດ: ປ້າຍກຳກັບອ້ອມຮອບຕົວເລືອກທັງໝົດສຳລັບພື້ນທີ່ຄລິກທີ່ໃຫຍ່ກວ່າ ແລະຮູບແບບທີ່ສາມາດໃຊ້ໄດ້ຫຼາຍກວ່າ.

ບັນ​ທຶກ​ການ​ປ່ຽນ​ແປງ  ຍົກເລີກ

ປຸ່ມ

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

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

ປຸ່ມຕົວຢ່າງ

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

ຂະໜາດສຳຮອງ

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

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

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

ລິ້ງຄ໌

ປຸ່ມ

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

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

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

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

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

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

ແຖບແລະຢາ

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

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

• ບ້ານ
• ໂປຣໄຟລ໌
• ຂໍ້ຄວາມ
• ການຕັ້ງຄ່າ
• ຕິດຕໍ່

<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>

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>

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

div.alert-message

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

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

div.alert-message.block-message

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

ໂມດູນ

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

ຄໍາແນະນໍາເຄື່ອງມື

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

Popovers

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

Bootstrap ຖືກສ້າງຂຶ້ນດ້ວຍ Preboot , ເປັນຊຸດ open-source ຂອງ mixins ແລະຕົວແປທີ່ຈະໃຊ້ຮ່ວມກັນກັບ Less , CSS preprocessor ສໍາລັບການພັດທະນາເວັບໄວແລະງ່າຍຂຶ້ນ.

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

ວິທີການນໍາໃຊ້ມັນ

ໃຊ້ຕົວເລືອກນີ້ເພື່ອເຮັດໃຫ້ການນໍາໃຊ້ຢ່າງເຕັມທີ່ຂອງຕົວແປຫນ້ອຍຂອງ Bootstrap, mixins, ແລະ nesting ໃນ CSS ຜ່ານ javascript ໃນຕົວທ່ອງເວັບຂອງທ່ານ.

<link rel = "stylesheet/less" href = "less/bootstrap.less" media = "ທັງໝົດ" />    
<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 :     darken ( @linkColor , 10 ); 
 
// ສີເທົາ
@ດຳ : #000;             
@greyDark :           lighten ( @black , 25 % ); 
@ສີຂີ້ເຖົ່າ :               lighten ( @black , 50 % ); 
@greyLight :          lighten ( @black , 70 % ); 
@grayLighter :        lighten ( @black , 90 % ); 
@ຂາວ : #ffff ;             
 
// ສີທີ່ເນັ້ນສຽງ
@blue : #08b5fb ;              
@green : #46a546;             
@red : #9d261d;               
@yellow : #ffc40d ;            
@ສີສົ້ມ : #f89406 ;            
@ສີບົວ : #c3325f ;              
@ສີມ່ວງ : #7a43b6 ;            
 
// ຕາຂ່າຍພື້ນຖານ
@basefont : 13px ;          
@ ພື້ນ ຖານ : 18px ;          

ຄໍາເຫັນ

/* ... */Less ຍັງສະຫນອງຮູບແບບການສະແດງຄວາມຄິດເຫັນອື່ນນອກເຫນືອຈາກ syntax ປົກກະຕິຂອງ CSS .

// ນີ້ແມ່ນຄໍາເຫັນ
/* ນີ້​ແມ່ນ​ຄໍາ​ຄິດ​ເຫັນ */

Mixins ເຖິງ wazoo ໄດ້

Mixins ໂດຍພື້ນຖານແລ້ວແມ່ນລວມເອົາຫຼືບາງສ່ວນສໍາລັບ CSS, ຊ່ວຍໃຫ້ທ່ານສາມາດລວມຕົວບລັອກຂອງລະຫັດເຂົ້າໄປໃນຫນຶ່ງ. ພວກມັນດີເລີດສຳລັບຄຸນສົມບັດນຳໜ້າຂອງຜູ້ຂາຍເຊັ່ນ: box-shadow, ລະດັບສີຂ້າມ browser, stacks ຟອນ, ແລະອື່ນໆອີກ. ຂ້າງລຸ່ມນີ້ແມ່ນຕົວຢ່າງຂອງ mixins ທີ່ລວມຢູ່ໃນ Bootstrap.

ຟອນ stacks

#ຟອນ {
  . shorthand ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    ຕົວອັກສອນ - ຂະຫນາດ : @size ; 
    font - weight : @weight ; 
    ເສັ້ນ - ຄວາມສູງ : @lineHeight ; 
  }
  . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    font - family : "Helvetica Neue" , Helvetica , Arial , sans - serif ;   
    ຕົວອັກສອນ - ຂະຫນາດ : @size ; 
    font - weight : @weight ; 
    ເສັ້ນ - ຄວາມສູງ : @lineHeight ; 
  }
  . serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    font - family : "Georgia" , Times New Roman , Times , sans - serif ;     
    ຕົວອັກສອນ - ຂະຫນາດ : @size ; 
    font - weight : @weight ; 
    ເສັ້ນ - ຄວາມສູງ : @lineHeight ; 
  }
  . monospace ( @weight : normal , @size : 12px , @lineHeight : 20px ) {     
    font - family : "ໂມນາໂກ" , Courier New , monospace ;   
    ຕົວອັກສອນ - ຂະຫນາດ : @size ; 
    font - weight : @weight ; 
    ເສັ້ນ - ຄວາມສູງ : @lineHeight ; 
  }
}

ຊັ້ນສີ

#gradient {
  . ລວງນອນ ( @startColor : #555, @endColor: #333) { 
    ພື້ນຫຼັງ - ສີ : @endColor ; 
    ພື້ນຫຼັງ - repeat : repeat - x ;
    ພື້ນຫລັງ - ຮູບພາບ : - khtml - gradient ( ເສັ້ນ , ຊ້າຍເທິງ , ເທິງຂວາ , ຈາກ ( @startColor ), ເຖິງ ( @endColor )); // Konqueror   
    ພື້ນຫລັງ - ຮູບພາບ : - moz - linear - gradient ( ຊ້າຍ , @startColor , @endColor ); // FF 3.6+    
    ພື້ນຫລັງ - ຮູບພາບ : - ms - linear - gradient ( ຊ້າຍ , @startColor , @endColor ); // IE10    
    ພື້ນຫຼັງ - ຮູບ : - webkit - gradient ( ເສັ້ນ , ຊ້າຍ ເທິງ , ເທິງ ຂວາ , ສີ - ຢຸດ ( 0 %, @startColor ), ສີ - ຢຸດ ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    ພື້ນຫລັງ - ຮູບພາບ : - webkit - linear - gradient ( ຊ້າຍ , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    ພື້ນຫຼັງ - ຮູບພາບ : - o - linear - gradient ( ຊ້າຍ , @startColor , @endColor ); // Opera 11.10    
    ພື້ນຫລັງ - ຮູບພາບ : linear - gradient ( ຊ້າຍ , @startColor , @endColor ); // ເລມາດຕະຖານ   
  }
  . ແນວຕັ້ງ ( @startColor : #555, @endColor: #333) { 
    ພື້ນຫຼັງ - ສີ : @endColor ; 
    ພື້ນຫຼັງ - repeat : repeat - x ;
    ພື້ນຫລັງ - ຮູບພາບ : - khtml - gradient ( ເສັ້ນ , ຊ້າຍເທິງ , ຊ້າຍລຸ່ມ , ຈາກ ( @startColor ), ເຖິງ ( @endColor )); // Konqueror   
    ພື້ນຫລັງ - ຮູບພາບ : - moz - linear - gradient ( @startColor , @endColor ); // FF 3.6+   
    ພື້ນຫລັງ - ຮູບພາບ : - ms - linear - gradient ( @startColor , @endColor ); // IE10   
    ພື້ນຫຼັງ - ຮູບ : - webkit - gradient ( ເສັ້ນ , ຊ້າຍ ເທິງ , ລຸ່ມ ຊ້າຍ , ສີ - ຢຸດ ( 0 %, @startColor ), ສີ - ຢຸດ ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    ພື້ນຫລັງ - ຮູບພາບ : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    ພື້ນຫລັງ - ຮູບພາບ : - o - linear - gradient ( @startColor , @endColor ); // Opera 11.10   
    ພື້ນຫລັງ - ຮູບພາບ : linear - gradient ( @startColor , @endColor ); // ມາດຕະຖານ  
  }
  . ທິດທາງ ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . ແນວຕັ້ງ - ສາມ ສີ ( @startColor : # 00b3ee , @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { 
    ...
  }
}

ການດໍາເນີນງານແລະລະບົບຕາຂ່າຍໄຟຟ້າ

ຈິນຕະນາການແລະປະຕິບັດຄະນິດສາດບາງຢ່າງເພື່ອສ້າງ mixins ທີ່ມີຄວາມຍືດຫຍຸ່ນແລະມີອໍານາດຄືກັບອັນຂ້າງລຸ່ມນີ້.

// Griditude
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
@siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
 
// ລະບົບຕາຂ່າຍ
. ຕູ້ຄອນເທນເນີ {
  width : @siteWidth ; 
  ຂອບ : 0 ອັດຕະໂນມັດ ;  
  . clearfix ();
}
. ຖັນ ( @columnSpan : 1 ) {  
  width : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
}
. offset ( @columnOffset : 1 ) {  
  ຂອບ - ຊ້າຍ : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;           
}