2.x-dan 3.0-ка күчү

Bootstrap 3 v2.x белән артка туры килми. Бу бүлекне v2.x -тан v3.0-га яңарту өчен гомуми кулланма итеп кулланыгыз. Киңрәк күзәтү өчен, v3.0 чыгарылыш игъланында яңалыкларны карагыз.

Төп класс үзгәреше

Бу таблицада v2.x һәм v3.0 арасында стиль үзгәрүләре күрсәтелә.

Ботстрап 2.х Bootstrap 3.0
.row-fluid .row
.span* .col-md-*
.offset* .col-md-offset-*
.brand .navbar-brand
.navbar .nav .navbar-nav
.nav-collapse .navbar-collapse
.nav-toggle .navbar-toggle
.btn-navbar .navbar-btn
.hero-unit .jumbotron
.icon-* .glyphicon .glyphicon-*
.btn .btn .btn-default
.btn-mini .btn-xs
.btn-small .btn-sm
.btn-large .btn-lg
.alert .alert .alert-warning
.alert-error .alert-danger
.visible-phone .visible-xs
.visible-tablet .visible-sm
.visible-desktop Бүләк.visible-md .visible-lg
.hidden-phone .hidden-xs
.hidden-tablet .hidden-sm
.hidden-desktop Бүләк.hidden-md .hidden-lg
.input-block-level .form-control
.control-group .form-group
.control-group.warning .control-group.error .control-group.success .form-group.has-*
.checkbox.inline .radio.inline .checkbox-inline .radio-inline
.input-prepend .input-append .input-group
.add-on .input-group-addon
.img-polaroid .img-thumbnail
ul.unstyled .list-unstyled
ul.inline .list-inline
.muted .text-muted
.label .label .label-default
.label-important .label-danger
.text-error .text-danger
.table .error .table .danger
.bar .progress-bar
.bar-* .progress-bar-*
.accordion .panel-group
.accordion-group .panel .panel-default
.accordion-heading .panel-heading
.accordion-body .panel-collapse
.accordion-inner .panel-body

Яңалыклар бармы

Без яңа элементлар өстәдек, кайберләрен үзгәрттек. Менә яңа яки яңартылган стильләр.

Элемент Тасвирлау
Панельләр .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
Төркемнәрне күрсәтегез .list-group .list-group-item .list-group-item-text .list-group-item-heading
Глификоннар .glyphicon
Джамботрон .jumbotron
Өстәмә кечкенә челтәр (<768px) .col-xs-*
Кечкенә челтәр (68768px) .col-sm-*
Урта челтәр (≥992px) .col-md-*
Зур челтәр (≥1200px) .col-lg-*
Коммуналь класслар (≥1200px) .visible-lg .hidden-lg
Офсет .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
этәргеч .col-sm-push-* .col-md-push-* .col-lg-push-*
тарту .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
Керү биеклеге .input-sm .input-lg
Керү төркемнәре .input-group .input-group-addon .input-group-btn
Форма белән идарә итү .form-control .form-group
Төп төркем зурлыклары .btn-group-xs .btn-group-sm .btn-group-lg
Navbar тексты .navbar-text
Navbar башы .navbar-header
Акланган таблицалар / дарулар .nav-justified
Onsаваплы сурәтләр .img-responsive
Контекстуаль таблицалар .success .danger .warning .active .info
Контекст панельләр .panel-success .panel-danger .panel-warning .panel-info
Модаль .modal-dialog .modal-content
Эскиз рәсеме .img-thumbnail
Яхшы зурлыклар .well-sm .well-lg
Кисәтү сылтамалары .alert-link

Нәрсә алынды

V3.0да түбәндәге элементлар төшерелгән яки үзгәртелгән.

