Кнопка төркемнәре

Бер составлы компонент буларак берничә төймәгә кушылу өчен төймә төркемнәрен кулланыгыз. <a>Аларны бер-бер артлы яки <button>элементлар белән төзегез .

Иң яхшы тәҗрибәләр

Без төймә төркемнәрен һәм кораллар тактасын куллану өчен түбәндәге күрсәтмәләрне тәкъдим итәбез:

• Buttonәрвакыт бер төймә төркемендә бер үк элементны кулланыгыз, <a>яки <button>.
• Бер үк төймә төркемендә төрле төстәге төймәләрне кушмагыз.
• Текстка яисә аның урынына иконалар кулланыгыз, ләкин кирәк булганда alt һәм титул текстын кертегез.

Бәйләнешле төймә төркемнәре тамчылары белән (аста карагыз) аерым чакырылырга һәм максатчан тәртипне күрсәтү өчен һәрвакыт тамчы каретны кертергә тиеш.

Килешенгән мисал

HTML ничек анкор тегү төймәләре белән төзелгән стандарт төймә төркемен эзли:

<div class = "btn-group" > 
  <төймә класс = "btn" > 1 </button> 
  <төймә класс = "btn" > 2 </button> 
  <төймә класс = "btn" > 3 </button> 
</div>

Кораллар аскысы

Катлаулы компонентларга комплектларны берләштерегез <div class="btn-group">.<div class="btn-toolbar">

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

Такталар һәм радио тәмләре

Кнопка төркемнәре шулай ук ​​радио булып эшли ала, анда бер генә төймә актив булырга мөмкин, яисә теләсә нинди төймә актив булган пункт. Моның өчен Javascript документларын карагыз .

Javascript алыгыз »

Кнопка төркемнәрендәге тамчылар

Идарә итә! Төшү төймәләре дөрес күрсәтү өчен .btn-groupиндивидуаль рәвештә үзләренә төрелергә тиеш ..btn-toolbar

Гомуми күзәтү һәм мисаллар

Ачылган менюны эшләтеп җибәрү өчен, теләсә нинди төймә кулланыгыз, аны менюга урнаштырыгыз .btn-groupһәм тиешле меню билгесен бирегез.

Мисал билгесе

Кнопка төркеменә охшаган, безнең билгеләр регуляр төймә билгесен куллана, ләкин стильне чистарту һәм Bootstrap тамчысы jQuery плагинына булышу өчен берничә өстәмә белән.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#">   
    Эш
    <span class = "caret" > </span> 
  </a>
  <ul class = "тамчы-меню" > 
    <! - тамчы меню сылтамалары ->
  </ul>
</div>

Барлык төймә зурлыклары белән эшли

Кнопка тамчылары теләсә нинди зурлыкта эшли. сезнең төймә зурлыклары .btn-large, .btn-smallяки .btn-mini.

Javascript кирәк

Кнопка тамчылары Bootstrap тамчы плагинының эшләвен таләп итә.

Кайбер очракларда, мобиль кебек, тамчы менюлар күренеш читендә таралачак. Сезгә тигезләнүне кул белән яки махсус javascript белән чишәргә кирәк.

Гомуми күзәтү һәм мисаллар

Кнопка группасы стильләренә һәм билгеләргә нигезләнеп, без җиңел генә ярылу төймәсен ясый алабыз. Сплит төймәләре сул якта стандарт хәрәкәтне һәм контекст сылтамалар белән уңда тамчы күчү.

Зурлыклар

Өстәмә төймә классларын кулланыгыз .btn-mini, .btn-smallяисә .btn-largeзурлык өчен.

<div class = "btn-group" > 
  ...
  <ul class = "тамчы-меню тарту-уң" > 
    <! - тамчы меню сылтамалары ->
  </ul>
</div>

Мисал билгесе

Аерым тамчы триггеры булып эшләгән икенче төймә хәрәкәтен тәэмин итү өчен без гадәти төймә тамчыларында киңәябез.

