Search results for bootstrap
Showing posts sorted by relevance for query bootstrap. Sort by date Show all posts
Showing posts sorted by relevance for query bootstrap. Sort by date Show all posts

MENGENAL FRAMEWORK BOOTSTRAP

January 30, 2017 Add Comment
Bootstrap - Mengenal framework bootstrap | Budayakan Berbagi
Pada pemebahasan sebelumnya, kita telah mengenal macam-macam framework. Salah satu framework adalah bootstrap. Bootstrap sendiri adalah sebuah framework CSS dari twitter yang menyediakan komponen-komponen antar muka siap pakai dan telah dirancang sedemikian rupa untuk keperluan desain halaman website yang artistic.
Selain komponen-komponen dasar untuk membangun antar muka. Bootstrap juga menyediakan grid 12 kolom yang dapat menunjang kinerja anda dalam mendesain layout yang rapi. Sebagai CSS Framework, bootstrap tergolong paket lengkap.Tekhnologi Html, Css dan JavaScript yang ada pada Bootstrap. Kita tidak hanya dapat melakukan styling dengan CSS saja, akan tetapianda juga dapat menggunakan komponen-komponen seperti icon, tombol dan navigasidengan desain unik khas bootstrap. Selain itu, tersedia banyak Plugin JQuery yang dapat membantu kita untuk membuat tampilan website yang lebih atraktif.

Framework Bootstrap dibangun menggunakan Less, yaitu sebuah preprocessor dengan fungsi tambahan seperti variable, mixin, dan fungsi untuk mengompilasi CSS. Fitur-fitur yang ditawarkan bootstrap dapat membuat sang developer Bootstrap kaya jika dia berorientasi dengan uang. Framework ini seharusnya layak untuk menjadi framework berbayar, mengingat fitur-fitur yang ditawarkan sangat lengkap. Kenyataanya, framework ini justru tersedia gratis, yaitu dengan menggunakan lisensi MIT. MIT merupaan lisensi open source, dimana semua kalangan bebas menggunakan framework ini secara gratis tanpa takut terkena masalah legalitas.
Baca juga artikel lainnya :

MENDOWNLOAD BOOTSTRAP

Framework Bootstrap dapat anda download secara gratis di alamat http://getbootstrap.com/, saat anda mengklik tombol download, maka anda akan diberikan 3 pilihan metode download seperti berikut :
  • Download Bootstrap : berisi file CSS, JavaScript, dan font yang telah dikompilasi. Tidak ada dokumen atau file asli yang disertakan.
  • Download Source : pilihan ini berisi JavaScript, Font, Dokumen asli Bootstrap dan Source dari Less yang merupakan preprocessor untuk membangun framework bootstrap. Tetapipillihan ini membutuhkan sebuah Less compiler dan beberapa pengaturan.
  • Download Sass : berisi file bootstrap yang telah di-porting dari Less ke Sass supaya mudah dimasukkan ke dalam rails, Compass, atau Sass itu sendiri.
Berdasarkan ketiga pilihan download, anda pilih Download Bootstrap, karena file tersebut telah dikompilasi dan siap untuk digunakan. Pilihan ini membuat anda tidak perlu ragu lagi memikirkan apa itu Preprocessor CSS, cara mengompilasi, dan lain sebagainya. Anda cukup mengerti sedikit tentang CSS dan anda dapat memulai menggunakan Bootstrap.

Bootstrap termasuk Framework yang rajiin update. Saat penulisan, Bootstrap yang didownload pada awal Januari 2017, Bootstrap telah merilis versi 3.3.7. untuk mengikuti perkembangan Bootstrap, anda dapat men-follow Twitternya di @twbootstrap.

FITUR

Pada Bootstrap versi 3 terdapat banyak perubahanyang menarik, fitur baru dan telahsepenunhya diperbarui untuk memenuhi tren webterbaru dan kebutuhan pengguna.

MOBILE-FIRST APPROACH

