Membuat web mobile dengan bootstrap

Ok jadi beberapa minggu sekarang, pada ulang tahun kedua Mark Otto itu sendiri dan dari orang-orang yang bertanggung jawab untuk pengembangan dan pemeliharaan Bootstrap mengumumkan rilis resmi dari versi ketiga dari kerangka kerja, dan itu datang dengan kekuatan, mari kita lihat apa yang kita dapatkan.

Apa yang baru?

Pertama, perubahan terpenting yang akan Anda temukan di rilis Bootstrap yang baru adalah dukungan untuk situs web responsif, karena modul responsif telah dihapus. Sekarang, dari intinya, Bootstrap adalah responsif, lebih dari itu, versi baru ini hadir dengan pendekatan "Mobile First", yang berarti hampir semuanya telah didesain ulang untuk memulai dari ukuran layar yang lebih rendah dan meningkat (lebih pada itu sedikit).

Hampir semuanya telah didesain ulang dan dibangun kembali mulai dari perangkat genggam Anda dan meningkat.

Dalam tampilan dan nuansa Anda akan melihat banyak perubahan juga, secara mencolok fakta bahwa keseluruhan gayanya telah flat, dan ada tema opsional untuk tampilan lebih versi 2.0. Selain itu, ikon telah hilang dari gambar ke font, yang sangat berguna untuk digunakan saat membutuhkan berbagai ukuran dan warna.

Grid System

Mari mulai bicara tentang Grid System, oh Grid, sebenarnya ada empat Grid System dalam versi Bootstrap versi baru ini, masing-masing bekerja persis sama, dibedakan dengan lebar layar dimana mereka beroperasi.

Mengaktifkan Grid

Agar Grid System berfungsi dengan baik dan juga untuk memastikan render dan sentuhan zoom yang tepat, tambahkan tag meta viewport ke dokumen Anda:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Lebar Grid yang Berbeda

Ada empat Grid System dalam kerangka versi baru ini, dengan lebar viewport menjadi parameter yang membedakannya. Lebar yang menentukan batas antara satu sama lain adalah sebagai berikut:

• Perangkat ekstra kecil ~ Telepon (< 768px)
• Perangkat kecil ~ Tablet (>= 768px)
• Perangkat sedang ~ Desktop (>= 992px)
• Perangkat besar ~ Desktop (>= 1200px)

Dan masing-masing viewport berbeda yang didukung memiliki kelas tertentu untuk memanggilnya, sebagai berikut:

• col-xs- ~ Perangkat ekstra kecil
• col-sm- ~ Perangkat kecil
• col-md- ~ Perangkat sedang
• col-lg- ~ Perangkat besar

Untuk memanfaatkan Grid System Anda memerlukan elemen kontainer, dengan kelas "container", dan di dalam kontainer kedua dengan kelas "row". Perhatikan bagaimana dalam kedua kasus akhiran "fluid" telah hilang, ini berbeda dengan Bootstrap 2. Dan di dalam kontainer kedua Anda akan menempatkan kolom Anda.

<div class="container">
    <div class="row">
        <div class="col-xs-6">col-xs-6</div>
        <div class="col-xs-6">col-xs-6</div>
    </div>
</div>

Seperti yang saya sebutkan sebelumnya, versi baru Bootstrap ini hadir dengan pendekatan Mobile First, artinya ini adalah bahwa kolom dengan kelas yang diakhiri dengan "xs" selalu akan melayang secara horizontal, tidak peduli ukuran viewport-nya. Jika Anda mengatakannya, menggunakan kolom yang diawali dengan "md" dan viewport berukuran kurang dari 992px (bahkan 991 piksel), kolom tersebut akan menumpuk satu di bawah yang lain dengan lebar 100%, seperti pada contoh berikut.

<div class="container">
    <div class="row">
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-4">col-md-4</div>
    </div>
</div>