<div class = "btn-group" > 
  <төймә класс = "btn" > Эш </button> 
  <төймә класс = "btn тамчы-күчү" мәгълүмат-күчү = "төшү" >  
    <span class = "caret" > </span> 
  </button>
  <ul class = "тамчы-меню" > 
    <! - тамчы меню сылтамалары ->
  </ul>
</div>

Тамчы менюлары

Тамчы менюлары шулай ук ​​ата-анасына бер класс өстәп, астыннан өскә күчерелергә мөмкин .dropdown-menu. Ул юнәлешне борып җибәрәчәк .caretһәм менюның үзен өстән аска түгел, ә астыннан өскә күчерәчәк.

<div class = "btn-group dropup" > 
  <төймә класс = "btn" > Тамчы </button> 
  <төймә класс = "btn тамчы-күчү" мәгълүмат-күчү = "төшү" >  
    <span class = "caret" > </span> 
  </button>
  <ul class = "тамчы-меню" > 
    <! - тамчы меню сылтамалары ->
  </ul>
</div>

Көчле база сыйныфы

Мондагы барлык диңгез компонентлары - таблицалар, таблеткалар, исемлекләр - класс аша бер үк төп билгеләрне һәм стильләрне бүлешәләр ..nav

Кайчан кулланырга

Таблицалар һәм таблеткалар эчтәлек бүлекләре яки бәйләнешле эчтәлек битләре арасында навигация өчен бик яхшы.

Компонент тигезләү

Nav сылтамаларын тигезләү өчен, .pull-leftяисә .pull-rightфайдалы классларны кулланыгыз. Ике класс та күрсәтелгән юнәлештә CSS йөзүен өстәячәк.

Төп салынмалар

Даими <ul>сылтамалар алыгыз һәм өстәгез .nav-tabs:

• Өй
• Профиль
• Хәбәрләр

<ul class = "nav nav-tabs" > 
  <li класс = "актив" > 
    <a href = "#"> Өй </a> _ 
  </li>
  <li> <a href = "#"> ... </a> </li> 
  <li> <a href = "#"> ... </a> </li> 
</ul>

Төп дарулар

Шул ук HTML алыгыз, ләкин .nav-pillsаның урынына кулланыгыз:

• Өй
• Профиль
• Хәбәрләр

<ul class = "nav nav-таблеткалар" > 
  <li класс = "актив" > 
    <a href = "#"> Өй </a> _ 
  </li>
  <li> <a href = "#"> ... </a> </li> 
  <li> <a href = "#"> ... </a> </li> 
</ul>

Ничек урнаштырырга

Таблицалар һәм таблеткалар килешү буенча горизонталь булганлыктан .nav-stacked, вертикаль тезелгән булып күренсен өчен, икенче классны өстәгез.

Такталар

• Өй
• Профиль
• Хәбәрләр

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

Тапланган дарулар

• Өй
• Профиль
• Хәбәрләр

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

Бай менюлар җиңел булды

Bootstrap кыстыргычларында һәм таблеткаларда төшү менюлары бик җиңел һәм бераз өстәмә HTML һәм җиңел jQuery плагины таләп итә.

Bootstrap'та тамчыларны башлау турындагы документларны уку өчен Javascript битенә керегез .

Таблицалар

• Өй
• Ярдәм итегез
• Төшү
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-tabs" > 
  <li класс = "төшү" > 
    <a class = "тамчы-күчү" 
       data-toggle = "тамчы"
       href = "#" >
        Төшү
        <b класс = "карет" > </b> 
      </a>
    <ul class = "тамчы-меню" > 
      <! - сылтамалар ->
    </ul>
  </li>
</ul>

Таблеткалар

• Өй
• Ярдәм итегез
• Төшү
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-таблеткалар" > 
  <li класс = "төшү" > 
    <a class = "тамчы-күчү" 
       data-toggle = "тамчы"
       href = "#" >
        Төшү
        <b класс = "карет" > </b> 
      </a>
    <ul class = "тамчы-меню" > 
      <! - сылтамалар ->
    </ul>
  </li>
