2.x నుండి 3.0కి మారుతోంది

బూట్‌స్ట్రాప్ 3 v2.xతో వెనుకకు అనుకూలంగా లేదు. v2.x నుండి v3.0కి అప్‌గ్రేడ్ చేయడానికి ఈ విభాగాన్ని సాధారణ గైడ్‌గా ఉపయోగించండి. విస్తృత స్థూలదృష్టి కోసం, v3.0 విడుదల ప్రకటనలో కొత్తగా ఏమి ఉందో చూడండి.

ప్రధాన తరగతి మార్పులు

ఈ పట్టిక v2.x మరియు v3.0 మధ్య శైలి మార్పులను చూపుతుంది.

బూట్స్ట్రాప్ 2.x బూట్‌స్ట్రాప్ 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-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 N/A
శోధన రూపం .form-search N/A
సమాచారంతో సమూహాన్ని రూపొందించండి .control-group.info N/A
స్థిర-వెడల్పు ఇన్‌పుట్ పరిమాణాలు .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge బదులుగా గ్రిడ్.form-control వ్యవస్థను ఉపయోగించండి .
బ్లాక్ స్థాయి ఫారమ్ ఇన్‌పుట్ .input-block-level ప్రత్యక్ష సమానం లేదు, కానీ ఫారమ్‌ల నియంత్రణలు ఒకే విధంగా ఉంటాయి.
విలోమ బటన్లు .btn-inverse N/A
ద్రవ వరుస .row-fluid .row(ఇక స్థిరమైన గ్రిడ్ లేదు)
నియంత్రణ రేపర్ .controls N/A
నియంత్రణల వరుస .controls-row .rowలేదా.form-group
నవబార్ లోపలి .navbar-inner N/A
Navbar నిలువు విభజనలు .navbar .divider-vertical N/A
డ్రాప్‌డౌన్ ఉపమెను .dropdown-submenu N/A
ట్యాబ్ అమరికలు .tabs-left .tabs-right .tabs-below N/A
పిల్ ఆధారిత ట్యాబ్ చేయదగిన ప్రాంతం .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 వినియోగానికి అనుకూలంగా టైప్‌హెడ్ తొలగించబడింది .
  • మోడల్ మార్కప్ గణనీయంగా మారింది. మెరుగైన మొబైల్ స్టైలింగ్ మరియు ప్రవర్తన కోసం ఇప్పుడు .modal-header, .modal-body, మరియు .modal-footerవిభాగాలు చుట్టుముట్టబడ్డాయి . అలాగే, మీరు ఇకపై మీ మార్కప్‌లో దరఖాస్తు చేయకూడదు ..modal-content.modal-dialog.hide.modal
  • v3.1.0 నాటికి, మోడల్ ఎంపిక ద్వారా లోడ్ చేయబడిన HTML ఇప్పుడు లోకి బదులుగా (v3.0.0 నుండి v3.0.3 వరకు, లోకి ) remoteఇంజెక్ట్ చేయబడింది . ఇది మోడల్ బాడీ మాత్రమే కాకుండా, మోడల్ యొక్క హెడర్ మరియు ఫుటర్‌ను కూడా సులభంగా మార్చడానికి మిమ్మల్ని అనుమతిస్తుంది..modal-content.modal.modal-body
  • బటన్.js ప్లగ్ఇన్ యొక్క చెక్‌బాక్స్ మరియు రేడియో ఫీచర్‌లు ఇప్పుడు వాటి మార్కప్‌కు data-toggle="buttons"బదులుగా data-toggle="buttons-checkbox"లేదా వాటిల్లో ఉపయోగించబడతాయి data-toggle="buttons-radio".
  • జావాస్క్రిప్ట్ ఈవెంట్‌లు నేమ్‌స్పేస్ చేయబడ్డాయి. ఉదాహరణకు, మోడల్ "షో" ఈవెంట్‌ను నిర్వహించడానికి, ఉపయోగించండి 'show.bs.modal'. ట్యాబ్‌ల కోసం "చూపబడిన" ఉపయోగం 'shown.bs.tab'మొదలైనవి.

v3.0కి అప్‌గ్రేడ్ చేయడం మరియు సంఘం నుండి కోడ్ స్నిప్పెట్‌ల గురించి మరింత సమాచారం కోసం, Bootply చూడండి .