கிடைக்கும் கிளிஃப்கள்

Glyphicon Halflings தொகுப்பிலிருந்து எழுத்துரு வடிவத்தில் 250 க்கும் மேற்பட்ட கிளிஃப்கள் அடங்கும். Glyphicons Halflings பொதுவாக இலவசமாகக் கிடைக்காது, ஆனால் அவற்றை உருவாக்கியவர் பூட்ஸ்டார்ப்பிற்கு இலவசமாகக் கிடைக்கச் செய்துள்ளார். நன்றி தெரிவிக்கும் வகையில், முடிந்தவரை Glyphicons க்கான இணைப்பைச் சேர்க்குமாறு மட்டுமே கேட்டுக்கொள்கிறோம்.

glyphicon glyphicon-asterisk
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-minus
glyphicon glyphicon-மேகம்
glyphicon glyphicon-உறை
glyphicon glyphicon-பென்சில்
glyphicon glyphicon-கண்ணாடி
glyphicon glyphicon-இசை
glyphicon glyphicon-தேடல்
glyphicon glyphicon-இதயம்
glyphicon glyphicon-star
glyphicon glyphicon-star-காலி
glyphicon glyphicon-பயனர்
glyphicon glyphicon-திரைப்படம்
glyphicon glyphicon-th-large
glyphicon glyphicon-வது
glyphicon glyphicon-th-list
glyphicon glyphicon-ok
glyphicon glyphicon-நீக்கு
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out
glyphicon glyphicon-off
glyphicon glyphicon-சிக்னல்
glyphicon glyphicon-cog
glyphicon glyphicon-குப்பை
glyphicon glyphicon-வீடு
glyphicon glyphicon-file
glyphicon glyphicon-நேரம்
glyphicon glyphicon-road
glyphicon glyphicon-download-alt
glyphicon glyphicon-பதிவிறக்கம்
glyphicon glyphicon-upload
glyphicon glyphicon-inbox
glyphicon glyphicon-play-circle
glyphicon glyphicon-மீண்டும்
glyphicon glyphicon-refresh
glyphicon glyphicon-list-alt
glyphicon glyphicon-lock
glyphicon glyphicon-கொடி
glyphicon glyphicon-ஹெட்ஃபோன்கள்
glyphicon glyphicon-volume-off
glyphicon glyphicon-volume-down
glyphicon glyphicon-volume-up
glyphicon glyphicon-qrcode
glyphicon glyphicon-பார்கோடு
glyphicon glyphicon-tag
glyphicon glyphicon-tags
glyphicon glyphicon-புத்தகம்
glyphicon glyphicon-bookmark
glyphicon glyphicon-print
glyphicon glyphicon-camera
glyphicon glyphicon-எழுத்துரு
glyphicon glyphicon-bold
glyphicon glyphicon-சாய்வு
glyphicon glyphicon-உரை-உயரம்
glyphicon glyphicon-text-width
glyphicon glyphicon-align-left
glyphicon glyphicon-align-center
glyphicon glyphicon-align-right
glyphicon glyphicon-align-justify
glyphicon glyphicon-list
glyphicon glyphicon-indent-left
glyphicon glyphicon-indent-right
glyphicon glyphicon-facetime-video
glyphicon glyphicon-படம்
glyphicon glyphicon-map-marker
glyphicon glyphicon-சரிசெய்
glyphicon glyphicon-tint
glyphicon glyphicon-திருத்து
glyphicon glyphicon-share
glyphicon glyphicon-சரிபார்ப்பு
glyphicon glyphicon-நகர்வு
glyphicon glyphicon-படி-பின்னோக்கி
glyphicon glyphicon-வேகமாக-பின்னோக்கி
glyphicon glyphicon-பின்னோக்கி
glyphicon glyphicon-play
glyphicon glyphicon-இடைநிறுத்தம்
glyphicon glyphicon-stop
glyphicon glyphicon-முன்னோக்கி
glyphicon glyphicon-வேகமாக முன்னோக்கி
glyphicon glyphicon-படி-முன்னோக்கி
glyphicon glyphicon-eject
glyphicon glyphicon-chevron-left
glyphicon glyphicon-chevron-right
glyphicon glyphicon-plus-sign
glyphicon glyphicon-minus-sign
glyphicon glyphicon-நீக்கு-அடையாளம்
glyphicon glyphicon-ok-sign
glyphicon glyphicon-கேள்வி-அடையாளம்
glyphicon glyphicon-info-sign
glyphicon glyphicon-ஸ்கிரீன்ஷாட்
glyphicon glyphicon-நீக்கு-வட்டம்
glyphicon glyphicon-சரி-வட்டம்
glyphicon glyphicon-ban-circle
glyphicon glyphicon-arrow-left
glyphicon glyphicon-arrow-right
glyphicon glyphicon-arrow-up
glyphicon glyphicon-arrow-down
glyphicon glyphicon-share-alt
glyphicon glyphicon-resize-full
glyphicon glyphicon-resize-small
glyphicon glyphicon-ஆச்சரியம்-அடையாளம்
glyphicon glyphicon-பரிசு
glyphicon glyphicon-இலை
glyphicon glyphicon-தீ
glyphicon glyphicon-கண்-திறந்த
glyphicon glyphicon-கண்-மூடு
glyphicon glyphicon-எச்சரிக்கை-அடையாளம்
glyphicon glyphicon-விமானம்
glyphicon glyphicon-calendar
glyphicon glyphicon-சீரற்ற
glyphicon glyphicon-கருத்து
glyphicon glyphicon-காந்தம்
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-down
glyphicon glyphicon-retweet
glyphicon glyphicon-shopping-cart
glyphicon glyphicon-folder-close
glyphicon glyphicon-folder-Open
glyphicon glyphicon-resize-செங்குத்து
glyphicon glyphicon-resize-horizontal
glyphicon glyphicon-hdd
glyphicon glyphicon-புல்ஹார்ன்
glyphicon glyphicon-bell
glyphicon glyphicon-சான்றிதழ்
glyphicon glyphicon-thumbs-up
glyphicon glyphicon-thumbs-down
glyphicon glyphicon-கை-வலது
glyphicon glyphicon-கை-இடது
glyphicon glyphicon-hand-up
glyphicon glyphicon-கை-கீழே
glyphicon glyphicon-வட்டம்-அம்பு-வலது
glyphicon glyphicon-வட்டம்-அம்பு-இடது
glyphicon glyphicon-circle-arrow-up
glyphicon glyphicon-வட்டம்-அம்பு-கீழே
glyphicon glyphicon-globe
glyphicon glyphicon-wrench
glyphicon glyphicon-பணிகள்
glyphicon glyphicon-வடிகட்டி
glyphicon glyphicon-சுருக்கப் பெட்டி
glyphicon glyphicon-முழுத்திரை
glyphicon glyphicon-டாஷ்போர்டு
glyphicon glyphicon-paperclip
glyphicon glyphicon-இதயம்-காலி
glyphicon glyphicon-இணைப்பு
glyphicon glyphicon-phone
glyphicon glyphicon-pushpin
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-sort
glyphicon glyphicon-sort-by-alphabet
glyphicon glyphicon-sort-by-alphabet-alt
glyphicon glyphicon-வரிசைப்படி-வரிசை
glyphicon glyphicon-sort-by-order-alt
glyphicon glyphicon-sort-by-attributes
glyphicon glyphicon-sort-by-attributes-alt
glyphicon glyphicon-தேர்வு செய்யப்படவில்லை
glyphicon glyphicon-விரிவாக்கு
glyphicon glyphicon-சரிவு-கீழே
glyphicon glyphicon-சரிவு-அப்
glyphicon glyphicon-log-in
glyphicon glyphicon-ஃபிளாஷ்
glyphicon glyphicon-log-out
glyphicon glyphicon-புதிய சாளரம்
glyphicon glyphicon-பதிவு
glyphicon glyphicon-சேமி
glyphicon glyphicon-திறந்த
glyphicon glyphicon-சேமிக்கப்பட்ட
glyphicon glyphicon-இறக்குமதி
glyphicon glyphicon-ஏற்றுமதி
glyphicon glyphicon-அனுப்பு
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-நீக்கு
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-open
glyphicon glyphicon-கடன் அட்டை
glyphicon glyphicon-பரிமாற்றம்
glyphicon glyphicon-கட்லரி
glyphicon glyphicon-தலைப்பு
glyphicon glyphicon-சுருக்கப்பட்ட
glyphicon glyphicon-earphone
glyphicon glyphicon-phone-alt
glyphicon glyphicon-tower
glyphicon glyphicon-stats
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
glyphicon glyphicon-subtitles
glyphicon glyphicon-sound-stereo
glyphicon glyphicon-ஒலி-டால்பி
glyphicon glyphicon-ஒலி-5-1
glyphicon glyphicon-ஒலி-6-1
glyphicon glyphicon-ஒலி-7-1
glyphicon glyphicon-copyright-mark
glyphicon glyphicon-registration-mark
glyphicon glyphicon-Cloud-download
glyphicon glyphicon-Cloud-upload
glyphicon glyphicon-tree-conifer
glyphicon glyphicon-மரம்-இலையுதிர்
glyphicon glyphicon-cd
glyphicon glyphicon-save-file
glyphicon glyphicon-open-file
glyphicon glyphicon-level-up
glyphicon glyphicon-நகல்
glyphicon glyphicon-பேஸ்ட்
glyphicon glyphicon-எச்சரிக்கை
glyphicon glyphicon-equalizer
glyphicon glyphicon-ராஜா
glyphicon glyphicon-ராணி
glyphicon glyphicon-pawn
glyphicon glyphicon-பிஷப்
glyphicon glyphicon-knight
glyphicon glyphicon-baby-formula
glyphicon glyphicon-tent
glyphicon glyphicon-கருப்பு பலகை
glyphicon glyphicon-படுக்கை
glyphicon glyphicon-ஆப்பிள்
glyphicon glyphicon-அழித்தல்
glyphicon glyphicon-மணிநேர கண்ணாடி
glyphicon glyphicon-விளக்கு
glyphicon glyphicon-நகல்
glyphicon glyphicon-piggy-bank
glyphicon glyphicon-கத்தரிக்கோல்
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-yen
glyphicon glyphicon-jpy
glyphicon glyphicon-ruble
glyphicon glyphicon-rub
glyphicon glyphicon-அளவு
glyphicon glyphicon-ice-lolly
glyphicon glyphicon-ஐஸ்-லாலி-சுவை
glyphicon glyphicon-கல்வி
glyphicon glyphicon-விருப்பம்-கிடைமட்ட
glyphicon glyphicon-விருப்பம்-செங்குத்து
glyphicon glyphicon-menu-hamburger
glyphicon glyphicon-modal-window
glyphicon glyphicon-எண்ணெய்
glyphicon glyphicon-தானியம்
glyphicon glyphicon-சன்கிளாஸ்கள்
glyphicon glyphicon-text-size
glyphicon glyphicon-text-color
glyphicon glyphicon-text-background
glyphicon glyphicon-object-align-top
glyphicon glyphicon-object-align-bottom
glyphicon glyphicon-object-align-horizontal
glyphicon glyphicon-object-align-left
glyphicon glyphicon-object-align-செங்குத்து
glyphicon glyphicon-object-align-right
glyphicon glyphicon-முக்கோணம்-வலது
glyphicon glyphicon-முக்கோணம்-இடது
glyphicon glyphicon-முக்கோணம்-கீழே
glyphicon glyphicon-முக்கோணம்-மேல்
glyphicon glyphicon-கன்சோல்
glyphicon glyphicon-superscript
glyphicon glyphicon-subscript
glyphicon glyphicon-menu-left
glyphicon glyphicon-menu-வலது
glyphicon glyphicon-menu-down
glyphicon glyphicon-menu-up

எப்படி உபயோகிப்பது

செயல்திறன் காரணங்களுக்காக, அனைத்து ஐகான்களுக்கும் அடிப்படை வகுப்பு மற்றும் தனிப்பட்ட ஐகான் வகுப்பு தேவை. பயன்படுத்த, பின்வரும் குறியீட்டை எங்கும் வைக்கவும். சரியான திணிப்புக்கு ஐகானுக்கும் உரைக்கும் இடையில் இடைவெளி விடுவதை உறுதி செய்யவும்.

