v3.x нұсқасына көшу
Негізгі өзгерістерге, жаңалықтарға және жойылғандарға баса назар аудара отырып, Bootstrap v2.x нұсқасынан v3.x нұсқасына жаңарту туралы нұсқаулық.
Негізгі өзгерістерге, жаңалықтарға және жойылғандарға баса назар аудара отырып, Bootstrap v2.x нұсқасынан v3.x нұсқасына жаңарту туралы нұсқаулық.
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-group s ұқсас. |
Пішін басқару элементтеріне арналған кірістірілген анықтама | .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
)..modal-header
, .modal-body
және .modal-footer
бөлімдері енді жақсырақ мобильді сәндеу мен мінез-құлық үшін .modal-content
оралған . .modal-dialog
Сондай-ақ, сіз бұдан былай белгілеуіңізде қолданбауыңыз .hide
керек .modal
.remote
модальды опция арқылы жүктелген HTML енді ішіне емес, .modal-content
(v3.0.0-ден v3.0.3-ке дейін .modal
) ішіне енгізіледі .modal-body
. Бұл модаль денесін ғана емес, модальдың үстіңгі және төменгі деректемелерін де оңай өзгертуге мүмкіндік береді.data-toggle="buttons"
орнына data-toggle="buttons-checkbox"
немесе data-toggle="buttons-radio"
олардың белгілеуінде пайдаланылады.'show.bs.modal'
. "Көрсетілген" қойындылар үшін 'shown.bs.tab'
, т.б. пайдаланыңыз.v3.0 нұсқасына жаңарту және қауымдастықтың код үзінділері туралы қосымша ақпаратты Bootply бөлімінен қараңыз .