ഗ്ലിഫിക്കോണുകൾ

ലഭ്യമായ ഗ്ലിഫുകൾ

Glyphicon Halflings സെറ്റിൽ നിന്ന് ഫോണ്ട് ഫോർമാറ്റിൽ 250-ലധികം ഗ്ലിഫുകൾ ഉൾപ്പെടുന്നു. Glyphicons Halflings സാധാരണയായി സൗജന്യമായി ലഭ്യമല്ല, എന്നാൽ അവയുടെ സ്രഷ്ടാവ് അവ ബൂട്ട്‌സ്‌ട്രാപ്പിനായി സൗജന്യമായി ലഭ്യമാക്കിയിട്ടുണ്ട്. നന്ദി എന്ന നിലയിൽ, സാധ്യമാകുമ്പോഴെല്ലാം Glyphicons- ലേക്ക് തിരികെ ഒരു ലിങ്ക് ഉൾപ്പെടുത്തണമെന്ന് ഞങ്ങൾ ആവശ്യപ്പെടുന്നു.

  • ഗ്ലിഫിക്കോൺ ഗ്ലിഫിക്കോൺ-നക്ഷത്രചിഹ്നം
  • glyphicon glyphicon-plus
  • glyphicon glyphicon-യൂറോ
  • glyphicon glyphicon-eur
  • glyphicon glyphicon-minus
  • ഗ്ലിഫിക്കൺ ഗ്ലിഫിക്കൺ-മേഘം
  • glyphicon glyphicon-എൻവലപ്പ്
  • glyphicon glyphicon-പെൻസിൽ
  • ഗ്ലിഫിക്കൺ ഗ്ലിഫിക്കൺ-ഗ്ലാസ്
  • glyphicon glyphicon-സംഗീതം
  • glyphicon glyphicon-തിരയൽ
  • glyphicon glyphicon-ഹൃദയം
  • glyphicon glyphicon-star
  • glyphicon glyphicon-നക്ഷത്രം-ശൂന്യം
  • glyphicon glyphicon-ഉപയോക്താവ്
  • glyphicon glyphicon-film
  • glyphicon glyphicon-th-large
  • glyphicon glyphicon-th
  • 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-home
  • glyphicon glyphicon-file
  • glyphicon glyphicon-സമയം
  • glyphicon glyphicon-road
  • glyphicon glyphicon-download-alt
  • glyphicon glyphicon-ഡൗൺലോഡ്
  • glyphicon glyphicon-upload
  • glyphicon glyphicon-ഇൻബോക്സ്
  • glyphicon glyphicon-play-circle
  • glyphicon glyphicon-ആവർത്തിച്ച്
  • glyphicon glyphicon-refresh
  • glyphicon glyphicon-list-alt
  • glyphicon glyphicon-lock
  • ഗ്ലിഫിക്കൺ ഗ്ലിഫിക്കൺ-പതാക
  • glyphicon glyphicon-ഹെഡ്ഫോണുകൾ
  • glyphicon glyphicon-volume-off
  • glyphicon glyphicon-volume-down
  • glyphicon glyphicon-volume-up
  • glyphicon glyphicon-qrcode
  • glyphicon glyphicon-ബാർകോഡ്
  • glyphicon glyphicon-tag
  • glyphicon glyphicon-ടാഗുകൾ
  • glyphicon glyphicon-book
  • glyphicon glyphicon-bookmark
  • glyphicon glyphicon-print
  • glyphicon glyphicon-ക്യാമറ
  • glyphicon glyphicon-font
  • glyphicon glyphicon-bold
  • glyphicon glyphicon-ഇറ്റാലിക്
  • glyphicon glyphicon-text-height
  • 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-move
  • glyphicon glyphicon-step-backward
  • glyphicon glyphicon-വേഗത-പിന്നോക്കം
  • glyphicon glyphicon-പിന്നിലേക്ക്
  • glyphicon glyphicon-play
  • glyphicon glyphicon-pause
  • glyphicon glyphicon-stop
  • glyphicon glyphicon-forward
  • glyphicon glyphicon-ഫാസ്റ്റ്-ഫോർവേഡ്
  • glyphicon glyphicon-step-forward
  • glyphicon glyphicon-Eject
  • glyphicon glyphicon-chevron-left
  • glyphicon glyphicon-chevron-right
  • glyphicon glyphicon-plus-sign
  • glyphicon glyphicon-minus-sign
  • glyphicon glyphicon-remove-sign
  • glyphicon glyphicon-ok-sign
  • glyphicon glyphicon-ചോദ്യ-ചിഹ്നം
  • glyphicon glyphicon-info-sign
  • glyphicon glyphicon-സ്ക്രീൻഷോട്ട്
  • glyphicon glyphicon-റിമൂവ്-സർക്കിൾ
  • glyphicon glyphicon-OK-സർക്കിൾ
  • glyphicon glyphicon-ban-circle
  • glyphicon glyphicon-അമ്പ്-ഇടത്
  • glyphicon glyphicon-അമ്പ്-വലത്
  • 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-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-ഫോൾഡർ-തുറക്കുക
  • glyphicon glyphicon-resize-vertical
  • glyphicon glyphicon-resize-horizontal
  • glyphicon glyphicon-hdd
  • glyphicon glyphicon-bullhorn
  • glyphicon glyphicon-bell
  • glyphicon glyphicon-സർട്ടിഫിക്കറ്റ്
  • glyphicon glyphicon-thumbs-up
  • glyphicon glyphicon-thumbs-down
  • glyphicon glyphicon-കൈ-വലത്
  • glyphicon glyphicon-കൈ-ഇടത്
  • glyphicon glyphicon-ഹാൻഡ്-അപ്പ്
  • glyphicon glyphicon-കൈ-താഴ്ത്തുക
  • glyphicon glyphicon-സർക്കിൾ-അമ്പ്-വലത്
  • glyphicon glyphicon-സർക്കിൾ-അമ്പ്-ഇടത്
  • glyphicon glyphicon-circle-arrow-up
  • glyphicon glyphicon-സർക്കിൾ-അമ്പ്-താഴേക്ക്
  • ഗ്ലിഫിക്കോൺ ഗ്ലിഫിക്കോൺ-ഗ്ലോബ്
  • glyphicon glyphicon-wrench
  • glyphicon glyphicon-ടാസ്കുകൾ
  • glyphicon glyphicon-ഫിൽട്ടർ
  • ഗ്ലിഫിക്കോൺ ഗ്ലിഫിക്കോൺ-ബ്രീഫ്കേസ്
  • glyphicon glyphicon-പൂർണ്ണസ്ക്രീൻ
  • glyphicon glyphicon-ഡാഷ്ബോർഡ്
  • glyphicon glyphicon-paperclip
  • glyphicon glyphicon-ഹൃദയം-ശൂന്യം
  • glyphicon glyphicon-link
  • glyphicon glyphicon-ഫോൺ
  • glyphicon glyphicon-pushpin
  • glyphicon glyphicon-usd
  • glyphicon glyphicon-gbp
  • glyphicon glyphicon-sort
  • ഗ്ലിഫിക്കൺ ഗ്ലിഫിക്കൺ-അക്ഷരക്രമം അനുസരിച്ച്
  • glyphicon glyphicon-sort-by-alphabet-alt
  • glyphicon glyphicon-sort-by-order
  • glyphicon glyphicon-sort-by-order-alt
  • glyphicon glyphicon-sort-by-attributes
  • glyphicon glyphicon-sort-by-attributes-alt
  • glyphicon glyphicon-ചെക്ക് ചെയ്തിട്ടില്ല
  • glyphicon glyphicon-വികസിക്കുക
  • glyphicon glyphicon-collapse-down
  • glyphicon glyphicon-collapse-up
  • glyphicon glyphicon-log-in
  • glyphicon glyphicon-flash
  • glyphicon glyphicon-log-out
  • glyphicon glyphicon-new-window
  • glyphicon glyphicon-record
  • glyphicon glyphicon-save
  • glyphicon glyphicon-തുറന്ന
  • glyphicon glyphicon-സംരക്ഷിച്ചു
  • glyphicon glyphicon-ഇറക്കുമതി
  • glyphicon glyphicon-കയറ്റുമതി
  • glyphicon glyphicon-send
  • glyphicon glyphicon-floppy-disk
  • glyphicon glyphicon-floppy-save
  • glyphicon glyphicon-floppy-remove
  • glyphicon glyphicon-floppy-save
  • glyphicon glyphicon-floppy-open
  • glyphicon glyphicon-ക്രെഡിറ്റ്-കാർഡ്
  • glyphicon glyphicon-കൈമാറ്റം
  • glyphicon glyphicon-കട്ട്ലറി
  • glyphicon glyphicon-header
  • glyphicon glyphicon-compressed
  • glyphicon glyphicon-earphone
  • glyphicon glyphicon-phone-alt
  • glyphicon glyphicon-ടവർ
  • glyphicon glyphicon-stats
  • glyphicon glyphicon-sd-video
  • glyphicon glyphicon-hd-video
  • glyphicon glyphicon-സബ്ടൈറ്റിലുകൾ
  • glyphicon glyphicon-sound-stereo
  • glyphicon glyphicon-sound-dolby
  • glyphicon glyphicon-ശബ്ദം-5-1
  • glyphicon glyphicon-ശബ്ദം-6-1
  • glyphicon glyphicon-ശബ്ദം-7-1
  • glyphicon glyphicon-പകർപ്പവകാശ-മുദ്ര
  • 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-copy
  • glyphicon glyphicon-പേസ്റ്റ്
  • glyphicon glyphicon-അലേർട്ട്
  • glyphicon glyphicon-equalizer
  • glyphicon glyphicon-കിംഗ്
  • glyphicon glyphicon-queen
  • glyphicon glyphicon-pawn
  • glyphicon glyphicon-bishop
  • glyphicon glyphicon-നൈറ്റ്
  • glyphicon glyphicon-baby-formula
  • glyphicon glyphicon-കൂടാരം
  • ഗ്ലിഫിക്കൺ ഗ്ലിഫിക്കൺ-ബ്ലാക്ക്ബോർഡ്
  • glyphicon glyphicon-bed
  • glyphicon glyphicon-apple
  • glyphicon glyphicon-ഇറേസ്
  • glyphicon glyphicon-hourglass
  • 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-റൂബിൾ
  • glyphicon glyphicon-rub
  • glyphicon glyphicon-scale
  • glyphicon glyphicon-ice-lolly
  • glyphicon glyphicon-ice-lolly-tasted
  • glyphicon glyphicon-വിദ്യാഭ്യാസം
  • glyphicon glyphicon-ഓപ്ഷൻ-തിരശ്ചീനം
  • glyphicon glyphicon-option-vertical
  • glyphicon glyphicon-menu-hamburger
  • ഗ്ലിഫിക്കൺ ഗ്ലിഫിക്കൺ-മോഡൽ-വിൻഡോ
  • 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-triangle-top
  • glyphicon glyphicon-console
  • ഗ്ലിഫിക്കോൺ ഗ്ലിഫിക്കോൺ-സൂപ്പർസ്ക്രിപ്റ്റ്
  • glyphicon glyphicon-subscript
  • glyphicon glyphicon-menu-left
  • glyphicon glyphicon-മെനു-വലത്
  • 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