மற்ற கூறுகளுடன் கலக்க வேண்டாம்

ஐகான் வகுப்புகளை மற்ற கூறுகளுடன் நேரடியாக இணைக்க முடியாது. ஒரே உறுப்பில் மற்ற வகுப்புகளுடன் சேர்த்து அவற்றைப் பயன்படுத்தக் கூடாது. அதற்குப் பதிலாக, ஒரு உள்ளமையைச் சேர்த்து <span>, ஐகான் வகுப்புகளைப் பயன்படுத்தவும் <span>.

வெற்று உறுப்புகளில் பயன்படுத்த மட்டுமே

ஐகான் வகுப்புகள் உரை உள்ளடக்கம் இல்லாத மற்றும் குழந்தை கூறுகள் இல்லாத கூறுகளில் மட்டுமே பயன்படுத்தப்பட வேண்டும்.

ஐகான் எழுத்துரு இருப்பிடத்தை மாற்றுகிறது

../fonts/தொகுக்கப்பட்ட CSS கோப்புகளுடன் தொடர்புடைய கோப்பகத்தில் ஐகான் எழுத்துரு கோப்புகள் இருக்கும் என்று பூட்ஸ்ட்ராப் கருதுகிறது . அந்த எழுத்துரு கோப்புகளை நகர்த்துவது அல்லது மறுபெயரிடுவது என்பது CSS ஐ மூன்று வழிகளில் ஒன்றில் புதுப்பிப்பதாகும்:

@icon-font-pathமூலத்தில் உள்ள மற்றும்/அல்லது @icon-font-nameமாறிகளை மாற்றவும் குறைவான கோப்புகள்.
லெஸ் கம்பைலர் வழங்கிய தொடர்புடைய URLகள் விருப்பத்தைப் பயன்படுத்தவும் .
url()தொகுக்கப்பட்ட CSS இல் பாதைகளை மாற்றவும் .

உங்கள் குறிப்பிட்ட மேம்பாட்டு அமைப்பிற்கு மிகவும் பொருத்தமான எந்த விருப்பத்தையும் பயன்படுத்தவும்.

அணுகக்கூடிய சின்னங்கள்

உதவி தொழில்நுட்பங்களின் நவீன பதிப்புகள் CSS உருவாக்கிய உள்ளடக்கம் மற்றும் குறிப்பிட்ட யூனிகோட் எழுத்துக்களை அறிவிக்கும். ஸ்கிரீன் ரீடர்களில் திட்டமிடப்படாத மற்றும் குழப்பமான வெளியீட்டைத் தவிர்க்க (குறிப்பாக ஐகான்கள் முற்றிலும் அலங்காரத்திற்காகப் பயன்படுத்தப்படும்போது), அவற்றைப் aria-hidden="true"பண்புக்கூறுடன் மறைக்கிறோம்.

நீங்கள் அர்த்தத்தை வெளிப்படுத்த ஐகானைப் பயன்படுத்துகிறீர்கள் என்றால் (அலங்கார உறுப்பாக மட்டும் இல்லாமல்), இந்த அர்த்தம் உதவி தொழில்நுட்பங்களுக்கும் தெரிவிக்கப்படுவதை உறுதிசெய்யவும் - எடுத்துக்காட்டாக, .sr-onlyவகுப்பில் பார்வைக்கு மறைக்கப்பட்ட கூடுதல் உள்ளடக்கத்தைச் சேர்க்கவும்.

நீங்கள் வேறு எந்த உரையும் இல்லாமல் கட்டுப்பாடுகளை உருவாக்குகிறீர்கள் என்றால் ( <button>ஐகானை மட்டும் உள்ளடக்கியது போன்றவை), கட்டுப்பாட்டின் நோக்கத்தை அடையாளம் காண மாற்று உள்ளடக்கத்தை நீங்கள் எப்போதும் வழங்க வேண்டும், இதனால் உதவி தொழில்நுட்பங்களைப் பயன்படுத்துபவர்களுக்கு அது புரியும். இந்த வழக்கில், நீங்கள் aria-labelகட்டுப்பாட்டிலேயே ஒரு பண்புக்கூறு சேர்க்கலாம்.

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

எடுத்துக்காட்டுகள்

பொத்தான்கள், பொத்தான் குழுக்களில் கருவிப்பட்டி, வழிசெலுத்தல் அல்லது முன் தயாரிக்கப்பட்ட படிவ உள்ளீடுகளில் அவற்றைப் பயன்படுத்தவும்.

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

இது ஒரு பிழைச் செய்தி என்பதைத் தெரிவிக்க விழிப்பூட்டலில் பயன்படுத்தப்படும் ஐகான் .sr-only, உதவித் தொழில்நுட்பங்களைப் பயன்படுத்துபவர்களுக்கு இந்தக் குறிப்பைத் தெரிவிக்க கூடுதல் உரையுடன்.

சரியான மின்னஞ்சல் முகவரியை உள்ளிடவும்

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

இணைப்புகளின் பட்டியலைக் காண்பிப்பதற்கான மாற்றக்கூடிய, சூழல் மெனு. கீழ்தோன்றும் ஜாவாஸ்கிரிப்ட் செருகுநிரலுடன் ஊடாடத்தக்கதாக மாற்றப்பட்டது .

உதாரணமாக

கீழ்தோன்றும் தூண்டுதல் மற்றும் கீழ்தோன்றும் மெனுவை உள்ளிடவும் .dropdownஅல்லது அறிவிக்கும் மற்றொரு உறுப்பு position: relative;. பின்னர் மெனுவின் HTML ஐச் சேர்க்கவும்.

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

.dropupகீழ்தோன்றும் மெனுக்களை பெற்றோருடன் சேர்ப்பதன் மூலம் மேல்நோக்கி (கீழ்நோக்கிச் செல்வதற்குப் பதிலாக) மாற்றலாம் .

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

சீரமைப்பு

இயல்பாக, கீழ்தோன்றும் மெனு தானாகவே மேலே இருந்து 100% மற்றும் அதன் பெற்றோரின் இடது பக்கமாக நிலைநிறுத்தப்படும். கீழ்தோன்றும் மெனுவை வலப்புறமாக சீரமைக்க .dropdown-menu-righta இல் சேர்க்கவும் ..dropdown-menu

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</ul>

தலைப்புகள்

கீழ்தோன்றும் மெனுவில் செயல்களின் பிரிவுகளை லேபிளிட ஒரு தலைப்பைச் சேர்க்கவும்.

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

பிரிப்பான்

கீழ்தோன்றும் மெனுவில் உள்ள தனித் தொடர் இணைப்புகளுக்கு வகுப்பியைச் சேர்க்கவும்.

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

முடக்கப்பட்ட மெனு உருப்படிகள்

இணைப்பை முடக்க, கீழ்தோன்றும் .disabledஒரு உடன் சேர்க்கவும் .<li>

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

பட்டன் குழுவுடன் ஒரே வரியில் பொத்தான்களின் வரிசையை தொகுக்கவும். விருப்பமான ஜாவாஸ்கிரிப்ட் ரேடியோ மற்றும் தேர்வுப்பெட்டி பாணி நடத்தையை எங்கள் பொத்தான்கள் சொருகி மூலம் சேர்க்கவும் .

பட்டன் குழுக்களில் உள்ள உதவிக்குறிப்புகள் மற்றும் பாப்ஓவர்களுக்கு சிறப்பு அமைப்பு தேவை

ஒரு க்குள் உள்ள உறுப்புகளில் டூல்டிப்கள் அல்லது பாப்ஓவர்களைப் பயன்படுத்தும் போது .btn-group, தேவையற்ற பக்க விளைவுகளைத் தவிர்ப்பதற்கான விருப்பத்தை நீங்கள் குறிப்பிட வேண்டும் container: 'body'(உறுப்பு அகலமாக வளர்வது மற்றும்/அல்லது டூல்டிப் அல்லது பாப்ஓவர் தூண்டப்படும்போது அதன் வட்டமான மூலைகளை இழப்பது போன்றவை).

சரியானதை உறுதிசெய்து `role`லேபிளை வழங்கவும்

ஸ்கிரீன் ரீடர்கள் போன்ற உதவித் தொழில்நுட்பங்களுக்கு, தொடர்ச்சியான பொத்தான்கள் தொகுக்கப்பட்டுள்ளன என்பதைத் தெரிவிக்க, பொருத்தமான roleபண்புக்கூறு வழங்கப்பட வேண்டும். பொத்தான் குழுக்களுக்கு, இது role="group", கருவிப்பட்டிகளில் ஒரு role="toolbar".

ஒரு விதிவிலக்கு என்பது ஒற்றைக் கட்டுப்பாட்டை மட்டுமே கொண்ட குழுக்கள் (உதாரணமாக உறுப்புகளுடன் நியாயப்படுத்தப்பட்ட பொத்தான் குழுக்கள்<button> ) அல்லது கீழ்தோன்றும்.

கூடுதலாக, குழுக்கள் மற்றும் கருவிப்பட்டிகளுக்கு வெளிப்படையான லேபிள் வழங்கப்பட வேண்டும், ஏனெனில் சரியான roleபண்புக்கூறு இருந்தபோதிலும் பெரும்பாலான உதவி தொழில்நுட்பங்கள் அவற்றை அறிவிக்காது. இங்கே வழங்கப்பட்ட எடுத்துக்காட்டுகளில், நாங்கள் பயன்படுத்துகிறோம் aria-label, ஆனால் இது போன்ற மாற்றுகளையும் aria-labelledbyபயன்படுத்தலாம்.

அடிப்படை உதாரணம்

.btnஉடன் பொத்தான்களின் வரிசையை மடிக்கவும் .btn-group.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

மிகவும் சிக்கலான கூறுகளுக்கு <div class="btn-group">ஒரு தொகுப்புகளை இணைக்கவும்.<div class="btn-toolbar">

<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
</div>

அளவிடுதல்

ஒரு குழுவில் உள்ள ஒவ்வொரு பொத்தானுக்கும் பொத்தான் அளவு வகுப்புகளைப் பயன்படுத்துவதற்குப் பதிலாக, பல குழுக்களில் கூடு கட்டுவது உட்பட .btn-group-*ஒவ்வொன்றிலும் சேர்க்கவும்..btn-group

<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

கூடு கட்டுதல்

கீழ்தோன்றும் மெனுக்கள் தொடர்ச்சியான பொத்தான்களுடன் கலக்கப்பட வேண்டும் என நீங்கள் விரும்பினால், அதை .btn-groupமற்றொன்றிற்குள் வைக்கவும் ..btn-group

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

செங்குத்து மாறுபாடு

பொத்தான்களின் தொகுப்பை கிடைமட்டமாக இல்லாமல் செங்குத்தாக அடுக்கி வைக்கவும். ஸ்பிளிட் பட்டன் கீழ்தோன்றல்கள் இங்கே ஆதரிக்கப்படாது.

<div class="btn-group-vertical" role="group" aria-label="...">
  ...
</div>

நியாயப்படுத்தப்பட்ட பொத்தான் குழுக்கள்

பொத்தான்களின் குழுவை அதன் பெற்றோரின் முழு அகலத்தையும் பரப்புவதற்கு சம அளவுகளில் நீட்டவும். பொத்தான் குழுவில் உள்ள பட்டன் கீழ்தோன்றும் உடன் வேலை செய்கிறது.

எல்லைகளைக் கையாளுதல்

பொத்தான்களை நியாயப்படுத்தப் பயன்படுத்தப்படும் குறிப்பிட்ட HTML மற்றும் CSS காரணமாக (அதாவது display: table-cell), அவற்றுக்கிடையேயான எல்லைகள் இரட்டிப்பாகும். வழக்கமான பொத்தான் குழுக்களில், margin-left: -1pxஎல்லைகளை அகற்றுவதற்குப் பதிலாக அடுக்கி வைக்கப் பயன்படுகிறது. இருப்பினும், marginஉடன் வேலை செய்யாது display: table-cell. இதன் விளைவாக, பூட்ஸ்டார்ப்பிற்கான உங்கள் தனிப்பயனாக்கங்களைப் பொறுத்து, நீங்கள் எல்லைகளை அகற்ற அல்லது மீண்டும் வண்ணமயமாக்க விரும்பலாம்.