Pada versi 3, bootstrap mengikuti pendekatan mobiledan membuat situs anda selalu responsive secara default. Bootstrap didesain ulang dan dibangun kembali mulai dari perangkat mobile anda dan perangkat dengan skala diatasnya. File CSS responsive tidak lagi terpisah dan semua fitur responsive sekarang termasuk kedalam file utama. Jika anda tidak menginginkan situs responsive, anda dapat mematikan fitur ini dengan menambahkan beberapa CSS ekstra. Anda dapat menemukan cara untuk melakukan hal ini di dokumentasi bootstrap yang disertai contoh untuk menonaktifkan fitur adaptif atau responsive.

STRUKTUR FILE BOOTSTRAP

Jka Bootstrap telah selesai di download, anda eksstrak file tersebut. Berikut ini susunan atau struktur file pada bootstrap :


Pada folder CSS terdapat empat file CSS sebagai berikut :
  • Boostrap.css, adalah file CSS utamayang harus dissertakan dalam halaman HTML yang anda buat. Banyaknya komentar/ keterangan di dalam baris kode pada file tersebut membuat Bootstrap sangat tepat digunakan untuk keperluan development.
  • Boostrap.min.css, adalah hasil minify/kompres dari boostrap.css. ukuran file ini lebih kecil. File ini digunakan jika desain situs yang anda buat untuk online.
  • Bootstrap-theme.css; diibaratkan sebuah kebutuhan sekunder. Anda boleh tidak menyertakan pada file HTML. Fungsi file ini untuk memberikan efek 3D pada tombol dan beberapa elemen lainnya.
  • Bootstrap-theme.min.css, adalah file CSS hasil minify dari Bootstrap.css. file ini digunakan jika desain situs yang anda buat untuk online.
Di dalam folder js, terdapat dua file sebagai berikut :
  • Bootstrap.js, adalah library JavaScript untuk memberikan efek seperti modal, dropdown, scrollspy, dan lain sebagainya.
  • Bootstrap.min.js, digunakan sebagai pengganti bootstrap.js jika situs yang anda buat untuk online.
Terakhir, yang menjadi pembeda pada versi sebelumnya adalah folder fonts. Folder ini berisi ikon gambar/glyphicon. Beralihnya ikon dari gambar datar ke font ini akan mempercepat performa website, karena karakter font memakan bandwidth yang lebih sedikit jika dibandingkan gambar datar.
Artikel Terkait :


Sekian dan semoga Bermanfaat ...

GRID PADA BOOTSTRAP

March 27, 2017 1 Comment
Bootstrap | Grid Pada Bootstrap | Budayakan Berbagi
Setelah teman-teman mengenal Bootstrap dan mengetahui cara menggunakannya, selanjutnya kita akan cara penerapan Bootstrap. Dan artikel kali ini kita akan membahas tentang sistem Grid dari Bootstrap.

GRID

Disini kita akan mempelajari aturan dan struktur dasar sistem Grid 12 kolom pada bootstrap serta teknik dan contoh penggunaannya.

ATURAN DAN STRUKTUR DASAR SISTEM GRID BOOTSTRAP

Untuk menggunakan sistem Grid Bootstrap, ada kaidah-kaidah yang harus kita ikuti. Bbberikut ini adalah aturan yang harus kita gunakanuntuk menggunakan sistem Grid Bootstrap :
  • Elemen row harus ditempatkan di dalam elemen container (untuk fixed-width) atau container-fluid (untuk full-width). Hal ini bertujuan untuk menyelaraskan alignment dan padding.
  • Untuk membuat kelompok kolom secara horisontal, gunakan elemen row.
  • Konten harus ditempatkan di dalam kolom dan hanya kolom yang boleh ditempatkan secara langsung di dalam baris (row).
  • Kolom menghasilkan gutters (jarak antar konten kolom) melalui padding. Padding disajikan pada baris untuk pertama dan terakhir kolom melalui margin negatif pada class row (.rows).
  • Kolom grid dibuat dengan menentukan 12 kolom yang ingin di span. Sebagai contoh, 3 kolom yang sama akan menggunakan sebanyak tiga col-xs-4. karena 3 x 4 = 12, maka penulisan tidak boleh melebihi 12 kolom.
  • Untuk layar ponsel (extra small), menggunakan class prefix .col-xs-*.
  • Layar tablet atau smartphone (small) menggunakan class prefix .col-sm-*.
  • Layar ukuran komputer dan laptop (medium) menggunakan class prefix .col-md-*.
  • Untuk layar komputerdan laptop ukuran besar, menggunakan .col-lg-*.
  • Saat menuliskan class kolom, menggunakan aturan seperti class="class prefix-jumlah kolom". Sebagai contoh, saat membuat grid, ukuran layar yang anda gunakan extra small dengan jumlah kolom 3, maka tag yang digunakan.
