Class ที่เปลี่ยนไปใน Bootstrap 2.x to 3.0

Booststap Knowledge ความรู้สำหรับการออกเว็บเพื่อให้แสดงผล ได้ดี ทุกหน้าจอ

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
M004
PHP VIP Members
PHP VIP Members
โพสต์: 1323
ลงทะเบียนเมื่อ: 01/01/1970 7:00 am

Class ที่เปลี่ยนไปใน Bootstrap 2.x to 3.0

โพสต์โดย M004 » 14/09/2013 6:06 pm

หลังจากที่ Bootstrap Update เป็น v 3.0 คำสั้งจากที่เคยใช้จาก v2.x มีการเปลี่ยนแปลงไปหลายตัว
จากเดิมที่ user สามารถ เลือกใช้งาน Class ว่าต้องการใช้ แบบ grid หรือ แบบ Fluid grid
แต่ v 3.0 นี้ บังคับให้ user ใช้งาน แบบ Fluid grid แบบเต็มตัว ซึ่งก็ถือเป็นข้อดี เพราะปัจจุปัน การใช้งาน website ไม่ได้ ใช่ได้ เเค่จาก computer จึง เป็นผลดีกับ ผู้ใช้งานอื่นๆ นอกจาก Computer

Class ที่มีการเปลี่ยนแปลง

โค้ด: เลือกทั้งหมด

     2.x                               3.0
.container-fluid     =>    .container
.row-fluid             =>   .row
.span*                 =>   .col-md-*

.container-fluid     =>    .container
.row-fluid             =>    .row
.span*                 =>    .col-md-*
.offset*               =>    .col-md-offset-*
.brand                  =>    .navbar-brand
.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
.visible-phone       =>    .visible-sm
.visible-tablet       =>    .visible-md
.visible-desktop       =>    .visible-lg
.hidden-phone       =>    .hidden-sm
.hidden-tablet       =>    .hidden-md
.hidden-desktop    =>    .hidden-lg
.input-small       =>    .input-sm
.input-large       =>    .input-lg
.checkbox.inline .radio.inline         =>    .checkbox-inline .radio-inline
.input-prepend .input-append         =>    .input-group
.add-on               =>    .input-group-addon
.thumbnail       =>    .img-thumbnail
ul.unstyled       =>    .list-unstyled
ul.inline               =>    .list-inline


ศึกษาเพิ่มเติมได้ที่
http://getbootstrap.com/getting-started/#migration

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 4 และ บุคคลทั่วไป 0 ท่าน