ஐகானோகிராபி, டிராப் டவுன்கள், உள்ளீட்டு குழுக்கள், வழிசெலுத்தல், விழிப்பூட்டல்கள் மற்றும் பலவற்றை வழங்குவதற்காக ஒரு டஜன் மீண்டும் பயன்படுத்தக்கூடிய கூறுகள் கட்டப்பட்டுள்ளன.
கிளிஃபிகான்கள்
கிடைக்கும் கிளிஃப்கள்
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மாறிகளை மாற்றவும் குறைவான கோப்புகள்.
உங்கள் குறிப்பிட்ட மேம்பாட்டு அமைப்பிற்கு மிகவும் பொருத்தமான எந்த விருப்பத்தையும் பயன்படுத்தவும்.
அணுகக்கூடிய சின்னங்கள்
உதவி தொழில்நுட்பங்களின் நவீன பதிப்புகள் CSS உருவாக்கிய உள்ளடக்கம் மற்றும் குறிப்பிட்ட யூனிகோட் எழுத்துக்களை அறிவிக்கும். ஸ்கிரீன் ரீடர்களில் திட்டமிடப்படாத மற்றும் குழப்பமான வெளியீட்டைத் தவிர்க்க (குறிப்பாக ஐகான்கள் முற்றிலும் அலங்காரத்திற்காகப் பயன்படுத்தப்படும்போது), அவற்றைப் aria-hidden="true"பண்புக்கூறுடன் மறைப்போம்.
நீங்கள் அர்த்தத்தை வெளிப்படுத்த ஐகானைப் பயன்படுத்துகிறீர்கள் என்றால் (அலங்கார உறுப்பாக மட்டும் இல்லாமல்), இந்த அர்த்தம் உதவி தொழில்நுட்பங்களுக்கும் தெரிவிக்கப்படுவதை உறுதிசெய்யவும் - எடுத்துக்காட்டாக, .sr-onlyவகுப்பில் பார்வைக்கு மறைக்கப்பட்ட கூடுதல் உள்ளடக்கத்தைச் சேர்க்கவும்.
நீங்கள் வேறு எந்த உரையும் இல்லாமல் கட்டுப்பாடுகளை உருவாக்குகிறீர்கள் என்றால் ( <button>ஐகானை மட்டும் உள்ளடக்கியது போன்றவை), கட்டுப்பாட்டின் நோக்கத்தை அடையாளம் காண மாற்று உள்ளடக்கத்தை நீங்கள் எப்போதும் வழங்க வேண்டும், இதனால் உதவி தொழில்நுட்பங்களைப் பயன்படுத்துபவர்களுக்கு அது புரியும். இந்த வழக்கில், நீங்கள் aria-labelகட்டுப்பாட்டிலேயே ஒரு பண்புக்கூறு சேர்க்கலாம்.
எடுத்துக்காட்டுகள்
பொத்தான்கள், பொத்தான் குழுக்களில் கருவிப்பட்டி, வழிசெலுத்தல் அல்லது முன் தயாரிக்கப்பட்ட படிவ உள்ளீடுகளில் அவற்றைப் பயன்படுத்தவும்.
கீழ்தோன்றும் தூண்டுதல் மற்றும் கீழ்தோன்றும் மெனுவை உள்ளிடவும் .dropdownஅல்லது அறிவிக்கும் மற்றொரு உறுப்பு position: relative;. பின்னர் மெனுவின் HTML ஐச் சேர்க்கவும்.
இயல்பாக, கீழ்தோன்றும் மெனு தானாகவே மேலே இருந்து 100% மற்றும் அதன் பெற்றோரின் இடது பக்கமாக நிலைநிறுத்தப்படும். கீழ்தோன்றும் மெனுவை வலப்புறமாக சீரமைக்க .dropdown-menu-righta இல் சேர்க்கவும் ..dropdown-menu
கூடுதல் நிலைப்படுத்தல் தேவைப்படலாம்
கீழ்தோன்றும் ஆவணத்தின் இயல்பான ஓட்டத்தில் CSS வழியாக தானாகவே நிலைநிறுத்தப்படும். இதன் பொருள், டிராப் டவுன்கள் சில overflowபண்புகளைக் கொண்ட பெற்றோர்களால் செதுக்கப்படலாம் அல்லது காட்சித் துறையின் எல்லைக்கு வெளியே தோன்றலாம். இந்த சிக்கல்கள் எழும் போது நீங்கள் சொந்தமாக தீர்க்கவும்.
நிராகரிக்கப்பட்டது.pull-right சீரமைப்பு
v3.1.0 இன் படி, கீழ்தோன்றும் மெனுக்களில் நாங்கள் நிறுத்தப்பட்டுள்ளோம் .pull-right. மெனுவை வலது சீரமைக்க, பயன்படுத்தவும் .dropdown-menu-right. நேவ்பாரில் வலது-சீரமைக்கப்பட்ட nav கூறுகள் மெனுவைத் தானாக சீரமைக்க இந்த வகுப்பின் மிக்சின் பதிப்பைப் பயன்படுத்துகின்றன. அதை மேலெழுத, பயன்படுத்தவும் .dropdown-menu-left.
தலைப்புகள்
கீழ்தோன்றும் மெனுவில் செயல்களின் பிரிவுகளை லேபிளிட ஒரு தலைப்பைச் சேர்க்கவும்.
பட்டன் குழுவுடன் ஒரே வரியில் பொத்தான்களின் வரிசையை தொகுக்கவும். எங்கள் பொத்தான்கள் சொருகி மூலம் விருப்பமான JavaScript ரேடியோ மற்றும் தேர்வுப்பெட்டி பாணி நடத்தையைச் சேர்க்கவும் .
பட்டன் குழுக்களில் உள்ள உதவிக்குறிப்புகள் மற்றும் பாப்ஓவர்களுக்கு சிறப்பு அமைப்பு தேவை
ஒரு க்குள் உள்ள உறுப்புகளில் டூல்டிப்கள் அல்லது பாப்ஓவர்களைப் பயன்படுத்தும் போது .btn-group, தேவையற்ற பக்க விளைவுகளைத் தவிர்ப்பதற்கான விருப்பத்தை நீங்கள் குறிப்பிட வேண்டும் container: 'body'(உறுப்பு அகலமாக வளர்வது மற்றும்/அல்லது டூல்டிப் அல்லது பாப்ஓவர் தூண்டப்படும்போது அதன் வட்டமான மூலைகளை இழப்பது போன்றவை).
சரியானதை உறுதிசெய்து roleலேபிளை வழங்கவும்
ஸ்கிரீன் ரீடர்கள் போன்ற உதவித் தொழில்நுட்பங்களுக்கு, தொடர்ச்சியான பொத்தான்கள் தொகுக்கப்பட்டுள்ளன என்பதைத் தெரிவிக்க, பொருத்தமான roleபண்புக்கூறு வழங்கப்பட வேண்டும். பொத்தான் குழுக்களுக்கு, இது role="group", கருவிப்பட்டிகளில் ஒரு role="toolbar".
ஒரு விதிவிலக்கு என்பது ஒற்றைக் கட்டுப்பாட்டை மட்டுமே கொண்ட குழுக்கள் (உதாரணமாக உறுப்புகளுடன் நியாயப்படுத்தப்பட்ட பொத்தான் குழுக்கள்<button> ) அல்லது கீழ்தோன்றும்.
கூடுதலாக, குழுக்கள் மற்றும் கருவிப்பட்டிகளுக்கு வெளிப்படையான லேபிளை வழங்க வேண்டும், ஏனெனில் பெரும்பாலான உதவி தொழில்நுட்பங்கள் சரியான roleபண்புக்கூறு இருந்தபோதிலும் அவற்றை அறிவிக்காது. இங்கே வழங்கப்பட்ட எடுத்துக்காட்டுகளில், நாங்கள் பயன்படுத்துகிறோம் aria-label, ஆனால் இது போன்ற மாற்றுகளையும் aria-labelledbyபயன்படுத்தலாம்.
மிகவும் சிக்கலான கூறுகளுக்கு <div class="btn-group">ஒரு தொகுப்புகளை இணைக்கவும்.<div class="btn-toolbar">
அளவிடுதல்
ஒரு குழுவில் உள்ள ஒவ்வொரு பொத்தானுக்கும் பட்டன் அளவு வகுப்புகளைப் பயன்படுத்துவதற்குப் பதிலாக, பல குழுக்களில் கூடு கட்டுவது உட்பட .btn-group-*ஒவ்வொன்றிலும் சேர்க்கவும்..btn-group
கூடு கட்டுதல்
கீழ்தோன்றும் மெனுக்கள் தொடர்ச்சியான பொத்தான்களுடன் கலக்கப்பட வேண்டும் என நீங்கள் விரும்பினால், அதை .btn-groupமற்றொன்றிற்குள் வைக்கவும் ..btn-group
பொத்தான்களின் குழுவை அதன் பெற்றோரின் முழு அகலத்தையும் பரப்புவதற்கு சம அளவுகளில் நீட்டவும். பொத்தான் குழுவில் உள்ள பட்டன் கீழ்தோன்றும் உடன் வேலை செய்கிறது.
எல்லைகளைக் கையாளுதல்
பொத்தான்களை நியாயப்படுத்தப் பயன்படுத்தப்படும் குறிப்பிட்ட HTML மற்றும் CSS காரணமாக (அதாவது display: table-cell), அவற்றுக்கிடையேயான எல்லைகள் இரட்டிப்பாகும். வழக்கமான பொத்தான் குழுக்களில், margin-left: -1pxஎல்லைகளை அகற்றுவதற்குப் பதிலாக அடுக்கி வைக்கப் பயன்படுகிறது. இருப்பினும், marginஉடன் வேலை செய்யாது display: table-cell. இதன் விளைவாக, பூட்ஸ்டார்ப்பிற்கான உங்கள் தனிப்பயனாக்கங்களைப் பொறுத்து, நீங்கள் எல்லைகளை அகற்றவோ அல்லது மீண்டும் வண்ணம் தீட்டவோ விரும்பலாம்.
IE8 மற்றும் எல்லைகள்
Internet Explorer 8 ஆனது நியாயப்படுத்தப்பட்ட பொத்தான் குழுவில் உள்ள பொத்தான்களில் எல்லைகளை வழங்காது, அது ஆன் <a>அல்லது <button>உறுப்புகளாக இருந்தாலும் சரி. அதைச் சுற்றி வர, ஒவ்வொரு பொத்தானையும் மற்றொன்றில் மடிக்கவும்.btn-group .
உறுப்புகள் <a>பொத்தான்களாகச் செயல்படப் பயன்படுத்தப்பட்டால் - தற்போதைய பக்கத்தில் உள்ள மற்றொரு ஆவணம் அல்லது பிரிவிற்குச் செல்வதற்குப் பதிலாக, பக்க செயல்பாடுகளைத் தூண்டுகிறது - அவற்றிற்கும் பொருத்தமானது கொடுக்கப்பட வேண்டும் role="button".
<button>உறுப்புகளுடன் _
<button>உறுப்புகளுடன் நியாயப்படுத்தப்பட்ட பொத்தான் குழுக்களைப் பயன்படுத்த , ஒவ்வொரு பட்டனையும் ஒரு பொத்தான் குழுவில் மடிக்க வேண்டும் . பெரும்பாலான உலாவிகள் உறுப்புகளை நியாயப்படுத்த எங்கள் CSS ஐ சரியாகப் பயன்படுத்துவதில்லை <button>, ஆனால் பொத்தான் கீழ்தோன்றும் அம்சத்தை நாங்கள் ஆதரிப்பதால், நாங்கள் அதைச் சரிசெய்ய முடியும்.
பட்டன் கீழ்தோன்றும்
ஒரு கீழ்தோன்றும் மெனுவைத் தூண்டுவதற்கு எந்த பட்டனையும் பயன்படுத்தவும், அதை ஒரு க்குள் வைத்து .btn-groupசரியான மெனு மார்க்அப்பை வழங்கவும்.
செருகுநிரல் சார்பு
உங்கள் பூட்ஸ்டார்ப் பதிப்பில் பட்டன் கீழ்தோன்றும் செருகுநிரல் சேர்க்கப்பட வேண்டும்.
ஒற்றை பொத்தான் கீழ்தோன்றும்
சில அடிப்படை மார்க்அப் மாற்றங்களுடன் ஒரு பட்டனை கீழ்தோன்றும் நிலைமாற்றமாக மாற்றவும்.
எந்தவொரு உரை அடிப்படையிலான <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
ஒரே உள்ளீட்டு குழுவில் பல படிவக் கட்டுப்பாடுகளை நாங்கள் ஆதரிக்கவில்லை.
அளவிடுதல்
அதனுடன் தொடர்புடைய படிவ அளவு வகுப்புகளைச் சேர்த்தால், .input-groupஉள்ள உள்ளடக்கங்கள் தானாகவே மறுஅளவிடப்படும்-ஒவ்வொரு உறுப்புக்கும் படிவக் கட்டுப்பாட்டு அளவு வகுப்புகளை மீண்டும் செய்ய வேண்டிய அவசியமில்லை.
தேர்வுப்பெட்டிகள் மற்றும் ரேடியோ துணை நிரல்கள்
உரைக்கு பதிலாக உள்ளீட்டு குழுவின் addonக்குள் ஏதேனும் தேர்வுப்பெட்டி அல்லது ரேடியோ விருப்பத்தை வைக்கவும்.
பொத்தான் துணை நிரல்கள்
உள்ளீட்டு குழுக்களில் உள்ள பொத்தான்கள் சற்று வித்தியாசமானவை மற்றும் ஒரு கூடுதல் அளவிலான கூடு கட்டுதல் தேவைப்படுகிறது. க்கு பதிலாக, பொத்தான்களை மடிக்க .input-group-addonநீங்கள் பயன்படுத்த வேண்டும் . .input-group-btnமேலெழுத முடியாத இயல்புநிலை உலாவி நடைகள் காரணமாக இது தேவைப்படுகிறது.
கீழ்தோன்றும் பொத்தான்கள்
பிரிக்கப்பட்ட பொத்தான்கள்
பல பொத்தான்கள்
நீங்கள் ஒரு பக்கத்திற்கு ஒரு செருகு நிரலை மட்டுமே வைத்திருக்க முடியும் என்றாலும், ஒரு ஒற்றை உள்ளே பல பொத்தான்களை வைத்திருக்க முடியும் .input-group-btn.
நவ்ஸ்
பூட்ஸ்டார்ப்பில் கிடைக்கும் நாவ்கள், அடிப்படை .navவகுப்பில் தொடங்கி, பகிரப்பட்ட நிலைகளில் மார்க்அப்பைப் பகிர்ந்துள்ளன. ஒவ்வொரு பாணிக்கும் இடையில் மாற மாற்றியமைக்கும் வகுப்புகளை மாற்றவும்.
டேப் பேனல்களுக்கு navs ஐப் பயன்படுத்த, JavaScript டேப்ஸ் செருகுநிரல் தேவை
டேப் செய்யக்கூடிய பகுதிகளைக் கொண்ட தாவல்களுக்கு, நீங்கள் ஜாவாஸ்கிரிப்ட் செருகுநிரல் தாவல்களைப் பயன்படுத்த வேண்டும் . மார்க்அப்பிற்கு கூடுதல் roleமற்றும் ARIA பண்புக்கூறுகள் தேவைப்படும் - மேலும் விவரங்களுக்கு செருகுநிரலின் உதாரண மார்க்அப்பைப் பார்க்கவும்.
வழிசெலுத்தலாகப் பயன்படுத்தப்படும் நாவ்களை அணுகக்கூடியதாக ஆக்குங்கள்
வழிசெலுத்தல் பட்டியை வழங்க நீங்கள் navs ஐப் பயன்படுத்துகிறீர்கள் எனில் role="navigation", இன் மிகவும் லாஜிக்கல் பேரன்ட் கன்டெய்னரில் a ஐச் சேர்க்க மறக்காதீர்கள் <ul>அல்லது முழு வழிசெலுத்தலிலும் ஒரு <nav>உறுப்பைச் சுற்றி வைக்கவும். <ul>துணை தொழில்நுட்பங்கள் மூலம் உண்மையான பட்டியலாக அறிவிக்கப்படுவதை இது தடுக்கும் என்பதால் , பங்கை அதனுடன் சேர்க்க வேண்டாம் .
தாவல்கள்
வகுப்பிற்கு அடிப்படை .nav-tabsவகுப்பு தேவை என்பதை நினைவில் கொள்ளவும் ..nav
768px ஐ விட அகலமான திரைகளில் தாவல்கள் அல்லது மாத்திரைகளை அவர்களின் பெற்றோரின் சம அகலத்தில் எளிதாக உருவாக்கவும் .nav-justified. சிறிய திரைகளில், nav இணைப்புகள் அடுக்கப்பட்டிருக்கும்.
நியாயப்படுத்தப்பட்ட navbar nav இணைப்புகள் தற்போது ஆதரிக்கப்படவில்லை.
சஃபாரி மற்றும் பதிலளிக்கக்கூடிய நியாயப்படுத்தப்பட்ட navs
v9.1.2 இன் படி, Safari ஒரு பிழையை வெளிப்படுத்துகிறது, அதில் உங்கள் உலாவியை கிடைமட்டமாக மறுஅளவிடுவது நியாயமான nav இல் ரெண்டரிங் பிழைகளை ஏற்படுத்துகிறது, அவை புதுப்பித்தவுடன் அழிக்கப்படும். இந்த பிழை நியாயப்படுத்தப்பட்ட nav உதாரணத்திலும் காட்டப்பட்டுள்ளது .
Navbars என்பது உங்கள் பயன்பாடு அல்லது தளத்திற்கான வழிசெலுத்தல் தலைப்புகளாக செயல்படும் பதிலளிக்கக்கூடிய மெட்டா கூறுகள். அவை மொபைல் காட்சிகளில் சரிந்து (மற்றும் மாறக்கூடியவை) தொடங்குகின்றன மற்றும் கிடைக்கக்கூடிய காட்சிப் பகுதியின் அகலம் அதிகரிக்கும் போது கிடைமட்டமாக மாறும்.
நியாயப்படுத்தப்பட்ட navbar nav இணைப்புகள் தற்போது ஆதரிக்கப்படவில்லை.
நிரம்பி வழியும் உள்ளடக்கம்
உங்கள் navbar இல் உள்ள உள்ளடக்கத்திற்கு எவ்வளவு இடம் தேவை என்பதை பூட்ஸ்டார்ப் அறியாததால், இரண்டாவது வரிசையில் உள்ளடக்கத்தை மூடுவதில் நீங்கள் சிக்கல்களை சந்திக்க நேரிடலாம். இதைத் தீர்க்க, நீங்கள்:
navbar உருப்படிகளின் அளவு அல்லது அகலத்தைக் குறைக்கவும்.
சுருக்கப்பட்ட மற்றும் கிடைமட்ட பயன்முறைக்கு இடையில் உங்கள் நேவ்பார் மாறும் புள்ளியை மாற்றவும். மாறியைத் தனிப்பயனாக்கவும் @grid-float-breakpointஅல்லது உங்கள் சொந்த மீடியா வினவலைச் சேர்க்கவும்.
ஜாவாஸ்கிரிப்ட் செருகுநிரல் தேவை
ஜாவாஸ்கிரிப்ட் முடக்கப்பட்டிருந்தால் மற்றும் நேவ்பார் சரிந்துவிடும் அளவுக்கு வியூபோர்ட் குறுகலாக இருந்தால், நேவ்பாரை விரிவுபடுத்தி உள்ள உள்ளடக்கத்தைப் பார்க்க இயலாது .navbar-collapse.
பதிலளிக்கக்கூடிய navbar ஆனது , உங்கள் பூட்ஸ்டார்ப்பின் பதிப்பில் சரிவு சொருகி சேர்க்கப்பட வேண்டும்.
சரிந்த மொபைல் நேவ்பார் பிரேக் பாயின்ட்டை மாற்றுகிறது
வியூபோர்ட் குறுகலாக இருக்கும்போது நவ்பார் அதன் செங்குத்து மொபைல் காட்சியில் சரிந்து, வியூபோர்ட் @grid-float-breakpointகுறைந்தபட்சம் @grid-float-breakpointஅகலத்தில் இருக்கும்போது அதன் கிடைமட்ட மொபைல் அல்லாத காட்சியாக விரிவடைகிறது. நேவ்பார் சரியும்/விரிவடையும் போது கட்டுப்படுத்த இந்த மாறியை குறைவான மூலத்தில் சரிசெய்யவும். இயல்புநிலை மதிப்பு 768px(சிறிய "சிறிய" அல்லது "டேப்லெட்" திரை).
நவ்பார்களை அணுகக்கூடியதாக ஆக்குங்கள்
ஒரு உறுப்பைப் பயன்படுத்துவதை உறுதிப்படுத்திக் கொள்ளுங்கள் <nav>அல்லது ஒரு போன்ற பொதுவான உறுப்பைப் பயன்படுத்தினால், உதவித் தொழில்நுட்பங்களைப் பயன்படுத்துபவர்களுக்கு ஒரு முக்கியப் பகுதி என வெளிப்படையாகக் கண்டறிய ஒவ்வொரு navbar க்கும் <div>a ஐச் சேர்க்கவும் .role="navigation"
பிராண்ட் படம்
ஒரு க்கு உரையை மாற்றுவதன் மூலம் navbar பிராண்டை உங்கள் சொந்தப் படத்துடன் மாற்றவும் <img>. அதன் .navbar-brandசொந்த திணிப்பு மற்றும் உயரம் இருப்பதால், உங்கள் படத்தைப் பொறுத்து சில CSS ஐ மேலெழுத வேண்டியிருக்கலாம்.
படிவங்கள்
.navbar-formசரியான செங்குத்து சீரமைப்பு மற்றும் குறுகிய காட்சித் துறைகளில் சுருக்கப்பட்ட நடத்தைக்கு படிவ உள்ளடக்கத்தை வைக்கவும். நவ்பார் உள்ளடக்கத்தில் அது எங்கு உள்ளது என்பதைத் தீர்மானிக்க, சீரமைப்பு விருப்பங்களைப் பயன்படுத்தவும்.
முன்னோட்டமாக , மிக்சின் வழியாக .navbar-formஅதன் குறியீட்டின் பெரும்பகுதியைப் பகிர்ந்து கொள்கிறது . உள்ளீட்டு குழுக்கள் போன்ற சில படிவக் கட்டுப்பாடுகள், ஒரு navbar இல் சரியாகக் காட்டப்பட வேண்டிய நிலையான அகலங்கள் தேவைப்படலாம்..form-inline
ஒவ்வொரு உள்ளீட்டிற்கும் நீங்கள் லேபிளைச் சேர்க்கவில்லை என்றால், உங்கள் படிவங்களில் ஸ்கிரீன் ரீடர்கள் சிக்கலை எதிர்கொள்வார்கள். .sr-onlyஇந்த இன்லைன் படிவங்களுக்கு, வகுப்பைப் பயன்படுத்தி லேபிள்களை மறைக்கலாம் . aria-label, aria-labelledbyஅல்லது titleபண்புக்கூறு போன்ற உதவித் தொழில்நுட்பங்களுக்கான லேபிளை வழங்குவதற்கு மேலும் மாற்று முறைகள் உள்ளன . இவை எதுவும் இல்லை என்றால், ஸ்கிரீன் ரீடர்கள் பண்புக்கூறைப் பயன்படுத்தலாம் , ஆனால் மற்ற லேபிளிங் முறைகளுக்கு மாற்றாகப் பயன்படுத்துவது பரிந்துரைக்கப்படவில்லை placeholderஎன்பதை நினைவில் கொள்ளவும் .placeholder
பொத்தான்கள்
navbar இல் செங்குத்தாக மையப்படுத்த , a இல் இல்லாத கூறுகளுடன் .navbar-btnவகுப்பைச் சேர்க்கவும் .<button><form>
சூழல் சார்ந்த பயன்பாடு
நிலையான பட்டன் வகுப்புகளைப் போலவே , மற்றும் உறுப்புகளிலும் .navbar-btnபயன்படுத்தலாம் . இருப்பினும், க்குள் உள்ள உறுப்புகளில் நிலையான பொத்தான் வகுப்புகளையோ பயன்படுத்தக்கூடாது .<a><input>.navbar-btn<a>.navbar-nav
உரை
உரையின் சரங்களை ஒரு உறுப்புடன் மடிக்கவும் .navbar-text, வழக்கமாக <p>சரியான முன்னணி மற்றும் வண்ணத்திற்கான குறிச்சொல்லில்.
நேவ் அல்லாத இணைப்புகள்
வழக்கமான navbar வழிசெலுத்தல் கூறுகளுக்குள் இல்லாத நிலையான இணைப்புகளைப் பயன்படுத்துபவர்களுக்கு .navbar-link, இயல்புநிலை மற்றும் தலைகீழ் navbar விருப்பங்களுக்கு சரியான வண்ணங்களைச் சேர்க்க வகுப்பைப் பயன்படுத்தவும்.
கூறு சீரமைப்பு
.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 உள்ளடக்கத்தைச் சேர்க்கவும் .
உடல் திணிப்பு தேவை
paddingநீங்கள் மேலே சேர்க்கும் வரை, நிலையான navbar உங்கள் மற்ற உள்ளடக்கத்தை மேலெழுதும் <body>. உங்கள் சொந்த மதிப்புகளை முயற்சிக்கவும் அல்லது கீழே உள்ள எங்கள் துணுக்கைப் பயன்படுத்தவும். உதவிக்குறிப்பு: இயல்பாக, navbar 50px உயரத்தில் உள்ளது.
முக்கிய பூட்ஸ்டார்ப் CSS க்குப் பிறகு இதைச் சேர்ப்பதை உறுதிசெய்க .
கீழே சரி செய்யப்பட்டது
.navbar-fixed-bottomஒரு .containerஅல்லது .container-fluidசென்டர் மற்றும் பேட் navbar உள்ளடக்கத்தைச் சேர்க்கவும் .
உடல் திணிப்பு தேவை
நிலையான நேவ்பார் உங்களின் மற்ற உள்ளடக்கத்தை paddingமேலெழுதிவிடும் <body>. உங்கள் சொந்த மதிப்புகளை முயற்சிக்கவும் அல்லது கீழே உள்ள எங்கள் துணுக்கைப் பயன்படுத்தவும். உதவிக்குறிப்பு: இயல்பாக, navbar 50px உயரத்தில் உள்ளது.
முக்கிய பூட்ஸ்டார்ப் CSS க்குப் பிறகு இதைச் சேர்ப்பதை உறுதிசெய்க .
நிலையான மேல்
ஒரு முழு அகல navbar ஐ உருவாக்கவும், அது .navbar-static-topஒரு .containerஅல்லது .container-fluidமையத்திற்கு மற்றும் பேட் navbar உள்ளடக்கத்தைச் சேர்ப்பதன் மூலம் பக்கத்துடன் உருட்டும்.
வகுப்புகளைப் போலன்றி .navbar-fixed-*, நீங்கள் எந்த திணிப்புகளையும் மாற்ற வேண்டியதில்லை body.
தலைகீழ் நவ்பார்
சேர்ப்பதன் மூலம் நவ்பார் தோற்றத்தை மாற்றவும் .navbar-inverse.
ரொட்டிதூள்கள்
வழிசெலுத்தல் படிநிலையில் தற்போதைய பக்கத்தின் இருப்பிடத்தைக் குறிப்பிடவும்.
பிரிப்பான்கள் தானாகவே CSS இல் சேர்க்கப்படும் :beforeமற்றும் content.
உங்கள் தளம் அல்லது பயன்பாட்டிற்கான பேஜினேஷன் இணைப்புகளை பல பக்க பேஜினேஷன் கூறு அல்லது எளிமையான பேஜர் மாற்றுடன் வழங்கவும் .
இயல்புநிலை பேஜினேஷன்
Rdio மூலம் ஈர்க்கப்பட்ட எளிய பேஜினேஷன், பயன்பாடுகள் மற்றும் தேடல் முடிவுகளுக்கு சிறந்தது. பெரிய தொகுதி தவறவிடுவது கடினம், எளிதில் அளவிடக்கூடியது மற்றும் பெரிய கிளிக் பகுதிகளை வழங்குகிறது.
பேஜினேஷன் கூறுகளை லேபிளிடுதல்
<nav>ஸ்கிரீன் ரீடர்கள் மற்றும் பிற உதவி தொழில்நுட்பங்களுக்கான வழிசெலுத்தல் பிரிவாக அடையாளம் காண பேஜினேஷன் கூறு ஒரு உறுப்புடன் மூடப்பட்டிருக்க வேண்டும் . கூடுதலாக, ஒரு பக்கம் ஏற்கனவே ஒன்றுக்கு மேற்பட்ட வழிசெலுத்தல் பிரிவுகளைக் கொண்டிருப்பதால் (தலைப்பில் முதன்மை வழிசெலுத்தல் அல்லது பக்கப்பட்டி வழிசெலுத்தல் போன்றவை), அதன் நோக்கத்தைப் பிரதிபலிக்கும் விளக்கத்தை aria-labelவழங்குவது நல்லது. <nav>எடுத்துக்காட்டாக, தேடல் முடிவுகளின் தொகுப்பிற்கு இடையில் செல்ல பேஜினேஷன் கூறு பயன்படுத்தப்பட்டால், பொருத்தமான லேபிள் aria-label="Search results pages".
ஊனமுற்ற மற்றும் செயலில் உள்ள மாநிலங்கள்
இணைப்புகள் வெவ்வேறு சூழ்நிலைகளுக்கு தனிப்பயனாக்கக்கூடியவை. .disabledகிளிக் செய்ய முடியாத இணைப்புகளுக்கும் .activeதற்போதைய பக்கத்தைக் குறிப்பிடுவதற்கும் பயன்படுத்தவும் .
க்கு செயலில் உள்ள அல்லது முடக்கப்பட்ட ஆங்கர்களை மாற்றுமாறு பரிந்துரைக்கிறோம் <span>, அல்லது முந்தைய/அடுத்த அம்புகளின் விஷயத்தில் நங்கூரத்தைத் தவிர்க்கவும், நோக்கம் கொண்ட பாணிகளைத் தக்கவைத்துக்கொள்ளும் போது கிளிக் செயல்பாட்டை அகற்றவும்.
அளவிடுதல்
பெரிய அல்லது சிறிய பக்கத்தை விரும்புகிறீர்களா? சேர்க்க .pagination-lgஅல்லது .pagination-smகூடுதல் அளவுகள்.
பேஜர்
லைட் மார்க்அப் மற்றும் ஸ்டைல்களுடன் கூடிய எளிய பேஜினேஷன் செயலாக்கங்களுக்கான விரைவான முந்தைய மற்றும் அடுத்த இணைப்புகள். வலைப்பதிவுகள் அல்லது பத்திரிகைகள் போன்ற எளிய தளங்களுக்கு இது சிறந்தது.
இயல்பு உதாரணம்
இயல்பாக, பேஜர் இணைப்புகளை மையப்படுத்துகிறது.
சீரமைக்கப்பட்ட இணைப்புகள்
மாற்றாக, நீங்கள் ஒவ்வொரு இணைப்பையும் பக்கங்களுக்கு சீரமைக்கலாம்:
விருப்ப முடக்கப்பட்ட நிலை
பேஜர் இணைப்புகள் பேஜினேஷனில் .disabledஇருந்து பொது பயன்பாட்டு வகுப்பையும் பயன்படுத்துகின்றன.
லேபிள்கள்
உதாரணமாக
எடுத்துக்காட்டு தலைப்பு புதியது
எடுத்துக்காட்டு தலைப்பு புதியது
எடுத்துக்காட்டு தலைப்பு புதியது
எடுத்துக்காட்டு தலைப்பு புதியது
எடுத்துக்காட்டு தலைப்பு புதியது
எடுத்துக்காட்டு தலைப்பு புதியது
கிடைக்கக்கூடிய மாறுபாடுகள்
லேபிளின் தோற்றத்தை மாற்ற, கீழே குறிப்பிடப்பட்டுள்ள மாற்றியமைக்கும் வகுப்புகளில் ஏதேனும் ஒன்றைச் சேர்க்கவும்.
இயல்புநிலை முதன்மை வெற்றித் தகவல் எச்சரிக்கை ஆபத்து
டன் லேபிள்கள் உள்ளதா?
ஒரு குறுகிய கொள்கலனுக்குள் டஜன் கணக்கான இன்லைன் லேபிள்கள் இருந்தால், ஒவ்வொன்றும் அதன் சொந்த inline-blockஉறுப்பு (ஐகான் போன்றவை) கொண்டிருக்கும் போது ரெண்டரிங் சிக்கல்கள் ஏற்படலாம். இதனைச் சுற்றியுள்ள வழி அமைகிறது display: inline-block;. சூழல் மற்றும் எடுத்துக்காட்டுக்கு, #13219 ஐப் பார்க்கவும் .
பேட்ஜ்கள்
<span class="badge">இணைப்புகள், Bootstrap navs மற்றும் பலவற்றைச் சேர்ப்பதன் மூலம் புதிய அல்லது படிக்காத உருப்படிகளை எளிதாக முன்னிலைப்படுத்தவும் .
.containerஜம்போட்ரானை முழு அகலமாகவும், வட்டமான மூலைகள் இல்லாமல் செய்யவும், அதை அனைத்து s வெளியிலும் வைக்கவும் , அதற்கு பதிலாக .containerஉள்ளே சேர்க்கவும்.
பக்க தலைப்பு
h1ஒரு பக்கத்தில் உள்ள உள்ளடக்கத்தின் சரியான இடைவெளி மற்றும் பிரிவுகளைப் பிரிப்பதற்கான எளிய ஷெல் . இது h1'இன் இயல்புநிலை smallஉறுப்பு மற்றும் பிற கூறுகளை (கூடுதல் பாணிகளுடன்) பயன்படுத்தலாம்.
எடுத்துக்காட்டு பக்க தலைப்பு தலைப்புக்கான துணை உரை
சிறுபடங்கள்
படங்கள், வீடியோக்கள், உரை மற்றும் பலவற்றின் கட்டங்களை எளிதாகக் காண்பிக்க, பூட்ஸ்டார்ப்பின் கட்ட அமைப்பை சிறுபடக் கூறுகளுடன் நீட்டிக்கவும்.
வெவ்வேறு உயரங்கள் மற்றும்/அல்லது அகலங்களின் சிறுபடங்களின் Pinterest போன்ற விளக்கக்காட்சியை நீங்கள் தேடுகிறீர்கள் என்றால், நீங்கள் கொத்து , ஐசோடோப் அல்லது சால்வட்டோர் போன்ற மூன்றாம் தரப்பு செருகுநிரலைப் பயன்படுத்த வேண்டும் .
இயல்பு உதாரணம்
இயல்பாக, பூட்ஸ்டார்ப்பின் சிறுபடங்கள் குறைந்தபட்ச தேவையான மார்க்அப்புடன் இணைக்கப்பட்ட படங்களைக் காண்பிக்கும் வகையில் வடிவமைக்கப்பட்டுள்ளன.
விருப்ப உள்ளடக்கம்
கூடுதல் மார்க்அப் மூலம், தலைப்புகள், பத்திகள் அல்லது பொத்தான்கள் போன்ற எந்த வகையான 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.
கிடைக்கக்கூடிய மற்றும் நெகிழ்வான எச்சரிக்கைச் செய்திகளுடன் வழக்கமான பயனர் செயல்களுக்கான சூழல் சார்ந்த கருத்துச் செய்திகளை வழங்கவும்.
எடுத்துக்காட்டுகள்
அடிப்படை விழிப்பூட்டல் செய்திகளுக்கு ஏதேனும் உரை மற்றும் விருப்பமான நிராகரிப்பு பொத்தான் .alertமற்றும் நான்கு சூழ்நிலை வகுப்புகளில் ஒன்றை (எ.கா., ) மடிக்கவும்..alert-success
இயல்புநிலை வகுப்பு இல்லை
விழிப்பூட்டல்களில் இயல்புநிலை வகுப்புகள் இல்லை, அடிப்படை மற்றும் மாற்றியமைக்கும் வகுப்புகள் மட்டுமே. இயல்புநிலை சாம்பல் விழிப்பூட்டல் அதிக அர்த்தத்தைத் தராது, எனவே நீங்கள் சூழ்நிலை வகுப்பு வழியாக ஒரு வகையைக் குறிப்பிட வேண்டும். வெற்றி, தகவல், எச்சரிக்கை அல்லது ஆபத்து ஆகியவற்றிலிருந்து தேர்வு செய்யவும்.
சபாஷ்! இந்த முக்கியமான எச்சரிக்கை செய்தியை நீங்கள் வெற்றிகரமாகப் படித்தீர்கள்.
எச்சரிக்கை! இந்த விழிப்பூட்டலுக்கு உங்கள் கவனம் தேவை, ஆனால் இது மிக முக்கியமானதல்ல.
எச்சரிக்கை! உங்களை நீங்களே சரிபார்ப்பது நல்லது, நீங்கள் மிகவும் அழகாக இல்லை.
ஓ ஸ்னாப்! சில விஷயங்களை மாற்றி மீண்டும் சமர்ப்பிக்க முயற்சிக்கவும்.
நிராகரிக்கக்கூடிய விழிப்பூட்டல்கள்
.alert-dismissibleவிருப்பமான மற்றும் மூடு பட்டனைச் சேர்ப்பதன் மூலம் எந்த விழிப்பூட்டலையும் உருவாக்கவும் .
எளிமையான மற்றும் நெகிழ்வான முன்னேற்றப் பட்டிகளுடன் பணிப்பாய்வு அல்லது செயலின் முன்னேற்றம் குறித்த புதுப்பித்த கருத்தை வழங்கவும்.
குறுக்கு உலாவி இணக்கத்தன்மை
முன்னேற்றப் பார்கள் அவற்றின் சில விளைவுகளை அடைய CSS3 மாற்றங்கள் மற்றும் அனிமேஷன்களைப் பயன்படுத்துகின்றன. இந்த அம்சங்கள் Internet Explorer 9 மற்றும் அதற்குக் கீழே உள்ள அல்லது Firefox இன் பழைய பதிப்புகளில் ஆதரிக்கப்படவில்லை. ஓபரா 12 அனிமேஷன்களை ஆதரிக்காது.
உள்ளடக்க பாதுகாப்புக் கொள்கை (CSP) இணக்கத்தன்மை
உங்கள் இணையதளத்தில் உள்ளடக்கப் பாதுகாப்புக் கொள்கை (CSP) இருந்தால், அது அனுமதிக்காது , கீழே உள்ள எடுத்துக்காட்டுகளில் காட்டப்பட்டுள்ளபடி, முன்னேற்றப் பட்டியின் அகலங்களை அமைக்க, style-src 'unsafe-inline'இன்லைன் பண்புக்கூறுகளைப் பயன்படுத்த முடியாது . styleகடுமையான CSPகளுடன் இணக்கமான அகலங்களை அமைப்பதற்கான மாற்று முறைகள், சிறிய தனிப்பயன் ஜாவாஸ்கிரிப்ட் (அது அமைக்கிறது element.style.width) அல்லது தனிப்பயன் CSS வகுப்புகளைப் பயன்படுத்துவது ஆகியவை அடங்கும்.
அடிப்படை உதாரணம்
இயல்புநிலை முன்னேற்றப் பட்டி.
60% முடிந்தது
முத்திரையுடன்
புலப்படும் சதவீதத்தைக் காட்ட, முன்னேற்றப் பட்டியில் உள்ள வகுப்பை <span>அகற்றவும் ..sr-only
60%
குறைந்த சதவீதத்திற்கும் கூட லேபிள் உரை தெளிவாக இருப்பதை உறுதிசெய்ய, min-widthமுன்னேற்றப் பட்டியில் சேர்ப்பதைக் கவனியுங்கள்.
0%
2%
சூழ்நிலை மாற்றுகள்
ப்ரோக்ரஸ் பார்கள் ஒரே மாதிரியான சில பொத்தான்களைப் பயன்படுத்துகின்றன மற்றும் சீரான பாணிகளுக்கு விழிப்பூட்டல் வகுப்புகளைப் பயன்படுத்துகின்றன.
40% முடிந்தது (வெற்றி)
20% முடிந்தது
60% முடிந்தது (எச்சரிக்கை)
80% முடிந்தது (ஆபத்து)
கோடிட்ட
ஒரு கோடிட்ட விளைவை உருவாக்க ஒரு சாய்வு பயன்படுத்துகிறது. IE9 மற்றும் கீழே கிடைக்காது.
40% முடிந்தது (வெற்றி)
20% முடிந்தது
60% முடிந்தது (எச்சரிக்கை)
80% முடிந்தது (ஆபத்து)
அனிமேஷன்
கோடுகளை வலமிருந்து இடமாக அனிமேஷன் செய்ய to ஐ .activeசேர்க்கவும் . .progress-bar-stripedIE9 மற்றும் கீழே கிடைக்காது.
45% முடிந்தது
அடுக்கப்பட்ட
பல பார்களை .progressஅடுக்கி வைக்கவும்.
35% முடிந்தது (வெற்றி)
20% முடிந்தது (எச்சரிக்கை)
10% முடிந்தது (ஆபத்து)
ஊடக பொருள்
உரை உள்ளடக்கத்துடன் இடது அல்லது வலது-சீரமைக்கப்பட்ட படத்தைக் கொண்டிருக்கும் பல்வேறு வகையான கூறுகளை (வலைப்பதிவு கருத்துகள், கீச்சுகள் போன்றவை) உருவாக்குவதற்கான சுருக்க பொருள் பாணிகள்.
இயல்புநிலை ஊடகம்
இயல்புநிலை ஊடகமானது உள்ளடக்கத் தொகுதியின் இடது அல்லது வலதுபுறத்தில் மீடியா பொருளை (படங்கள், வீடியோ, ஆடியோ) காட்டுகிறது.
ஊடக தலைப்பு
க்ராஸ் சிட் அமெட் நிப் லிபரோ, கிராவிட நுல்லாவில். நுல்ல வெல் மெட்டஸ் ஸ்கெலரிஸ்க் அன்டே சொல்லிசிடுடின் கொமோடோ. க்ராஸ் புருஸ் ஓடியோ, வெஸ்டிபுலம் இன் வல்புடேட் அட், டெம்பஸ் விவர்ரா டர்பிஸ். Fusce condimentum nunc ac nisi vulputate fringilla. ஃபாசிபஸில் உள்ள டோனெக் லாசினியா கொங்கு பெலிஸ்.
ஊடக தலைப்பு
க்ராஸ் சிட் அமெட் நிப் லிபரோ, கிராவிட நுல்லாவில். நுல்ல வெல் மெட்டஸ் ஸ்கெலரிஸ்க் அன்டே சொல்லிசிடுடின் கொமோடோ. க்ராஸ் புருஸ் ஓடியோ, வெஸ்டிபுலம் இன் வல்புடேட் அட், டெம்பஸ் விவர்ரா டர்பிஸ். Fusce condimentum nunc ac nisi vulputate fringilla. ஃபாசிபஸில் உள்ள டோனெக் லாசினியா கொங்கு பெலிஸ்.
உள்ளமைக்கப்பட்ட ஊடக தலைப்பு
க்ராஸ் சிட் அமெட் நிப் லிபரோ, கிராவிட நுல்லாவில். நுல்ல வெல் மெட்டஸ் ஸ்கெலரிஸ்க் அன்டே சொல்லிசிடுடின் கொமோடோ. க்ராஸ் புருஸ் ஓடியோ, வெஸ்டிபுலம் இன் வல்புடேட் அட், டெம்பஸ் விவர்ரா டர்பிஸ். Fusce condimentum nunc ac nisi vulputate fringilla. ஃபாசிபஸில் உள்ள டோனெக் லாசினியா கொங்கு பெலிஸ்.
வகுப்புகள் .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. கம் சோசியஸ் நேடோக் பெனாடிபஸ் மற்றும் மேக்னிஸ் டிஸ் பார்டூரியண்ட் மான்டெஸ், நாஸ்கெட்டூர் ரிடிகுலஸ் மஸ்.
மீடியா பட்டியல்
கூடுதல் மார்க்அப் மூலம், நீங்கள் பட்டியலில் உள்ள மீடியாவைப் பயன்படுத்தலாம் (கருத்து நூல்கள் அல்லது கட்டுரைகள் பட்டியல்களுக்குப் பயன்படும்).
பட்டியல் குழுக்கள் ஒரு நெகிழ்வான மற்றும் சக்திவாய்ந்த கூறுகளாகும், அவை உறுப்புகளின் எளிய பட்டியல்களை மட்டும் காட்டாது, ஆனால் தனிப்பயன் உள்ளடக்கத்துடன் சிக்கலானவை.
அடிப்படை உதாரணம்
மிக அடிப்படையான பட்டியல் குழு என்பது பட்டியல் உருப்படிகள் மற்றும் சரியான வகுப்புகள் கொண்ட வரிசைப்படுத்தப்படாத பட்டியல் ஆகும். பின் வரும் விருப்பங்கள் அல்லது தேவைக்கேற்ப உங்கள் சொந்த CSS மூலம் அதை உருவாக்கவும்.
க்ராஸ் ஜஸ்டோ ஓடியோ
டாபிபஸ் ஏசி வசதி
மோர்பி லியோ ரிசஸ்
போர்டா ஏசி கன்செக்டெர் ஏசி
வெஸ்டிபுலம் அட் ஈரோஸ்
பேட்ஜ்கள்
எந்தவொரு பட்டியல் குழு உருப்படியிலும் பேட்ஜ்களின் கூறுகளைச் சேர்க்கவும், அது தானாகவே வலதுபுறத்தில் நிலைநிறுத்தப்படும்.
14க்ராஸ் ஜஸ்டோ ஓடியோ
2டாபிபஸ் ஏசி வசதி
1மோர்பி லியோ ரிசஸ்
இணைக்கப்பட்ட பொருட்கள்
பட்டியல் உருப்படிகளுக்குப் பதிலாக நங்கூரம் குறிச்சொற்களைப் பயன்படுத்துவதன் மூலம் பட்டியல் குழு உருப்படிகளை இணைக்கவும் (இது ஒரு பெற்றோருக்குப் <div>பதிலாக பெற்றோர் என்றும் பொருள்படும் <ul>). ஒவ்வொரு உறுப்புக்கும் தனிப்பட்ட பெற்றோர் தேவையில்லை.
பட்டியல் குழு உருப்படிகள் பட்டியல் உருப்படிகளுக்குப் பதிலாக பொத்தான்களாக இருக்கலாம் (இது ஒரு பெற்றோருக்குப் <div>பதிலாக பெற்றோர் என்றும் பொருள்படும் <ul>). ஒவ்வொரு உறுப்புக்கும் தனிப்பட்ட பெற்றோர் தேவையில்லை. இங்கே நிலையான வகுப்புகளைப் பயன்படுத்த வேண்டாம் ..btn
முடக்கப்பட்ட பொருட்கள்
செயலிழந்ததாகத் தோன்ற, அதை சாம்பல் நிறத்தில் சேர்க்கவும் .disabled..list-group-item
எப்போதும் தேவையில்லை என்றாலும், சில நேரங்களில் உங்கள் DOM ஐ ஒரு பெட்டியில் வைக்க வேண்டும். அந்த சூழ்நிலைகளுக்கு, பேனல் கூறுகளை முயற்சிக்கவும்.
அடிப்படை உதாரணம்
முன்னிருப்பாக, .panelசில அடிப்படை பார்டர் மற்றும் பேடிங்கைப் பயன்படுத்தினால் சில உள்ளடக்கம் இருக்கும்.
அடிப்படை பேனல் உதாரணம்
தலைப்பு கொண்ட குழு
உடன் உங்கள் பேனலில் தலைப்புக் கொள்கலனை எளிதாகச் சேர்க்கவும் .panel-heading. முன் பாணியில் தலைப்பைச் சேர்க்க, நீங்கள் எதையும் சேர்க்கலாம் <h1>- <h6>வகுப்புடன் .panel-title. இருப்பினும், எழுத்துரு அளவுகள் <h1>- <h6>ஆல் மேலெழுதப்படுகின்றன .panel-heading.
சரியான இணைப்பு வண்ணத்திற்கு, உள்ள தலைப்புகளில் இணைப்புகளை வைக்க மறக்காதீர்கள் .panel-title.
தலைப்பு இல்லாமல் பேனல் தலைப்பு
பேனல் உள்ளடக்கம்
பேனல் தலைப்பு
பேனல் உள்ளடக்கம்
அடிக்குறிப்புடன் கூடிய பேனல்
இல் பொத்தான்கள் அல்லது இரண்டாம் நிலை உரையை மடக்கு .panel-footer. பேனல் அடிக்குறிப்புகள் , சூழல் மாறுபாடுகளைப் பயன்படுத்தும் போது, அவை முன்புறத்தில் இருக்கக் கூடாது என்பதால், அவை வண்ணங்களையும் எல்லைகளையும் பெறாது என்பதை நினைவில் கொள்ளவும் .
பேனல் உள்ளடக்கம்
சூழ்நிலை மாற்றுகள்
பிற கூறுகளைப் போலவே, ஒரு குறிப்பிட்ட சூழலுக்கு ஒரு பேனலை மிகவும் அர்த்தமுள்ளதாக மாற்றவும்.
பேனல் தலைப்பு
பேனல் உள்ளடக்கம்
பேனல் தலைப்பு
பேனல் உள்ளடக்கம்
பேனல் தலைப்பு
பேனல் உள்ளடக்கம்
பேனல் தலைப்பு
பேனல் உள்ளடக்கம்
பேனல் தலைப்பு
பேனல் உள்ளடக்கம்
அட்டவணைகளுடன்
.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
பேனல் பாடி இல்லை என்றால், பேனல் ஹெடரில் இருந்து டேபிளுக்கு இடையூறு இல்லாமல் கூறு நகரும்.
சில இயல்புநிலை பேனல் உள்ளடக்கம் இங்கே. Nulla vitae elit libero, a pharetra ague. ஏனியன் லாசினியா பைபெண்டம் நுல்லா செட் கன்செக்டெடர். ஏனியன் யூ லியோ குவாம். Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies வாகனங்கள் ut id elit.
க்ராஸ் ஜஸ்டோ ஓடியோ
டாபிபஸ் ஏசி வசதி
மோர்பி லியோ ரிசஸ்
போர்டா ஏசி கன்செக்டெர் ஏசி
வெஸ்டிபுலம் அட் ஈரோஸ்
பதிலளிக்கக்கூடிய உட்பொதிவு
எந்தவொரு சாதனத்திலும் சரியாக அளவிடக்கூடிய உள்ளார்ந்த விகிதத்தை உருவாக்குவதன் மூலம், அவை கொண்டிருக்கும் தொகுதியின் அகலத்தின் அடிப்படையில் வீடியோ அல்லது ஸ்லைடுஷோ பரிமாணங்களைத் தீர்மானிக்க உலாவிகளை அனுமதிக்கவும்.
விதிகள் நேரடியாக <iframe>, <embed>, <video>, மற்றும் <object>உறுப்புகளுக்குப் பயன்படுத்தப்படுகின்றன; .embed-responsive-itemநீங்கள் மற்ற பண்புக்கூறுகளுக்கு ஸ்டைலிங் பொருத்த விரும்பினால் வெளிப்படையான சந்ததி வகுப்பைப் பயன்படுத்தவும்.
சார்பு உதவிக்குறிப்பு! உங்களுக்காக நாங்கள் மேலெழுதுவதால் frameborder="0", உங்கள் களில் நீங்கள் சேர்க்க வேண்டியதில்லை .<iframe>
கிணறுகள்
இயல்புநிலை நன்றாக
ஒரு உறுப்புக்கு ஒரு உட்செலுத்துதல் விளைவைக் கொடுக்க, கிணற்றை எளிய விளைவாகப் பயன்படுத்தவும்.
பார், நான் கிணற்றில் இருக்கிறேன்!
விருப்ப வகுப்புகள்
இரண்டு விருப்ப மாற்றியமைக்கும் வகுப்புகளுடன் திணிப்பு மற்றும் வட்டமான மூலைகளைக் கட்டுப்படுத்தவும்.