Baca juga artikel lainnya :

Dibawah ini merupakan gambar yang diambil dari dokumentasi bootstrap mengenai cara sistem grid bekerja di beberapa perangkat.

Untuk mengetahui struktur dasar dari sistem Grid Bootstrap, diberikan contoh baris pertama mempunyai 1 kolom, baris kedua mempunyai 2 kolom, dan baris ketiga mempunyai 3 kolom. Markup kodenya seperti gambar di bawah ini :

  1. CONTOH PENGGUNAAN SISTEM GRID
    Setelah kita mengerti aturan dan struktur sistem Grid pada Bootstrap, selanjutnya akan dibahas contoh penggunaannya. Untuk lebih jelas contoh penggunaan sistem grid, ikuti pembahasannya seperti di bawah ini:

  2. OFFSET KOLOM(MENGGESER KOLOM), NESTING COLUMN (KOLOM DI DALAM KOLOM) DAN MENGURUTKAN KOLOM
Silahkan lanjutkan dengan materi selanjutnya :
  • Grid pada Bootstrap
  • Tipografi pada Bootstrap
  • Penggunaan Bootstrap untuk Tabel
  • Penggunaan Bootstrap untuk Form
  • Penggunaan Bootstrap untuk Button
  • Penggunaan Bootstrap untuk Image
  • Helper Class dan Komponen Dasar Bootstrap
  • Plugin JavaScript pada Bootstrap
Artikel Terkait :


Sekian artikel kali ini, silahkan lanjut ke materi selanjutnya dan budayakan berbagi dan semoga Bermanfaat ...

CARA MENGGUNAKAN BOOTSTRAP

March 27, 2017 Add Comment
Bootstrap | Cara Menggunakan Bootstrap | Budayakan Berbagi

Selamat datang buat teman-teman dan terima kasih. Disini kita akan membahas bagaimana cara mengimplementasikan bootstrap ke dalam suatu website. Dengan menggunakan berbagai fitur atau properti class yang telah disediakan di dalam bootstrap baik itu CSS ataupun JavaScirptnya.
Pada pembahasan sebelumnya, kita diarahkan untuk mendownload Bootstrap, kemudian anda ekstrak file Bootstrap, yaitu bootstrap-3.3.7. Salin folder tersebut dan masukkan ke dalam folder proyek yangakan kita buat. Sebagai contoh, masukkan folder tersebut ke dalam direktori C:/xampp/htdoct/latihan. Susunan folder akan seperti gambar di bawah :

Untuk percobaan, anda buat dokumen HTML sederhana seperti gambar dibawah ini :
Baca juga artikel lainnya :


Jika anda tampilkan pada browser, hasilnya akan seperti gambar berikut :

Anda panggil style CSS Bootstrap dan ketikkan '<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">' diantara tag '<head> & </head>'. Jika susunan direktori dan markup HTML yang akan diketikkan benar, hasilnya akan seperti gambar di bawah :

Silahkan lanjutkan dengan materi selanjutnya :
  • Grid pada Bootstrap
  • Tipografi pada Bootstrap
  • Penggunaan Bootstrap untuk Tabel
  • Penggunaan Bootstrap untuk Form
  • Penggunaan Bootstrap untuk Button
  • Penggunaan Bootstrap untuk Image
  • Helper Class dan Komponen Dasar Bootstrap
  • Plugin JavaScript pada Bootstrap
Artikel Terkait :