IE8 மற்றும் எல்லைகள்

Internet Explorer 8 ஆனது நியாயப்படுத்தப்பட்ட பொத்தான் குழுவில் உள்ள பொத்தான்களில் எல்லைகளை வழங்காது, அது ஆன் <a>அல்லது <button>உறுப்புகளாக இருந்தாலும் சரி. அதைச் சுற்றி வர, ஒவ்வொரு பட்டனையும் மற்றொன்றில் மடிக்கவும் .btn-group.

மேலும் தகவலுக்கு #12476 ஐப் பார்க்கவும் .

`<a>`உறுப்புகளுடன் _

.btnகளில் ஒரு தொடரை மடிக்கவும் .btn-group.btn-group-justified.

விட்டு நடுத்தர சரி

விட்டு நடுத்தர

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  ...
</div>

இணைப்புகள் பொத்தான்களாக செயல்படுகின்றன

உறுப்புகள் <a>பொத்தான்களாகச் செயல்படப் பயன்படுத்தப்பட்டால் - தற்போதைய பக்கத்தில் உள்ள மற்றொரு ஆவணம் அல்லது பிரிவிற்குச் செல்வதற்குப் பதிலாக, பக்க செயல்பாடுகளைத் தூண்டுகிறது - அவற்றிற்கும் பொருத்தமானது கொடுக்கப்பட வேண்டும் role="button".

`<button>`உறுப்புகளுடன் _

<button>உறுப்புகளுடன் நியாயப்படுத்தப்பட்ட பொத்தான் குழுக்களைப் பயன்படுத்த , ஒவ்வொரு பட்டனையும் ஒரு பொத்தான் குழுவில் மடிக்க வேண்டும் . பெரும்பாலான உலாவிகள் உறுப்புகளை நியாயப்படுத்த எங்கள் CSS ஐ சரியாகப் பயன்படுத்துவதில்லை <button>, ஆனால் நாங்கள் பட்டன் ட்ராப் டவுன்களை ஆதரிப்பதால், அதைச் சரிசெய்யலாம்.

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

ஒரு கீழ்தோன்றும் மெனுவைத் தூண்டுவதற்கு எந்த பட்டனையும் பயன்படுத்தவும், அதை ஒரு க்குள் வைத்து .btn-groupசரியான மெனு மார்க்அப்பை வழங்கவும்.

செருகுநிரல் சார்பு

உங்கள் பூட்ஸ்டார்ப் பதிப்பில் பட்டன் கீழ்தோன்றும் செருகுநிரல் சேர்க்கப்பட வேண்டும்.

ஒற்றை பொத்தான் கீழ்தோன்றும்

சில அடிப்படை மார்க்அப் மாற்றங்களுடன் ஒரு பட்டனை கீழ்தோன்றும் நிலைமாற்றமாக மாற்றவும்.

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

பிளவு பட்டன் கீழ்தோன்றும்

இதேபோல், ஒரே மாதிரியான மார்க்அப் மாற்றங்களுடன், ஒரு தனி பொத்தானில் மட்டும் ஸ்பிளிட் பட்டன் கீழ்தோன்றும்களை உருவாக்கவும்.

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

அளவிடுதல்

பட்டன் கீழ்தோன்றும் அனைத்து அளவு பொத்தான்கள் வேலை.

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

டிராப்அப் மாறுபாடு

.dropupபெற்றோருடன் சேர்ப்பதன் மூலம் உறுப்புகளுக்கு மேலே உள்ள கீழ்தோன்றும் மெனுவைத் தூண்டவும் .

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Dropup</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

எந்த உரை அடிப்படையிலான <input>. .input-groupஒரு உடன் பயன்படுத்தவும் .input-group-addonஅல்லது ஒரு .input-group-btnதனிமத்தில் கூறுகளை முன்வைக்கவும் அல்லது இணைக்கவும் .form-control.

உரை `<input>`கள் மட்டுமே

<select>WebKit உலாவிகளில் அவற்றை முழுமையாக வடிவமைக்க முடியாது என்பதால் இங்கே கூறுகளைப் பயன்படுத்துவதைத் தவிர்க்கவும் .

சில சந்தர்ப்பங்களில் அவற்றின் பண்புக்கூறு மதிக்கப்படாது என்பதால் <textarea>இங்கே கூறுகளைப் பயன்படுத்துவதைத் தவிர்க்கவும் .rows

உள்ளீட்டுக் குழுக்களில் உள்ள உதவிக்குறிப்புகள் மற்றும் பாப் ஓவர்களுக்கு சிறப்பு அமைப்பு தேவை

உள்ள உறுப்புகளில் டூல்டிப்கள் அல்லது பாப்ஓவர்களைப் பயன்படுத்தும் போது .input-group, தேவையற்ற பக்க விளைவுகளைத் தவிர்ப்பதற்கான விருப்பத்தை நீங்கள் குறிப்பிட வேண்டும் container: 'body'(உறுப்பு அகலமாக வளர்வது மற்றும்/அல்லது டூல்டிப் அல்லது பாப்ஓவர் தூண்டப்படும்போது அதன் வட்டமான மூலைகளை இழப்பது போன்றவை).

மற்ற கூறுகளுடன் கலக்க வேண்டாம்

உள்ளீட்டு குழுக்களுடன் நேரடியாக படிவக் குழுக்கள் அல்லது கட்ட நெடுவரிசை வகுப்புகளைக் கலக்க வேண்டாம். அதற்குப் பதிலாக, படிவக் குழு அல்லது கட்டம் தொடர்பான உறுப்பின் உள்ளே உள்ளீட்டுக் குழுவை நெஸ்ட் செய்யவும்.

எப்போதும் லேபிள்களைச் சேர்க்கவும்

ஒவ்வொரு உள்ளீட்டிற்கும் நீங்கள் லேபிளைச் சேர்க்கவில்லை என்றால், உங்கள் படிவங்களில் ஸ்கிரீன் ரீடர்கள் சிக்கலை எதிர்கொள்வார்கள். இந்த உள்ளீட்டு குழுக்களுக்கு, ஏதேனும் கூடுதல் லேபிள் அல்லது செயல்பாடு உதவி தொழில்நுட்பங்களுக்கு தெரிவிக்கப்படுவதை உறுதிசெய்யவும்.

பயன்படுத்தப்பட வேண்டிய சரியான நுட்பம் (தெரியும் <label>கூறுகள், வகுப்பைப் <label>பயன்படுத்தி மறைக்கப்பட்ட கூறுகள் அல்லது , , , அல்லது பண்புக்கூறின் பயன்பாடு) மற்றும் நீங்கள் செயல்படுத்தும் இடைமுக விட்ஜெட்டின் சரியான வகையைப் பொறுத்து என்ன கூடுதல் தகவல் தெரிவிக்கப்பட வேண்டும். இந்த பிரிவில் உள்ள எடுத்துக்காட்டுகள் சில பரிந்துரைக்கப்பட்ட, வழக்கு-குறிப்பிட்ட அணுகுமுறைகளை வழங்குகின்றன..sr-onlyaria-labelaria-labelledbyaria-describedbytitleplaceholder

அடிப்படை உதாரணம்

உள்ளீட்டின் இருபுறமும் ஒரு செருகு நிரல் அல்லது பொத்தானை வைக்கவும். உள்ளீட்டின் இருபுறமும் ஒன்றை நீங்கள் வைக்கலாம்.

ஒரே பக்கத்தில் பல துணை நிரல்களை ( .input-group-addonஅல்லது ) நாங்கள் ஆதரிக்கவில்லை ..input-group-btn

ஒரே உள்ளீட்டு குழுவில் பல படிவக் கட்டுப்பாடுகளை நாங்கள் ஆதரிக்கவில்லை.

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

அளவிடுதல்

அதனுடன் தொடர்புடைய படிவ அளவு வகுப்புகளைச் சேர்த்தால், .input-groupஉள்ள உள்ளடக்கங்கள் தானாகவே மறுஅளவிடப்படும்-ஒவ்வொரு உறுப்புக்கும் படிவக் கட்டுப்பாட்டு அளவு வகுப்புகளை மீண்டும் செய்ய வேண்டிய அவசியமில்லை.

<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon3">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>

தேர்வுப்பெட்டிகள் மற்றும் ரேடியோ துணை நிரல்கள்

உரைக்கு பதிலாக உள்ளீட்டு குழுவின் addonக்குள் ஏதேனும் தேர்வுப்பெட்டி அல்லது ரேடியோ விருப்பத்தை வைக்கவும்.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

பொத்தான் துணை நிரல்கள்

உள்ளீட்டு குழுக்களில் உள்ள பொத்தான்கள் சற்று வித்தியாசமானவை மற்றும் ஒரு கூடுதல் அளவிலான கூடு கட்டுதல் தேவைப்படுகிறது. க்கு பதிலாக, பொத்தான்களை மடிக்க .input-group-addonநீங்கள் பயன்படுத்த வேண்டும் . .input-group-btnமேலெழுத முடியாத இயல்புநிலை உலாவி நடைகள் காரணமாக இது தேவைப்படுகிறது.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

கீழ்தோன்றும் பொத்தான்கள்

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

பிரிக்கப்பட்ட பொத்தான்கள்

<div class="input-group">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
</div>

பல பொத்தான்கள்

நீங்கள் ஒரு பக்கத்திற்கு ஒரு செருகு நிரலை மட்டுமே வைத்திருக்க முடியும் என்றாலும், ஒரே ஒரு உள்ளே பல பொத்தான்களை வைத்திருக்க முடியும் .input-group-btn.

<div class="input-group">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
</div>

பூட்ஸ்டார்ப்பில் கிடைக்கும் நாவ்கள், அடிப்படை .navவகுப்பில் தொடங்கி, பகிரப்பட்ட நிலைகளில் மார்க்அப்பைப் பகிர்ந்துள்ளன. ஒவ்வொரு பாணிக்கும் இடையில் மாற மாற்றியமைக்கும் வகுப்புகளை மாற்றவும்.

டேப் பேனல்களுக்கு navs ஐப் பயன்படுத்த, JavaScript டேப்ஸ் செருகுநிரல் தேவை

அட்டவணையிடக்கூடிய பகுதிகளைக் கொண்ட தாவல்களுக்கு, நீங்கள் ஜாவாஸ்கிரிப்ட் செருகுநிரல் தாவல்களைப் பயன்படுத்த வேண்டும் . மார்க்அப்பிற்கு கூடுதல் roleமற்றும் ARIA பண்புக்கூறுகள் தேவைப்படும் - மேலும் விவரங்களுக்கு செருகுநிரலின் உதாரண மார்க்அப்பைப் பார்க்கவும்.

வழிசெலு��்தலாகப் பயன்படுத்தப்படும் நாவ்களை அணுகக்கூடியதாக ஆக்குங்கள்

வழிசெலுத்தல் பட்டியை வழங்க நீங்கள் navs ஐப் பயன்படுத்துகிறீர்கள் எனில் role="navigation", இன் மிகவும் லாஜிக்கல் பேரன்ட் கன்டெய்னரில் a ஐச் சேர்க்க மறக்காதீர்கள் <ul>அல்லது முழு வழிசெலுத்தலிலும் ஒரு <nav>உறுப்பைச் சுற்றி வைக்கவும். <ul>துணை தொழில்நுட்பங்கள் மூலம் உண்மையான பட்டியலாக அறிவிக்கப்படுவதை இது தடுக்கும் என்பதால் , பங்கை அதனுடன் சேர்க்க வேண்டாம் .

தாவல்கள்

வகுப்பிற்கு அடிப்படை .nav-tabsவகுப்பு தேவை என்பதை நினைவில் கொள்ளவும் ..nav

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

மாத்திரைகள்