</ul>

Кушымта стиле навигациясе

Nav исемлекләре өстәмә башлыклар белән диңгез сылтамалары төркемнәрен төзүнең гади һәм җиңел ысулын тәкъдим итә. Алар X X-та табучы кебек ян такталарда иң яхшы кулланыла.

Структур яктан, алар таблицалар һәм таблеткалар белән бер үк төп диңгез стилендә төзелгән, шуңа күрә куллану һәм көйләү туры.

Иконалар белән

Nav исемлекләрен иконалар белән җиһазлау да җиңел. Класс белән тиешле тегны өстәгез <i>һәм сез куелдыгыз.

Горизонталь бүлүчеләр

Класс белән буш исемлек ясап, горизонталь бүлүче өстәгез .divider:

<ul class = "nav nav-list" > 
  ...
  <li класс = "бүлүче" > </li> 
  ...
</ul>

Мисал исемлеге

Сылтамалар исемлеген алыгыз һәм өстәгез class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    Исемлек башы
  </li>
  <li класс = "актив" > 
    <a href = "#"> Өй </a> _ 
  </li>
  <li>
    <a href = "#"> Китапханә </a> _ 
  </li>
  ...
</ul>

Иконалар белән мисал

Шул ук мисал, ләкин <i>иконалар өчен теглар белән.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#"> _ 
      <i класс = "иконка-китап" > </i> 
      Китапханә
    </a>
  </li>
  ...
</ul>

Нәрсә кертелгән

Таблицалар аша эчтәлекне алыштыру өчен гади плагин белән таблицаларны тормышка китерегез. Bootstrap өстәл таблицаларын дүрт стильдә берләштерә: өске (килешү), уң, аскы һәм сул.

Алар арасында үзгәрү җиңел һәм бик аз билгеләрне үзгәртү таләп ителә.

Таблицаларда

Таблицалар бетсен өчен, .fadeһәрберсенә өстәгез .tab-pane.

JQuery плагины кирәк

Барлык өстәл таблицалары безнең җиңел jQuery плагины белән эшләнгән. Javascript документлар битендә таблицаларны ничек тормышка ашыру турында күбрәк укыгыз .

Javascript алыгыз

Таблица мисалы

Таблицаларны таблицалар ясау өчен, .tab-paneһәрбер кыстыргыч өчен уникаль ID булдырыгыз һәм аларны төрегез .tab-content.

Уң яки ​​сул тигезләнгән кыстыргычлар өчен, .nav-tabsэченә .tab-contentкерегез .tabbable.

Туры билгеләр

Таблицалар салынмаларын куллану өчен төрү дивасы, таблицалар җыелмасы һәм эчтәлекле таблицалар җыелмасы кирәк.

<div class = "таблица" > <! - Сул / уң кыстыргычлар өчен генә кирәк ->  
  <ul class = "nav nav-tabs" > 
    <li class = "актив" > <a href = "#tab1" data-toggle = "tab"> 1 бүлек </a> </li >   
    <li> <a href = "#tab2" data-toggle = "tab"> 2 бүлек </a> </li >  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane актив" id = "tab1" >  
      <p> Мин 1 бүлектә. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Хауди, мин 2 бүлектә. </p>
    </div>
  </div>
</div>

Түбәндәге салынмалар

HTML тәртибен борыгыз һәм астына кыстыргычлар куяр өчен класс өстәгез.

<div class = "таблицалар-аста" > 
  <div class = "tab-content" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Сул якта

Сулга таблицалар куяр өчен классны алыштырыгыз.

<div class = "таблицалар-сул" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Уң яктагы кыстыргычлар

Уңга таблицалар куяр өчен классны алыштырыгыз.

<div class = "таблицалар таблицасы-уң" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Навбар скафолдингы

Диңгез тактасы статик яки тотрыклы күрсәтү өчен аны яхшы төзү өчен берничә дивс таләп итә.