അധിക പൊസിഷനിംഗ് ആവശ്യമായി വന്നേക്കാം

ഡോക്യുമെന്റിന്റെ സാധാരണ ഒഴുക്കിനുള്ളിൽ CSS വഴി ഡ്രോപ്പ്ഡൗണുകൾ സ്വയമേവ സ്ഥാനം പിടിക്കുന്നു. ഇതിനർത്ഥം, ചില overflowപ്രോപ്പർട്ടികൾ ഉള്ള രക്ഷിതാക്കൾ ഡ്രോപ്പ്‌ഡൗണുകൾ ക്രോപ്പ് ചെയ്‌തേക്കാം അല്ലെങ്കിൽ വ്യൂപോർട്ടിന്റെ പരിധിക്ക് പുറത്ത് ദൃശ്യമാകാം. ഈ പ്രശ്നങ്ങൾ ഉണ്ടാകുമ്പോൾ അവ സ്വയം പരിഹരിക്കുക.

ഒഴിവാക്കിയ .pull-rightവിന്യാസം

.pull-rightv3.1.0 മുതൽ, ഡ്രോപ്പ്ഡൗൺ മെനുകളിൽ ഞങ്ങൾ ഒഴിവാക്കിയിരിക്കുന്നു . ഒരു മെനു വലത് വിന്യസിക്കാൻ, ഉപയോഗിക്കുക .dropdown-menu-right. മെനു സ്വയമേവ വിന്യസിക്കാൻ navbar-ലെ വലത് വിന്യസിച്ച nav ഘടകങ്ങൾ ഈ ക്ലാസിന്റെ മിക്‌സിൻ പതിപ്പ് ഉപയോഗിക്കുന്നു. അതിനെ മറികടക്കാൻ, ഉപയോഗിക്കുക .dropdown-menu-left.

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

