ອົງປະກອບທີ່ນຳມາໃຊ້ຄືນໄດ້ຫຼາຍສິບອັນທີ່ສ້າງຂຶ້ນເພື່ອສະໜອງການນຳທາງ, ການແຈ້ງເຕືອນ, popovers, ແລະອື່ນໆອີກ.
ສະຫຼັບໄດ້, ເມນູບໍລິບົດເພື່ອສະແດງລາຍການລິ້ງ. ເຮັດໂຕ້ຕອບກັບ ປລັກອິນ JavaScript ແບບເລື່ອນລົງ .
- <ul class = "dropdown-menu" ບົດບາດ = "ເມນູ" aria-labelledby = "dropdownMenu" >
- <li><a tabindex = "-1" href = "#"> ປະຕິບັດ </a> </li>
- <li><a tabindex = "-1" href = "#"> ການ ກະທຳອື່ນ </a></li>
- <li><a tabindex = "-1" href = "#" > ອັນ ອື່ນຢູ່ນີ້ </a></li>
- <li class = "divider" ></li>
- <li><a tabindex = "-1" href = "#"> ລິ້ງ ທີ່ ແຍກກັນ </a></li>
- </ul>
ຊອກຫາຢູ່ໃນເມນູເລື່ອນລົງ, ນີ້ແມ່ນ HTML ທີ່ຕ້ອງການ. ທ່ານຈໍາເປັນຕ້ອງໄດ້ຫໍ່ trigger ຂອງ dropdown ແລະເມນູ dropdown ພາຍໃນ .dropdown
, ຫຼືອົງປະກອບອື່ນທີ່ປະກາດ position: relative;
. ຫຼັງຈາກນັ້ນ, ພຽງແຕ່ສ້າງເມນູ.
- <div class = "dropdown" >
- <!-- ລິ້ງ ຫຼືປຸ່ມເພື່ອສະຫຼັບແບບເລື່ອນລົງ -->
- <ul class = "dropdown-menu" ບົດບາດ = "ເມນູ" aria-labelledby = "dLabel" >
- <li><a tabindex = "-1" href = "#"> ປະຕິບັດ </a> </li>
- <li><a tabindex = "-1" href = "#"> ການ ກະທຳອື່ນ </a></li>
- <li><a tabindex = "-1" href = "#" > ອັນ ອື່ນຢູ່ນີ້ </a></li>
- <li class = "divider" ></li>
- <li><a tabindex = "-1" href = "#"> ລິ້ງ ທີ່ ແຍກກັນ </a></li>
- </ul>
- </div>
ຈັດຮຽງເມນູໄປທາງຂວາ ແລະເພີ່ມລະດັບການເລື່ອນລົງເພີ່ມເຕີມ.
ຕື່ມການໃສ່ .pull-right
ໄປ .dropdown-menu
ທາງຂວາຈັດວາງເມນູແບບເລື່ອນລົງ.
- <ul class = "dropdown-menu pull-right" ບົດບາດ = "ເມນູ" aria-labelledby = "dLabel" >
- ...
- </ul>
ຕື່ມ .disabled
ໃສ່ <li>
ໃນເມນູເລື່ອນລົງເພື່ອປິດການເຊື່ອມຕໍ່.
- <ul class = "dropdown-menu" ບົດບາດ = "ເມນູ" aria-labelledby = "dropdownMenu" >
- <li><a tabindex = "-1" href = "#"> ລິ້ງ ປົກ ກະຕິ </a></li>
- < li class = "disabled" > <a tabindex="-1" href="#"> ລິ້ງ ທີ່ຖືກ ປິດ ໃຊ້ງານ </a> < /li>
- <li><a tabindex = "-1" href = "#"> ລິ້ງ ອື່ນ </a> </li>
- </ul>
ເພີ່ມລະດັບພິເສດຂອງເມນູແບບເລື່ອນລົງ, ປະກົດຢູ່ເທິງເຄື່ອງເລື່ອນຄືກັບ OS X, ດ້ວຍການເພີ່ມເຄື່ອງໝາຍທີ່ງ່າຍດາຍບາງອັນ. ເພີ່ມ .dropdown-submenu
ໃສ່ອັນໃດກໍໄດ້ li
ໃນເມນູເລື່ອນລົງທີ່ມີຢູ່ແລ້ວເພື່ອການຈັດຮູບແບບອັດຕະໂນມັດ.
- <ul class = "dropdown-menu" ບົດບາດ = "ເມນູ" aria-labelledby = "dLabel" >
- ...
- <li class = "dropdown-submenu" >
- <a tabindex = "-1" href = "#"> ທາງເລືອກ ເພີ່ມ ເຕີມ </a>
- <ul class = "dropdown-menu" >
- ...
- </ul>
- </li>
- </ul>
pagination ງ່າຍດາຍໄດ້ຮັບການດົນໃຈໂດຍ Rdio, ທີ່ຍິ່ງໃຫຍ່ສໍາລັບກິດແລະຜົນການຊອກຫາ. ຕັນຂະຫນາດໃຫຍ່ແມ່ນຍາກທີ່ຈະພາດ, ຂະຫຍາຍໄດ້ງ່າຍ, ແລະສະຫນອງພື້ນທີ່ຄລິກຂະຫນາດໃຫຍ່.
- <div class = "page" >
- <ul>
- <li><a href = "#"> ກ່ອນ </a> </li>
- <li><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><a href="#"> ຕໍ່ ໄປ </a> < /li>
- </ul>
- </div>
ການເຊື່ອມຕໍ່ສາມາດປັບແຕ່ງໄດ້ສໍາລັບສະຖານະການທີ່ແຕກຕ່າງກັນ. ໃຊ້ .disabled
ສໍາລັບການເຊື່ອມຕໍ່ unclickable ແລະ .active
ຊີ້ບອກຫນ້າປະຈຸບັນ.
- <div class = "page" >
- <ul>
- < li class = "disabled" > <a href="#" > « </a></li>
- <li class = "active" > <a href="#"> 1 </a> < / li>
- ...
- </ul>
- </div>
ທ່ານສາມາດເລືອກທາງເລືອກໃນການສະຫຼັບສະມໍທີ່ໃຊ້ວຽກ ຫຼືປິດໃຊ້ງານສໍາລັບ spans ເພື່ອເອົາການທໍາງານຂອງຄລິກໃນຂະນະທີ່ຍັງຄົງຮັກສາຮູບແບບທີ່ຕັ້ງໄວ້.
- <div class = "page" >
- <ul>
- <li class = "disabled" ><span> « </span></li>
- <li class = "active" ><span> 1 </span></li>
- ...
- </ul>
- </div>
ຕ້ອງການ pagination ໃຫຍ່ຫຼືນ້ອຍກວ່າ? ເພີ່ມ .pagination-large
, .pagination-small
, ຫຼື .pagination-mini
ສໍາລັບຂະຫນາດເພີ່ມເຕີມ.
- <div class = "pagination pagination-large" >
- <ul>
- ...
- </ul>
- </div>
- <div class = "page" >
- <ul>
- ...
- </ul>
- </div>
- <div class = "pagination pagination-small" >
- <ul>
- ...
- </ul>
- </div>
- <div class = "pagination pagination-mini" >
- <ul>
- ...
- </ul>
- </div>
ເພີ່ມຫນຶ່ງໃນສອງຊັ້ນຮຽນທາງເລືອກເພື່ອປ່ຽນການຈັດຕໍາແຫນ່ງຂອງການເຊື່ອມຕໍ່ pagination: .pagination-centered
ແລະ .pagination-right
.
- <div class = "pagination pagination-centered" >
- ...
- </div>
- <div class = "pagination pagination-right" >
- ...
- </div>
ລິ້ງກ່ອນໜ້າ ແລະຕໍ່ໄປໄວສຳລັບການຈັດຕັ້ງປະຕິບັດການວາງໜ້າແບບງ່າຍໆດ້ວຍເຄື່ອງໝາຍຈຸດ ແລະຮູບແບບສີສັນ. ມັນດີສໍາລັບເວັບໄຊທ໌ງ່າຍໆເຊັ່ນ blogs ຫຼືວາລະສານ.
ໂດຍຄ່າເລີ່ມຕົ້ນ, pager ສູນກາງເຊື່ອມຕໍ່.
- <ul class = "pager" >
- <li><a href="#"> ກ່ອນ ໜ້າ </a> < /li>
- <li><a href="#"> ຕໍ່ ໄປ </a> < /li>
- </ul>
ອີກທາງເລືອກ, ທ່ານສາມາດຈັດວາງແຕ່ລະເຊື່ອມຕໍ່ໄປຫາດ້ານຕ່າງໆ:
- <ul class = "pager" >
- <li class = "ກ່ອນໜ້າ" >
- <a href="#"> & larr ; _ ແກ່ </a>
- </li>
- <li class = "ຕໍ່ໄປ" >
- <a href="#"> ໃໝ່ ກວ່າ & rarr ; </a>
- </li>
- </ul>
ການເຊື່ອມໂຍງ Pager ຍັງໃຊ້ .disabled
ປະເພດຜົນປະໂຫຍດທົ່ວໄປຈາກ pagination.
- <ul class = "pager" >
- <li class = "ກ່ອນໜ້ານີ້ພິການ" >
- <a href="#"> & larr ; _ ແກ່ </a>
- </li>
- ...
- </ul>
ປ້າຍກຳກັບ | ມາກອັບ |
---|---|
ຄ່າເລີ່ມຕົ້ນ | <span class="label">Default</span> |
ຄວາມສໍາເລັດ | <span class="label label-success">Success</span> |
ຄຳເຕືອນ | <span class="label label-warning">Warning</span> |
ສຳຄັນ | <span class="label label-important">Important</span> |
ຂໍ້ມູນ | <span class="label label-info">Info</span> |
ປີ້ນ | <span class="label label-inverse">Inverse</span> |
ຊື່ | ຕົວຢ່າງ | ມາກອັບ |
---|---|---|
ຄ່າເລີ່ມຕົ້ນ | 1 | <span class="badge">1</span> |
ຄວາມສໍາເລັດ | 2 | <span class="badge badge-success">2</span> |
ຄຳເຕືອນ | 4 | <span class="badge badge-warning">4</span> |
ສຳຄັນ | 6 | <span class="badge badge-important">6</span> |
ຂໍ້ມູນ | 8 | <span class="badge badge-info">8</span> |
ປີ້ນ | 10 | <span class="badge badge-inverse">10</span> |
ສໍາລັບການປະຕິບັດທີ່ງ່າຍດາຍ, ປ້າຍຊື່ແລະປ້າຍຈະຍຸບລົງ (ຜ່ານ :empty
ຕົວເລືອກຂອງ CSS) ເມື່ອບໍ່ມີເນື້ອຫາຢູ່ພາຍໃນ.
ອົງປະກອບທີ່ມີນ້ໍາຫນັກເບົາ, ມີຄວາມຍືດຫຍຸ່ນເພື່ອສະແດງເນື້ອຫາທີ່ສໍາຄັນຢູ່ໃນເວັບໄຊຂອງທ່ານ. ມັນເຮັດວຽກໄດ້ດີໃນການຕະຫຼາດແລະເວັບໄຊທ໌ທີ່ມີເນື້ອຫາຫນັກ.
ນີ້ແມ່ນຫນ່ວຍງານ hero ງ່າຍດາຍ, ເປັນອົງປະກອບແບບ jumbotron ງ່າຍດາຍສໍາລັບການໂທຫາຄວາມສົນໃຈເປັນພິເສດຕໍ່ເນື້ອໃນທີ່ໂດດເດັ່ນຫຼືຂໍ້ມູນຂ່າວສານ.
- <div class = "hero-unit" >
- <h1> ຫົວຂໍ້ </h1>
- <p> ປ້າຍກຳກັບ </p>
- <p>
- <a class="btn btn-primary btn-large"> _
- ສຶກສາເພີ່ມເຕີມ
- </a>
- </p>
- </div>
Shell ງ່າຍດາຍສໍາລັບການ h1
ຈັດວາງອອກຢ່າງເຫມາະສົມແລະແບ່ງສ່ວນຂອງເນື້ອຫາຢູ່ໃນຫນ້າ. ມັນສາມາດນໍາໃຊ້ h1
ຂອງມາດຕະຖານ small
, ອົງປະກອບເຊັ່ນດຽວກັນກັບອົງປະກອບອື່ນໆທີ່ສຸດ (ມີຮູບແບບເພີ່ມເຕີມ).
- <div class = "page-header" >
- <h1> ຕົວຢ່າງສ່ວນຫົວ <small> Subtext ສໍາລັບ header </small></h1>
- </div>
ໂດຍຄ່າເລີ່ມຕົ້ນ, ຮູບຫຍໍ້ຂອງ Bootstrap ຖືກອອກແບບມາເພື່ອສະແດງຮູບພາບທີ່ເຊື່ອມຕໍ່ດ້ວຍເຄື່ອງໝາຍທີ່ຕ້ອງການໜ້ອຍທີ່ສຸດ.
ດ້ວຍເຄື່ອງໝາຍເພີ່ມເຕີມເລັກນ້ອຍ, ມັນເປັນໄປໄດ້ທີ່ຈະເພີ່ມເນື້ອຫາ HTML ປະເພດໃດກໍໄດ້ເຊັ່ນ: ຫົວຂໍ້, ຫຍໍ້ໜ້າ, ຫຼືປຸ່ມຕ່າງໆເຂົ້າໃນຮູບຫຍໍ້.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
ຮູບຕົວຢ່າງ (ກ່ອນໜ້ານີ້ .media-grid
ຈົນຮອດ v1.4) ແມ່ນດີຫຼາຍສຳລັບຕາໜ່າງຂອງຮູບພາບ ຫຼືວິດີໂອ, ຜົນການຊອກຫາຮູບພາບ, ຜະລິດຕະພັນຂາຍຍ່ອຍ, ຫຼັກຊັບ ແລະອື່ນໆອີກ. ພວກເຂົາສາມາດເປັນການເຊື່ອມໂຍງຫຼືເນື້ອຫາຄົງທີ່.
ການໝາຍຮູບຫຍໍ້ແມ່ນງ່າຍດາຍ— ul
ມີ li
ອົງປະກອບໃດກໍໄດ້ທີ່ຕ້ອງການທັງໝົດ. ມັນຍັງມີຄວາມຍືດຫຍຸ່ນສູງ, ອະນຸຍາດໃຫ້ສໍາລັບປະເພດຂອງເນື້ອຫາໃດໆທີ່ມີເຄື່ອງຫມາຍເພີ່ມເຕີມເລັກນ້ອຍເພື່ອຫໍ່ເນື້ອຫາຂອງທ່ານ.
ສຸດທ້າຍ, ອົງປະກອບຂອງຮູບຫຍໍ້ຈະໃຊ້ຫ້ອງຮຽນລະບົບຕາໜ່າງທີ່ມີຢູ່ແລ້ວ - ເຊັ່ນ .span2
ຫຼື .span3
- ສໍາລັບການຄວບຄຸມຂະໜາດຂອງຮູບຫຍໍ້.
ດັ່ງທີ່ໄດ້ກ່າວມາກ່ອນຫນ້ານີ້, ເຄື່ອງຫມາຍທີ່ຕ້ອງການສໍາລັບຮູບຫຍໍ້ແມ່ນເບົາແລະກົງໄປກົງມາ. ນີ້ແມ່ນເບິ່ງການຕັ້ງຄ່າເລີ່ມຕົ້ນ ສໍາລັບຮູບພາບທີ່ເຊື່ອມໂຍງ :
- <ul class = "ຮູບຫຍໍ້" >
- <li class = "span4" >
- <a href="#" class="thumbnail"> _ _ _ _ _
- <img data-src = "holder.js/300x200" alt = "" >
- </a>
- </li>
- ...
- </ul>
ສໍາລັບເນື້ອຫາ HTML ທີ່ກໍາຫນົດເອງໃນຮູບຫຍໍ້, ເຄື່ອງຫມາຍການປ່ຽນແປງເລັກນ້ອຍ. ເພື່ອອະນຸຍາດໃຫ້ເນື້ອຫາລະດັບບລັອກຢູ່ບ່ອນໃດກໍໄດ້, ພວກເຮົາປ່ຽນ <a>
ເປັນແບບ <div>
ດຽວກັນ:
- <ul class = "ຮູບຫຍໍ້" >
- <li class = "span4" >
- <div class = "ຮູບຫຍໍ້" >
- <img data-src = "holder.js/300x200" alt = "" >
- <h3> ປ້າຍຊື່ຮູບຫຍໍ້ </h3>
- <p> ຫຍໍ້ໜ້າ... </p>
- </div>
- </li>
- ...
- </ul>
ສຳຫຼວດຕົວເລືອກທັງໝົດຂອງເຈົ້າດ້ວຍຫ້ອງຮຽນຕາຕະລາງຕ່າງໆທີ່ມີໃຫ້ທ່ານ. ນອກນັ້ນທ່ານຍັງສາມາດປະສົມແລະຈັບຄູ່ຂະຫນາດທີ່ແຕກຕ່າງກັນ.
ຫໍ່ຂໍ້ຄວາມໃດນຶ່ງ ແລະປຸ່ມປິດທາງເລືອກໃນ .alert
ຂໍ້ຄວາມເຕືອນໄພພື້ນຖານ.
- <div class = "ເຕືອນ" >
- <button type = "button" class = "close" data-dismiss = "ເຕືອນ" > × </button>
- <strong> ເຕືອນ! </strong> ກວດເບິ່ງຕົວເອງທີ່ດີທີ່ສຸດ, ເຈົ້າເບິ່ງບໍ່ດີເກີນໄປ.
- </div>
ຕົວທ່ອງເວັບຂອງ Safari ແລະ Mobile Opera, ນອກເຫນືອຈາກ data-dismiss="alert"
ຄຸນລັກສະນະ, ຮຽກຮ້ອງໃຫ້ມີ href="#"
ການຍົກເລີກການແຈ້ງເຕືອນເມື່ອໃຊ້ <a>
ແທັກ.
- <a href = "#" ຫ້ອງຮຽນ = "ປິດ" data-dismiss = "ເຕືອນ" > × </a>
ອີກທາງເລືອກ, ທ່ານສາມາດໃຊ້ <button>
ອົງປະກອບທີ່ມີຄຸນລັກສະນະຂໍ້ມູນ, ເຊິ່ງພວກເຮົາໄດ້ເລືອກເຮັດສໍາລັບເອກະສານຂອງພວກເຮົາ. ໃນເວລານໍາໃຊ້ <button>
, ທ່ານຕ້ອງປະກອບ type="button"
ຫຼືແບບຟອມຂອງທ່ານອາດຈະບໍ່ສົ່ງ.
- <ປຸ່ມ ປະເພດ = "ປຸ່ມ" ຫ້ອງຮຽນ = "close" data-dismiss = "ເຕືອນ" > × </button>
ໃຊ້ ປັ໊ກອິນ jQuery ການແຈ້ງເຕືອນ ເພື່ອການຍົກເລີກການແຈ້ງເຕືອນໄວແລະງ່າຍດາຍ.
ສໍາລັບຂໍ້ຄວາມທີ່ຍາວກວ່າ, ເພີ່ມ padding ເທິງແລະລຸ່ມຂອງ wrapper ເຕືອນໂດຍການເພີ່ມ .alert-block
.
ກວດເບິ່ງຕົວເອງທີ່ດີທີ່ສຸດ, ເຈົ້າເບິ່ງບໍ່ດີເກີນໄປ. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
- <div ຫ້ອງຮຽນ = "ເຕືອນເຕືອນ-ບລັອກ" >
- <ປຸ່ມ ປະເພດ = "ປຸ່ມ" class = "ປິດ" data-dismiss = "ເຕືອນ" > × </button>
- <h4> ຄຳເຕືອນ! </h4>
- ກວດເບິ່ງຕົວເອງທີ່ດີທີ່ສຸດ, ເຈົ້າບໍ່ແມ່ນ ...
- </div>
ເພີ່ມຫ້ອງຮຽນທາງເລືອກເພື່ອປ່ຽນຄວາມໝາຍຂອງການແຈ້ງເຕືອນ.
- <div class = "ເຕືອນເຕືອນ-ຄວາມຜິດພາດ" >
- ...
- </div>
- <div class = "ເຕືອນ alert-success" >
- ...
- </div>
- <div class = "ການເຕືອນໄພ alert-info" >
- ...
- </div>
ແຖບຄວາມຄືບໜ້າເລີ່ມຕົ້ນດ້ວຍການສີຕາມລວງຕັ້ງ.
- <div class = "ຄວາມຄືບໜ້າ" >
- <div class = "bar" style = " width : 60 %; " ></div>
- </div>
ໃຊ້ສີເປັນສີເພື່ອສ້າງຜົນກະທົບເປັນເສັ້ນດ່າງ. ບໍ່ມີຢູ່ໃນ IE7-8.
- <div class = "ຄວາມຄືບໜ້າ progress-striped" >
- <div class = "bar" style = " width : 20 %; " ></div>
- </div>
ຕື່ມໃສ່ .active
ເພື່ອ .progress-striped
ເຄື່ອນໄຫວເສັ້ນດ່າງຈາກຂວາຫາຊ້າຍ. ບໍ່ມີຢູ່ໃນທຸກລຸ້ນຂອງ IE.
- <div class = "ຄວາມຄືບໜ້າ ຄວາມຄືບໜ້າ-ແບບເຄື່ອນໄຫວ" >
- <div class = "bar" style = " width : 40 %; " ></div>
- </div>
ວາງຫຼາຍແຖບໃສ່ໃນອັນດຽວກັນ .progress
ເພື່ອວາງພວກມັນໄວ້.
- <div class = "ຄວາມຄືບໜ້າ" >
- <div class = "bar bar-success" style = " width : 35 %; " ></div>
- <div class = "bar bar-warning" style = " ກວ້າງ : 20 %; " ></div>
- <div class = "bar bar-danger" style = " width : 10 %; " ></div>
- </div>
ແຖບຄວາມຄືບຫນ້າໃຊ້ບາງປຸ່ມດຽວກັນແລະຫ້ອງຮຽນເຕືອນສໍາລັບຮູບແບບທີ່ສອດຄ່ອງ.
- <div class = "progress progress-info" >
- <div class = "bar" style = " width : 20 % " ></div>
- </div>
- <div class = "progress-success" >
- <div class = "bar" style = " width : 40 % " ></div>
- </div>
- <div class = "progress-warning" >
- <div class = "bar" style = " width : 60 % " ></div>
- </div>
- <div class = "ຄວາມຄືບໜ້າ ຄວາມຄືບໜ້າ-ອັນຕະລາຍ" >
- <div class = "bar" style = " width : 80 % " ></div>
- </div>
ຄ້າຍຄືກັນກັບສີທີ່ແຂງ, ພວກເຮົາມີແຖບຄວາມຄືບຫນ້າທີ່ມີເສັ້ນດ່າງທີ່ແຕກຕ່າງກັນ.
- <div class = "ຄວາມຄືບໜ້າ ຄວາມຄືບໜ້າ-info progress-striped" >
- <div class = "bar" style = " width : 20 % " ></div>
- </div>
- <div class = "ຄວາມຄືບໜ້າ ຄວາມຄືບໜ້າ-success progress-striped" >
- <div class = "bar" style = " width : 40 % " ></div>
- </div>
- <div class = "progress-warning progress-striped" >
- <div class = "bar" style = " width : 60 % " ></div>
- </div>
- <div class = "ຄວາມຄືບໜ້າ ຄວາມຄືບໜ້າ-danger progress-striped" >
- <div class = "bar" style = " width : 80 % " ></div>
- </div>
ແຖບຄວາມຄືບໜ້າໃຊ້ CSS3 gradients, transitions, ແລະ animation ເພື່ອບັນລຸຜົນກະທົບທັງໝົດຂອງມັນ. ຄຸນສົມບັດເຫຼົ່ານີ້ບໍ່ຮອງຮັບໃນ IE7-9 ຫຼື Firefox ເວີຊັນເກົ່າກວ່າ.
ເວີຊັນກ່ອນໜ້ານີ້ກວ່າ Internet Explorer 10 ແລະ Opera 12 ບໍ່ຮອງຮັບພາບເຄື່ອນໄຫວ.
ຮູບແບບວັດຖຸທີ່ບໍ່ມີຕົວຕົນສຳລັບການສ້າງອົງປະກອບປະເພດຕ່າງໆ (ເຊັ່ນ: ຄໍາຄິດເຫັນຂອງບລັອກ, Tweets, ແລະອື່ນໆ) ທີ່ມີຮູບພາບຈັດຮຽງຊ້າຍ ຫຼືຂວາພ້ອມກັບເນື້ອໃນຂໍ້ຄວາມ.
ສື່ເລີ່ມຕົ້ນອະນຸຍາດໃຫ້ເລື່ອນວັດຖຸສື່ (ຮູບພາບ, ວິດີໂອ, ສຽງ) ໄປຊ້າຍ ຫຼືຂວາຂອງບລັອກເນື້ອຫາ.
- <div class = "media" >
- <a class="pull-left" href="#" > _ _ _ _
- <img class = "media-object" data-src = "holder.js/64x64" >
- </a>
- <div class = "media-body" >
- <h4 class = "media-heading" > ຫົວຂໍ້ສື່ </h4>
- ...
- <!-- Nested media object -->
- <div class = "media" >
- ...
- </div>
- </div>
- </div>
ດ້ວຍເຄື່ອງໝາຍພິເສດເລັກນ້ອຍ, ທ່ານສາມາດໃຊ້ສື່ພາຍໃນລາຍຊື່ (ທີ່ເປັນປະໂຫຍດສຳລັບຫົວຂໍ້ຄຳເຫັນ ຫຼືລາຍການບົດຄວາມ).
Cras ນັ່ງ amet nibh libero, ໃນ gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
- <ul class = "media-list" >
- <li class = "media" >
- <a class="pull-left" href="#" > _ _ _ _
- <img class = "media-object" data-src = "holder.js/64x64" >
- </a>
- <div class = "media-body" >
- <h4 class = "media-heading" > ຫົວຂໍ້ສື່ </h4>
- ...
- <!-- Nested media object -->
- <div class = "media" >
- ...
- </div>
- </div>
- </li>
- </ul>
ໃຊ້ດີເປັນຜົນກະທົບທີ່ງ່າຍດາຍກ່ຽວກັບອົງປະກອບເພື່ອໃຫ້ມັນມີຜົນກະທົບ inset.
- <div class = "ດີ" >
- ...
- </div>
ຄວບຄຸມ padding ແລະມຸມມົນດ້ວຍສອງຫ້ອງຮຽນຕົວແກ້ໄຂທາງເລືອກ.
- <div class = "ດີ-ໃຫຍ່" >
- ...
- </div>
- <div class = "ດີ-ນ້ອຍ" >
- ...
- </div>
ໃຊ້ໄອຄອນປິດທົ່ວໄປສໍາລັບການປິດເນື້ອຫາເຊັ່ນ: modals ແລະການແຈ້ງເຕືອນ.
- <button class = "close" > × </button>
ອຸປະກອນ iOS ຕ້ອງການ href="#"
ເຫດການຄລິກຖ້າທ່ານຕ້ອງການໃຊ້ສະມໍ.
- <a class="close" href="#"> & times ; _ _ _ </a>
ຫ້ອງຮຽນແບບງ່າຍດາຍ, ເນັ້ນໃສ່ການສະແດງຜົນຂະໜາດນ້ອຍ ຫຼືການປັບແຕ່ງພຶດຕິກຳ.
ເລື່ອນອົງປະກອບທາງຊ້າຍ
- class = "ດຶງຊ້າຍ"
- . ດຶງ - ຊ້າຍ {
- ເລື່ອນ : ຊ້າຍ ;
- }
ເລື່ອນອົງປະກອບໄປທາງຂວາ
- class = "ດຶງຂວາ"
- . ດຶງ - ຂວາ {
- ເລື່ອນ : ສິດ ;
- }
ປ່ຽນສີຂອງອົງປະກອບເປັນ#999
- class = "ປິດສຽງ"
- . ປິດສຽງ {
- ສີ : #999;
- }
ລຶບລ້າງ float
ອົງປະກອບໃດໆ
- class = "ການແກ້ໄຂ"
- . ແກ້ໄຂ {
- * ຊູມ : 1 ;
- &: ກ່ອນ ,
- &: ຫຼັງຈາກ {
- ຈໍສະແດງຜົນ : ຕາຕະລາງ ;
- ເນື້ອໃນ : "" ;
- }
- &: ຫຼັງຈາກ {
- ຈະແຈ້ງ : ທັງສອງ ;
- }
- }