Saat halaman ini dilihat di viewport 992px atau lebih, akan terlihat seperti ini:

Jika Anda kebetulan melihat dokumen itu di area pandang 991px atau kurang, akan terlihat seperti berikut:

Anda juga dapat menggabungkan kelas untuk menangani elemen Anda pada ukuran viewport tertentu. Misalnya, jika dalam contoh berikut Anda memerlukan dua kolom pertama yang melayang berdampingan di perangkat kecil (sm) dan ditumpuk di telepon, Anda dapat menambahkan col-sm-6 sebagai tambahan pada kelas col-md-4.

<div class="container">
    <div class="row">
        <div class="col-sm-6 col-md-4">col-sm-6 col-md-4</div>
        <div class="col-sm-6 col-md-4">col-sm-6 col-md-4</div>
        <div class="col-sm-6 col-md-4">col-sm-6 col-md-4</div>
    </div>
</div>

Dalam kasus ini, membuka halaman di area pandang yang lebih besar dari 991px Anda akan melihat tiga kolom yang sama, satu di sebelah yang lain, seperti contoh terakhir. Namun, jika Anda melihatnya di viewport dengan lebar antara 768px dan 991px, Anda akan mendapatkan hasil sebagai berikut:

Seperti pada contoh di atas, Anda dapat menggabungkan dan menyarangkan kolom dalam banyak kombinasi yang berbeda untuk membuat tata letak yang sangat kompleks. Ada lebih banyak lagi pada Grid System di Bootstrap, tapi membahas secara terperinci tentang setiap aspek darinya, perlu beberapa waktu untuk dibahas, jadi untuk melihat lebih dalam, saya akan menyarankan agar Anda terus maju dan melihat dokumentasinya.

Bootstrap CSS

Sebagian besar kelas untuk bagian CSS Dasar dari Bootstrap tetap sama, namun ada beberapa perubahan yang harus selalu diingat saat menggunakan versi baru ini.

Kodenya secara keseluruhan, telah ditulis ulang dan nama variabel telah berubah. Jika Anda melihat file .less, Anda akan menemukan bahwa semua variabel dalam kerangka telah beralih dari camelCase menjadi menggunakan tanda hubung untuk pemisahan kata, dan juga setiap nama variabel telah distandarisasi dalam pendekatan "element-state-pseudo state". Apa ini berarti bahwa gaya elemen-tertentu seperti:

<ul class="unstyled">...</ul>

Sekarang diawali dengan elemen yang mereka gunakan, jadi dalam Bootstrap versi baru ini, daftar sebelumnya akan menjadi.

<ul class="list-unstyled">...</ul>

Hal yang sama berlaku untuk daftar dengan gaya "inline" yang diterapkan padanya. Beberapa perubahan lain dalam nama variabel yang tercermin dalam kelas yang telah kita ketahui dari hari-hari sebelumnya adalah yang terkait dengan ukuran, misalnya dengan tombol, di versi 2.* Anda akan memiliki:

<button class="btn btn-mini"></button>
<button class="btn btn-small"></button>
<button class="btn btn-large"></button>

Akhiran ukuran ini telah berubah agar sesuai dengan konvensi penamaan keseluruhan dan ini sama dengan Grid System, jadi deklarasi tombol sebelumnya untuk versi tiga menjadi:

<button class="btn btn-xs"></button>
<button class="btn btn-sm"></button>
<button class="btn btn-lg"></button>

Hal yang sama juga berlaku untuk ukuran input dan deklarasi visibilitas.

Tabel Responsif

Keseluruhan sintaks dan tata letak tabel tetap sama dalam kerangka versi ini, namun, setia pada keseluruhan paradigma "Mobile First", sekarang kita memiliki tabel responsif dalam iterasi Bootstrap ini. Untuk memanfaatkannya, cukup bungkus seluruh tabel dalam sebuah kontainer dengan kelas "responsive-table", yang akan dilakukan adalah membuat tabel bergulir secara horizontal di perangkat kecil (<768px).

