Cara Penggunaan Bootstrap

Bootstrap : Cara Penggunaan Bootstrap

Bootstrap merupakan sebuah Library Framework CSS yang dibangun untuk mempermudah pembuatan sebuah FRONT-END WEBSITE. Bootstrap merupakan sebuah framwork yang terkenal dikalangan web developer. beberapa keuntungan dari penggunaan bootstrap yaitu :

Penggunaan Bootstrap menghemat waktu
Tampilan yang di hasilkan cukup dinamis dan modern
Ringan sehingga pengguna dapat melakukan pekerjaannya pada laptop, netbook, bahkan Smartphone anda sekalipun.

Untuk mendapatkan bootstrap KLIK DISINI

Pilih DOWNLOAD BOOTSTRAP untuk mengunduh bootstrap.

Untuk cara penggunaan bootstrap terdapat 2 cara yaitu:

ONLINE
Penggunaan secara offline dapat dilakukan dengan mengambil file bootstrap.min.css pada link https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css .

Penggunaan online memerlukan koneksi internet disetiap menjalankan bootstrap.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Heading Example</title>

    <!--OFFLINE EXAMPLE GET CSS-->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

</head>

OFFLINE

Penggunaan secara offline dengan menggunakan path sesuai dengan tempat menyimpan css BOOTSTRAP.MIN.CSS .

Penggunaan dengan local file seperti ini tidak memerlukan koneksi di setiap anda merefresh halaman saat pembuatan atau editing halaman web yang dibuat.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Heading Example</title>

    <!--OFFLINE EXAMPLE GET CSS-->

    <link rel="stylesheet" href="css/bootstrap.min.css">

</head>

Terimakasih semoga artikel ini dapat berguna. jika ada masukan dan komentar silahkan ditambahkan pada kolom komentar.

TERIMAKASIH BANYAK.

Comments

Cara Mengganti Warna Pada Bootstrap

Penggunaan warna merupakan hal yang sering dilakukan, selain memperindah tampilan dari sebuah web, warna juga dapat membuat kita memberikan tanda penting pada sebuah artikel maupun data yang penting. Pada BOOTSTRAP terdapat beberapa class default yang ada untuk memberikan warna pada button, table, dan lainnya. Class tersebut adalah sebagai berikut : success : class ini memberikan warna hijau. anda juga dapat menggunakan class ini untuk memberikan tanda bahwa sesuatu itu berhasil. misal untuk membuat alerts atau peringatan bahwa apa yang ada kerjakan berhasil. primary : class ini memberikan warna biru. seperti success , class ini dapat anda gunakan untuk memberikan sebuah tanda. danger : class ini memberikan warna merah. warning : class ini memberikan warna kuning. info : class ini memberikan warna biru muda. Penggunaan class warna ini dapat di lakukan pada beberapa tempat, seperti button , alerts , table , dan lain sebagainya. untuk yang akan di contohkan adalah...

Cara Membuat Tombol Button pada Bootstrap

Pada kesempatan kali ini akan dibahas mengenai pembuatan BUTTON pada bootstrap. Penggunan button pada bootstrap memiliki beberapa class yang telah tersedia yaitu : btn-lg : Untuk membuat button dengan ukuran besar. btn-md : Untuk membuat button dengan ukuran medium atau sedang. btn-sm : Untuk membuat button dengan ukuran kecil. btn-xs : Untuk membuat button dengan ukuran sangat kecil. btn-block : Untuk membuat button dengan ukuran 100%. active : Untuk membuat button dengan fungsi yang dapat di click. disabled : Untuk membuat button namun tidak dapat di click. Untuk lebih jelasnnya akan di tunjukan contoh penggunaan dibawah ini. SOURCE CODE Untuk lebih terperinci mari bahas satu persatu dari fungsi yang telah diperlihatkan contohnya di atas. BUTTON LG/MD/SM/XS SOURCE CODE < div class = "container" > < H1 > MEMBUAT TOMBOL | NET02OPTION </ H1 > < a href = "#" class = "btn btn-success bt...

Menampilkan Gambar pada Bootstrap

Kali ini saya akan membahas cara untuk menampilkan suatu gambar pada BOOTSTRAP. Sebelumnya kita sudah membahas beberapa yaitu Cara Penggunaan Bootstrap , Membuat Tabel dengan Bootstrap , dan Cara Mengganti Warna pada Bootstrap. Untuk kali ini yaitu cara menampilkan gambar pada BOOTSTRAP . Untuk gambar tersedia 3 setting yang bisa anda gunakan. yaitu: image rounded image thumbnail image circle jika hanya untuk menampilkan gambar, source code yang digunakan adalah sebagai berikut: <img src="net02option.jpg" alt="NET02OPTION.BLOGSPOT.COM"> Namun untuk beberapa variasi setting yang telah disebutkan di atas yaitu sebagai berikut: IMAGE THUMBNAIL Seperti yang terlihat pada gambar class yang digunakan untuk gambar tersebut adalah img-thumbnail . IMAGE ROUNDED Seperti yang terlihat pada gambar class yang digunakan untuk gambar tersebut adalah img-rounded IMAGE CIRCLE Seperti yang terlihat pada gambar class yang digu...

NetOption

Search This Blog