tRikSonic
Tema

Bootstrap 3 Well - Tutorial Bootstrap Indonesia

Terakhir diperbarui : 22 Mei 2018 - 05.44

Tutorial Bootstrap Well

TrikSonic - Komponen Bootstrap Well mirip dengan panel karena merupakan sebuah box atau kotak dengan padding dan perbatasan dengan sudut membulat. Perbedaannya adalah bahwa well dimaksudkan untuk memberikan efek "inset" pada sebuah box.
Well juga bisa digunakan untuk menempatkan sebuah konten agar terlihat terpisah dari konten yang ada disekitarnya
Bootstrap Images

Standar Well

Tambahkan class .well sebagai class dasar pada element HTML.

Contoh :

<div class="well">Konten kamu disini</div>

<p class="well">Teks kamu disini</p>

Hasil :

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
<title>Triksonic Demo Bootstrap 3</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!-- CSS Bootstrap 3 -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body class="container">
<h2>Bootstrap 3 - Wells</h2>

<div class="well">Konten kamu disini</div>

<p class="well">Teks kamu disini</p>

</body>
</html>

Ukuran Well

Untuk merubah ukuran atau besar dari well tambahkan class .well-lg (untuk ukuran besar) dan .well-sm (untuk ukuran kecil), yang dituliskan setelah class dasar .well

Contoh :

<div class="well well-sm">small well</div>
<div class="well">Normal well</div>
<div class="well well-lg">Large well</div>

Hasil :

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
<title>Triksonic Demo Bootstrap 3</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!-- CSS Bootstrap 3 -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body class="container">
<h2>Bootstrap 3 - Well Size</h2>

  <div class="well well-sm">small well</div>
  <div class="well">Normal well</div>
  <div class="well well-lg">Large well</div>

</body>
</html>

Tidak ada komentar

Comment Form

Posting Komentar

  1. Untuk menyisipkan sebuah link atau tautan gunakan <i rel="link=//example.com">teks disini</i>
    • Tanpa menggunakan https: dan http:
  2. Untuk menyisipkan sebuah kode yang pendek gunakan <i rel="code">kode disini</i>
  3. Untuk menyisipkan sebuah kode yang panjang gunakan <i rel="pre">kode disini</i>
  4. Untuk menyisipkan sebuah teks Tebal gunakan <strong>teks tebal disini</strong>
  5. Untuk menyisipkan sebuah teks Miring gunakan <em>teks miring disini</em>
  6. Untuk menyisipkan sebuah gambar gunakan <i rel="image">url gambar disini</i>

Ketentuan Komentar

  • Pengguna yang dapat berkomentar adalah pengguna yang memiliki akun google
  • Guna mengurangi komentar yang bersifat spam, maka akan diberlakukan langkah verifikasi kata.
  • Pengguna bertanggung jawab atas komentar yang dikirim
  • Admin dan penulis blog mempunyai hak untuk menampilkan, menghapus, menandai spam, pada komentar yang dikirim
  • Dengan mengirimkan sebuah komentar, maka pengguna dianggap menyetujui semua ketentuan diatas

Poin ketentuan diatas tidak bersifat tetap, dan dapat berubah kapan saja

Konversi Kode
Kode yang ingin dikonversi

Loading.....
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.