<div class="table-responsive">
    <table class="table">...</div>
</div>

Dan tabel yang dihasilkan:

Form

Di departemen CSS, ada dalam Form di mana Anda akan melihat perbedaan utama. Sebagai permulaan, setiap masukan dalam form di Bootstrap tiga sekarang ditampilkan sebagai elemen "block" dengan lebar 100%. Atribut "size" yang dapat Anda modifikasi dengan kelas dalam form control berhubungan dengan padding dan font-size dari elemen dan bukan lebarnya, untuk mengontrol bahwa Anda perlu memasukkannya ke dalam kontainer dengan lebar yang diinginkan.

Markup untuk form juga berubah, dalam bentuknya yang paling dasar, di versi 2.* sebuah form akan terlihat seperti ini.

<form>
    <fieldset>
        <legend>...</legend>
        <label for="input">...</label>
        <input type="text" name="input" placeholder="..." >
    </fieldset>
</form>

Markup untuk form yang sama di versi baru menambahkan elemen tambahan, dan sebuah kelas ke masukan itu sendiri, dan berjalan sebagai berikut.

<form role="form">
    <fieldset>
        <legend>...</legend>
        <div class="form-group">
            <label for="input">...</label>
            <input type="text" name="input" class="form-control" placeholder="..." >
        </div>
    </fieldset>
</form>

Bootstrap telah dibuat dengan Aksesibilitas dalam pikiran, itulah alasan penambahan atribut "role", perhatikan juga bahwa label/input combo dibungkus di dalam pembungkus dengan kelas "form-group", dan seperti yang lainnya, ini telah berkaitan dengan sifat responsif dari kerangka kerja.

Form pencarian telah hilang dalam versi ini, dan karena semua input dan textarea lebar 100% secara default, pertimbangan khusus harus diambil dengan form inline, namun markup untuk ini hampir sama dengan form sebelumnya.

<form class="form-inline" role="form">
    <div class="form-group">
        <label class="sr-only" for="email">Email address</label>
        <input type="email" class="form-control" placeholder="Enter email">
    </div>
    <div class="form-group">
        <label class="sr-only" for="pass">Password</label>
        <input type="password" class="form-control" placeholder="Password">
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox"> Remember me
        </label>
    </div>
    <button type="submit" class="btn btn-default">Sign in</button>
</form>

Perhatikan penambahan kelas "form-inline" ke elemen form, dan "sr-only" ke label, kelas terakhir ini berkaitan dengan bagian Aksesibilitas dari kerangka kerja. Penggunaan label bersifat opsional dengan form inline, namun sangat dianjurkan dan tidak menyakiti siapa pun. Dan omong-omong, "sr-only" hanya untuk Screen Reader saja. Jadi pembaca layar akan menemukan label dan "mengatakannya" kepada pengguna.

Terakhir, untuk membuat form horizontal Anda cukup mengatur lebar label dengan mengaturnya "col-md-" atau "_sm" atau apa pun dan kelas "control-label" yang sesuai, sama seperti dengan versi dua., lalu bungkus masukan dalam sebuah kontainer dengan lebar kolomnya sendiri yang ditentukan.

<form class="form-horizontal">
    <div class="form-group">
        <label class="col-md-2 control-label" for="email">Email address</label>
        <div class="col-md-3">
            <input type="email" class="form-control" placeholder="Enter email">
        </div>
    </div>
</form>

Dan form yang dihasilkan.

Ada beberapa perubahan lain yang telah dilakukan sehubungan dengan form, seperti penghapusan kelas "input-prepend" dan "input-append", yang mendukung "input-group" dan "input-group-addon". Namun, masih banyak lagi yang harus dibahas, jadi untuk detailnya, lihat dokumentasinya.

Glyphicons