ലിങ്ക് പ്രവർത്തനരഹിതമാക്കാൻ ഡ്രോപ്പ്ഡൗണിലെ a-ലേക്ക് .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>

ബട്ടൺ ഗ്രൂപ്പുകൾ

ബട്ടൺ ഗ്രൂപ്പിനൊപ്പം ഒരൊറ്റ വരിയിൽ ബട്ടണുകളുടെ ഒരു ശ്രേണി കൂട്ടുക. ഞങ്ങളുടെ ബട്ടണുകൾ പ്ലഗിൻ ഉപയോഗിച്ച് ഓപ്‌ഷണൽ JavaScript റേഡിയോയും ചെക്ക്‌ബോക്‌സ് ശൈലി പെരുമാറ്റവും ചേർക്കുക .

ബട്ടൺ ഗ്രൂപ്പുകളിലെ ടൂൾടിപ്പുകളും പോപോവറുകളും പ്രത്യേക ക്രമീകരണം ആവശ്യമാണ്

ഒരു എന്നതിനുള്ളിലെ ഘടകങ്ങളിൽ ടൂൾടിപ്പുകളോ പോപ്പോവറോ ഉപയോഗിക്കുമ്പോൾ , അനാവശ്യ പാർശ്വഫലങ്ങൾ ഒഴിവാക്കാനുള്ള .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, അതിർത്തികൾ

