Home All posts

Sabtu, 04 Maret 2017

|

Bootstrap: Wells






Assalamu'alaikum wr.wb

Pada postingan kali ini saya akan membahas  Cara Membuat Wells dengan Bootstrap.

Well Dasar

Class .well menambahkan border bulat sekitar elemen dengan warna latar belakan abu-abu dan beberapa padding.

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Well</h2>
  <div class="well">Well Dasar</div>
</div>

</body>
</html>



Ukuran Well

Mengubah ukuran baik dengan menambahkan class .well-sm untuk well kecil atau class .well-lg untuk well besar.

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Ukuran Well</h2>
  <div class="well well-sm">Well Kecil</div>
  <div class="well">Well Normal</div>
  <div class="well well-lg">Well Large</div>
</div>

</body>
</html>


Sekian Cara Membuat Wells dengan Bootstrap.
Semoga Bermanfaat...!!!

Referensi: www.w3schools.com

Wassalamu'alaikm wr.wb
Read More

Jumat, 03 Maret 2017

|

Bootstrap: Jumbotron dan Header Halaman


Assalamu'alaikum wr.wb

Kali ini saya akan berbagi Cara Membuat Jumbotron dan Header Halaman menggunakan Bootstrap.

Membuat Jumbotron

Sebuah jumbotron menunjukkan sebuah kotak besar untuk memangggil perhatian extra  untuk beberapa konten khuus atau informasi. Sebuah jumbotron ditampilkan sebagai kotak abu-abu dengan sudut membulat. Hal ini juga memperbesar font teks didalamnya.

Di dalam jumbotron dapat menempatkan hampir semua HTML yang valid, termasuk elemen Bootstrap lainnya/class. Gunakan elemen <div> dalam class .jumbotron untuk membuat jumbotron.

Jumbotron di Dalam Container

Tempatkan jumbotron di dalam <div class="container"> jika ingin jumbotron tidak memperpanjang ke tepi layar.

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div class="jumbotron">
    <h1>Tutorial Bootstrap</h1>     
    <p>Bootstrap adalah Aplikasi sumber terbuka yang berupa kerangka kerja (framework) untuk membangun website dinamis dengan menggunakan bahasa script CSS. BOOTSTRAP memudahkan developer dan designer untuk membuat sebuah aplikasi web menjadi cepat dan mudah dibandingkan dengan membuatnya dari awal..</p>
  </div>
  <p>dicky69news.blogspot.co.id</p>     
  <p>dicky69news.blogspot.co.id</p>     
</div>

</body>
</html>


Jumbotron di Luar Container

Tempatkan jumbotron di luar <div class="container"> jika ingin jumbotron memperpanjang ke tepi layar.

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="jumbotron">
  <h1>Tutorial Bootstrap</h1>     
  <p>BBootstrap adalah Aplikasi sumber terbuka yang berupa kerangka kerja (framework) untuk membangun website dinamis dengan menggunakan bahasa script CSS. BOOTSTRAP memudahkan developer dan designer untuk membuat sebuah aplikasi web menjadi cepat dan mudah dibandingkan dengan membuatnya dari awal.</p>
</div>

<div class="container">
  <p>dicky69news.blogspot.co.id</p>     
  <p>dicky69news.blogspot.co.id</p>     
</div>

</body>
</html>


Membuat Header Halaman

Class .page-header menambahkan garis horizontal dibawah judul (+ menambahkan beberapa ruang tambahan disekitar elemen).

Gunakan elemen <div> dengan class .page-header untuk membuat header halaman.

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div class="page-header">
    <h1>Ini adalah Header/Judul Halaman</h1>     
  </div>
  <p>Ini adalah paragraf 1.</p>     
  <p>Ini adalah paragraf 2.</p>     
</div>

</body>
</html> 




Sekian Cara Membuat Jumbotron dan Header Halaman menggunakan Bootstrap.
Semoga Bermanfaat...!!!

Referensi:www.w3schools.com

Wassalamu'alaikum wr.wb
Read More

Kamis, 02 Maret 2017

|

Bootstrap: Images (Gambar)


Assalamu'alaikum wr.wb

Kali ini saya akan berbagi Cara Merubah Tampilan Gambar dengan Bootstrap.

Bootstrap menyadiakan class untuk mengatur gambar sesuai dengan keinginan, misalnya membuat gambar dengan bentuk rouded, circle (lingkaran) dan gambar yang responsive.