அதே HTML ஐ எடுத்துக் கொள்ளுங்கள், ஆனால் .nav-pillsஅதற்குப் பதிலாகப் பயன்படுத்தவும்:

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

மாத்திரைகளும் செங்குத்தாக அடுக்கி வைக்கப்படுகின்றன. வெறும் சேர் .nav-stacked.

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

நியாயப்படுத்தப்பட்டது

768px ஐ விட அகலமான திரைகளில் தாவல்கள் அல்லது மாத்திரைகளை அவர்களின் பெற்றோருக்கு சமமான அகலத்தில் எளிதாக உருவாக்கவும் .nav-justified. சிறிய திரைகளில், nav இணைப்புகள் அடுக்கப்பட்டிருக்கும்.

நியாயப்படுத்தப்பட்ட navbar nav இணைப்புகள் தற்போது ஆதரிக்கப்படவில்லை.

சஃபாரி மற்றும் பதிலளிக்கக்கூடிய நியாயப்படுத்தப்பட்ட navs

v9.1.2 இன் படி, Safari ஒரு பிழையை வெளிப்படுத்துகிறது, அதில் உங்கள் உலாவியை கிடைமட்டமாக மறுஅளவிடுவது நியாயமான nav இல் ரெண்டரிங் பிழைகளை ஏற்படுத்துகிறது, அவை புதுப்பித்தவுடன் அழிக்கப்படும். இந்த பிழை நியாயப்படுத்தப்பட்ட nav உதாரணத்திலும் காட்டப்பட்டுள்ளது .

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

முடக்கப்பட்ட இணைப்புகள்

எந்த nav கூறுகளுக்கும் (தாவல்கள் அல்லது மாத்திரைகள்), சாம்பல் இணைப்புகளைச் சேர்க்கவும் .disabledமற்றும் மிதவை விளைவுகள் இல்லை .

இணைப்பு செயல்பாடு பாதிக்கப்படவில்லை

<a>இந்த வகுப்பு 'இன் தோற்றத்தை மட்டுமே மாற்றும், அதன் செயல்பாடு அல்ல. இங்கே இணைப்புகளை முடக்க தனிப்பயன் JavaScript ஐப் பயன்படுத்தவும்.

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

கீழ்தோன்றல்களைப் பயன்படுத்துதல்

கொஞ்சம் கூடுதல் HTML மற்றும் கீழ்தோன்றும் ஜாவாஸ்கிரிப்ட் செருகுநிரலுடன் கீழ்தோன்றும் மெனுக்களைச் சேர்க்கவும் .

கீழிறங்கும் தாவல்கள்

<ul class="nav nav-tabs">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

கீழ்தோன்றும் மாத்திரைகள்

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Navbars என்பது உங்கள் பயன்பாடு அல்லது தளத்திற்கான வழிசெலுத்தல் தலைப்புகளாக செயல்படும் பதிலளிக்கக்கூடிய மெட்டா கூறுகள். அவை மொபைல் காட்சிகளில் சரிந்து (மற்றும் மாற்றக்கூடியவை) தொடங்குகின்றன மற்றும் கிடைக்கக்கூடிய வியூபோர்ட் அகலம் அதிகரிக்கும் போது கிடைமட்டமாக மாறும்.

நியாயப்படுத்தப்பட்ட navbar nav இணைப்புகள் தற்போது ஆதரிக்கப்படவில்லை.

நிரம்பி வழியும் உள்ளடக்கம்

உங்கள் நேவ்பாரில் உள்ள உள்ளடக்கத்திற்கு எவ்வளவு இடம் தேவை என்பதை பூட்ஸ்டார்ப் அறியாததால், இரண்டாவது வரிசையில் உள்ளடக்கத்தை மூடுவதில் நீங்கள் சிக்கல்களை சந்திக்க நேரிடலாம். இதைத் தீர்க்க, நீங்கள்:

navbar உருப்படிகளின் அளவு அல்லது அகலத்தைக் குறைக்கவும்.
பதிலளிக்கக்கூடிய பயன்பாட்டு வகுப்புகளைப் பயன்படுத்தி குறிப்பிட்ட திரை அளவுகளில் சில navbar உருப்படிகளை மறைக்கவும் .
சுருக்கப்பட்ட மற்றும் கிடைமட்ட பயன்முறைக்கு இடையில் உங்கள் நேவ்பார் மாறும் புள்ளியை மாற்றவும். மாறியைத் தனிப்பயனாக்கவும் @grid-float-breakpointஅல்லது உங்கள் சொந்த மீடியா வினவலைச் சேர்க்கவும்.

ஜாவாஸ்கிரிப்ட் செருகுநிரல் தேவை

ஜாவாஸ்கிரிப்ட் முடக்கப்பட்டிருந்தால் மற்றும் நேவ்பார் சரிந்துவிடும் அளவுக்கு வியூபோர்ட் குறுகலாக இருந்தால், நேவ்பாரை விரிவுபடுத்துவது மற்றும் உள்ளடக்கத்தை பார்க்க இயலாது..navbar-collapse .

பதிலளிக்கக்கூடிய navbar ஆனது , உங்கள் பூட்ஸ்டார்ப்பின் பதிப்பில் சரிவு சொருகி சேர்க்கப்பட வேண்டும்.

சரிந்த மொபைல் நேவ்பார் பிரேக் பாயின்ட்டை மாற்றுகிறது

வியூபோர்ட் குறுகலாக இருக்கும்போது நவ்பார் அதன் செங்குத்து மொபைல் காட்சியில் சரிந்து, வியூபோர்ட் @grid-float-breakpointகுறைந்தபட்சம் @grid-float-breakpointஅகலத்தில் இருக்கும்போது அதன் கிடைமட்ட மொபைல் அல்லாத காட்சியாக விரிவடைகிறது. நேவ்பார் சரியும்/விரிவடையும் போது கட்டுப்படுத்த இந்த மாறியை குறைவான மூலத்தில் சரிசெய்யவும். இயல்புநிலை மதிப்பு 768px(சிறிய "சிறிய" அல்லது "டேப்லெட்" திரை).

நவ்பார்களை அணுகக்கூடியதாக ஆக்குங்கள்

ஒரு உறுப்பைப் பயன்படுத்துவதை உறுதிப்படுத்திக் கொள்ளுங்கள் <nav>அல்லது ஒரு போன்ற பொதுவான உறுப்பைப் பயன்படுத்தினால், உதவித் தொழில்நுட்பங்களைப் பயன்படுத்துபவர்களுக்கு ஒரு முக்கியப் பகுதி என வெளிப்படையாகக் கண்டறிய ஒவ்வொரு navbar க்கும் <div>a ஐச் சேர்க்கவும் .role="navigation"

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

ஒரு க்கு உரையை மாற்றுவதன் மூலம் navbar பிராண்டை உங்கள் சொந்தப் படத்துடன் மாற்றவும் <img>. அதன் .navbar-brandசொந்த திணிப்பு மற்றும் உயரம் இருப்பதால், உங்கள் படத்தைப் பொறுத்து சில CSS ஐ மேலெழுத வேண்டியிருக்கலாம்.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

.navbar-formசரியான செங்குத்து சீரமைப்பு மற்றும் குறுகிய காட்சித் துறைகளில் சுருக்கப்பட்ட நடத்தைக்கு படிவ உள்ளடக்கத்தை வைக்கவும். நவ்பார் உள்ளடக்கத்தில் அது எங்கு உள்ளது என்பதைத் தீர்மானிக்க, சீரமைப்பு விருப்பங்களைப் பயன்படுத்தவும்.

முன்னோட்டமாக , மிக்சின் வழியாக .navbar-formஅதன் குறியீட்டின் பெரும்பகுதியைப் பகிர்ந்து கொள்கிறது . உள்ளீட்டு குழுக்கள் போன்ற சில படிவக் கட்டுப்பாடுகள், ஒரு navbar இல் சரியாகக் காட்டப்பட வேண்டிய நிலையான அகலங்கள் தேவைப்படலாம்..form-inline

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

மொபைல் சாதன எச்சரிக்கைகள்

மொபைல் சாதனங்களில் நிலையான உறுப்புகளுக்குள் படிவக் கட்டுப்பாடுகளைப் பயன்படுத்துவதில் சில எச்சரிக்கைகள் உள்ளன. விவரங்களுக்கு எங்கள் உலாவி ஆதரவு ஆவணத்தைப் பார்க்கவும்.

எப்போதும் லேபிள்களைச் சேர்க்கவும்

ஒவ்வொரு உள்ளீட்டிற்கும் ஒரு லேபிளை நீங்கள் சேர்க்கவில்லை என்றால், உங்கள் படிவங்களில் ஸ்கிரீன் ரீடர்கள் சிக்கலை எதிர்கொள்வார்கள். .sr-onlyஇந்த இன்லைன் படிவங்களுக்கு, வகுப்பைப் பயன்படுத்தி லேபிள்களை மறைக்கலாம் . aria-label, aria-labelledbyஅல்லது titleபண்புக்கூறு போன்ற உதவித் தொழில்நுட்பங்களுக்கான லேபிளை வழங்குவதற்கு மேலும் மாற்று முறைகள் உள்ளன . இவை எதுவும் இல்லை என்றால், ஸ்கிரீன் ரீடர்கள் பண்புக்கூறைப் பயன்படுத்தலாம் , ஆனால் மற்ற லேபிளிங் முறைகளுக்கு மாற்றாகப் பயன்படுத்துவது பரிந்துரைக்கப்படவில்லை placeholderஎன்பதை நினைவில் கொள்ளவும் .placeholder

navbar இல் செங்குத்தாக மையப்படுத்த , a இல் இல்லாத கூறுகளுடன் .navbar-btnவகுப்பைச் சேர்க்கவும் .<button><form>

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

சூழல் சார்ந்த பயன்பாடு

நிலையான பட்டன் வகுப்புகளைப் போலவே , மற்றும் உறுப்புகளிலும் .navbar-btnபயன்படுத்தலாம் . இருப்பினும், உள்ள உறுப்புகளில் நிலையான பட்டன் வகுப்புகளையோ அல்லது பயன்படுத்தப்படக்கூடாது .<a><input>.navbar-btn<a>.navbar-nav

உரையின் சரங்களை ஒரு உறுப்புடன் மடிக்கவும் .navbar-text, வழக்கமாக <p>சரியான முன்னணி மற்றும் வண்ணத்திற்கான குறிச்சொல்லில்.

<p class="navbar-text">Signed in as Mark Otto</p>

வழக்கமான navbar வழிசெலுத்தல் கூறுகளுக்குள் இல்லாத நிலையான இணைப்புகளைப் பயன்படுத்துபவர்களுக்கு .navbar-link, இயல்புநிலை மற்றும் தலைகீழ் navbar விருப்பங்களுக்கு சரியான வண்ணங்களைச் சேர்க்க வகுப்பைப் பயன்படுத்தவும்.

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

.navbar-leftஅல்லது .navbar-rightபயன்பாட்டு வகுப்புகளைப் பயன்படுத்தி nav இணைப்புகள், படிவங்கள், பொத்தான்கள் அல்லது உரையை சீரமைக்கவும் . இரண்டு வகுப்புகளும் குறிப்பிட்ட திசையில் CSS மிதவையைச் சேர்க்கும். எடுத்துக்காட்டாக, nav இணைப்புகளை சீரமைக்க, <ul>பயன்படுத்தப்படும் அந்தந்த பயன்பாட்டு வகுப்பில் அவற்றை தனித்தனியாக வைக்கவும்.

இந்த வகுப்புகள் மிக்சின்-எட் பதிப்புகள் .pull-leftமற்றும் .pull-right, ஆனால் அவை சாதன அளவுகள் முழுவதும் navbar கூறுகளை எளிதாகக் கையாள ஊடக வினவல்களுக்குப் பயன்படுத்தப்படுகின்றன.

பல கூறுகளை வலது சீரமைத்தல்

Navbars தற்போது பல .navbar-rightவகுப்புகளுடன் வரம்பைக் கொண்டுள்ளது. உள்ளடக்கத்தை சரியாக இடுவதற்கு, கடைசி .navbar-rightஉறுப்பில் எதிர்மறை விளிம்பைப் பயன்படுத்துகிறோம். அந்த வகுப்பைப் பயன்படுத்தும் பல கூறுகள் இருக்கும்போது, இந்த விளிம்புகள் விரும்பியபடி செயல்படாது.