<div class = "navbar" > 
  <div class = "navbar-эчке" > 
    <div class = "контейнер" > 
      ...
    </div>
  </div>
</div>

Тикшерелгән диңгез тактасы

Тышкы диварга өстәмә класс белән күренеш портының өске яисә аскы өлешенә көйләгез , .navbar.

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

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

Диңгез тактасын куйгач, астындагы яшерен мәйданны исәпкә алырга онытмагыз. 40px яки аннан да күбрәк паддер өстәргә <body>. Моны Bootstrap CSS үзәгеннән соң һәм өстәмә җаваплы CSS алдыннан өстәргә онытмагыз.

Бренд исеме

Сезнең брендыгызны яки проект исемегезне күрсәтү өчен гади сылтама бары тик анкор тегын гына таләп итә.

<a class = "brand" href = "#"> _  
  Проект исеме
</a>

Диңгез тактасында формалар

Форманы дөрес стильләү һәм урнаштыру өчен, аста күрсәтелгәнчә тиешле класслар өстәгез. Килешенгән форма өчен, яисә .navbar-formдөрес итеп тигезләү өчен кертегез..pull-left.pull-right

<форма класс = "navbar-форма тарту-сул" > 
  <кертү тибы = "текст" класс = "span2" >  
</form>

Күбрәк көйләнгән эзләү формасы .navbar-searchөчен form, .search-queryдиңгез тактасында махсус стильләр өчен кертүгә өстәгез.

<form class = "navbar-search pull-left" > 
  <кертү тибы = "текст" класс = "эзләү-сорау" урын хуҗасы = "Эзләү" >   
</form>

Ихтимал җаваплы үзгәрү

Topгары такталардагы эчтәлек күләменә карап, сез җаваплы вариантларны тормышка ашырырга теләрсез. Моның өчен, диңгез эчтәлеген div эчендә урыгыз .nav-collapse.collapse, һәм диңгез тактасын алыштыру төймәсен өстәгез , .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-эчке" > 
    <div class = "контейнер" > 
 
      <! - .btn-navbar җимерелгән диңгез тактасы эчтәлеген алыштыру өчен кулланыла ->
      <a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse">   
        <span class = "icon-bar" > </span> 
        <span class = "icon-bar" > </span> 
        <span class = "icon-bar" > </span> 
      </a>
 
      <! - Брендны күрсәтергә теләсәгез, анда калдырыгыз ->
      <a class = "brand" href = "#"> Проект исеме </a>  
 
      <! - Сез 940px яки аннан да азрак яшерергә теләгән бар нәрсәне монда урнаштырыгыз ->
      <div class = "nav-collapse" > 
        <! - .nav, .navbar-search, .navbar-форма һ.б. ->
      </div>
 
    </div>
  </div>
</div>

Nav сылтамалары

Диңгез әйберләрен тәртипсез исемлекләр аша өстәү гади.

<ul class = "nav" > 
  <li класс = "актив" > 
    <a href = "#"> Өй </a> _ 
  </li>
  <li> <a href = "#"> Ссылка </a> </li> 
  <li> <a href = "#"> Ссылка </a> </li> 
</ul>

Сез буш исемлек пункты һәм гади класс белән диңгез сылтамаларына җиңел бүлгечләр өсти аласыз. Моны сылтамалар арасында өстәгез:

<ul class = "nav" > 
  ...
  <li класс = "бүлүче-вертикаль" > </li> 
  ...
</ul>

Компонент тигезләү

Диңгез, эзләү формасын яки текстны тигезләү өчен, .pull-leftяисә .pull-rightфайдалы классларны кулланыгыз. Ике класс та күрсәтелгән юнәлештә CSS йөзүен өстәячәк.

Тамчы менюларын өстәү

Диңгезгә тамчыларны һәм тамчыларны өстәү бик гади, ләкин безнең javascript плагинын куллануны таләп итә .