Элемент 2.x -тан алынды 3.0 Эквивалент
Эшләрне формалаштыру .form-actions М / Ю
Эзләү формасы .form-search М / Ю
Мәгълүмат белән төркем формалаштырыгыз .control-group.info М / Ю
Тикшерелгән киңлек кертү зурлыклары .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge .form-controlАның урынына челтәр системасын кулланыгыз .
Форма кертүне блоклау .input-block-level Туры эквивалент юк, ләкин формалар белән идарә итү охшаш.
Кире төймәләр .btn-inverse М / Ю
Сыек рәт .row-fluid .row(бүтән тотрыклы челтәр юк)
Орган белән идарә итә .controls М / Ю
Контроль рәт .controls-row .rowяки.form-group
Навбар эчке .navbar-inner М / Ю
Диңгез тактасы вертикаль бүлүчеләр .navbar .divider-vertical М / Ю
Тамчы .dropdown-submenu М / Ю
Таблицалар тигезләү .tabs-left .tabs-right .tabs-below М / Ю
Таблетка нигезендә таблицалар өлкәсе .pill-content .tab-content
Таблетка нигезендә таблицалар мәйданы .pill-pane .tab-pane
Хәрби исемлекләр .nav-list .nav-header Туры эквивалент юк, ләкин исемлек төркемнәре һәм .panel-groupлары охшаш.
Форма белән идарә итү өчен ярдәм .help-inline Төгәл эквивалент юк, ләкин .help-blockохшаш.
Бар булмаган дәрәҗәдәге прогресс төсләре .progress-info .progress-success .progress-warning .progress-danger Аның урынына кулланыгыз .progress-bar-*..progress-bar

Өстәмә язмалар

V3.0дагы башка үзгәрешләр шунда ук күренми. Төп класслар, төп стильләр, тәртип сыгылучанлык һәм безнең мобиль беренче караш өчен көйләнде. Менә өлешчә исемлек:

  • Килешү буенча, текстка нигезләнгән форма контроле хәзер минималь стиллау гына ала. Фокус төсләр һәм түгәрәк почмаклар өчен .form-controlкласстагы элементны стильгә кулланыгыз.
  • Кулланылган класс белән текстка нигезләнгән форма контроле .form-controlхәзер килешү буенча 100% киң. <div class="col-*"></div>Керү киңлекләрен контрольдә тоту өчен керемнәрне урыгыз .
  • .badgeинде контекстуаль (-уңыш, -прим, һ.б.) класслары юк.
  • .btn.btn-defaultшулай ук ​​"килешү" төймәсен алу өчен кулланырга тиеш .
  • .rowхәзер сыек.
  • Рәсемнәр инде килешү буенча җавап бирмиләр. .img-responsiveСыеклык <img>зурлыгы өчен кулланыгыз .
  • Иконалар .glyphiconхәзер шрифтка нигезләнгән. Икона шулай ук ​​база һәм иконка классын таләп итә (мәс .glyphicon .glyphicon-asterisk.).
  • Twitter Typeahead куллану файдасына Typeahead ташланды .
  • Модаль билгеләр сизелерлек үзгәрде. , Һәм .modal-headerбүлекләр хәзер мобиль стилизация һәм тәртип өчен яхшырак. Шулай ук, сез үзегезнең билгеләргә мөрәҗәгать итмәскә тиеш..modal-body.modal-footer.modal-content.modal-dialog.hide.modal
  • V3.1.0 булганга, remoteмодаль вариант белән йөкләнгән HTML хәзер .modal-content(v3.0.0 дән v3.0.3, в .modal) урынына кертелә .modal-body. Бу сезгә модаль тәнне генә түгел, модальнең башын һәм аскы өлешен җиңел үзгәртергә мөмкинлек бирә.
  • Button.js плагинының пункты һәм радио үзенчәлекләре хәзер икесе дә билгеләр data-toggle="buttons"урынына data-toggle="buttons-checkbox"яисә кулланалар data-toggle="buttons-radio".
  • JavaScript вакыйгалары исем белән урнаштырылган. Мәсәлән, модаль "шоу" вакыйгасын эшкәртү өчен кулланыгыз 'show.bs.modal'. "Күрсәтелгән" таблицалар өчен куллану 'shown.bs.tab'һ.б.

V3.0 -ны яңарту, һәм җәмгыятьнең код фрагментлары турында күбрәк мәгълүмат алу өчен, Bootply карагыз .