அந்த கூறுகளை v4 இல் மீண்டும் எழுதும்போது இதை மீண்டும் பார்ப்போம்.

.navbar-fixed-topஒரு .containerஅல்லது .container-fluidசென்டர் மற்றும் பேட் navbar உள்ளடக்கத்தைச் சேர்க்கவும் .

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>

உடல் திணிப்பு தேவை

paddingநீங்கள் மேலே சேர்க்கும் வரை, நிலையான navbar உங்கள் மற்ற உள்ளடக்கத்தை மேலெழுதும் <body>. உங்கள் சொந்த மதிப்புகளை முயற்சிக்கவும் அல்லது கீழே உள்ள எங்கள் துணுக்கைப் பயன்படுத்தவும். உதவிக்குறிப்பு: இயல்பாக, navbar 50px உயரத்தில் உள்ளது.

body { padding-top: 70px; }

முக்கிய பூட்ஸ்டார்ப் CSS க்குப் பிறகு இதைச் சேர்ப்பதை உறுதிசெய்க .

.navbar-fixed-bottomஒரு .containerஅல்லது .container-fluidசென்டர் மற்றும் பேட் navbar உள்ளடக்கத்தைச் சேர்க்கவும் .

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    ...
  </div>
</nav>

உடல் திணிப்பு தேவை

நிலையான நேவ்பார் உங்களின் மற்ற உள்ளடக்கத்தை paddingமேலெழுதிவிடும் <body>. உங்கள் சொந்த மதிப்புகளை முயற்சிக்கவும் அல்லது கீழே உள்ள எங்கள் துணுக்கைப் பயன்படுத்தவும். உதவிக்குறிப்பு: இயல்பாக, navbar 50px உயரத்தில் உள்ளது.

body { padding-bottom: 70px; }

முக்கிய பூட்ஸ்டார்ப் CSS க்குப் பிறகு இதைச் சேர்ப்பதை உறுதிசெய்க .

ஒரு முழு அகல navbar ஐ உருவாக்கவும், அது .navbar-static-topஒரு .containerஅல்லது .container-fluidமையத்திற்கு மற்றும் பேட் navbar உள்ளடக்கத்தைச் சேர்ப்பதன் மூலம் பக்கத்துடன் உருட்டும்.

வகுப்புகளைப் போலன்றி .navbar-fixed-*, நீங்கள் எந்த திணிப்புகளையும் மாற்ற வேண்டியதில்லை body.

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    ...
  </div>
</nav>

சேர்ப்பதன் மூலம் நவ்பார் தோற்றத்தை மாற்றவும் .navbar-inverse.

<nav class="navbar navbar-inverse">
  ...
</nav>

ரொட்டிதூள்கள்

வழிசெலுத்தல் படிநிலையில் தற்போதைய பக்கத்தின் இருப்பிடத்தைக் குறிப்பிடவும்.

பிரிப்பான்கள் தானாகவே CSS இல் சேர்க்கப்படும் :beforeமற்றும் content.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

பேஜினேஷன்

உங்கள் தளம் அல்லது பயன்பாட்டிற்கான பேஜினேஷன் இணைப்புகளை பல பக்க பேஜினேஷன் கூறு அல்லது எளிமையான பேஜர் மாற்றுடன் வழங்கவும் .

இயல்புநிலை பேஜினேஷன்

Rdio மூலம் ஈர்க்கப்பட்ட எளிய பேஜினேஷன், பயன்பாடுகள் மற்றும் தேடல் முடிவுகளுக்கு சிறந்தது. பெரிய தொகுதி தவறவிடுவது கடினம், எளிதில் அளவிடக்கூடியது மற்றும் பெரிய கிளிக் பகுதிகளை வழங்குகிறது.

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </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="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

பேஜினேஷன் கூறுகளை லேபிளிடுதல்

<nav>ஸ்கிரீன் ரீடர்கள் மற்றும் பிற உதவி தொழில்நுட்பங்களுக்கான வழிசெலுத்தல் பிரிவாக அடையாளம் காண பேஜினேஷன் கூறு ஒரு உறுப்புடன் மூடப்பட்டிருக்க வேண்டும் . கூடுதலாக, ஒரு பக்கம் ஏற்கனவே ஒன்றுக்கு மேற்பட்ட வழிசெலுத்தல் பிரிவுகளைக் கொண்டிருப்பதால் (தலைப்பில் முதன்மை வழிசெலுத்தல் அல்லது பக்கப்பட்டி வழிசெலுத்தல் போன்றவை), அதன் நோக்கத்தைப் பிரதிபலிக்கும் விளக்கத்தை aria-labelவழங்குவது நல்லது. <nav>எடுத்துக்காட்டாக, தேடல் முடிவுகளின் தொகுப்பிற்கு இடையில் செல்ல பேஜினேஷன் கூறு பயன்படுத்தப்பட்டால், பொருத்தமான லேபிள் aria-label="Search results pages".

ஊனமுற்ற மற்றும் செயலில் உள்ள மாநிலங்கள்

இணைப்புகள் வெவ்வேறு சூழ்நிலைகளுக்கு தனிப்பயனாக்கக்கூடியவை. .disabledகிளிக் செய்ய முடியாத இணைப்புகளுக்கும் .activeதற்போதைய பக்கத்தைக் குறிப்பிடுவதற்கும் பயன்படுத்தவும் .

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

க்கு செயலில் உள்ள அல்லது முடக்கப்பட்ட ஆங்கர்களை மாற்றுமாறு பரிந்துரைக்கிறோம் <span>, அல்லது முந்தைய/அடுத்த அம்புகளின் விஷயத்தில் நங்கூரத்தைத் தவிர்க்கவும், நோக்கம் கொண்ட பாணிகளைத் தக்கவைத்துக்கொள்ளும் போது கிளிக் செயல்பாட்டை அகற்றவும்.

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled">
      <span>
        <span aria-hidden="true">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

அளவிடுதல்

பெரிய அல்லது சிறிய பக்கத்தை விரும்புகிறீர்களா? சேர்க்க .pagination-lgஅல்லது .pagination-smகூடுதல் அளவுகள்.

<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>

பேஜர்

லைட் மார்க்அப் மற்றும் ஸ்டைல்களுடன் கூடிய எளிய பேஜினேஷன் செயலாக்கங்களுக்கான விரைவான முந்தைய மற்றும் அடுத்த இணைப்புகள். வலைப்பதிவுகள் அல்லது பத்திரிகைகள் போன்ற எளிய தளங்களுக்கு இது சிறந்தது.

இயல்பு உதாரணம்

இயல்பாக, பேஜர் இணைப்புகளை மையப்படுத்துகிறது.

<nav aria-label="...">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

சீரமைக்கப்பட்ட இணைப்புகள்

மாற்றாக, நீங்கள் ஒவ்வொரு இணைப்பையும் பக்கங்களுக்கு சீரமைக்கலாம்:

<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

விருப்ப முடக்கப்பட்ட நிலை

பேஜர் இணைப்புகள் பேஜினேஷனில் .disabledஇருந்து பொது பயன்பாட்டு வகுப்பையும் பயன்படுத்துகின்றன.

<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

உதாரணமாக

எடுத்துக்காட்டு தலைப்பு புதியது

<h3>Example heading <span class="label label-default">New</span></h3>

கிடைக்கக்கூடிய மாறுபாடுகள்

லேபிளின் தோற்றத்தை மாற்ற, கீழே குறிப்பிடப்பட்டுள்ள மாற்றியமைக்கும் வகுப்புகளில் ஏதேனும் ஒன்றைச் சேர்க்கவும்.

இயல்புநிலை முதன்மை வெற்றித் தகவல் எச்சரிக்கை ஆபத்து

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

டன் லேபிள்கள் உள்ளதா?

ஒரு குறுகிய கொள்கலனுக்குள் டஜன் கணக்கான இன்லைன் லேபிள்கள் இருந்தால், ஒவ்வொன்றும் அதன் சொந்த inline-blockஉறுப்பு (ஐகான் போன்றவை) கொண்டிருக்கும் போது ரெண்டரிங் சிக்கல்கள் ஏற்படலாம். இதனைச் சுற்றியுள்ள வழி அமைகிறது display: inline-block;. சூழல் மற்றும் எடுத்துக்காட்டுக்கு, #13219 ஐப் பார்க்கவும் .

<span class="badge">இணைப்புகள், பூட்ஸ்டார்ப் navs மற்றும் பலவற்றைச் சேர்ப்பதன் மூலம் புதிய அல்லது படிக்காத உருப்படிகளை எளிதாக முன்னிலைப்படுத்தவும் .

உட்பெட்டி42

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

சுய சரிவு

புதிய அல்லது படிக்காத உருப்படிகள் எதுவும் இல்லாதபோது, பேட்ஜ்கள் (CSS இன் :emptyதேர்வி மூலம்) உள்ளடக்கம் இல்லை எனில் சரிந்துவிடும்.

குறுக்கு உலாவி இணக்கத்தன்மை

இன்டர்நெட் எக்ஸ்புளோரர் 8 இல் பேட்ஜ்கள் தானாகவே சரிந்துவிடாது, ஏனெனில் இது :emptyதேர்வாளருக்கான ஆதரவு இல்லை.

செயலில் உள்ள நேவ் நிலைகளுக்கு மாற்றியமைக்கிறது

மாத்திரை வழிசெலுத்தலில் செயலில் உள்ள நிலைகளில் பேட்ஜ்களை வைப்பதற்கு உள்ளமைக்கப்பட்ட பாணிகள் சேர்க்கப்பட்டுள்ளன.

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

ஒரு இலகுரக, நெகிழ்வான கூறு, உங்கள் தளத்தில் முக்கிய உள்ளடக்கத்தை காட்சிப்படுத்த முழு காட்சிப் பகுதியையும் விருப்பப்படி நீட்டிக்க முடியும்.

வணக்கம், உலகம்!

இது ஒரு எளிய ஹீரோ யூனிட், பிரத்யேக உள்ளடக்கம் அல்லது தகவலுக்கு கூடுதல் கவனம் செலுத்துவதற்கான எளிய ஜம்போட்ரான்-பாணி கூறு.

மேலும் அறிக

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

.containerஜம்போட்ரானை முழு அகலமாகவும், வட்டமான மூலைகள் இல்லாமல் செய்யவும், அதை அனைத்து s வெளியிலும் வைக்கவும் , அதற்கு பதிலாக .containerஉள்ளே சேர்க்கவும்.

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

h1ஒரு பக்கத்தில் உள்ள உள்ளடக்கத்தின் சரியான இடைவெளி மற்றும் பிரிவுகளைப் பிரிப்பதற்கான எளிய ஷெல் . இது h1'இன் இயல்புநிலை smallஉறுப்பு மற்றும் பிற கூறுகளை (கூடுதல் பாணிகளுடன்) பயன்படுத்தலாம்.

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

படங்கள், வீடியோக்கள், உரை மற்றும் பலவற்றின் கட்டங்களை எளிதாகக் காண்பிக்க பூட்ஸ்டார்ப்பின் கட்ட அமைப்பை சிறுபடக் கூறுகளுடன் நீட்டிக்கவும்.

வெவ்வேறு உயரங்கள் மற்றும்/அல்லது அகலங்களின் சிறுபடங்களின் Pinterest போன்ற விளக்கக்காட்சியை நீங்கள் தேடுகிறீர்கள் என்றால், நீங்கள் கொத்து , ஐசோடோப் அல்லது சால்வட்டோர் போன்ற மூன்றாம் தரப்பு செருகுநிரலைப் பயன்படுத்த வேண்டும் .

இயல்பு உதாரணம்

இயல்பாக, பூட்ஸ்டார்ப்பின் சிறுபடங்கள் குறைந்தபட்ச தேவையான மார்க்அப்புடன் இணைக்கப்பட்ட படங்களைக் காண்பிக்கும் வகையில் வடிவமைக்கப்பட்டுள்ளன.

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