Sekian artikel kali ini, silahkan lanjut ke materi selanjutnya dan budayakan berbagi dan semoga Bermanfaat ...

DAFTAR KOMPONEN BOOTSTRAP

February 17, 2017 2 Comments
Bootstrap | Daftar Komponen Bootstrap - Budayakan Berbagi
Selamat datang buat teman-teman yang tlah mampir di blog ini dan terima kasih. jadi ini merupakan artikel terbaru setelah sebelumnya selama 3 minggu tidak buat artikel, maklum urus tugasyang lagi numpuk. Okey, kita langsung saja ke pembahasan.

Di dalam bootstrap terdapat 3 komponen yang dapat kita gunakan untuk mendesain halaman, yaitu komponen CSS, komponen dasar (Base Component), dan javascript.

Komponen Css

Komponen css berisi pengaturan global CSS, elemen dasar HTML yang telah diberi style, dan grid system 12 kolom yang dapat anda gunakan sebagai perangkat bantu untuk merancang layout. Berikut adalah komponen-komponen CSS yang terdapat pada framework Bootstrap :
  • Grid System
    Sepertiyang telah kita bahas pada artikel sebelumnya, Grid system berfungsi untuk membuat layout halaman melalui serangkaian baris dan kolom. Pada bootstrap, grid system yang digunakan adalah 12 kolom.


  • Tipografi
    Berisi pengaturan dan style font seperti heading, bold, italic, dan lain sebagainya.

  • Tabel
    Dengan kompnen tabel yang telah diberi style oleh bootstrap, menjadikan data yang ditampilkan lebih menarik.

    • Baca juga artikel lainnya :

  • Form
    Anda tidak perlu lagi mengatur style pada elemen form, karena bootstrap telah menyediakan form yang telah diberi style.


  • Button
    Dengan berbagai warna dan ukuran, menjadikan user senang berinteraksi dengan website anda. Warna akan membuat pengunjung tidak cepat bosan.


  • Images
    Merupakan gambar dengan beberapa pilihan bentuk bingkai.

Komponen Dasar

Bootstrap juga menyediakan komponen-komponen dasar yang asli dan khas framework Bootstrap. Tampilan khas ala Twitter dari Bootstrap akan menambah nilai seni pada tampilan situs anda. Berikut adalah komponen-komponenn dasar yang tersedia di dalam framework bootstrap :
  • Glyphicon
  • Dropdown
  • Button Group
  • Button Dropdown
  • Input Group
  • Navs
  • Navbar
  • Breadcrumbs
  • Pagination
  • Label
  • Badge
  • Jumbroton
  • Page Header
  • Thumbnails
  • Alerts
  • Progress Bar
  • Panels
  • Responsive Embed

Komponen Javascript

Selain komponen CSS dan komponen dasar, Bootstrap juga menyediakan banyak pilihan plugin jQuery yang dapat memberikan efek animasi pada komponen Bootstrap. Hal ini akan membuat website anda menjadi lebih hidup. Komponen javascript pada Bootstrap sebagai berikut :
  • Transitions
  • Modal
  • Dropdown
  • Scrollspy
  • Tab
  • Tooltip
  • Popover
  • Alert
  • Button
  • Collapse
  • Carousel
  • Affix
Setelah mengetahui komponen apa saja yang terdapat pada bootstrap, kita mengharapkan mampu memahami dari setiap pemanggilan komponen tersebut. Sehingga jika kita ingin melakukan suatu modifikasi terhadap suatu tampilan, maka kita harus mengubah script didalam komponen tersebut.
Artikel Terkait :


Sekian dan semoga Bermanfaat ...

PENERAPAN SIZING STYLE BUTTON GROUP BOOTSTRAP

October 15, 2017 Add Comment
Bootstrap | PENGGUNAAN BUTTON GROUP PADA BOOTSTRAP | Budayakan Berbagi Bootstrap juga menyediakan tiga class yang dapat anda gunakan untuk mengatur ukuran tombol, yaitu .btn-group-lg untuk ukuran besar, .btn-group-sm untuk ukuran kecil dan .btn-group-xs untuk ukuran sangat kecil.
Berikut ini adalah contoh Markup HTML untuk mengatur ukuran tombol grup :


