BOOTSTRAP FORM INPUTS (Part 2), BOOTSTRAP INPUT SIZING. (FO)

BOOTSTRAP FORM INPUT

Untuk artikel kali ini, saya akan membahas tentang BOOTSTRAP FORM INPUTS (part 2) yang mana Part 1 nya sudah di jelaskan oleh teman saya.

Static Control

Static control di gunakan untuk memasukkan text biasa ke samping form label secara horizontal.

Begini Contohnya:



Dengan memberikan form-control-static, maka hasil yang di hasilkan akan menjadi :

Jika kita menghilangkan form-control-static, maka hasil yang akan di hasilkan menjadi:

Sehingga akan terlihat kurang rapi.

Bootstrap Input Groups

Bootstrap input groups dapat digunakan untuk menggabungkan icon dan input type seperti gambar di bawah ini:

Begini cara penulisannya:

Kita harus menggunakan input-group-addon untuk menyatukan icon dan input type textnya. Jika kita menghilangkan input-group-addon - nya maka hasil yang di hasilkan akan menjadi seperti ini:

Menyebabkan icon dan emailnya terpisah.

Bootstrap Form Control States

Jenis - Jenis Control States yang terdapat pada bootstrap:

    INPUT FOCUS - Menghilangkan outline input dan memberikan bayangan pada box
    DISABLED INPUTS -Menjadikan input disabled.
    DISABLED FIELDSETS - Menjadikan Fieldset disabled
    READONLY INPUTS - Menjadikannya readonly atau hanya dapat dibaca.
    VALIDATION STATES - Memberikan validasi.  
    HIDDEN LABELS - Menyembunyikan labels.

Berikut contohnya:



Cara penulisannya:


Untuk label focused kita menambahkan id focusedInput pada tag input .


Untuk Disabled, kita menambahkan id disabledInput pada tag input.


Untuk Input Success, kita menambahkan id inputSuccess2 pada tag input. Jika ingin disertai dengan icon, kita dapat menambahkan class glyphicon.










Untuk Input Warning, kita menambahkan id inputWarning2 pada tag input.

Untuk Input Error, kita menambahkan id inputError2 pada tag input.
Sekian tentang Bootstrap input, sekarang saya akan membahas tentang input sizing.

Bootstrap Input Sizing

Bootstrap input sizing digunakan untuk memberikan size terhadap tag input.Kita dapat mengatur tinggi dari sebuah input element menggunakan class .input-lg and .input-sm dan mengatur lebar element dengan class grid column seperti .col-lg-*and .col-sm-*.

HEIGHT SIZING

Height sizing digunakan untuk mengatur tinggi dari sebuah input text. Terdiri dari input -  lg yang berarti input - large dan input - sm yang berarti input - small.


Begini perbandingannnya:

Cara penulisannya:














Untuk input - lg, kita akan menambahkan class input - lg di tag inputnya, begitu juga dengan input - sm. Perlu di ingat, karena kita menggunakan bootstrap, jangan lupa untuk menyertakan file bootstrapnya ya.

Column Sizing

Column sizing digunakan untuk mengatur tinggi dari sebuah input text. Terdiri dari input -  lg yang berarti input - large dan input - sm yang berarti input - small.

Untuk menggunakan column sizing, begini syntaxnya:

.col-xs-*

untuk tanda *, kita isi dengan berapa angka yang kita inginkan.

Begini contohnya:





Cara penulisannya:






Sekian dan Terimakasih. Semoga Bermanfaat.