தனிப்பயன் உள்ளடக்கம்

கூடுதல் மார்க்அப் மூலம், தலைப்புகள், பத்திகள் அல்லது பொத்தான்கள் போன்ற எந்த வகையான HTML உள்ளடக்கத்தையும் சிறுபடங்களில் சேர்க்க முடியும்.

சிறுபட லேபிள்

க்ராஸ் ஜஸ்டோ ஓடியோ, டாபிபஸ் ஏசி ஃபேசிலிசிஸ் இன், எஜெஸ்டாஸ் எகெட் குவாம். டோனெக் ஐடி எலிட் நான் மை போர்டா கிராவிடா அட் எகெட் மெட்டஸ். Nullam id dolor id nibh ultricies வாகனங்கள் ut id elit.

பொத்தானை பொத்தானை

சிறுபட லேபிள்

க்ராஸ் ஜஸ்டோ ஓடியோ, டாபிபஸ் ஏசி ஃபேசிலிசிஸ் இன், எஜெஸ்டாஸ் எகெட் குவாம். டோனெக் ஐடி எலிட் நான் மை போர்டா கிராவிடா அட் எகெட் மெட்டஸ். Nullam id dolor id nibh ultricies வாகனங்கள் ut id elit.

பொத்தானை பொத்தானை

சிறுபட லேபிள்

க்ராஸ் ஜஸ்டோ ஓடியோ, டாபிபஸ் ஏசி ஃபேசிலிசிஸ் இன், எஜெஸ்டாஸ் எகெட் குவாம். டோனெக் ஐடி எலிட் நான் மை போர்டா கிராவிடா அட் எகெட் மெட்டஸ். Nullam id dolor id nibh ultricies வாகனங்கள் ut id elit.

பொத்தானை பொத்தானை

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

கிடைக்கக்கூடிய மற்றும் நெகிழ்வான எச்சரிக்கைச் செய்திகளுடன் வழக்கமான பயனர் செயல்களுக்கான சூழல் சார்ந்த கருத்துச் செய்திகளை வழங்கவும்.

எடுத்துக்காட்டுகள்

அடிப்படை விழிப்பூட்டல் செய்திகளுக்கு ஏதேனும் உரை மற்றும் விருப்பமான நிராகரிப்பு பொத்தான் .alertமற்றும் நான்கு சூழ்நிலை வகுப்புகளில் ஒன்றை (எ.கா., ) மடிக்கவும்..alert-success

இயல்புநிலை வகுப்பு இல்லை

விழிப்பூட்டல்களில் இயல்புநிலை வகுப்புகள் இல்லை, அடிப்படை மற்றும் மாற்றியமைக்கும் வகுப்புகள் மட்டுமே. இயல்புநிலை சாம்பல் விழிப்பூட்டல் அதிக அர்த்தத்தைத் தராது, எனவே நீங்கள் சூழ்நிலை வகுப்பு வழியாக ஒரு வகையைக் குறிப்பிட வேண்டும். வெற்றி, தகவல், எச்சரிக்கை அல்லது ஆபத்து ஆகியவற்றிலிருந்து தேர்வு செய்யவும்.

சபாஷ்! இந்த முக்கியமான எச்சரிக்கை செய்தியை நீங்கள் வெற்றிகரமாகப் படித்தீர்கள்.

எச்சரிக்கை! இந்த விழிப்பூட்டலுக்கு உங்கள் கவனம் தேவை, ஆனால் இது மிக முக்கியமானது அல்ல.

எச்சரிக்கை! உங்களை நீங்களே சரிபார்ப்பது நல்லது, நீங்கள் மிகவும் அழகாக இல்லை.

ஓ ஸ்னாப்! சில விஷயங்களை மாற்றி மீண்டும் சமர்ப்பிக்க முயற்சிக்கவும்.

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

நிராகரிக்கக்கூடிய விழிப்பூட்டல்கள்

.alert-dismissibleவிருப்பமான மற்றும் மூடு பட்டனைச் சேர்ப்பதன் மூலம் எந்த விழிப்பூட்டலையும் உருவாக்கவும் .

ஜாவாஸ்கிரிப்ட் எச்சரிக்கை சொருகி தேவை

முழுமையாக செயல்படும், நிராகரிக்கக்கூடிய விழிப்பூட்டல்களுக்கு, ஜாவாஸ்கிரிப்ட் செருகுநிரல் விழிப்பூட்டல்களைப் பயன்படுத்த வேண்டும் .

எச்சரிக்கை! உங்களை நீங்களே சரிபார்ப்பது நல்லது, நீங்கள் மிகவும் அழகாக இல்லை.

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

எல்லா சாதனங்களிலும் சரியான நடத்தையை உறுதிப்படுத்தவும்

தரவு பண்புக்கூறுடன் <button>உறுப்பைப் பயன்படுத்துவதை உறுதிசெய்யவும் .data-dismiss="alert"

விழிப்பூட்டல்களில் உள்ள இணைப்புகள்

.alert-linkஎந்தவொரு விழிப்பூட்டலிலும் பொருந்தக்கூடிய வண்ண இணைப்புகளை விரைவாக வழங்க பயன்பாட்டு வகுப்பைப் பயன்படுத்தவும் .

சபாஷ்! இந்த முக்கியமான எச்சரிக்கை செய்தியை நீங்கள் வெற்றிகரமாகப் படித்தீர்கள் .

எச்சரிக்கை! இந்த விழிப்பூட்டலுக்கு உங்கள் கவனம் தேவை , ஆனால் இது மிக முக்கியமானதல்ல.

எச்சரிக்கை! உங்களை நீங்களே சரிபார்த்துக் கொள்வது நல்லது, நீங்கள் மிகவும் அழகாக இல்லை .

ஓ ஸ்னாப்! சில விஷயங்களை மாற்றி மீண்டும் சமர்ப்பிக்க முயற்சிக்கவும்.

<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">...</a>
</div>

எளிமையான மற்றும் நெகிழ்வான முன்னேற்றப் பட்டிகளுடன் பணிப்பாய்வு அல்லது செயலின் முன்னேற்றம் குறித்த புதுப்பித்த கருத்தை வழங்கவும்.

குறுக்கு உலாவி இணக்கத்தன்மை

முன்னேற்றப் பார்கள் அவற்றின் சில விளைவுகளை அடைய CSS3 மாற்றங்கள் மற்றும் அனிமேஷன்களைப் பயன்படுத்துகின்றன. இந்த அம்சங்கள் Internet Explorer 9 மற்றும் அதற்குக் கீழே உள்ள அல்லது Firefox இன் பழைய பதிப்புகளில் ஆதரிக்கப்படவில்லை. ஓபரா 12 அனிமேஷன்களை ஆதரிக்காது.

உள்ளடக்க பாதுகாப்புக் கொள்கை (CSP) இணக்கத்தன்மை

உங்கள் இணையதளத்தில் உள்ளடக்கப் பாதுகாப்புக் கொள்கை (CSP) இருந்தால், அது அனுமதிக்காது , கீழே உள்ள எடுத்துக்காட்டுகளில் காட்டப்பட்டுள்ளபடி, முன்னேற்றப் பட்டியின் அகலத்தை அமைக்க, style-src 'unsafe-inline'இன்லைன் பண்புக்கூறுகளைப் பயன்படுத்த முடியாது . styleகடுமையான CSPகளுடன் இணக்கமான அகலங்களை அமைப்பதற்கான மாற்று முறைகள், சிறிய தனிப்பயன் ஜாவாஸ்கிரிப்ட் (அது அமைக்கிறது element.style.width) அல்லது தனிப்பயன் CSS வகுப்புகளைப் பயன்படுத்துவது ஆகியவை அடங்கும்.

அடிப்படை உதாரணம்

இயல்புநிலை முன்னேற்றப் பட்டி.

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

முத்திரையுடன்

புலப்படும் சதவீதத்தைக் காட்ட, முன்னேற்றப் பட்டியில் உள்ள வகுப்பை <span>அகற்றவும் ..sr-only

60%

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

குறைந்த சதவீதத்திற்கும் கூட லேபிள் உரை தெளிவாக இருப்பதை உறுதிசெய்ய, min-widthமுன்னேற்றப் பட்டியில் சேர்ப்பதைக் கவனியுங்கள்.

0%

2%

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
    0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
    2%
  </div>
</div>

சூழ்நிலை மாற்றுகள்

ப்ரோக்ரஸ் பார்கள் ஒரே மாதிரியான சில பொத்தான்களைப் பயன்படுத்துகின்றன மற்றும் சீரான பாணிகளுக்கு விழிப்பூட்டல் வகுப்புகளைப் பயன்படுத்துகின்றன.

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

கோடிட்டது

ஒரு கோடிட்ட விளைவை உருவாக்க ஒரு சாய்வு பயன்படுத்துகிறது. IE9 மற்றும் கீழே கிடைக்காது.

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

அனிமேஷன்

கோடுகளை வலமிருந்து இடமாக அனிமேஷன் செய்ய to ஐ .activeசேர்க்கவும் . .progress-bar-stripedIE9 மற்றும் கீழே கிடைக்காது.

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

அடுக்கப்பட்ட

பல பார்களை .progressஅடுக்கி வைக்கவும்.

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

உரை உள்ளடக்கத்துடன் இடது அல்லது வலது-சீரமைக்கப்பட்ட படத்தைக் கொண்டிருக்கும் பல்வேறு வகையான கூறுகளை (வலைப்பதிவு கருத்துகள், கீச்சுகள் போன்றவை) உருவாக்குவதற்கான சுருக்க பொருள் பாணிகள்.

இயல்புநிலை ஊடகம்

இயல்புநிலை ஊடகமானது உள்ளடக்கத் தொகுதியின் இடது அல்லது வலதுபுறத்தில் மீடியா பொருளை (படங்கள், வீடியோ, ஆடியோ) காட்டுகிறது.

ஊடக தலைப்பு

க்ராஸ் சிட் அமெட் நிப் லிபரோ, கிராவிட நுல்லாவில். நுல்ல வெல் மெட்டஸ் ஸ்கெலரிஸ்க் அன்டே சொல்லிசிடுடின் கொமோடோ. க்ராஸ் புருஸ் ஓடியோ, வெஸ்டிபுலம் இன் வல்புடேட் அட், டெம்பஸ் விவர்ரா டர்பிஸ். Fusce condimentum nunc ac nisi vulputate fringilla. ஃபாசிபஸில் உள்ள டோனெக் லாசினியா கொங்கு பெலிஸ்.

ஊடக தலைப்பு

க்ராஸ் சிட் அமெட் நிப் லிபரோ, கிராவிட நுல்லாவில். நுல்ல வெல் மெட்டஸ் ஸ்கெலரிஸ்க் அன்டே சொல்லிசிடுடின் கொமோடோ. க்ராஸ் புருஸ் ஓடியோ, வெஸ்டிபுலம் இன் வல்புடேட் அட், டெம்பஸ் விவர்ரா டர்பிஸ். Fusce condimentum nunc ac nisi vulputate fringilla. ஃபாசிபஸில் உள்ள டோனெக் லாசினியா கொங்கு பெலிஸ்.

உள்ளமைக்கப்பட்ட ஊடக தலைப்பு

க்ராஸ் சிட் அமெட் நிப் லிபரோ, கிராவிட நுல்லாவில். நுல்ல வெல் மெட்டஸ் ஸ்கெலரிஸ்க் அன்டே சொல்லிசிடுடின் கொமோடோ. க்ராஸ் புருஸ் ஓடியோ, வெஸ்டிபுலம் இன் வல்புடேட் அட், டெம்பஸ் விவர்ரா டர்பிஸ். Fusce condimentum nunc ac nisi vulputate fringilla. ஃபாசிபஸில் உள்ள டோனெக் லாசினியா கொங்கு பெலிஸ்.

ஊடக தலைப்பு

