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 చూడండి .