Berikut beberapa class untuk membuat tampilah gambar dengan bootstrap:
  • .img-responsive
    class img-responsive berguna untuk membuat gambar menjadi responsive saat di jalankan pada semua bentuk dan ukuran resolusi.
  • .img-rounded
    class img-rounded di gunakan untuk membuat gambar berbentuk round atau pada sisi sudut gambar memiliki bentuk melengkung.
  • .img-circle
    class img-circle di gunakan untuk membuat gambar dengan bentuk lingakaran.
  • .img-thumbnail
    class img-thumbnail di gunakan untuk membuat gambar thumbnail dengan bootstrap.

Contoh:

Gambar Responsive

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Gambar</h2>
  <p>class img-responsive berguna untuk membuat gambar menjadi responsive saat di jalankan pada semua bentuk dan ukuran resolusi:</p>
  <img class="img-responsive" src="gambar/linux.png" alt="Linux" width="460" height="345">
</div>

</body>
</html>


Gambar Rounded

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Gambar Rounded</h2>
  <p>class img-rounded di gunakan untuk membuat gambar berbentuk round atau pada sisi sudut gambar memiliki bentuk melengkung.</p>           
  <img src="gambar/linux.png" class="img-rounded" alt="Linux" width="304" height="236">
</div>

</body>
</html>





Gambar Circle (Lingkaran)

 <!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Gambar Circle</h2>
  <p>class img-circle di gunakan untuk membuat gambar dengan bentuk lingakaran.</p>          
  <img src="gambar/linux.png" class="img-circle" alt="Linux" width="304" height="236">
</div>

</body>
</html>

Gambar Thumbnail

<!DOCTYPE html>
<html>
<head>
    <title>Belajar Bootstrap</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
    <div class="container">
        <h1>Gambar Thumbnail</h1>
        <p>class img-thumbnail di gunakan untuk membuat gambar thumbnail dengan bootstrap:</p>
        <img src="gambar/linux.png" class="img-thumbnail" alt="Linux" width="304" height="236">
    </div>
</body>
</html>

Sekian Cara Membuat Tampilan Gambar dengan Bootstrap.
Semoga Bermanfaat...!!!

Referensi:www.w3schools.com


Wassalam'alaikum wr.wb
Read More

Rabu, 01 Maret 2017

|

Bootstrap: Tabel


Assalamu'alaikum wr.wb

Kali ini saya akan membahas Cara membuat Tabel dengan Bootstrap.

Bootstrap Tabel Dasar

Sebuah tabel Bootstrap dasar memiliki padding cahaya dan hanya pembagi horizontal.

Class .table  menambahkan styling dasar untuk review tabel.

 Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Tabel</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Tabel Dasar</h2>
  <p>Class table menambahkan styling dasar (bantalan ringan dan hanya pembagi horizontal) ke tabel:</p>           
  <table class="table">
    <thead>
      <tr>
        <th>Nama Depan</th>
        <th>Nama Belakang</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Ali</td>
        <td>Assegaf</td>
        <td>ali@example.com</td>
      </tr>
      <tr>
        <td>Dicky</td>
        <td>Wahyu</td>
        <td>dicky@example.com</td>
      </tr>
      <tr>
        <td>Maftuh</td>
        <td>Tamam</td>
        <td>maftuh@example.com</td>
      </tr>
      <tr>
        <td>Yoga</td>
        <td>Adi</td>
        <td>yoga@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

Hasil:


Border (Pembatas)  Tabel

Class .table-border menambahkan pembatas ke tabel.

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Border (Pembatas) Tabel</h2>
  <p>Class table menambahkan styling dasar (bantalan ringan dan hanya pembagi horizontal) ke tabel:</p>           
  <table class="table">
    <thead>
      <tr>
        <th>Nama Depan</th>
        <th>Nama Belakang</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Ali</td>
        <td>Assegaf</td>
        <td>ali@example.com</td>
      </tr>
      <tr>
        <td>Dicky</td>
        <td>Wahyu</td>
        <td>dicky@example.com</td>
      </tr>
      <tr>
        <td>Maftuh</td>
        <td>Tamam</td>
        <td>maftuh@example.com</td>
      </tr>
      <tr>
        <td>Yoga</td>
        <td>Adi</td>
        <td>yoga@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

Hasil:

Baris Hover