<ul class = "nav" > 
  <li класс = "төшү" > 
    <a href = "#" 
          класс = "тамчы-күчү"
          data-toggle = "тамчы" >
          Хисап
          <b класс = "карет" > </b> 
    </a>
    <ul class = "тамчы-меню" > 
      ...
    </ul>
  </li>
</ul>

Javascript алыгыз

Диңгез тактасында текст

Текстның тезмәләрен <.navbar-text>, гадәттә, <p>әйдәп баручы һәм төс өчен тегка төрегез.

Нигә аларны кулланырга

Икмәк пешерү навигациясе кулланучыларга кушымта яки сайт эчендә булган урыннарын күрсәтү ысулы буларак кулланыла, ләкин төп навигация өчен түгел. Аларның эффектив булуы өчен сирәк һәм үзенчәлекле булыгыз.

Мисаллар

Берничә биттә күрсәтелергә мөмкин булган бер мисал.

• Өй

• Өй /
• Китапханә

• Өй /
• Китапханә /
• Мәгълүмат

Билгеләү

HTML - сылтамалар белән сезнең стандарт тәртипсез исемлек.

<ul class = "икмәк пешерү" > 
  <li>
    <a href = "#"> Өй </a> <span class = "divider" > / </span >   
  </li>
  <li>
    <a href = "#"> Китапханә </a> <span class = "divider" > / </span >   
  </li>
  <li class = "актив" > Мәгълүматлар </li> 
</ul>

Кайчан кулланырга

Ультра гади һәм минималь стильле пагинация Rdio тарафыннан рухландырылган, кушымталар һәм эзләү нәтиҗәләре өчен бик яхшы. Зур блокны сагыну авыр, җиңел масштаблы, зур басу өлкәләрен тәэмин итә.

Дәүләт бит сылтамалары

Сылтамалар көйләнә һәм дөрес класс белән берничә шартларда эшли. .disabledачылмаган сылтамалар .activeөчен һәм хәзерге бит өчен.

Эластик тигезләү

Пагинация сылтамаларының тигезләнешен үзгәртү өчен ике факультатив классның берсен дә өстәгез: .pagination-centeredһәм .pagination-right.

Мисаллар

Килешү пагинация компоненты сыгылучан һәм берничә вариациядә эшли.

Билгеләү

А белән уралган <div>, пагинация - а <ul>.

<div class = "pagination" > 
  <ul>
    <li> <a href = "#"> Алдагы </a> </li> 
    <li класс = "актив" > 
      <a href = "#"> 1 </a> _ 
    </li>
    <li> <a href = "#"> 2 </a> </li> 
    <li> <a href = "#"> 3 </a> </li> 
    <li> <a href = "#"> 4 </a> </li> 
    <li> <a href = "#"> Киләсе </a> </li> 
  </ul>
</div>

Пейджер турында

Пейджер компоненты - гади билгеләр һәм хәтта җиңелрәк стильләр белән гади пагинацияне тормышка ашыру өчен сылтамалар җыелмасы. Блог яки журнал кебек гади сайтлар өчен бик яхшы.

Ихтимал инвалид хәл

Пейджер сылтамалары шулай ук ​​гомуми .disabledклассны пагинациядән кулланалар.

Килешенгән мисал

Килешү буенча, пейджер үзәкләре сылтамалар.

• Алдагы
• Алга

<ul class = "пейджер" > 
  <li>
    <a href = "#"> Алдагы </a> _ 
  </li>
  <li>
    <a href = "#"> Киләсе </a> _ 
  </li>
</ul>

Тигезләнгән сылтамалар

Альтернатив рәвештә, сез һәр сылтаманы якларга тигезли аласыз:

• ← Олы
• Яңа →

<ul class = "пейджер" > 
  <li класс = "алдагы" > 
    <a href = "#"> & larr ; Олы </a> 
  </li>
  <li класс = "киләсе" > 
    <a href = "#"> Яңа & rarr ; </a> 
  </li>
</ul>

Турында