ഇന്റർനെറ്റ് എക്സ്പ്ലോറർ 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

ഒരൊറ്റ ഇൻപുട്ട് ഗ്രൂപ്പിൽ ഒന്നിലധികം ഫോം-നിയന്ത്രണങ്ങളെ ഞങ്ങൾ പിന്തുണയ്ക്കുന്നില്ല.

@

@example.com

$ .00

https://example.com/users/
<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>

ചെക്ക്ബോക്സുകളും റേഡിയോ ആഡ്ഓണുകളും

ടെക്‌സ്‌റ്റിന് പകരം ഇൻപുട്ട് ഗ്രൂപ്പിന്റെ ആഡ്‌ഓണിൽ ഏതെങ്കിലും ചെക്ക്‌ബോക്‌സോ റേഡിയോ ഓപ്ഷനോ സ്ഥാപിക്കുക.

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

നവ്സ്

ബൂട്ട്‌സ്‌ട്രാപ്പിൽ ലഭ്യമായ Navs മാർക്ക്അപ്പ് പങ്കിട്ടു, അടിസ്ഥാന .navക്ലാസിൽ തുടങ്ങി, പങ്കിട്ട സ്റ്റേറ്റുകളും. ഓരോ ശൈലിയിലും മാറാൻ മോഡിഫയർ ക്ലാസുകൾ സ്വാപ്പ് ചെയ്യുക.

ടാബ് പാനലുകൾക്കായി navs ഉപയോഗിക്കുന്നതിന് JavaScript ടാബ്സ് പ്ലഗിൻ ആവശ്യമാണ്

ടാബബിൾ ഏരിയകളുള്ള ടാബുകൾക്കായി, നിങ്ങൾ ടാബുകൾ ഉപയോഗിക്കണം JavaScript പ്ലഗിൻ . മാർക്ക്അപ്പിന് അധികവും ARIA ആട്രിബ്യൂട്ടുകളും ആവശ്യമാണ് - കൂടുതൽ വിശദാംശങ്ങൾക്ക് roleപ്ലഗിന്റെ ഉദാഹരണ മാർക്ക്അപ്പ് കാണുക.

നാവിഗേഷനായി ഉപയോഗിക്കുന്ന navs ആക്സസ് ചെയ്യാവുന്നതാക്കുക

ഒരു നാവിഗേഷൻ ബാർ നൽകാൻ നിങ്ങൾ 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. ചെറിയ സ്‌ക്രീനുകളിൽ, നാവിക ലിങ്കുകൾ അടുക്കിയിരിക്കുന്നു.

ന്യായീകരിക്കപ്പെട്ട navbar nav ലിങ്കുകൾ നിലവിൽ പിന്തുണയ്ക്കുന്നില്ല.

സഫാരിയും പ്രതികരിക്കുന്ന ന്യായമായ നാവുകളും

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>

കുറച്ച് അധിക എച്ച്ടിഎംഎൽ, ഡ്രോപ്പ്ഡൗൺ ജാവാസ്ക്രിപ്റ്റ് പ്ലഗിൻ എന്നിവ ഉപയോഗിച്ച് ഡ്രോപ്പ്ഡൗൺ മെനുകൾ ചേർക്കുക .

ഡ്രോപ്പ്ഡൗണുകളുള്ള ടാബുകൾ

<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 ലിങ്കുകൾ നിലവിൽ പിന്തുണയ്ക്കുന്നില്ല.

കവിഞ്ഞൊഴുകുന്ന ഉള്ളടക്കം