Area lain di mana Anda akan menemukan perubahan besar adalah ikon kerangka kerja. Perpustakaan ikon mencakup 40 glyph baru, dan tidak hanya itu, mereka beralih dari penggunaan gambar ke font, jadi sekarang alih-alih menambahkan dua gambar "glyphicons-*" ke folder "img" Anda, Anda harus menambahkan empat "glyphicons" ke direktori "fonts" Anda, dan ya, keempatnya. Ini ada hubungannya dengan kompatibilitas browser.

Untuk alasan kinerja, setiap ikon memerlukan kelas dasar dan ikon kelas tertentu. Jadi sekarang, untuk menambahkan ikon user yang akan Anda gunakan:

<span class="glyphicon glyphicon-user"></span>

Peralihan dari gambar ke font, memberi kontrol pada pewarnaan dan ukuran ikon, dan juga memungkinkan Anda mengganti ikon default dengan beberapa opsi yang Anda sukai. Jika Anda kebetulan bertanya-tanya di mana Anda bisa menemukan ikon font semacam itu, Fontello adalah sumber yang bagus.

Komponen JavaScript

Meskipun didesain ulang dan diciptakan ulang, Komponen JavaScript dalam Bootstrap 3.0 menyimpan nama dan penggunaan yang sama. Dengan beberapa perbedaan kecil dan tidak begitu halus.

Modal

Mungkin salah satu plugin yang paling banyak digunakan di Bootstrap adalah Modal. Anda akan merasa sangat mirip, dengan perbedaan karena kontainer "modal-header", "modal-body" dan "modal-footer" tidak dibungkus di dalam sebuah "modal-content" di dalam kontainer "modal-dialog". Jadi apa yang dulu:

<div class="modal hide fade">
    <div class="modal-header"></div>
    <div class="modal-content"></div>
    <div class="modal-footer"></div>
</div>

Berubah menjadi:

<div class="modal fade">
    <div class="modal-content">
        <div class="modal-dialog">
            <div class="modal-header"></div>
            <div class="modal-content"></div>
            <div class="modal-footer"></div>
        </div>
    </div>
</div>

Ya, ini adalah markup yang sedikit lebih banyak, namun meningkatkan responsifitas komponen dan juga memungkinkannya menggulir seluruh viewport alih-alih memiliki parameter "max-height".

Untuk memicunya melalui JavaScript, Anda akan menggunakan metode yang sama seperti sebelumnya.

$( '#my-modal' ).modal('show');

Sisanya dari plugin sebagian besar tetap sama. Pada catatan khusus, accordion dihilangkan dalam mendukung collapsible panel, keduanya bekerja hampir sama dan memiliki sintaks yang sangat mirip. Dengan beberapa kelas yang sedikit berubah, mereka masih memerlukan plugin transisi dan tidak memerlukan kontainer tambahan.

Juga, plugin Typeahead telah hilang dari Bootstrap yang mendukung Plugin Typeahead Twitter.

Events

Event JavaScript sekarang memiliki namespace, tapi apa artinya bagi Anda? Nah, di Bootstrap dua, untuk listen pada beberapa peringatan di situs Anda telah "close", Anda akan menambahkan:

$( '#my-alert' ).bind( 'close', function() {});

Sekarang di versi ketiga ini, nama event telah berubah, nama itu sesuai dengan kerangka kerja, jadi cuplikan sebelumnya adalah:

$( '#my-alert' ).bind( 'close.bs.alert', function() {});

Silakan lihat sisa dari Komponen JavaScript yang ditawarkan Bootstrap (yang masih bergantung pada jQuery).

Komponen baru

Ada beberapa komponen baru di bagian CSS dari kerangka kerja, list group dan panel.

List Groups

List Groups, dari dokumentasi resmi.

... adalah komponen yang fleksibel dan kuat untuk menampilkan tidak hanya daftar elemen sederhana, namun yang rumit dengan konten kustom.