Бейджлар - күрсәткечне күрсәтү яки ниндидер санау өчен кечкенә, гади компонентлар. Алар гадәттә Mail.app кебек электрон почта клиентларында яки мобиль кушымталарда табыла.

Мөмкин класслар

Bootstrap сайтыгыздагы эчтәлекне күрсәтү өчен герой берәмлеге дип аталган җиңел, сыгылмалы компонент тәкъдим итә. Маркетинг һәм эчтәлекле сайтларда яхшы эшли.

Билгеләү

Эчтәлекне divшундый итеп төрегез:

<div class = "герой-берәмлек" > 
  <h1> Башлам </h1>
  <p> Теглар </p>
  <p>
    <a class = "btn btn-primary btn-large"> 
      Тулырак
    </a>
  </p>
</div>

h1Биттәге эчтәлекнең сегмент бүлекләрен урынлы урнаштыру өчен гади кабык . Ул күпчелек компонентларны (өстәмә стильләр белән) h1куллана ала.small

<div class = "page-header" > 
  <h1> Мисал бит башы </h1>
</div>

Килешү эскизлар

Килешү буенча, Bootstrap эскизлары минималь кирәкле билгеләр белән бәйләнгән рәсемнәрне күрсәтү өчен эшләнгән.

Бик югары көйләнә

Бераз өстәмә билгеләр белән, баш символлар, параграфлар яки төймәләр кебек HTML эчтәлеген өстәргә мөмкин.

• 

  Эскиз этикеткасы

  Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida eget metus. Nullam id dolor id nibh ultricies транспорт чарасы.

  Эш Эш

• 

  Эскиз этикеткасы

  Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida eget metus. Nullam id dolor id nibh ultricies транспорт чарасы.

  Эш Эш

Ни өчен эскизларны кулланырга

Эскизлар (моңа .media-gridкадәр v1.4 кадәр) фото яки видео челтәрләре, рәсем эзләү нәтиҗәләре, ваклап сату продуктлары, портфолио һәм башкалар өчен бик яхшы. Алар сылтамалар яки статик эчтәлек булырга мөмкин.

Гади, сыгылмалы билгеләр

Эскизны билгеләү гади - ulтеләсә нинди liэлементлар белән кирәк. Бу шулай ук ​​супер сыгылучан, эчтәлекне төрү өчен бераз күбрәк маркалы эчтәлек төренә мөмкинлек бирә.

Челтәр баганасы зурлыкларын куллана

Ниһаять, эскизлар компоненты булган челтәр системасы классларын куллана, .span2яки .span3эскиз үлчәмнәрен контрольдә тоту өчен.

Билгеләү

Алда әйтелгәнчә, эскизлар өчен кирәкле билгеләр җиңел һәм туры. Менә бәйләнгән рәсемнәр өчен килешенгән көйләүгә күз салу :

<ul class = "эскизлар" > 
  <li класс = "span3" > 
    <a href = "#" class = "thumbnail"> _  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

Эскизлардагы HTML эчтәлеге өчен, билгеләр бераз үзгәрә. Блок дәрәҗәсендәге эчтәлекне рөхсәт итәр <a>өчен , без <div>шуңа охшаганны алыштырабыз:

<ul class = "эскизлар" > 
  <li класс = "span3" > 
    <div class = "эскиз" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Эскиз этикеткасы </h5>
      <p> Эскиз язуы монда ... </p>
    </div>
  </li>
  ...
</ul>

Күбрәк мисаллар

Төрле челтәр класслары белән сезнең барлык вариантларыгызны өйрәнегез. Сез шулай ук ​​төрле зурлыкларны кушып, туры китерә аласыз.

Яңа класс

Bootstrap 2 ярдәмендә без төп классны гадиләштердек: .alertурынына .alert-message. Без шулай ук ​​минималь таләпләрне киметтек <p>- килешү буенча юк, тышкы яктан гына <div>.

Бердәнбер хәбәр

Аз кодлы тагын да ныграк компонент өчен, без блок сигнализацияләрен, дифференциаль күренешне бетердек, күбрәк паддинг һәм гадәттә күбрәк текст белән килгән хәбәрләр. Класс шулай ук ​​үзгәрде .alert-block.

