Ka guurista 2.x ilaa 3.0

Bootstrap 3 gadaal uma soconayso v2.x. U isticmaal qaybtan hage guud oo laga cusboonaysiinayo v2.x ilaa v3.0. Si aad u hesho dulmar ballaadhan, arag waxa ku cusub ku dhawaaqida v3.0.

Isbedelka fasalka weyn

Jadwalkani waxa uu tusinayaa qaabka isbeddelka u dhexeeya v2.x iyo 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 Kala qaybsan.visible-md .visible-lg
.hidden-phone .hidden-xs
.hidden-tablet .hidden-sm
.hidden-desktop Kala qaybsan.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

Maxaa cusub

Waxa aanu ku soo kordhinay canaasiir cusub oo aanu bedelnay qaar hore u jiray. Waa kuwan qaababka cusub ama la cusboonaysiiyay.

Curiyaha Sharaxaada
baalal .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
Liiska kooxaha .list-group .list-group-item .list-group-item-text .list-group-item-heading
Glyphicons .glyphicon
Jumbotron .jumbotron
Shabakad yar oo dheeri ah (<768px) .col-xs-*
Koronto yar (≥768px) .col-sm-*
Koronto dhexdhexaad ah (≥992px) .col-md-*
Koronto weyn (≥1200px) .col-lg-*
Fasalada utility ee ka jawaabaya (≥1200px) .visible-lg .hidden-lg
Deminta .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
Riix .col-sm-push-* .col-md-push-* .col-lg-push-*
Jiid .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
Cabbirrada dhererka galitaanka .input-sm .input-lg
Kooxaha wax gelinta .input-group .input-group-addon .input-group-btn
Koontaroolada foomka .form-control .form-group
Cabbirrada kooxda badhanka .btn-group-xs .btn-group-sm .btn-group-lg
Qoraalka Navbar .navbar-text
Madaxa Navbar .navbar-header
Kiniinnada / kiniinnada la caddeeyey .nav-justified
Sawirro jawaab celin ah .img-responsive
Safafka miiska macnaha guud .success .danger .warning .active .info
Qaybaha macnaha guud .panel-success .panel-danger .panel-warning .panel-info
Modal .modal-dialog .modal-content
Sawirka thumbnail .img-thumbnail
cabbirrada ceelka .well-sm .well-lg
Xiriirinta digniinta .alert-link

Maxaa laga saaray

Cutubyada soo socda ayaa la tuuray ama lagu beddelay v3.0.

Curiyaha Laga saaray 2.x 3.0 U dhigma
Foomka falalka .form-actions N/A
Foomka raadinta .form-search N/A
Samee koox macluumaad leh .control-group.info N/A
Cabbirrada gelida ballac-go'an .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge Isticmaal .form-controliyo nidaamka grid beddelkeeda.
gelinta qaabka heerka xannibista .input-block-level Ma jiro si toos ah oo u dhigma, laakiin kontaroolada foomamka ayaa la mid ah.
Badhamada rogan .btn-inverse N/A
Safka dareeraha ah .row-fluid .row(ma jiro shabakad go'an oo dheeraad ah)
Xakamaynta duubka .controls N/A
Xakamaynta safka .controls-row .rowama.form-group
Gudaha Navbar .navbar-inner N/A
Qaybiyayaal toosan Navbar .navbar .divider-vertical N/A
Hoos-u-dhaca liiska .dropdown-submenu N/A
Isku toosinta tab .tabs-left .tabs-right .tabs-below N/A
Aagga la qaadan karo ee kiniinka ku salaysan .pill-content .tab-content
Muraayada aagga la qaadan karo ee kiniinka ku salaysan .pill-pane .tab-pane
Liiska Nav .nav-list .nav-header Ma jiro si toos ah oo u dhigma, laakiin liiska kooxaha iyo .panel-groups waa isku mid.
Caawinta khadka tooska ah ee xakamaynta foomka .help-inline Ma jiro sax u dhigma, laakiin .help-blockwaa la mid.
Midabada horumarka aan heerka bar-bar ahayn .progress-info .progress-success .progress-warning .progress-danger Isticmaal .progress-bar-*beddelka .progress-bar.

Qoraalo dheeraad ah

Isbeddellada kale ee v3.0 isla markiiba ma muuqdaan. Fasallada aasaasiga ah, qaababka muhiimka ah, iyo hab-dhaqanka ayaa lagu hagaajiyay dabacsanaanta iyo habkayada mobilada ee ugu horreeya . Halkan waxaa ah liis qayb ah:

  • Sida caadiga ah, kontaroolada foomka ku salaysan qoraalka ayaa hadda helaya qaabaynta ugu yar. Midabada diiradda iyo geesaha wareegsan, dabaq .form-controlfasalka ku yaal curiyaha qaabka.
  • Koontaroolada foomka ku salaysan qoraalka ee .form-controlfasalka lagu dabaqay hadda waa 100% balac ahaan ahaan. Ku duub agabka gudaha <div class="col-*"></div>si aad u xakamayso ballaadhka wax gelinta
  • .badgemar dambe ma yeelan fasalo macnaha guud (-guul,-primary,iwm..)
  • .btnsidoo kale waa in la isticmaalo .btn-defaultsi loo helo badhanka "default".
  • .rowhadda waa dareere.
  • Sawiradu hadda kama jawaabaan default. Isticmaal cabbirka .img-responsivedareeraha .<img>
  • Astaamaha, hadda .glyphicon, hadda waxay ku saleysan yihiin font. Astaamaha sidoo kale waxay u baahan yihiin saldhig iyo astaanta astaanta (tusaale .glyphicon .glyphicon-asterisk).
  • Typeahead waa la tuuray, taas oo door biday adeegsiga Twitter Typehead .
  • Habka calaamadaynta ayaa si weyn isu beddeshay. Qaybaha .modal-header, .modal-body, iyo .modal-footerqaybaha hadda waa lagu duuduubay .modal-contentoo .modal-dialogloogu talagalay habaynta mobilada iyo habdhaqanka wanaagsan. Sidoo kale, waa inaadan mar dambe ka dalban .hidecalaamadayntaada .modal.
  • Sida v3.1.0, HTML-ka ay ku raran tahay remoteikhtiyaarka moodeelka ayaa hadda lagu duraa .modal-content(laga bilaabo v3.0.0 ilaa v3.0.3, gudaha .modal) beddelka .modal-body. Tani waxay kuu ogolaaneysaa inaad sidoo kale si fudud u kala beddesho madaxa iyo cagta ee modal, ma aha oo kaliya habka jirka.
  • Sanduuqa hubinta iyo astaamaha raadiyaha ee button.js plugin hadda labaduba waxay isticmaalaan beddelka data-toggle="buttons"ama data-toggle="buttons-checkbox"calaamadayntooda data-toggle="buttons-radio".
  • Dhacdooyinka JavaScript waa la kala saaray. Tusaale ahaan, si aad u maamusho dhacdada "show" modal, isticmaal 'show.bs.modal'. Tabaha "muujiyey" isticmaal 'shown.bs.tab', iwm.

Macluumaad dheeraad ah oo ku saabsan u cusboonaysiinta v3.0, iyo kood kood ka yimid bulshada, eeg Bootply .