Berikut Tampilan dari Script di atas :

Artikel Terkait

PENERAPAN NESTING STYLE BUTTON GROUP BOOTSTRAP

October 15, 2017 Add Comment
Bootstrap | PENGGUNAAN BUTTON GROUP PADA BOOTSTRAP | Budayakan Berbagi Anda dapat menempatkan button group ke dalam button group lain dengan menempatkan class .btn-group ke dalam class .btn-group lain, hal ini dilakukan jika anda ingin menu dropdown dicampur dengan serangkaian tombol. Berikut contoh markup HTML-nya:


Berikut tampilan dari Script di atas :

Artikel Terkait

PENERAPAN STYLE DASAR BUTTON GROUP BOOTSTRAP

October 15, 2017 Add Comment
Bootstrap | Style Dasar Button Group Pada Bootstrap | Budayakan Berbagi Untuk menerapkan style dasar button group, wrap tag <button> ke dalam <div class="btn-group">. Berikut ini adalah contoh markup HTML dari button Group dengan Style dasar:


Tampilan dari Script di atas :

Artikel Terkait

PENERAPAN VERTICAL STYLE BUTTON GROUP BOOTSTRAP

October 15, 2017 Add Comment
Bootstrap | PENGGUNAAN BUTTON GROUP PADA BOOTSTRAP | Budayakan Berbagi Class .btn-group-vertical dapat membantu anda untuk membuat menu nutton dengan susunan vertical. Berikut ini adalah contoh markup HTML-nya :


Berikut Tampilan dari Script di atas :

Artikel Terkait

PENERAPAN TOOLBAR STYLE BUTTON GROUP BOOTSTRAP

October 15, 2017 Add Comment
Bootstrap | PENGGUNAAN BUTTON GROUP PADA BOOTSTRAP | Budayakan Berbagi Style ini anda gunakan jika button berperan sebagai toolbar. Jika pada style dasar class yang anda gunakan adalah .btn-group, pada style ini, anda perlu menambahkan class .btn-toolbar sebagai induk dari class .btn-group. Sebagai contoh :
<div class="btn-toolbar" role="toolbar"><div class="btn-group"> … </div></div>.
Berikut ini contoh markup HTML untuk membuat button group dengan style toolbar:


Tampilandari Script di atas:

Artikel Terkait

PENERAPAN JUSTIFIED STYLE BUTTON GROUP BOOTSTRAP

October 15, 2017 Add Comment
Bootstrap | PENGGUNAAN BUTTON GROUP PADA BOOTSTRAP | Budayakan Berbagi Class .btn-group-justified dapat membantu anda untuk membuat grup tombol membentang pada ukuran yang sama dengan rentang seluruh lebar induknya. Style ini juga berfungsi pada button dropdown di dalam kelompok tombol.


Berikut Tampilan dari Script di atas:

Artikel Terkait

GRID PADA BOOTSTRAP - Stacked-to-horizontal

March 28, 2017 Add Comment
Bootstrap | Grid Pada Bootstrap - Stacked-to-horizontal | Budayakan Berbagi

CONTOH PENGGUNAAN SISTEM GRID

Setelah kita mengerti aturan dan struktur sistem Grid pada Bootstrap, selanjutnya akan dibahas contoh penggunaannya. Untuk lebih jelas contoh penggunaan sistem grid.

STACKED-TO-HORIZONTAL

Pada artikel kali ini akan dibahas salah satu tekhnik dasar yang sangat dibutuhkan dalam membuat desain web responsif, yaitu membuat elemen pada halaman situs dengan otomatis menumpuk secara horizontal ketika ketika browser anda di ubah menjadi lebih kecil. Secara tekhnis tidak ada tekhnik khusus yang digunakan, Karena dalam keadaan default, sistem Grid Bootstrap telah mendukung responsive web design. Seperti membuat Grid, biasa anda hanya perlu membuat container, row dan column. Berikut merupakan markup kode jika anda menggunakan container biasa :
Baca juga artikel lainnya :