க்ராஸ் சிட் அமெட் நிப் லிபரோ, கிராவிட நுல்லாவில். நுல்ல வெல் மெட்டஸ் ஸ்கெலரிஸ்க் அன்டே சொல்லிசிடுடின் கொமோடோ. க்ராஸ் புருஸ் ஓடியோ, வெஸ்டிபுலம் இன் வல்புடேட் அட், டெம்பஸ் விவர்ரா டர்பிஸ்.

ஊடக தலைப்பு

க்ராஸ் சிட் அமெட் நிப் லிபரோ, கிராவிட நுல்லாவில். நுல்ல வெல் மெட்டஸ் ஸ்கெலரிஸ்க் அன்டே சொல்லிசிடுடின் கொமோடோ. க்ராஸ் புருஸ் ஓடியோ, வெஸ்டிபுலம் இன் வல்புடேட் அட், டெம்பஸ் விவர்ரா டர்பிஸ்.

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

வகுப்புகள் .pull-leftமற்றும் .pull-rightஉள்ளன மற்றும் முன்பு மீடியா கூறுகளின் ஒரு பகுதியாகப் பயன்படுத்தப்பட்டன, ஆனால் அந்த பயன்பாட்டிற்காக v3.3.0 இல் இருந்து நீக்கப்பட்டது. அவை தோராயமாக சமமானவை .media-leftமற்றும் .media-right, தவிர html இல் உள்ள .media-rightபின் வைக்கப்பட வேண்டும் ..media-body

ஊடக சீரமைப்பு

படங்கள் அல்லது பிற மீடியாவை மேல், நடு அல்லது கீழ் சீரமைக்க முடியும். இயல்புநிலை மேலே சீரமைக்கப்பட்டுள்ளது.

சிறந்த சீரமைக்கப்பட்ட மீடியா

க்ராஸ் சிட் அமெட் நிப் லிபரோ, கிராவிட நுல்லாவில். நுல்ல வெல் மெட்டஸ் ஸ்கெலரிஸ்க் அன்டே சொல்லிசிடுடின் கொமோடோ. க்ராஸ் புருஸ் ஓடியோ, வெஸ்டிபுலம் இன் வல்புடேட் அட், டெம்பஸ் விவர்ரா டர்பிஸ். Fusce condimentum nunc ac nisi vulputate fringilla. ஃபாசிபஸில் உள்ள டோனெக் லாசினியா கொங்கு பெலிஸ்.

Donec sed ஓடியோ dui. Nullam quis risus eget urna mollis ornare vel eu leo. சமூக நேட்டோக் பெனாட்டிபஸ் மற்றும் மேக்னிஸ் டிஸ் பார்டூரியண்ட் மான்டெஸ், நாஸ்கெட்டூர் ரிடிகுலஸ் மஸ்.

நடுத்தர சீரமைக்கப்பட்ட ஊடகம்

க்ராஸ் சிட் அமெட் நிப் லிபரோ, கிராவிட நுல்லாவில். நுல்ல வெல் மெட்டஸ் ஸ்கெலரிஸ்க் அன்டே சொல்லிசிடுடின் கொமோடோ. க்ராஸ் புருஸ் ஓடியோ, வெஸ்டிபுலம் இன் வல்புடேட் அட், டெம்பஸ் விவர்ரா டர்பிஸ். Fusce condimentum nunc ac nisi vulputate fringilla. ஃபாசிபஸில் உள்ள டோனெக் லாசினியா கொங்கு பெலிஸ்.

Donec sed ஓடியோ dui. Nullam quis risus eget urna mollis ornare vel eu leo. சமூக நேட்டோக் பெனாட்டிபஸ் மற்றும் மேக்னிஸ் டிஸ் பார்டூரியண்ட் மான்டெஸ், நாஸ்கெட்டூர் ரிடிகுலஸ் மஸ்.

கீழே சீரமைக்கப்பட்ட மீடியா

க்ராஸ் சிட் அமெட் நிப் லிபரோ, கிராவிட நுல்லாவில். நுல்ல வெல் மெட்டஸ் ஸ்கெலரிஸ்க் அன்டே சொல்லிசிடுடின் கொமோடோ. க்ராஸ் புருஸ் ஓடியோ, வெஸ்டிபுலம் இன் வல்புடேட் அட், டெம்பஸ் விவர்ரா டர்பிஸ். Fusce condimentum nunc ac nisi vulputate fringilla. ஃபாசிபஸில் உள்ள டோனெக் லாசினியா கொங்கு பெலிஸ்.

Donec sed ஓடியோ dui. Nullam quis risus eget urna mollis ornare vel eu leo. சமூக நேட்டோக் பெனாட்டிபஸ் மற்றும் மேக்னிஸ் டிஸ் பார்டூரியண்ட் மான்டெஸ், நாஸ்கெட்டூர் ரிடிகுலஸ் மஸ்.

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </div>
</div>

மீடியா பட்டியல்

கூடுதல் மார்க்அப் மூலம், நீங்கள் பட்டியலில் உள்ள மீடியாவைப் பயன்படுத்தலாம் (கருத்து நூல்கள் அல்லது கட்டுரைகள் பட்டியல்களுக்குப் பயன்படும்).

ஊடக தலைப்பு

க்ராஸ் சிட் அமெட் நிப் லிபரோ, கிராவிட நுல்லாவில். நுல்ல வெல் மெட்டஸ் ஸ்கெலரிஸ்க் அன்டே சொல்லிசிடுடின் கொமோடோ. க்ராஸ் புருஸ் ஓடியோ, வெஸ்டிபுலம் இன் வல்புடேட் அட், டெம்பஸ் விவர்ரா டர்பிஸ்.

உள்ளமைக்கப்பட்ட ஊடக தலைப்பு
க்ராஸ் சிட் அமெட் நிப் லிபரோ, கிராவிட நுல்லாவில். நுல்ல வெல் மெட்டஸ் ஸ்கெலரிஸ்க் அன்டே சொல்லிசிடுடின் கொமோடோ. க்ராஸ் புருஸ் ஓடியோ, வெஸ்டிபுலம் இன் வல்புடேட் அட், டெம்பஸ் விவர்ரா டர்பிஸ்.

உள்ளமைக்கப்பட்ட ஊடக தலைப்பு
க்ராஸ் சிட் அமெட் நிப் லிபரோ, கிராவிட நுல்லாவில். நுல்ல வெல் மெட்டஸ் ஸ்கெலரிஸ்க் அன்டே சொல்லிசிடுடின் கொமோடோ. க்ராஸ் புருஸ் ஓடியோ, வெஸ்டிபுலம் இன் வல்புடேட் அட், டெம்பஸ் விவர்ரா டர்பிஸ்.

உள்ளமைக்கப்பட்ட ஊடக தலைப்பு
க்ராஸ் சிட் அமெட் நிப் லிபரோ, கிராவிட நுல்லாவில். நுல்ல வெல் மெட்டஸ் ஸ்கெலரிஸ்க் அன்டே சொல்லிசிடுடின் கொமோடோ. க்ராஸ் புருஸ் ஓடியோ, வெஸ்டிபுலம் இன் வல்புடேட் அட், டெம்பஸ் விவர்ரா டர்பிஸ்.

<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

பட்டியல் குழுக்கள் ஒரு நெகிழ்வான மற்றும் சக்திவாய்ந்த கூறுகளாகும், அவை உறுப்புகளின் எளிய பட்டியல்களை மட்டும் காட்டாது, ஆனால் தனிப்பயன் உள்ளடக்கத்துடன் சிக்கலானவை.

அடிப்படை உதாரணம்

மிக அடிப்படையான பட்டியல் குழு என்பது பட்டியல் உருப்படிகள் மற்றும் சரியான வகுப்புகள் கொண்ட வரிசைப்படுத்தப்படாத பட்டியல் ஆகும். பின் வரும் விருப்பங்கள் அல்லது தேவைக்கேற்ப உங்கள் சொந்த CSS மூலம் அதை உருவாக்கவும்.

க்ராஸ் ஜஸ்டோ ஓடியோ
டாபிபஸ் ஏசி வசதி
மோர்பி லியோ ரிசஸ்
போர்டா ஏசி கன்செக்டெர் ஏசி
வெஸ்டிபுலம் அட் ஈரோஸ்

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

பேட்ஜ்கள்

எந்தவொரு பட்டியல் குழு உருப்படியிலும் பேட்ஜ்களின் கூறுகளைச் சேர்க்கவும், அது தானாகவே வலதுபுறத்தில் நிலைநிறுத்தப்படும்.

14க்ராஸ் ஜஸ்டோ ஓடியோ
2டாபிபஸ் ஏசி வசதி
1மோர்பி லியோ ரிசஸ்

<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

இணைக்கப்பட்ட பொருட்கள்

பட்டியல் உருப்படிகளுக்குப் பதிலாக ஆங்கர் குறிச்சொற்களைப் பயன்படுத்தி பட்டியல் குழு உருப்படிகளை இணைக்கவும் (அது ஒரு பெற்றோருக்குப் <div>பதிலாக பெற்றோர் என்றும் பொருள்படும் <ul>). ஒவ்வொரு உறுப்புக்கும் தனிப்பட்ட பெற்றோர் தேவையில்லை.

க்ராஸ் ஜஸ்டோ ஓடியோ டாபிபஸ் ஏசி வசதி மோர்பி லியோ ரிசஸ் போர்டா ஏசி கன்செக்டெர் ஏசி வெஸ்டிபுலம் அட் ஈரோஸ்

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

பொத்தான் பொருட்கள்

பட்டியல் குழு உருப்படிகள் பட்டியல் உருப்படிகளுக்குப் பதிலாக பொத்தான்களாக இருக்கலாம் (இது ஒரு பெற்றோருக்குப் <div>பதிலாக பெற்றோர் என்றும் பொருள்படும் <ul>). ஒவ்வொரு உறுப்புக்கும் தனிப்பட்ட பெற்றோர் தேவையில்லை. இங்கே நிலையான வகுப்புகளைப் பயன்படுத்த வேண்டாம் ..btn

<div class="list-group">
  <button type="button" class="list-group-item">Cras justo odio</button>
  <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item">Morbi leo risus</button>
  <button type="button" class="list-group-item">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item">Vestibulum at eros</button>
</div>

முடக்கப்பட்ட பொருட்கள்

செயலிழந்ததாகத் தோன்ற, அதை சாம்பல் நிறத்தில் சேர்க்கவும் .disabled..list-group-item

க்ராஸ் ஜஸ்டோ ஓடியோ டாபிபஸ் ஏசி வசதி மோர்பி லியோ ரிசஸ் போர்டா ஏசி கன்செக்டெர் ஏசி வெஸ்டிபுலம் அட் ஈரோஸ்

<div class="list-group">
  <a href="#" class="list-group-item disabled">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

சூழ்நிலை வகுப்புகள்

இயல்புநிலை அல்லது இணைக்கப்பட்ட உருப்படிகளின் பாணி பட்டியல்களுக்கு சூழ்நிலை வகுப்புகளைப் பயன்படுத்தவும். மாநிலத்தையும் உள்ளடக்கியது .active.

டாபிபஸ் ஏசி வசதி
க்ராஸ் சிட் அமெட் நிப் லிபரோ
போர்டா ஏசி கன்செக்டெர் ஏசி
வெஸ்டிபுலம் அட் ஈரோஸ்

டாபிபஸ் ஏசி வசதி க்ராஸ் சிட் அமெட் நிப் லிபரோ போர்டா ஏசி கன்செக்டெர் ஏசி வெஸ்டிபுலம் அட் ஈரோஸ்

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

தனிப்பயன் உள்ளடக்கம்

கீழே உள்ளதைப் போன்ற இணைக்கப்பட்ட பட்டியல் குழுக்களுக்கு கூட, ஏறக்குறைய எந்த HTML ஐயும் சேர்க்கவும்.

பட்டியல் குழு உருப்படி தலைப்பு

டோனெக் ஐடி எலிட் நான் மை போர்டா கிராவிடா அட் எகெட் மெட்டஸ். Maecenas sed diam eget risus varius blandit.

பட்டியல் குழு உருப்படி தலைப்பு

டோனெக் ஐடி எலிட் நான் மை போர்டா கிராவிடா அட் எகெட் மெட்டஸ். Maecenas sed diam eget risus varius blandit.