നിങ്ങളുടെ നവബാറിലെ ഉള്ളടക്കത്തിന് എത്ര സ്ഥലം ആവശ്യമാണെന്ന് ബൂട്ട്‌സ്‌ട്രാപ്പിന് അറിയാത്തതിനാൽ, രണ്ടാമത്തെ വരിയിലേക്ക് ഉള്ളടക്കം പൊതിയുന്നതിൽ നിങ്ങൾക്ക് പ്രശ്‌നങ്ങൾ നേരിടാം. ഇത് പരിഹരിക്കാൻ, നിങ്ങൾക്ക് ഇവ ചെയ്യാനാകും:

  1. നവബാർ ഇനങ്ങളുടെ അളവോ വീതിയോ കുറയ്ക്കുക.
  2. റെസ്‌പോൺസീവ് യൂട്ടിലിറ്റി ക്ലാസുകൾ ഉപയോഗിച്ച് ചില സ്‌ക്രീൻ വലുപ്പങ്ങളിൽ ചില navbar ഇനങ്ങൾ മറയ്‌ക്കുക .
  3. ചുരുക്കിയ മോഡിനും തിരശ്ചീന മോഡിനുമിടയിൽ നിങ്ങളുടെ നാവ്ബാർ മാറുന്ന പോയിന്റ് മാറ്റുക. വേരിയബിൾ ഇഷ്ടാനുസൃതമാക്കുക @grid-float-breakpointഅല്ലെങ്കിൽ നിങ്ങളുടെ സ്വന്തം മീഡിയ അന്വേഷണം ചേർക്കുക.

JavaScript പ്ലഗിൻ ആവശ്യമാണ്

JavaScript അപ്രാപ്‌തമാക്കുകയും വ്യൂപോർട്ട് ഇടുങ്ങിയതാണെങ്കിൽ നവബാർ തകരുകയും ചെയ്‌താൽ, നവബാർ വിപുലീകരിക്കാനും ഉള്ളിലെ ഉള്ളടക്കം കാണാനും കഴിയില്ല .navbar-collapse.

പ്രതികരിക്കുന്ന നാവ്‌ബാറിന് നിങ്ങളുടെ ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ പതിപ്പിൽ സങ്കോച പ്ലഗിൻ ഉൾപ്പെടുത്തേണ്ടതുണ്ട്.

തകർന്ന മൊബൈൽ നവ്‌ബാർ ബ്രേക്ക്‌പോയിന്റ് മാറ്റുന്നു

വ്യൂപോർട്ട് എന്നതിനേക്കാൾ ഇടുങ്ങിയിരിക്കുമ്പോൾ നവബാർ അതിന്റെ ലംബമായ മൊബൈൽ കാഴ്‌ചയിലേക്ക് തകരുകയും @grid-float-breakpointവ്യൂപോർട്ട് കുറഞ്ഞത് @grid-float-breakpointവീതിയിലായിരിക്കുമ്പോൾ അതിന്റെ തിരശ്ചീനമായ നോൺ-മൊബൈൽ കാഴ്‌ചയിലേക്ക് വികസിക്കുകയും ചെയ്യുന്നു. നവബാർ തകരുമ്പോൾ/വികസിക്കുന്നത് നിയന്ത്രിക്കാൻ ഈ വേരിയബിൾ ലെസ് സോഴ്സിൽ ക്രമീകരിക്കുക. സ്ഥിര മൂല്യം 768px(ഏറ്റവും ചെറിയ "ചെറിയ" അല്ലെങ്കിൽ "ടാബ്ലെറ്റ്" സ്ക്രീൻ) ആണ്.

നവബാറുകൾ ആക്സസ് ചെയ്യാവുന്നതാക്കുക

ഒരു ഘടകം ഉപയോഗിക്കുന്നത് ഉറപ്പാക്കുക <nav>അല്ലെങ്കിൽ, ഒരു പോലെയുള്ള കൂടുതൽ പൊതുവായ ഘടകം ഉപയോഗിക്കുകയാണെങ്കിൽ, സഹായ സാങ്കേതികവിദ്യകളുടെ ഉപയോക്താക്കൾക്കുള്ള ഒരു ലാൻഡ്മാർക്ക് പ്രദേശമായി അതിനെ വ്യക്തമായി തിരിച്ചറിയുന്നതിന് എല്ലാ നാവ്ബാറിലേക്കും <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 ഉള്ളടക്കത്തിനുള്ളിൽ അത് എവിടെയാണ് താമസിക്കുന്നതെന്ന് തീരുമാനിക്കാൻ വിന്യാസ ഓപ്ഷനുകൾ ഉപയോഗിക്കുക.

ഒരു മുന്നറിയിപ്പ് എന്ന നിലയിൽ .navbar-form, അതിന്റെ കോഡിന്റെ ഭൂരിഭാഗവും .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-rightക്ലാസുകളുള്ള ഒരു പരിമിതിയുണ്ട്. ശരിയായ സ്പേസ് ഉള്ളടക്കത്തിന്, അവസാന .navbar-rightഘടകത്തിൽ ഞങ്ങൾ നെഗറ്റീവ് മാർജിൻ ഉപയോഗിക്കുന്നു. ആ ക്ലാസ് ഉപയോഗിക്കുന്ന ഒന്നിലധികം ഘടകങ്ങൾ ഉള്ളപ്പോൾ, ഈ മാർജിനുകൾ ഉദ്ദേശിച്ച രീതിയിൽ പ്രവർത്തിക്കില്ല.

