Bootstrap 3 Well - Tutorial Bootstrap Indonesia
Tutorial Bootstrap Well
TrikSonic - Komponen Bootstrap Well seolah-olah dengan panel alasannya yaitu merupakan sebuah box atau kotak dengan padding dan perbatasan dengan sudut membulat. Perbedaannya yaitu bahwa well dimaksudkan untuk menawarkan efek "inset" pada sebuah box.
Well juga dapat dipakai untuk menempatkan sebuah konten semoga terlihat terpisah dari konten yang ada disekitarnya
Standar Well
Tambahkan class
.well sebagai class dasar pada element HTML.Contoh :
<div class="well">Konten kau disini</div> <p class="well">Teks kau 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 kau disini</div> <p class="well">Teks kau 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 sehabis class dasar .wellContoh :
<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>