Tampilan full-window dengan class container

Tampilan setelah di-rezise


Jika di perhatikan 2 gambar di bawah ini, kita menggunakan Grid dengan container-fluid (full-window). Untuk menggunakan container-fluid, kita perlu mengganti <div class="container"> menjadi "<div class="container-fluid">". Perbedaan antara container-fluid dan container adalah lebar container-fluid beradaptasi dengan lebar browser sehingga menutup dari ujung ke ujung (full-width).
Tampilan full-width dengan class container-fluid


Artikel Terkait :


Sekian artikel kali ini, silahkan lanjut ke materi selanjutnya dan budayakan berbagi dan semoga Bermanfaat ...

TIPOGRAFI PADA BOOSTRAP - TRANSFORMASI TEXT

August 15, 2017 Add Comment
Bootstrap | Tipografi Pada Bootstrap - Transformasi Text | Budayakan Berbagi
HTML memang tidak menyediakan tag atau atribut untuk melakukan transformasi teks. Salah satu tindakan yang dapat anda lakukan adalah melalui property CSS text-transform seperti gambar di bawah ini:
Baca juga artikel Terkait:


Pada Bootstrap, transformasi teks menjadi lebih praktis. Hal ini karena anda tidakperlu menuliskan kode CSS, anda cukup memanggil class transformasi teks seperti: .teks-lowercase, .text-uppercase, dan .text-capitalize yang ada di bootstrap untukmelakukan transformasi teks pada gambar di bawah ini adalah contoh transformasi teks menggunakan Bootstrap.

Baca lainnya, beberapa penggunaan atau penerapan tipografi pada bootstrap:
Artikel Terkait :


Sekian artikel kali ini, silahkan lanjut ke materi selanjutnya dan budayakan berbagi dan semoga Bermanfaat ...

TIPOGRAFI PADA BOOSTRAP - MENULISKAN ALAMAT

August 17, 2017 Add Comment
Bootstrap | Tipografi Pada Bootstrap - Menuliskan Alamat | Budayakan Berbagi
Tag <address> mendefinisikan informasi kontak untuk penulis/pemilik dokumen. Jika elemen <address> berada di dalam elemen <body>, berarti informasi kontak digunakan untuk dokumen. Jika elemen <address> berada di dalam sebuah elemen <article>, berarti informasi kontak untuk artikel tersebut.

Style pada elemen <address> biasanya berupa huruf miring. Kebanyakan browser akan menambahkan satu baris sebelum dan setelah elemen address.
Baca juga artikel Terkait:


Pada bootstrap terdapat pembaruan dari sisi style font. Contoh penggunaan style tipografi Address menggunakan Bootstrap seperti pada gambar di bawah:
Script Penggunaan Address Pada Bootstrap

Tampilan dari Script


Perlu anda perhatikan, untuk mempertahankan format, anda perlu mengakhiri setiap baris dengan tag
.

Artikel Terkait :


Sekian artikel kali ini, silahkan lanjut ke materi selanjutnya dan budayakan berbagi dan semoga Bermanfaat ...

GRID PADA BOOTSTRAP - Wrapping Kolom

March 28, 2017 Add Comment
Bootstrap | Wrapping Kolom | Budayakan Berbagi

WRAPPING KOLOM

Seperti yang diketahui jumlah kolom pada grid Bootstrap adalah 12 kolom. Jika kolom yang anda buat dalam satu baris lebih dari 12 kolom, maka kelompok kolom yang melebihi dari 12 akan menjadi 1 unit dan dipindahkan di baris baru. Sebagai contoh, pada artikel kali ini kita kan membuat baris dengan 3 elemen kolom, dimana masing-masing kolom memiliki lebar kolom 8, 6 dan 5 (total 19 kolom). Berikut ini adalah markup kode untuk wrapping kolom :
Baca juga artikel lainnya :



Tampilan kode di atas jika diterapkan pada browser akan seperti gambar di bawah ini :

Artikel Terkait :


Sekian artikel kali ini, silahkan lanjut ke materi selanjutnya dan budayakan berbagi dan semoga Bermanfaat ...