ആ ഘടകം v4-ൽ വീണ്ടും എഴുതാൻ കഴിയുമ്പോൾ ഞങ്ങൾ ഇത് വീണ്ടും സന്ദർശിക്കും.

.navbar-fixed-topഒരു .containerഅല്ലെങ്കിൽ .container-fluidകേന്ദ്രത്തിലേക്കും പാഡ് നവബാർ ഉള്ളടക്കത്തിലേക്കും ചേർക്കുകയും ഉൾപ്പെടുത്തുകയും ചെയ്യുക.

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

ബോഡി പാഡിംഗ് ആവശ്യമാണ്

ഫിക്സഡ് നാവ്ബാർ നിങ്ങളുടെ മറ്റ് ഉള്ളടക്കം ഓവർലേ ചെയ്യും, നിങ്ങൾ paddingഎന്നതിന്റെ മുകളിൽ ചേർക്കുന്നില്ലെങ്കിൽ <body>. നിങ്ങളുടെ സ്വന്തം മൂല്യങ്ങൾ പരീക്ഷിക്കുക അല്ലെങ്കിൽ ചുവടെയുള്ള ഞങ്ങളുടെ സ്‌നിപ്പറ്റ് ഉപയോഗിക്കുക. നുറുങ്ങ്: ഡിഫോൾട്ടായി, navbar 50px ഉയരത്തിലാണ്.

body { padding-top: 70px; }

കോർ ബൂട്ട്‌സ്‌ട്രാപ്പ് CSS- ന് ശേഷം ഇത് ഉൾപ്പെടുത്തുന്നത് ഉറപ്പാക്കുക .

.navbar-fixed-bottomഒരു .containerഅല്ലെങ്കിൽ .container-fluidകേന്ദ്രത്തിലേക്കും പാഡ് നവബാർ ഉള്ളടക്കത്തിലേക്കും ചേർക്കുകയും ഉൾപ്പെടുത്തുകയും ചെയ്യുക.

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

ബോഡി പാഡിംഗ് ആവശ്യമാണ്

ഫിക്സഡ് നാവ്ബാർ നിങ്ങളുടെ മറ്റ് ഉള്ളടക്കം ഓവർലേ ചെയ്യും, നിങ്ങൾ paddingഎന്നതിന്റെ അടിയിലേക്ക് ചേർക്കുന്നില്ലെങ്കിൽ <body>. നിങ്ങളുടെ സ്വന്തം മൂല്യങ്ങൾ പരീക്ഷിക്കുക അല്ലെങ്കിൽ ചുവടെയുള്ള ഞങ്ങളുടെ സ്‌നിപ്പറ്റ് ഉപയോഗിക്കുക. നുറുങ്ങ്: ഡിഫോൾട്ടായി, navbar 50px ഉയരത്തിലാണ്.

body { padding-bottom: 70px; }

കോർ ബൂട്ട്‌സ്‌ട്രാപ്പ് CSS- ന് ശേഷം ഇത് ഉൾപ്പെടുത്തുന്നത് ഉറപ്പാക്കുക .

ഒരു പൂർണ്ണ വീതിയുള്ള നാവ്‌ബാർ സൃഷ്‌ടിക്കുക, അത് ഒരു അല്ലെങ്കിൽ കേന്ദ്രത്തിലേക്കും പാഡ് നാവ്‌ബാർ ഉള്ളടക്കം ചേർത്തും .navbar-static-topഉൾപ്പെടുത്തിയും പേജിനൊപ്പം സ്‌ക്രോൾ ചെയ്യുന്നു..container.container-fluid

ക്ലാസുകളിൽ നിന്ന് വ്യത്യസ്തമായി .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>

സ്വയം തകരുന്നു

പുതിയതോ വായിക്കാത്തതോ ആയ ഇനങ്ങളൊന്നും ഇല്ലെങ്കിൽ, :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>

ജംബോട്രോൺ പൂർണ്ണ വീതിയും വൃത്താകൃതിയിലുള്ള കോണുകളുമില്ലാതെയാക്കാൻ, എല്ലാ .containers-ന്റെയും പുറത്ത് വയ്ക്കുക, പകരം .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-പോലുള്ള അവതരണമാണ് നിങ്ങൾ തിരയുന്നതെങ്കിൽ, നിങ്ങൾ Masonry , Isotope , അല്ലെങ്കിൽ Salvattore പോലുള്ള ഒരു മൂന്നാം കക്ഷി പ്ലഗിൻ ഉപയോഗിക്കേണ്ടതുണ്ട് .

സ്ഥിര ഉദാഹരണം