Class .table-hover menambahkan efek hover (warna abu-abu latar belakang) pada baris tabel.

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Baris Hover</h2>
  <p>Class table-hover menambahkan efek hover (warna abu-abu latar belakang) pada baris tabel:</p>           
  <table class="table table-hover">
    <thead>
      <tr>
        <th>Nama Depan</th>
        <th>Nama Belakang</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Ali</td>
        <td>Assegaf</td>
        <td>ali@example.com</td>
      </tr>
      <tr>
        <td>Dicky</td>
        <td>Wahyu</td>
        <td>dicky@example.com</td>
      </tr>
      <tr>
        <td>Maftuh</td>
        <td>Tamam</td>
        <td>maftuh@example.com</td>
      </tr>
      <tr>
        <td>Yoga</td>
        <td>Adi</td>
        <td>yoga@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

Hasil:



Condensed Tabel

Class .condensed-table membuat tabel lebih kompak dengan memotong sel padding setengah.

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Condensed Table</h2>
  <p>Clas condensed-table membuat tabel lebih kompak dengan memotong sel padding setengah:</p>           
  <table class="table table-condensed">
    <thead>
      <tr>
        <td>Ali</td>
        <td>Assegaf</td>
        <td>ali@example.com</td>
      </tr>
      <tr>
        <td>Dicky</td>
        <td>Wahyu</td>
        <td>dicky@example.com</td>
      </tr>
      <tr>
        <td>Maftuh</td>
        <td>Tamam</td>
        <td>maftuh@example.com</td>
      </tr>
      <tr>
        <td>Yoga</td>
        <td>Adi</td>
        <td>yoga@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>


Hasil:


 

Class Kontekstual

Class kontekstual dapat digunakan untuk mewarnai baris tabel atau sel tabel. Class-Class yang dapat digunakan adalah: .active, .success, .info, .warning, dan .danger.

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Class kontekstual</h2>
  <p>Class kontekstual dapat digunakan untuk mewarnai baris tabel atau sel tabel. Kelas-kelas yang dapat digunakan adalah: .active, .success, .info, .warning, dan .danger.</p>
  <table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Default</td>
        <td>Defaultson</td>
        <td>def@somemail.com</td>
      </tr>     
      <tr class="success">
        <td>Success</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr class="danger">
        <td>Danger</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr class="info">
        <td>Info</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
      <tr class="warning">
        <td>Warning</td>
        <td>Refs</td>
        <td>bo@example.com</td>
      </tr>
      <tr class="active">
        <td>Active</td>
        <td>Activeson</td>
        <td>act@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

Hasil:



Kelas kontekstual yang dapat digunakan adalah:


KelasDeskripsi
.active Berlaku warna melayang ke baris tabel atau sel tabel
.success Menunjukkan tindakan berhasil atau positif
.info Menunjukkan perubahan informatif netral atau tindakan
.warning Menunjukkan peringatan yang mungkin memerlukan perhatian
.danger Menunjukkan tindakan yang berbahaya atau berpotensi negatif

Tabel responsif


Class .table-responsive membuat tabel responsif yang akan gulir horizontal pada perangkat kecil (di bawah 768px). Saat melihat pada apa pun lebih besar dari 768px, lebar tidak ada perbedaan.



Contoh:

<!DOCTYPE html>
<html>
<head>
  <title>Belajar Bootstrap</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Tabel</h2>
  <p>Class .table-responsive membuat tabel responsif yang akan gulir horizontal pada perangkat kecil (di bawah 768px). Saat melihat pada apa pun lebih besar dari 768px, lebar tidak ada perbedaan:</p>                                                                                     
  <div class="table-responsive">         
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
        <th>City</th>
        <th>Country</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Dicky</td>
        <td>Wahyu</td>
        <td>17</td>
        <td>Jepara</td>
        <td>Indonesia</td>
      </tr>
    </tbody>
  </table>
  </div>
</div>

</body>
</html>

Hasil:



Sekian Cara membuat Tabel dengan Bootstrap.
Semoga Bermanfaat...!!!

Referensi: www.w3schools.com

Wassalamu'alaikum wr.wb
Read More
|

Bootstrap: Text/Tipografi


Assalamu'alaikum wr.wb

Kali ini saya akan membahas Bootstrap Text/Tipografi.

Pengaturan Default Boootstrap

  • Bootstrap global standar fons-size adalah 14px, dengan garis tinggi 1,428.
  • Diterapkan pada <body> dan semua paragraf.
  • Semua element <p> memiliki margin bawah yang sama dengan setengah mereka dihitung line-height (secara default 10px).

Bootstrap vs Browser Default