Javascript белән бик яхшы бара

Bootstrap зур jQuery плагины белән килә, алар уяу хәбәрләрне хуплый, аларны тиз һәм җиңел җибәрә.

Плагин алыгыз »

Мисал хәбәрләре

Хәбәрегезне һәм өстәмә ябык иконаны гади класс белән бүлегез.

<div class = "уяу" > 
  <төймә классы = "ябу" мәгълүмат-кире кагу = "уяу" > × </button>  
  <strong> Кисәтү! </strong> Иң яхшы тикшерү, сез бик яхшы күренмисез.
</div>

Идарә итә! iOS җайланмалары href="#"хәбәрләрне кире кагуны таләп итә. Аны һәм якорь иконалары өчен мәгълүмат атрибутын кертегез. Альтернатив рәвештә, сез <button>безнең документлар өчен сайлаган мәгълүмат атрибуты булган элементны куллана аласыз. Кулланганда <button>сез кертергә тиеш, type="button"яисә формаларыгыз җибәрелмәскә мөмкин.

Ике факультатив класс белән стандарт кисәтү хәбәрен җиңел генә киңәйтегез: .alert-blockкүбрәк паддинг һәм текст контроле .alert-headingөчен һәм туры килгән башлам өчен.

<div class = "уяулык-блок" > 
  <a class = "close" data-dismiss = "alert" href = "#"> × </a> _   
  <h4 класс = "уяу-баш" > Кисәтү! </h4> 
  Иң яхшы тикшерү, син түгел ...
</div>

Хата яки куркыныч

<div class = "alert alert-error" > 
  ...
</div>

Уңыш

<div class = "уяу уяу-уңыш" > 
  ...
</div>

Мәгълүмат

<div class = "alert alert-info" > 
  ...
</div>

Төп

Вертикаль градиент белән алга китеш сызыгы.

<div class = "алгарыш" > 
  <div class = "bar" 
       style = " width : 60 %; " > </div> 
</div>

Сызылган

Сызылган эффект булдыру өчен градиент куллана (IE юк).

<div class = "прогресс-сызыклы" > 
  <div class = "bar" 
       стиль = " киңлек : 20 %; " > </div> 
</div>

Анимация

Сызылган мисалны ала һәм анимацияли (IE юк).

<div class = "прогресс сызыклы 
     актив " >
  <div class = "bar" 
       стиль = " киңлек : 40 %; " > </div> 
</div>

Өстәмә төсләр

Прогресс барлары бер үк төймә һәм эзлекле стильләр өчен кисәтү классларын кулланалар.

Сызыклы барлар

Каты төсләргә охшаган, бездә төрле сызыклы прогресс барлары бар.

Тәртип

Прогресс барлары CSS3 күчешләрен кулланалар, шуңа күрә javascript аша киңлекне динамик көйләсәгез, ул шома үзгәрәчәк.

.activeӘгәр дә сез классны куллансагыз, .progress-stripedпрогресс барларыгыз сулдан уңга сызыкларны җанландырачак.

Браузер ярдәме

Прогресс барлары барлык эффектларына ирешү өчен CSS3 градиентларын, күчешләрен, анимацияләрен кулланалар. Бу функцияләр IE7-9 яки Firefox'ның иске версияләрендә булышмый.

Опера һәм IE бу вакытта анимацияләрне хупламыйлар.

Скважиналар

Элементка гади эффект кебек үк, эффект кертү өчен кулланыгыз.

<div class = "әйбәт" > 
  ...
</div>

Икона

Модаль һәм сигнализация кебек эчтәлекне кире кагу өчен гомуми якын иконаны кулланыгыз.

×

<төймә класс = "ябык" > & вакыт; </button> 

iOS җайланмалары, анкор куллансагыз, басу вакыйгалары өчен href = "#" таләп итә.

<a class = "close" href = "#"> & times ; </a>