பட்டியல் குழு உருப்படி தலைப்பு

டோனெக் ஐடி எலிட் நான் மை போர்டா கிராவிடா அட் எகெட் மெட்டஸ். Maecenas sed diam eget risus varius blandit.

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

எப்போதும் தேவையில்லை என்றாலும், சில நேரங்களில் உங்கள் DOM ஐ ஒரு பெட்டியில் வைக்க வேண்டும். அந்த சூழ்நிலைகளுக்கு, பேனல் கூறுகளை முயற்சிக்கவும்.

அடிப்படை உதாரணம்

முன்னிருப்பாக, .panelசில அடிப்படை பார்டர் மற்றும் பேடிங்கைப் பயன்படுத்தினால் சில உள்ளடக்கம் இருக்கும்.

அடிப்படை பேனல் உதாரணம்

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

தலைப்பு கொண்ட குழு

உடன் உங்கள் பேனலில் தலைப்புக் கொள்கலனை எளிதாகச் சேர்க்கவும் .panel-heading. முன் பாணியில் தலைப்பைச் சேர்க்க, நீங்கள் எதையும் சேர்க்கலாம் <h1>- <h6>வகுப்புடன் .panel-title. இருப்பினும், எழுத்துரு அளவுகள் <h1>- <h6>ஆல் மேலெழுதப்படுகின்றன .panel-heading.

சரியான இணைப்பு வண்ணத்திற்கு, உள்ள தலைப்புகளில் இணைப்புகளை வைக்க மறக்காதீர்கள் .panel-title.

தலைப்பு இல்லாமல் பேனல் தலைப்பு

பேனல் உள்ளடக்கம்

பேனல் தலைப்பு

பேனல் உள்ளடக்கம்

<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

அடிக்குறிப்புடன் கூடிய பேனல்

இல் பொத்தான்கள் அல்லது இரண்டாம் நிலை உரையை மடக்கு .panel-footer. பேனல் அடிக்குறிப்புகள் , சூழல் மாறுபாடுகளைப் பயன்படுத்தும் போது, அவை முன்புறத்தில் இருக்கக் கூடாது என்பதால், அவை வண்ணங்களையும் எல்லைகளையும் பெறாது என்பதை நினைவில் கொள்ளவும் .

பேனல் உள்ளடக்கம்

பேனல் அடிக்குறிப்பு

<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

சூழ்நிலை மாற்றுகள்

பிற கூறுகளைப் போலவே, ஒரு குறிப்பிட்ட சூழலுக்கு ஒரு பேனலை மிகவும் அர்த்தமுள்ளதாக மாற்றவும்.

பேனல் தலைப்பு

பேனல் உள்ளடக்கம்

பேனல் தலைப்பு

பேனல் உள்ளடக்கம்

பேனல் தலைப்பு

பேனல் உள்ளடக்கம்

பேனல் தலைப்பு

பேனல் உள்ளடக்கம்

பேனல் தலைப்பு

பேனல் உள்ளடக்கம்

<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

அட்டவணைகளுடன்

.tableதடையற்ற வடிவமைப்பிற்கு, பேனலுக்குள் எல்லையற்றவற்றைச் சேர்க்கவும் . ஒரு இருந்தால் .panel-body, பிரிப்பதற்காக அட்டவணையின் மேல் கூடுதல் பார்டரைச் சேர்ப்போம்.

பேனல் தலைப்பு

சில இயல்புநிலை பேனல் உள்ளடக்கம் இங்கே. Nulla vitae elit libero, a pharetra ague. ஏனியன் லாசினியா பைபெண்டம் நுல்லா செட் கன்செக்டெடர். ஏனியன் யூ லியோ குவாம். Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies வாகனங்கள் ut id elit.

#	முதல் பெயர்	கடைசி பெயர்	பயனர் பெயர்
1	குறி	ஓட்டோ	@mdo
2	ஜேக்கப்	தோர்ன்டன்	@கொழுப்பு
3	லாரி	பறவை	@twitter

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

பேனல் பாடி இல்லை என்றால், பேனல் ஹெடரில் இருந்து டேபிளுக்கு இடையூறு இல்லாமல் கூறு நகரும்.

பேனல் தலைப்பு

#	முதல் பெயர்	கடைசி பெயர்	பயனர் பெயர்
1	குறி	ஓட்டோ	@mdo
2	ஜேக்கப்	தோர்ன்டன்	@கொழுப்பு
3	லாரி	பறவை	@twitter

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

பட்டியல் குழுக்களுடன்

எந்த பேனலிலும் முழு அகலப் பட்டியல் குழுக்களை எளிதாகச் சேர்க்கவும் .

பேனல் தலைப்பு

சில இயல்புநிலை பேனல் உள்ளடக்கம் இங்கே. Nulla vitae elit libero, a pharetra ague. ஏனியன் லாசினியா பைபெண்டம் நுல்லா செட் கன்செக்டெடர். ஏனியன் யூ லியோ குவாம். Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies வாகனங்கள் ut id elit.

க்ராஸ் ஜஸ்டோ ஓடியோ
டாபிபஸ் ஏசி வசதி
மோர்பி லியோ ரிசஸ்
போர்டா ஏசி கன்செக்டெர் ஏசி
வெஸ்டிபுலம் அட் ஈரோஸ்

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

எந்தவொரு சாதனத்திலும் சரியாக அளவிடக்கூடிய உள்ளார்ந்த விகிதத்தை உருவாக்குவதன் மூலம், அவை கொண்டிருக்கும் தொகுதியின் அகலத்தின் அடிப்படையில் வீடியோ அல்லது ஸ்லைடுஷோ பரிமாணங்களைத் தீர்மானிக்க உலாவிகளை அனுமதிக்கவும்.

விதிகள் நேரடியாக <iframe>, <embed>, <video>, மற்றும் <object>உறுப்புகளுக்குப் பயன்படுத்தப்படுகின்றன; .embed-responsive-itemநீங்கள் மற்ற பண்புக்கூறுகளுக்கு ஸ்டைலிங் பொருத்த விரும்பினால் வெளிப்படையான சந்ததி வகுப்பைப் பயன்படுத்தவும்.

சார்பு உதவிக்குறிப்பு! உங்களுக்காக நாங்கள் மேலெழுதுவதால் frameborder="0", உங்கள் களில் நீங்கள் சேர்க்க வேண்டியதில்லை .<iframe>

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

இயல்புநிலை நன்றாக

ஒரு உறுப்புக்கு ஒரு உட்செலுத்துதல் விளைவைக் கொடுக்க, கிணற்றை எளிய விளைவாகப் பயன்படுத்தவும்.

பார், நான் கிணற்றில் இருக்கிறேன்!

<div class="well">...</div>

விருப்ப வகுப்புகள்

இரண்டு விருப்ப மாற்றியமைக்கும் வகுப்புகளுடன் திணிப்பு மற்றும் வட்டமான மூலைகளைக் கட்டுப்படுத்தவும்.

பார், நான் ஒரு பெரிய கிணற்றில் இருக்கிறேன்!

<div class="well well-lg">...</div>

பார், நான் ஒரு சிறிய கிணற்றில் இருக்கிறேன்!

<div class="well well-sm">...</div>

கூறுகள்

கிளிஃபிகான்கள்

கிடைக்கும் கிளிஃப்கள்

எப்படி உபயோகிப்பது

மற்ற கூறுகளுடன் கலக்க வேண்டாம்

வெற்று உறுப்புகளில் பயன்படுத்த மட்டுமே

ஐகான் எழுத்துரு இருப்பிடத்தை மாற்றுகிறது

அணுகக்கூடிய சின்னங்கள்

எடுத்துக்காட்டுகள்

கீழிறங்கும்

உதாரணமாக

சீரமைப்பு

கூடுதல் நிலைப்படுத்தல் தேவைப்படலாம்

நிராகரிக்கப்பட்ட .pull-rightசீரமைப்பு

தலைப்புகள்

பிரிப்பான்

முடக்கப்பட்ட மெனு உருப்படிகள்

பொத்தான் குழுக்கள்

பட்டன் குழுக்களில் உள்ள உதவிக்குறிப்புகள் மற்றும் பாப்ஓவர்களுக்கு சிறப்பு அமைப்பு தேவை

சரியானதை உறுதிசெய்து roleலேபிளை வழங்கவும்

அடிப்படை உதாரணம்

பட்டன் கருவிப்பட்டி

அளவிடுதல்

கூடு கட்டுதல்

செங்குத்து மாறுபாடு

நியாயப்படுத்தப்பட்ட பொத்தான் குழுக்கள்

எல்லைகளைக் கையாளுதல்

IE8 மற்றும் எல்லைகள்

<a>உறுப்புகளுடன் _

இணைப்புகள் பொத்தான்களாக செயல்படுகின்றன

<button>உறுப்புகளுடன் _

பட்டன் கீழ்தோன்றும்

செருகுநிரல் சார்பு

ஒற்றை பொத்தான் கீழ்தோன்றும்

பிளவு பட்டன் கீழ்தோன்றும்

அளவிடுதல்

டிராப்அப் மாறுபாடு

உள்ளீட்டு குழுக்கள்

உரை <input>கள் மட்டுமே

உள்ளீட்டுக் குழுக்களில் உள்ள உதவிக்குறிப்புகள் மற்றும் பாப் ஓவர்களுக்கு சிறப்பு அமைப்பு தேவை

மற்ற கூறுகளுடன் கலக்க வேண்டாம்

எப்போதும் லேபிள்களைச் சேர்க்கவும்

அடிப்படை உதாரணம்

அளவிடுதல்

தேர்வுப்பெட்டிகள் மற்றும் ரேடியோ துணை நிரல்கள்

பொத்தான் துணை நிரல்கள்

கீழ்தோன்றும் பொத்தான்கள்

பிரிக்கப்பட்ட பொத்தான்கள்

பல பொத்தான்கள்

நவ்ஸ்

டேப் பேனல்களுக்கு navs ஐப் பயன்படுத்த, JavaScript டேப்ஸ் செருகுநிரல் தேவை

வழிசெலு���்தலாகப் பயன்படுத்தப்படும் நாவ்களை அணுகக்கூடியதாக ஆக்குங்கள்

தாவல்கள்

மாத்திரைகள்

நியாயப்படுத்தப்பட்டது

சஃபாரி மற்றும் பதிலளிக்கக்கூடிய நியாயப்படுத்தப்பட்ட navs

முடக்கப்பட்ட இணைப்புகள்

இணைப்பு செயல்பாடு பாதிக்கப்படவில்லை

கீழ்தோன்றல்களைப் பயன்படுத்துதல்

கீழிறங்கும் தாவல்கள்

கீழ்தோன்றும் மாத்திரைகள்

நவ்பார்

இயல்புநிலை navbar

நிரம்பி வழியும் உள்ளடக்கம்

ஜாவாஸ்கிரிப்ட் செருகுநிரல் தேவை

சரிந்த மொபைல் நேவ்பார் பிரேக் பாயின்ட்டை மாற்றுகிறது

நவ்பார்களை அணுகக்கூடியதாக ஆக்குங்கள்

பிராண்ட் படம்

படிவங்கள்

மொபைல் சாதன எச்சரிக்கைகள்

எப்போதும் லேபிள்களைச் சேர்க்கவும்

பொத்தான்கள்

சூழல் சார்ந்த பயன்பாடு

உரை

நேவ் அல்லாத இணைப்புகள்

கூறு சீரமைப்பு

பல கூறுகளை வலது சீரமைத்தல்

மேலே சரி செய்யப்பட்டது

உடல் திணிப்பு தேவை

கீழே சரி செய்யப்பட்டது

நிராகரிக்கப்பட்ட `.pull-right`சீரமைப்பு

சரியானதை உறுதிசெய்து `role`லேபிளை வழங்கவும்

`<a>`உறுப்புகளுடன் _

`<button>`உறுப்புகளுடன் _

உரை `<input>`கள் மட்டுமே

வழிசெலு��்தலாகப் பயன்படுத்தப்படும் நாவ்களை அணுகக்கூடியதாக ஆக்குங்கள்