Dalam bab ini, kita akan melihat beberapa elemen HTML yang akan ditata sedikit berbeda oleh Bootstrap dari browser default.

<h1> - <h6>

Secara default, Bootstrap gaya judul HTML (<h1> untuk <h6>) dengan cara berikut:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>h1 Bootstrap heading (36px)</h1>
  <h2>h2 Bootstrap heading (30px)</h2>
  <h3>h3 Bootstrap heading (24px)</h3>
  <h4>h4 Bootstrap heading (18px)</h4>
  <h5>h5 Bootstrap heading (14px)</h5>
  <h6>h6 Bootstrap heading (12px)</h6>
</div>

</body>
</html>

Hasil:

<small>

Dalam bootstrap HTML elemen <small> digunakan untuk membuat lebih ringan, teks sekunder di heading manapun.

Contoh:
 <!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>Ringan, Teks Sekunder</h1>
  <p>Elemen small digunakan untuk membuat lebih ringan, teks sekunder dalam pos manapun:</p>      
  <h1>h1 heading <small>Teks Sekunder</small></h1>
  <h2>h2 heading <small>Teks Sekunder</small></h2>
  <h3>h3 heading <small>Teks Sekunder</small></h3>
  <h4>h4 heading <small>Teks Sekunder</small></h4>
  <h5>h5 heading <small>Teks Sekunder</small></h5>
  <h6>h6 heading <small>Teks Sekunder</small></h6>
</div>

</body>
</html>

Hasil:

<mark>

Menggunakan elemen <mark> untuk menyoroti teks

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>Sorot Teks</h1>   
  <p>Menggunakan elemen mark untuk<mark>menyoroti</mark> teks</p>
</div>

</body>
</html>

Hasil:

<abbr>

Elemen <abbr> digunakan untuk menandai sebuah singkatan atau akronim

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>Singkatan</h1>
  <p>Elemen abbr digunakan untuk menandai sebuah singkatan atau akronim:</p>
  <p>The <abbr title="World Health Organization">WHO</abbr> didirikan pada tahun 1948.</p>
</div>

</body>
</html>

Hasil:

<blockquote>

Elemen <blockquote> digunakan untuk menyajikan konten dari sumber lain:

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>Blok Kutipan</h1>
  <p>Elemen blockquote digunakan untuk menyajikan konten dari sumber lain:</p>
  <blockquote>
    <p>Bootstrap adalah Aplikasi sumber terbuka yang berupa kerangka kerja (framework) untuk membangun website dinamis dengan menggunakan bahasa script CSS. BOOTSTRAP memudahkan developer dan designer untuk membuat sebuah aplikasi web menjadi cepat dan mudah dibandingkan dengan membuatnya dari awal.</p>
    <footer>From Wikipedia</footer>
  </blockquote>
</div>

</body>
</html>

Hasil:


<dl>

Unsur <dl> menunjukkan daftar deskripsi.

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>Deskripsi</h1>   
  <p>Unsur dl menunjukkan daftar deskripsi:</p>
  <dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
  </dl>    
</div>

</body>
</html>

 Hasil:





<code>

Contoh:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>Kode Cuplikan</h1>
  <p>Potongan inline kode harus tertanam dalam elemen kode:</p>
  <p>Elemen-elemen HTML berikut: <code>menjangkau</code>, <code>bagian</code>, dan <code>div</code> mendefinisikan bagian dalam sebuah dokumen.</p>
</div>

</body>
</html>

Hasil:


<kbd>

Elemen <kbd> digunakan untuk menunjukkan masukan yang biasanya masuk melalui keyboard.

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootsrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>Input Keyboard</h1>
  <p>Untuk menunjukkan masukan yang biasanya masuk melalui keyboard, menggunakan elemen kbd:</p>
  <p>Use <kbd>ctrl + p</kbd> untuk membuka kotak dialog Print.</p>
</div>

</body>
</html>

Hasil:


<pre>

 Untuk Contoh baris kode, gunakan elemen pre.

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h1>Contoh Garis Kode</h1>
<p>Untuk Contoh baris kode, gunakan elemen pre:</p>
<pre>
Teks dalam elemen pre
ditampilkan dalam fixed-width
font, dan mempertahankan
baik ruang dan
jeda baris.
</pre>
</div>

</body>
</html>

Hasil:


Sekian pembahasan Bootstrap Text/Tipografi.
Semoga Bermanfaat...!!!

Referensi: www.w3schools.com

Wassalamu'alaikum wr.wb
Read More
Langganan: Postingan (Atom)