v3.x پر منتقلی
اہم تبدیلیوں پر زور دینے کے ساتھ بوٹسٹریپ v2.x سے v3.x میں اپ گریڈ کرنے کے بارے میں رہنمائی، کیا نیا ہے، اور کیا ہٹا دیا گیا ہے۔
اہم تبدیلیوں پر زور دینے کے ساتھ بوٹسٹریپ v2.x سے v3.x میں اپ گریڈ کرنے کے بارے میں رہنمائی، کیا نیا ہے، اور کیا ہٹا دیا گیا ہے۔
بوٹسٹریپ 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 متن | .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 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
موڈل آپشن کے ذریعے بھری ہوئی ایچ ٹی ایم ایل کو اب میں کے بجائے .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 دیکھیں ۔