2.x нұсқасынан 3.0 нұсқасына көшу

Bootstrap 3 v2.x нұсқасымен кері үйлесімді емес. Бұл бөлімді v2.x нұсқасынан v3.0 нұсқасына дейін жаңартуға арналған жалпы нұсқаулық ретінде пайдаланыңыз. Кеңірек шолу үшін v3.0 шығарылымының хабарландыруындағы жаңалықтарды қараңыз.

Негізгі сыныптық өзгерістер

Бұл кесте v2.x және v3.0 арасындағы мәнер өзгерістерін көрсетеді.

Bootstrap 2.x 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-*
Шағын тор (≥768px) .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-header
Негізделген қойындылар / таблеткалар .nav-justified
Жауапты суреттер .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 ішкі .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-groups ұқсас.
Пішін басқару элементтеріне арналған кірістірілген анықтама .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 бөлімінен қараңыз .