Untuk membuat list group cukup buat unordered list dengan kelas "list-group", dan tambahkan "list-group-item" ke setiap item daftar.

<ul class="list-group">
    <li class="list-group-item">Lorem ipsum...</li>
    <li class="list-group-item">Dolor sit...</li>
</ul>

Anda dapat menambahkan kelas "active" ke item apa pun dalam daftar untuk menyorotnya, juga jika Anda kebetulan menempatkan badge di dalamnya, itu akan dipusatkan secara vertikal dan disejajarkan ke kanan, di dalam item. Silakan mencobanya.

Panel

Panel adalah cara untuk memasukkan beberapa konten di situs atau aplikasi Anda, menyoroti dan memberinya rasa kesatuan. Markup panel cukup sederhana, dan isinya dapat dikombinasikan dengan elemen yang berbeda untuk mencapai tampilan dan nuansa yang unik.

Panel dapat memiliki header dan footer dan mendapatkan arti khusus dengan kelas yang sudah terkenal "sucess", "error", "warning", dll. Contohnya.

<div class="panel panel-success">
    <div class="panel-heading">Panel Heading</div>
    <div class="panel-body"><p>Some content here</p></div>
    <ul class="list-group">
        <li class="list-group-item">Lorem ipsum...</li>
        <li class="list-group-item">Dolor sit...</li>
    </ul>
</div>

Seperti yang Anda lihat, panel bekerja dengan baik dengan kelompok daftar, dan juga dengan tabel yang tidak memiliki border.

Customizer

Juga yang baru di versi ini adalah Customizer dimana, tidak hanya tampilan yang telah berubah, jauh lebih baik diatur dan memberi Anda kontrol pada hal-hal seperti lebar viewport dimana Grid System tertentu mengambil kendali.

Seperti biasa, Anda bisa mengatur semua gaya font dan warna Anda. Ini topik tersendiri yang sangat besar, jadi saya akan mendorong Anda untuk pergi sendiri dan mengacaukannya.

Dukungan Browser

Lama telah penderitaan yang dibawa ke kita semua oleh Internet Explorer, versi enamnya adalah mimpi buruk total dan pendahulunya masih memiliki banyak penyesuaian untuk dilakukan. Di versi 2.* tim Bootstrap masih mendukung browser Microsoft versi tujuh. Dalam iterasi baru kerangka ini, dukungan untuk IE tujuh sudah hilang, begitu pula untuk Mozilla Firefox 3.6 dan yang lebih lama.

Secara khusus, Bootstrap mendukung versi terbaru dari semua browser utama (Safari, Opera, Chrome, Firefox dan IE), di Windows dan Mac saat keduanya ada.

Untuk IE, mendukung versi delapan dan selanjutnya, dan meskipun ada beberapa properti yang tidak di-render oleh browser, seperti "border-radius", kerangka ini berfungsi penuh hanya dengan beberapa perbedaan kecil tampilan dan nuansa. IE juga membutuhkan respond.js untuk dukungan media query.

Untuk mendapatkan daftar rincian solusi dan jalan keluar untuk berbagai browser (ehem Internet Explorer ehem) lihat dokumentasi resminya.

Kesimpulan

Sejak awal, Bootstrap telah menjadi alat hebat untuk pembuatan prototipe dan pembuatan situs web dan aplikasi web yang hebat dan versi ketiga ini tidak berbeda. Jika Anda hanya memerlukan satu alasan untuk menggunakannya, saya pasti akan menuju Grid System, dengan pertumbuhan penjelajahan mobile dan ukuran viewport yang selalu meningkat di luar sana, sifat responsif adalah suatu keharusan sekarang, lebih dari sebelumnya. Dan di versi terbaru ini, itulah area dimana Bootstrap paling bersinar.

Apa alamat web resmi bootstrap?

Framework bootstrap terdiri dari file apa saja?

Apa fungsi dari bootstrap?

Apa itu bootstrap PHP?