TIPOGRAFI PADA BOOSTRAP - MENGATUR ALIGMENT

August 14, 2017 Add Comment
Bootstrap | Tipografi Pada Bootstrap - Mengatur Aligment | Budayakan Berbagi
Biasanya, pada HTML untuk mengatur aligment suatu paragraf dapat menggunakan "<p align="center">". Bootstrap menyediakan class aligment untuk membantu anda mengatur perataan teks, antara lain:
Baca juga artikel Terkait:

  • text-center: rata tengah.
  • text-right: rata kanan.
  • text-justify: rata kanan kiri.
  • text-nowrap: tanpa wrap.

Gambar di bawah ini Merupakan Script penggunaan class aligment Bootstrap.

Gambar di bawah ini adalah contoh penggunaan class aligment Bootstrap.


Artikel Terkait :


Sekian artikel kali ini, silahkan lanjut ke materi selanjutnya dan budayakan berbagi dan semoga Bermanfaat ...

GRID PADA BOOTSTRAP - Penggunaan Grid untuk Perangkat Tablet dan desktop

March 29, 2017 Add Comment
Bootstrap | Penggunaan Grid untuk Perangkat Tablet dan Desktop | Budayakan Berbagi

PENGGUNAAN GRID UNTUK PERANGKAT TABLET DAN DESKTOP

Artikel kali ini kita akan membuat suatu tampilan yang akan direapkan pada perangkat tablet dan desktop. Bootstrap juga memungkinkan kita untuk menggunakan dua jenis kolom. Di artikel ini, kita tidak ingin tampilan situs kitalangsung menumpuk begitu saja saat diakses perangkat tablet. Oleh karena itu, kita perlu membuat aturan dengan menentukan presentase pada lebar jendela dengan menggunakan col-sm(tablet) dan untuk menggunakan col-md(desktop).
  • Perangkat Tablet
    Untuk pembuatan grid pada tablet, kita akan memiliki tata letak sederhana dengan dua kolom. Kita dapat membagi kolom menjadi 25% dan 75% untuk layar perangkat handphone yang memiliki lebar layar kurang dari 768px. Untuk jumlah kolom yang pertama adalah (12 * 25)/100 = 3 dan kolom kedua adalah (12 * 75)/100 = 9.

  • Perangkat Dekstop
    Untuk pembuatan grid pada dekstop, kita akan memiliki tata letak sederhana dengan dua kolom. Kita dapat membagi kolom menjadi 50% dan 50% untuk layar perangkat handphone yang memiliki lebar layar kurang dari 768px. Untuk jumlah kolom yang pertama adalah (12 * 50)/100 = 6 dan kolom kedua adalah (12 * 50)/100 = 6.
Baca juga artikel lainnya :


Berikut ini contoh kodenya :

Tampilan kode di atas jika diterapkan pada browser akan seperti gambar di bawah ini :
Tampilan di perangat Tablet

Tampilan di perangat Desktop

Artikel Terkait :


Sekian artikel kali ini, silahkan lanjut ke materi selanjutnya dan budayakan berbagi dan semoga Bermanfaat ...

TIPOGRAFI PADA BOOTSTRAP

August 13, 2017 Add Comment
Bootstrap | Tipografi Pada Bootstrap | Budayakan Berbagi
Baca Artikel Yang Terkait

Tipografi merupakan seni dan teknik mengatur tulisan supaya maksud dan arti tulisan tersebut dapat tersampaikan dengan baik secara visual kepada pembaca. Pada HTML, sering kita gunakan beberapa tag untuk mengatur tipografi, yaitu tag <h1> - <h6> yang digunakan untuk tulisan Heading dan tag untuk format tulisan seperti <i>, <b> dan <u>. untuk lebih jelasnya mengenai tipografi pada Bootstrap, berikut ada beberapa penggunaan atau penerapan tipografi pada bootstrap:
Artikel Terkait :


Sekian artikel kali ini, silahkan lanjut ke materi selanjutnya dan budayakan berbagi dan semoga Bermanfaat ...
Subscribe to: Posts (Atom)