ഡിഫോൾട്ടായി, ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ ലഘുചിത്രങ്ങൾ രൂപകൽപ്പന ചെയ്‌തിരിക്കുന്നത് ഏറ്റവും കുറഞ്ഞ ആവശ്യമായ മാർക്ക്അപ്പ് ഉപയോഗിച്ച് ലിങ്ക് ചെയ്‌ത ചിത്രങ്ങൾ പ്രദർശിപ്പിക്കുന്നതിനാണ്.

<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ഒരു ഓപ്‌ഷണലും ക്ലോസ് ബട്ടണും ചേർത്ത് ഏത് അലേർട്ടിലും ബിൽഡ് ചെയ്യുക .

JavaScript അലേർട്ട് പ്ലഗിൻ ആവശ്യമാണ്

പൂർണ്ണമായി പ്രവർത്തിക്കുന്ന, നിരസിക്കാവുന്ന അലേർട്ടുകൾക്കായി, നിങ്ങൾ ജാവാസ്ക്രിപ്റ്റ് പ്ലഗിൻ അലേർട്ടുകൾ ഉപയോഗിക്കണം .

<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-ന്റെ പഴയ പതിപ്പുകളിലും പിന്തുണയ്ക്കുന്നില്ല. Opera 12 ആനിമേഷനുകളെ പിന്തുണയ്ക്കുന്നില്ല.

ഉള്ളടക്ക സുരക്ഷാ നയം (CSP) അനുയോജ്യത

നിങ്ങളുടെ വെബ്‌സൈറ്റിന് അനുവദനീയമല്ലാത്ത ഒരു ഉള്ളടക്ക സുരക്ഷാ നയം (CSP) ഉണ്ടെങ്കിൽ, ചുവടെയുള്ള ഞങ്ങളുടെ ഉദാഹരണങ്ങളിൽ കാണിച്ചിരിക്കുന്നതുപോലെ പുരോഗതി ബാർ വീതികൾ സജ്ജീകരിക്കുന്നതിന് style-src 'unsafe-inline'നിങ്ങൾക്ക് ഇൻലൈൻ ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിക്കാൻ കഴിയില്ല . styleകർശനമായ CSP-കൾക്ക് അനുയോജ്യമായ വീതികൾ സജ്ജീകരിക്കുന്നതിനുള്ള ഇതര രീതികളിൽ കുറച്ച് ഇഷ്‌ടാനുസൃത ജാവാസ്ക്രിപ്റ്റ് (അത് സെറ്റ് ചെയ്യുന്നു element.style.width) അല്ലെങ്കിൽ ഇഷ്‌ടാനുസൃത CSS ക്ലാസുകൾ ഉപയോഗിക്കുന്നത് ഉൾപ്പെടുന്നു.

അടിസ്ഥാന ഉദാഹരണം

ഡിഫോൾട്ട് പ്രോഗ്രസ് ബാർ.

60% പൂർത്തിയായി
<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>

സന്ദർഭോചിതമായ ഇതരമാർഗങ്ങൾ

പ്രോഗ്രസ് ബാറുകൾ സ്ഥിരമായ ശൈലികൾക്കായി ഒരേ ബട്ടണും അലേർട്ട് ക്ലാസുകളും ഉപയോഗിക്കുന്നു.

40% പൂർത്തിയായി (വിജയം)
20% പൂർത്തിയായി
60% പൂർത്തിയായി (മുന്നറിയിപ്പ്)
80% പൂർത്തിയായി (അപകടം)
<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-ലും താഴെയും ലഭ്യമല്ല.

40% പൂർത്തിയായി (വിജയം)
20% പൂർത്തിയായി
60% പൂർത്തിയായി (മുന്നറിയിപ്പ്)
80% പൂർത്തിയായി (അപകടം)
<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-ലും താഴെയും ലഭ്യമല്ല.

45% പൂർത്തിയായി
<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വയ്ക്കാൻ വയ്ക്കുക.

35% പൂർത്തിയായി (വിജയം)
20% പൂർത്തിയായി (മുന്നറിയിപ്പ്)
10% പൂർത്തിയായി (അപക���ം)
<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കൂടാതെ html ന് .media-rightശേഷം .media-rightസ്ഥാപിക്കണം ..media-body

മീഡിയ വിന്യാസം

ചിത്രങ്ങളോ മറ്റ് മീഡിയയോ മുകളിലോ മധ്യത്തിലോ താഴെയോ വിന്യസിക്കാനാകും. ഡിഫോൾട്ട് മുകളിൽ വിന്യസിച്ചിരിക്കുന്നു.

മുകളിൽ വിന്യസിച്ച മീഡിയ

ക്രാസ് സിറ്റ് അമെറ്റ് നിബ് ലിബറോ, ഗ്രാവിഡ നുള്ളയിൽ. നുള്ള വേൽ മെറ്റസ് സ്‌സെലറിസ്‌ക് ആന്റി സോളിസിറ്റുഡിൻ കൊമോഡോ. ക്രാസ് പുരസ് ഒഡിയോ, വെസ്റ്റിബുലം ഇൻ വൾപുട്ടേറ്റ് അറ്റ്, ടെമ്പസ് വിവേര ടർപിസ്. Fusce condimentum nunc ac nisi vulputate fringilla. ഡൊനെക് ലാസിനിയ കോൺഗ് ഫെലിസ് ഇൻ ഫൗസിബസ്.

ഡോനെക് സെഡ് ഒഡിയോ ദുയി. Nullam quis risus eget urna mollis ornare vel Eu leo. കം സോഷ്യസ് നാറ്റോക്ക് പെനാറ്റിബസ് എറ്റ് മാഗ്നിസ് ഡിസ് പാർച്യൂറിയന്റ് മോണ്ടസ്, നസ്സെതുർ റിഡിക്കുലസ് മസ്.

മിഡിൽ അലൈൻ ചെയ്ത മീഡിയ

ക്രാസ് സിറ്റ് അമെറ്റ് നിബ് ലിബറോ, ഗ്രാവിഡ നുള്ളയിൽ. നുള്ള വേൽ മെറ്റസ് സ്‌സെലറിസ്‌ക് ആന്റി സോളിസിറ്റുഡിൻ കൊമോഡോ. ക്രാസ് പുരസ് ഒഡിയോ, വെസ്റ്റിബുലം ഇൻ വൾപുട്ടേറ്റ് അറ്റ്, ടെമ്പസ് വിവേര ടർപിസ്. Fusce condimentum nunc ac nisi vulputate fringilla. ഡൊനെക് ലാസിനിയ കോൺഗ് ഫെലിസ് ഇൻ ഫൗസിബസ്.

ഡോനെക് സെഡ് ഒഡിയോ ദുയി. Nullam quis risus eget urna mollis ornare vel Eu leo. കം സോഷ്യസ് നാറ്റോക്ക് പെനാറ്റിബസ് എറ്റ് മാഗ്നിസ് ഡിസ് പാർച്യൂറിയന്റ് മോണ്ടസ്, നസ്സെതുർ റിഡിക്കുലസ് മസ്.

താഴെ വിന്യസിച്ച മീഡിയ

ക്രാസ് സിറ്റ് അമെറ്റ് നിബ് ലിബറോ, ഗ്രാവിഡ നുള്ളയിൽ. നുള്ള വേൽ മെറ്റസ് സ്‌സെലറിസ്‌ക് ആന്റി സോളിസിറ്റുഡിൻ കൊമോഡോ. ക്രാസ് പുരസ് ഒഡിയോ, വെസ്റ്റിബുലം ഇൻ വൾപുട്ടേറ്റ് അറ്റ്, ടെമ്പസ് വിവേര ടർപിസ്. Fusce condimentum nunc ac nisi vulputate fringilla. ഡൊനെക് ലാസിനിയ കോൺഗ് ഫെലിസ് ഇൻ ഫൗസിബസ്.

ഡോനെക് സെഡ് ഒഡിയോ ദുയി. 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 ചേർക്കുക.

<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. എനിയൻ ലാസിനിയ ബിബെൻഡം നുള്ള സെഡ് കൺസെക്റ്റേറ്റർ. എനിയൻ ഇയു ലിയോ ക്വാം. പെല്ലെന്റസ്‌ക്യൂ ഓർനാരെ സെം ലാസിനിയ ക്വാം വെനനാറ്റിസ് വെസ്റ്റിബുലം. Nullam id dolor id nibh ultricies വാഹനങ്ങൾ ut id elit.

# പേരിന്റെ ആദ്യഭാഗം പേരിന്റെ അവസാന ഭാഗം ഉപയോക്തൃനാമം
1 അടയാളപ്പെടുത്തുക ഓട്ടോ @mdo
2 ജേക്കബ് തോൺടൺ @കൊഴുപ്പ്
3 ലാറി പക്ഷി @ട്വിറ്റർ
<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 ലാറി പക്ഷി @ട്വിറ്റർ
<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. എനിയൻ ലാസിനിയ ബിബെൻഡം നുള്ള സെഡ് കൺസെക്റ്റേറ്റർ. എനിയൻ ഇയു ലിയോ ക്വാം. പെല്ലെന്റസ്‌ക്യൂ ഓർനാരെ സെം ലാസിനിയ ക്വാം വെനനാറ്റിസ് വെസ്റ്റിബുലം. 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"നിങ്ങളുടെ s- ൽ ഉൾപ്പെടുത്തേണ്ടതില്ല .<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>