Komponen tata letak bootstrap
1. Ikon Font Bootstrap
(1) tautan daftar ikon font
http://www.runoob.com/bootstrap/bootstrap-glyphicons.html
(2) Penggunaan
Untuk menggunakan ikon, cukup gunakan kode berikut. Harap simpan ruang yang sesuai antara ikon dan teks. Tidak ada CSS Glyphicon.
<span> </span>
(3) Ikon font yang disesuaikan
Kami telah melihat cara menggunakan ikon font, dan selanjutnya kita akan melihat cara menyesuaikan ikon font.
Kami mulai dengan contoh di atas dan menyesuaikan ikon dengan mengubah ukuran font, warna, dan menerapkan bayangan teks.
A. Ikon Kustom
<tombol type = "Tombol"> <span> </span> pengguna </button>
B. Ukuran font yang disesuaikan
Dengan meningkatkan atau mengurangi ukuran font ikon, Anda dapat membuat ikon terlihat lebih besar atau lebih kecil.
<typute type = "Tombol" style = "font-size: 60px"> <span> </span> pengguna </button>
C. Kustomisasi Warna Font
<tombol type = "Tombol" style = "Color: RGB (212, 106, 64);"> <span> </span> pengguna </button>
D. Terapkan Bayangan Teks
<typon type = "Tombol" style = "Text-Shadow: Black 5px 3px 3px;"> <span> </span> pengguna </button>
2. Menu drop-down Bootstrap
(1) Menu tarik-turun dapat dialihkan dan merupakan menu konteks yang menampilkan tautan dalam format daftar. Ini dapat dicapai melalui interaksi dengan menu dropdown (dropdown) JavaScript plugin.
Untuk menggunakan menu berikut, cukup tambahkan menu tarik-turun di kelas .dropdown.
<Div> <Tombol Tipe = "Tombol" id = "dropdownMenu1" data-koggle = "dropdown"> topik <span> </span> </buttped> <role = "menu" aria-laLededby = "dropdownmenu1"> <li role = "presentasi"> <a role = "menuUtem" tabindex = "-1" href = "href ="#"#" lia = "lia =" lia "> <a"#lia "> role="presentation"> <a role="menuitem" tabindex="-1" href="#">Data Mining</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#"> Data Communication/Network</a> </li> <li role="presentation"></li> <li role="presentation"> <a Role = "MenuUtem" TabIndex = "-1" href = "#"> tautan terpisah </a> </li> </ul> </div>
(2) Sejajarkan
Sejajarkan menu drop-down kanan dengan menambahkan kelas .Pull-right ke .dropdown-menu.
(3) Judul
Anda dapat menggunakan header dropdown kelas untuk menambahkan judul ke area label menu dropdown.
3. Grup Tombol Bootstrap
(1) Grup tombol memungkinkan beberapa tombol ditumpuk pada baris yang sama. Ini sangat berguna saat Anda ingin menyelaraskan tombol bersama.
(2) bersarang
Anda dapat bersarang grup tombol lain dalam satu grup tombol, yaitu, sarang kelompok lain .btn-group dalam satu .btn-group. Ini digunakan saat Anda menggunakan menu tarik-turun dalam kombinasi dengan serangkaian tombol.
4. Menu drop-down tombol bootstrap
Gunakan kelas bootstrap untuk menambahkan menu tarik-turun ke tombol. Untuk menambahkan menu tarik-turun ke tombol, cukup tempatkan tombol dan menu tarik-turun di .btn-group. Anda juga dapat menggunakan <span> </span> untuk menunjukkan tombol sebagai menu drop-down.
<Div> <tombol type = "tombol" data-koggle = "dropdown"> default <span> </span> </button> <ul role = "menu"> <li> <a href = "#"> Fungsi </a> </li> <li> <a href = "#"> </a> </a> </a> <li> <li> <a href = "#"> </a> </a> </li> <li> <a href = "#"> </a> </a> </li> <li> <a href = "#" href = "#"> Lainnya </a> </li> <li> </li> <li> <a href = "#"> tautan terlepas </a> </li> </ul> </div>
(1) Menu drop-down tombol split
Menu drop-down split menggunakan gaya yang kira-kira sama dengan tombol menu tarik-turun, tetapi menambahkan fungsionalitas asli ke menu drop-down. Di sisi kiri tombol split adalah fungsi asli, dan di sebelah kanan adalah sakelar yang menampilkan menu drop-down.
<div> <button type="button">Default</button> <button type="button" data-toggle="dropdown"> <span></span> <span>Switch the drop-down menu</span> </button> <ul role="menu"> <li><a href="#">Function</a></li> <li><a href="#">Other</a></li> <li><a href = "#"> lainnya </a> </li> <li> </li> <li> <a href = "#"> tautan yang disedot </a> </li> </ul> </div>
(2) Ukuran menu drop-down tombol
Anda dapat menggunakan menu drop-down dengan tombol dengan berbagai ukuran: .btn-large, .btn-sm, atau .btn-xs.
(3) Menu pull-up untuk tombol
Menu juga dapat diregangkan ke atas, cukup tambahkan .dropup ke wadah induk .btn-group.
<div> </div>
5. grup kotak input bootstrap
Masukkan grup kotak. Grup kotak input memanjang dari kontrol formulir. Dengan grup kotak input, Anda dapat dengan mudah menambahkan teks atau tombol sebagai awalan dan sufiks ke kotak input berbasis teks.
Dengan menambahkan konten awalan dan sufiks ke bidang input, Anda dapat menambahkan elemen umum ke input pengguna. Misalnya, Anda dapat menambahkan tanda dolar, atau menambahkan @ sebelum nama pengguna Twitter, atau elemen publik lain yang diperlukan oleh antarmuka aplikasi.
Langkah-langkah untuk menambahkan awalan atau elemen sufiks ke .Form-control adalah sebagai berikut:
A. Tempatkan awalan atau elemen akhiran dalam <verv> dengan kelas .input-group.
B. Lalu, dalam <div> yang sama, tempatkan konten tambahan di <span> kelas .input-group-addon.
C. Tempatkan <span> di depan atau di belakang elemen <sput>.
Untuk mempertahankan kompatibilitas silang-browser, hindari menggunakan elemen <CILT>, karena mereka tidak sepenuhnya memberikan efek di browser webkit. Juga, jangan menerapkan kelas grup kotak input langsung ke grup formulir, grup kotak input adalah komponen yang terisolasi.
<Form role = "Form"> <vers> <span> $ </span> <input type = "text" placeholder = "twitterhandle"> <span> .00 </span> </div> </form>
(1) Masukkan ukuran grup kotak
Anda dapat mengubah ukuran grup kotak input dengan menambahkan kelas ukuran bentuk relatif ke .input-group (seperti .input-group-LG, input-group-sm, input-group-xs) ke .input-group. Isi dalam kotak input akan secara otomatis diubah ukurannya.
(2), centang kotak dan plug-in radio
Anda dapat menggunakan kotak centang dan plugin radio sebagai awalan atau elemen sufiks untuk grup kotak input
<div> <span> <input type = "centang kotak"> </span> <input type = "text"> </div>
(3) Plug-in tombol
Anda juga dapat menggunakan tombol sebagai awalan atau elemen akhiran dari grup kotak input. Pada saat ini, Anda tidak menambahkan kelas. Input-Group-Addon. Anda perlu menggunakan kelas .input-group-btn untuk membungkus tombol. Ini diperlukan karena gaya browser default tidak akan ditulis ulang.
<div> <span> <tombol type = "tombol"> go! </button> </span> <input type = "text"> </div>
(4) Tombol dengan menu tarik-turun
Menambahkan tombol dengan menu tarik-turun ke grup kotak input cukup dibungkus dalam kelas .input-group-BTN.
<div> <div> <tombol type = "tombol" data-koggle = "dropdown"> menu dropdown <span> </span> </button> <ul> <li> <a href = "#"> Fungsi </a> </li> <li> <a href = "#"> </a> </a> </li> <li> <a href = "#"> </a> </a> </li> <li> <a href = "#" href = "#"> lain </a> </li> <li> </li> <li> <a href = "#"> tautan terlepas </a> </li> </div> <input type = "text"> </div>
(5) Tombol menu drop-down split
Tambahkan tombol split dengan menu drop-down di grup kotak input, menggunakan gaya yang kira-kira sama dengan tombol menu tarik-turun, tetapi menambahkan fitur utama ke menu drop-down,
<dv> <vect> <typute type = "tombol" tabIndex = "-1"> Menu drop-down </button> <tombol type = "tombol" data-kilat = "dropdown" tabIndex = "-1"> <span> </span> <span> saklar menu drop-down </span> </butt> <ul> <li> <li> <li> <a> <a href = "#"> </span> </ul> <ul> <li> <li> <a href = "#"> href = "#"> lain </a> </li> <li> <a href = "#"> lainnya </a> </li> <li> </li> <li> <a href = "#"> tautan yang terpisah </a> </li> </div> <input type = "Text"> </Div>
6. Elemen Navigasi Bootstrap
Gunakan tag dan kelas dasar yang sama .NAV. Bootstrap juga menyediakan kelas pembantu untuk berbagi tag dan negara bagian. Ubah kelas yang dimodifikasi dan dapat diaktifkan di antara berbagai gaya.
(1), navigasi atau tag tabel
Buat menu navigasi yang ditandai:
A. Mulailah dengan daftar yang tidak dipesan dengan kelas .nav.
B. Tambahkan kelas .Nav-tab.
<ul> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> svn </a> </li> <li> <a href = "#"> ios </a> </li> <li> <a href = "#"> vb.net </a> <li> <li> <a href = "#"#vb.net </a> href = "#"> java </a> </li> <li> <a href = "#"> php </a> </li> </ul>
(2) Menu Navigasi Gaya Kapsul
A. menu navigasi kapsul dasar
Jika Anda perlu mengubah label ke gaya kapsul, Anda hanya perlu menggunakan class .nav-pills bukan .nav-tab, dan langkah-langkah lainnya sama seperti di atas.
<ul> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> svn </a> </li> <li> <a href = "#"> ios </a> </li> <li> <a href = "#"> vb.net </a> <li> <li> <a href = "#"#vb.net </a> href = "#"> java </a> </li> <li> <a href = "#"> php </a> </li> </ul>
B. Menu Navigasi Kapsul Vertikal
Anda dapat menggunakan kelas .NAV-bertumpuk saat menggunakan kelas .nav dan .nav untuk membuat kapsul menumpuk secara vertikal.
<ul> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> svn </a> </li> <li> <a href = "#"> ios </a> </li> <li> <a href = "#"> vb.net </a> <li> <li> <a href = "#"#vb.net </a> href = "#"> java </a> </li> <li> <a href = "#"> php </a> </li> </ul>
(3) Navigasi dengan kedua ujungnya selaras
Anda dapat membuat menu navigasi yang ditandai atau kapsul sama lebar dengan elemen induk dengan menggunakan kelas .nav yang dibenarkan saat menggunakan .nav, .nav-tabs, atau .nav, dan .nav-pill, masing-masing, ketika lebar layar lebih besar dari 768px. Pada layar yang lebih kecil, tautan navigasi ditumpuk.
<ul> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> svn </a> </li> </ul> <ul> <li> <a href = "#"> home </a> </li> </ul> <li> <a href = "#"#"> </li> </ul> <li> <li> <a href ="#"> Home> </a> </li> </ul> <li> <a href ="#"> Home> </a> </li> </ul> <li> <a href ="#"> Home> </a> </li> </ul> <li> <a href ="#"> home> </a> </ul> <li> <a href ="#"> home> </a> </ul> <li> <a href ="#"
(4) Nonaktifkan tautan
Untuk setiap kelas .NAV, jika kelas yang dapat disingkirkan ditambahkan, tautan abu -abu dibuat, dan: status melayang dari tautan dinonaktifkan.
<ul> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> svn </a> </li> <li> <a href = "#"> iOS (tautan nonaktifkan) </a> </li> </ul> <ul> <li> <li> <a href = "#" href = "#"> svn </a> </li> <li> <a href = "#"> vb.net (nonaktifkan tautan) </a> </li> </ul>
(5) Tarik menu
Menu navigasi menggunakan sintaks serupa dengan menu tarik-turun. Secara default, jangkar item daftar berfungsi bersama dengan beberapa properti data untuk memicu daftar yang tidak tertib dengan kelas .dropdown-menu.
A. Tag dengan menu tarik-turun
Langkah-langkah untuk menambahkan menu tarik-turun ke tag adalah sebagai berikut:
Mulailah dengan daftar yang tidak dipesan dengan kelas .nav.
Tambahkan kelas .nav-tab.
Tambahkan daftar yang tidak dipesan dengan kelas .dropdown-menu.
<ul> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> svn </a> </li> <li> <a data-kilat = "dropdown" href = "#"> Java <pan> </span> </a> </uldown </Li> <a> "<pan = </span> </a> <ul> <ul> <a> li> <pan = </span> </a> <bi> <ul> <a>" Li> <pan> </span> </a> <ul> <ul> <a> li> <pan = </span> </a> <ul> <ul> <a> "Li> <pan = </span> </a> <ul> <ul> <a>" "" <li> <a href = "#"> ayunan </a> </li> <li> <a href = "#"> ayunan </a> </li> <li> <a href = "#"> tautan yang terpisah </a> </li> </li> <li> <li> <a href = "#"> php </a> </li> <li> <li> <a href = "#"> php </a> </li> <li> <a href = "#"> php <a>
B. Kapsul dengan menu pull-down
Langkah-langkahnya sama dengan membuat tag dengan menu tarik-turun, kecuali Anda perlu mengubah kelas .NAV-Tabs menjadi .NAV-Pills.
7. Bar Navigasi Bootstrap
Bilah navigasi adalah fitur yang bagus dan merupakan fitur penting dari situs web Bootstrap. Bilah navigasi berfungsi sebagai komponen dasar responsif dari header navigasi di aplikasi atau situs web Anda. Bilah navigasi runtuh dalam tampilan perangkat seluler dan bilah navigasi meluas secara horizontal saat lebar viewport yang tersedia meningkat. Di inti bilah navigasi bootstrap, bilah navigasi mencakup nama situs dan gaya definisi navigasi dasar.
(1) bilah navigasi default
Langkah -langkah untuk membuat bilah navigasi default adalah sebagai berikut:
A. Tambahkan kelas .navbar dan .navbar-default ke tag <av>.
B. Menambahkan Peran = "Navigasi" ke elemen di atas akan membantu meningkatkan aksesibilitas.
C. Tambahkan kelas judul .Navbar-header ke elemen <div>, yang berisi elemen <a> dengan kelas navbar kelas. Ini akan membuat teks terlihat lebih besar.
D. Untuk menambahkan tautan ke bilah navigasi, Anda hanya perlu cukup menambahkan daftar yang tidak dipesan dengan kelas .nav dan .navbar-nav.
<nav role = "navigasi"> <verv> <a href = "#"> w3cschool </a> </div> <viv> <ul> <li> <a href = "#"> ios </a> </li> <li> <a href = "#"> Svn </a> </li> <li> <a href = "#"> Svn </a> </a> <li> <a href = "#"> Svn </a> </a> <li> <a href = "#"> SVN </a> </a> <li> <a href = "#"> SVN </a> </a> <li> <a href = "#"> svn </a> </a> <li> <a href = "#"> svn </a> </a> <li> <a li> href = "#" data-koggle = "dropdown"> java <b> </b> </a> <ul> <li> </li> <li> <a href = "#"> tautan yang terpisah </a> </li> <li> </li> <li> <a href = "#"> satu tautan terpisah </a> </li> <a href = "#"> satu tautan terpisah </a> </a> </li> <a href = "#"
(2) bilah navigasi responsif
Untuk menambahkan fitur yang responsif ke bilah navigasi, konten yang ingin Anda runtuh harus dibungkus dengan <viv> dengan kelas .collapse, .Navbar-collapse. Bilah navigasi yang runtuh sebenarnya adalah tombol dengan kelas .Navbar-kilat dan dua elemen data. Yang pertama adalah data-kilat, yang memberi tahu JavaScript apa yang harus dilakukan dengan tombol, dan yang kedua adalah target data, yang menunjukkan elemen mana yang harus diaktifkan. Tiga <span> dengan kelas .icon-bar menciptakan apa yang disebut tombol burger. Ini akan beralih ke elemen-elemen di .NAV-Collapse <viv>. Untuk mencapai fungsi-fungsi ini, Anda harus menyertakan plug-in bootstrap collapse.
<nav role="navigation"> <div> <button type="button" data-toggle="collapse" data-target="#example-navbar-collapse"> <span>Switch navigation</span> <span></span> <span></span> <span></span> <span></span> </button> <a href="#">W3Cschool</a> </div> <div id="example-navbar-collapse"> <ul> <li><a href="#">iOS</a></li> <li><a href="#">SVN</a></li> <li> <a href="#" data-toggle="dropdown"> Java <b></b> </a> <ul> <li><a href = "#"> jMeter </a> </li> <li> </li> <li> <a href = "#"> tautan terpisah </a> </li> <li> </li> <li> <a href = "#"> tautan terpisah lainnya </a> </li> </li> </ul> </Div> navsor </a> </li>
(3) Formulir di bilah navigasi
Formulir di bilah navigasi tidak menggunakan kelas default yang disebutkan dalam bab Formulir Bootstrap, ia menggunakan kelas .NavBar-Form. Ini memastikan penyelarasan vertikal yang tepat dari bentuk dan perilaku lipat dalam viewport yang lebih sempit. Gunakan Opsi Penyelarasan (ini akan dijelaskan secara rinci di bagian Alignment Komponen) untuk memutuskan di mana konten di bilah navigasi ditempatkan.
<role nav = "navigasi"> <verv> <a href = "#"> w3cschool </a> </div> <v div> <bentuk role = "search"> <Div> <input type = "Text" placeholder = "Search"> </Div> <Button Type = "Kirim"> Kirim </tombol> </Form> </Div> navit>
(4) Tombol di bilah navigasi
Anda dapat menggunakan kelas .NAVBAR-BTN untuk menambahkan tombol ke elemen <button> yang tidak ada di <sorm>, yang berpusat secara vertikal pada bilah navigasi. .NAVBAR-BTN dapat digunakan pada elemen <a> dan <pitput>. Jangan gunakan .NAVBAR-BTN pada <a> Elemen di dalam .NAVBAR-NAV, karena ini bukan kelas tombol standar.
<nav role = "navigasi"> <verv> <a href = "#"> w3cschool </a> </div> <v div> <bentuk role = "search"> <Div> <input type = "text" placeholder = "cari"> </div> <kancing tipe = "kirim"> tombol kirimkan </Button> </Form> </Div> </navigasi = "Tombol Navigasi"> Tombol Navigasi </Button> </Form>
(5) Teks di bilah navigasi
Jika Anda perlu menyertakan string teks dalam navigasi Anda, gunakan kelas .Navbar-Text. Ini biasanya digunakan dengan tag <p>, memastikan memimpin dan warna yang tepat.
<nav role = "navigasi"> <ve> <a href = "#"> w3cschool </a> </div> <v> <p> Masuk sebagai Thomas </p> </div> </av>
(6) Tautan non-navigasi
Jika Anda tidak ingin menggunakan tautan standar dalam komponen navigasi bilah navigasi reguler, gunakan kelas Navbar-Link untuk menambahkan warna yang sesuai ke opsi bilah navigasi default dan terbalik.
<role nav = "navigasi"> <ver> <a href = "#"> w3cschool </a> </div> <v> <p> Masuk sebagai <a href = "#"> Thomas </a> </p> </div> </div>
(7) Penyelarasan komponen
Anda dapat menggunakan kelas utilitas .Navbar-kiri atau .Navbar-kanan untuk menyelaraskan tautan navigasi, formulir, tombol, atau komponen teks di bilah navigasi kiri atau kanan. Kedua kelas menambahkan float CSS ke arah yang ditentukan.
(8) diperbaiki ke atas
Bilah navigasi bootstrap dapat ditempatkan secara dinamis. Secara default, ini adalah elemen tingkat blok, yang diposisikan berdasarkan lokasi yang ditempatkan di HTML. Dengan beberapa kelas penolong, Anda dapat menempatkannya di bagian atas atau bawah halaman, atau Anda dapat menjadikannya bilah navigasi statis yang menggulir bersama dengan halaman. Jika Anda ingin bilah navigasi disematkan ke bagian atas halaman, tambahkan kelas .Navbar-fixed-top ke kelas .NAVBAR. Contoh berikut menunjukkan hal ini: untuk mencegah bilah navigasi dari interleaving dengan bagian atas konten lain di badan halaman, tambahkan setidaknya 50 piksel bantalan ke tag <body>, dan nilai bantalan dapat diatur sesuai dengan kebutuhan Anda.
<nav role = "navigasi">
</sav>
(9) diperbaiki ke bawah
Jika Anda ingin bilah navigasi disematkan ke bagian bawah halaman, tambahkan kelas .Navbar-fixed-bottom ke kelas .NAVBAR.
<nav role = "navigasi"> </av>
(10), atasan statis
Untuk membuat bilah navigasi yang menggulir bersama dengan halaman, tambahkan kelas .Navbar-statis-top. Kelas ini tidak mengharuskan bantalan ditambahkan ke <body>.
<nav role = "navigasi">
</sav>
(11), bilah navigasi terbalik
Untuk membuat bilah navigasi terbalik dengan teks putih latar belakang hitam, cukup tambahkan kelas .Navbar-Inverse ke kelas .NAVBAR, seperti yang ditunjukkan pada contoh berikut:
Untuk mencegah bilah navigasi dari interleaving dengan bagian atas konten lain di badan halaman, tambahkan setidaknya 50 piksel bantalan ke tag <body>, dan nilai bantalan dapat diatur sesuai dengan kebutuhan Anda.
<nav role = "navigasi"> </av>
8. Bootstrap Breadcrumbs
Breadcrumbs adalah metode tampilan berdasarkan informasi tingkat situs web. Ambil blog sebagai contoh, navigasi remah roti dapat menampilkan tanggal rilis, kategori, atau tag. Mereka mewakili lokasi halaman saat ini dalam hierarki navigasi.
Breadcrumbs in Bootstrap adalah daftar sederhana yang tidak dipesan dengan kelas .Breadcrumb. Pembatas akan ditambahkan secara otomatis melalui kelas yang ditunjukkan di bawah ini di CSS (bootstrap.min.css):
<Ol>
<li> <a href = "#"> rumah </a> </li>
<li> <a href = "#"> 2013 </a> </li>
<li> November </li>
</ol>
9. Pagination Bootstrap
(1) Pagination adalah daftar yang tidak teratur. Bootstrap menangani pagination seperti elemen antarmuka lainnya.
(2) Page Turn (pager)
Jika Anda ingin membuat tautan paging sederhana untuk menyediakan navigasi bagi pengguna, itu dapat dilakukan dengan memutar halaman. Seperti tautan paging, page turn juga merupakan daftar yang tidak teratur. Secara default, tautan dipusatkan. Tabel berikut mencantumkan kelas yang Bootstrap Menangani Putar Halaman.
10. Tag Bootstrap
Tag Bootstrap. Tag dapat digunakan untuk menghitung, meminta, atau tampilan penandaan lainnya pada halaman. Anda dapat menggunakan label-default kelas yang dimodifikasi, label-primer, label-success, label-info, peringatan label, label-penggunder untuk mengubah penampilan label.
<span> Tag default </span>
<span> tag utama </span>
<span> Tag Sukses </span>
<span> Tag Informasi </span>
<span> tag peringatan </span>
<span> tag bahaya </span>
11. Lencana Bootstrap
(1) Lencana mirip dengan label, perbedaan utamanya adalah sudut -sudut lencana lebih halus.
Lencana terutama digunakan untuk menyoroti item baru atau yang belum dibaca. Untuk menggunakan lencana, cukup tambahkan <span> ke tautan, navigasi bootstrap dan elemen lainnya. Ketika tidak ada item baru atau yang belum dibaca, lencana akan dilipat melalui: pemilih CSS kosong untuk menunjukkan bahwa tidak ada konten di dalamnya.
<a href = "#"> kotak surat <span> 50 </span> </a>
(2) Aktifkan status navigasi
Anda dapat menempatkan lencana di navigasi kapsul dan daftar navigasi di negara aktif. Aktifkan tautan dengan menggunakan <span>.
<h4>Activation status in capsule navigation</h4><ul> <li><a href="#">Homepage<span>42</span></a></li> <li><a href="#">Introduction</a></li> <li><a href="#">Message<span>3</span></a></li></ul>
12. Bootstrap Layar Super Besar (Jumbotron)
Layar super besar (jumbotron). Seperti namanya, komponen ini dapat meningkatkan ukuran judul dan menambahkan lebih banyak margin ke konten halaman login. Langkah -langkah untuk menggunakan jumbotron adalah sebagai berikut:
A. Buat wadah <verv> dengan kelas .jumbotron.
B. Selain <H1> yang lebih besar, weight font-weight dikurangi menjadi 200px.
<div> <div> <h1> Selamat datang untuk masuk! </h1> <p> Ini adalah contoh dari jumbotron. </p> <p> <a role = "Tombol"> Pelajari lebih lanjut </a> </p> </div> </div>
Untuk mendapatkan layar besar yang mengambil semua lebar tanpa sudut bulat, gunakan kelas .Jumbotron di luar semua. Kelas kontainer.
13. Judul halaman bootstrap (header halaman)
Header halaman adalah fitur yang bagus, yang menambahkan jarak yang sesuai di sekitar judul halaman. Fungsi judul halaman sangat berguna ketika ada beberapa judul di halaman web dan jarak tertentu perlu ditambahkan di antara setiap judul. Untuk menggunakan header halaman, tempatkan judul Anda di <verv> dengan kelas .page-header:
<hv> <h1> Judul Contoh Judul <small> Subtitle </small> </h1> </div>
14. Thumbnail Bootstrap
(1) Thumbnail Bootstrap. Sebagian besar situs perlu tata letak gambar, video, teks, dll. Dalam kisi. Bootstrap menyediakan cara mudah untuk melakukan ini dengan thumbnail. Langkah -langkah untuk membuat thumbnail menggunakan bootstrap adalah sebagai berikut:
A. Tambahkan tag <a> dengan kelas .Mergnail di sekitar gambar.
B. Ini akan menambah empat bantalan piksel dan perbatasan abu -abu.
C. Ketika mouse melayang di atas gambar, garis besar gambar akan ditampilkan.
<div> <a href = "#"> <img src = "/wp-content/unggah/2014/06/kittens.jpg"> </a> </div>
(2) Tambahkan konten khusus
Sekarang kita memiliki thumbnail dasar, kita dapat menambahkan berbagai konten HTML ke thumbnail, seperti judul, paragraf, atau tombol. Langkah -langkah spesifiknya adalah sebagai berikut:
A. Ubah tag <a> dengan kelas .Mergiil menjadi <viv>.
B. Dalam <vi> ini, Anda dapat menambahkan apa pun yang ingin Anda tambahkan. Karena ini adalah <verv>, kita dapat menggunakan aturan penamaan berbasis rentang default untuk mengubah ukuran.
C. Jika Anda ingin mengelompokkan banyak gambar, tempatkan dalam daftar yang tidak dipesan, dan setiap item daftar mengapung ke kiri.
15. Peringatan Bootstrap (Peringatan)
Peringatan dan kelas yang disediakan oleh Bootstrap untuk peringatan. Alerts memberi pengguna cara untuk mendefinisikan gaya pesan. Mereka memberikan umpan balik informasi kontekstual untuk operasi pengguna yang khas. Anda dapat menambahkan tombol tutup opsional ke kotak peringatan. Untuk membuat kotak peringatan yang dapat dibatalkan inline, gunakan plugin peringatan jQuery.
Anda dapat menambahkan kotak peringatan dasar dengan membuat <div> dan menambahkan salah satu kelas .Alert dan empat kelas konteks (mis. .Alert-Success, .Alert-Info, .Alert-warning, .Alert-Danger).
<div> Sukses! Pengajuan dilakukan dengan sangat baik. </div>
<div> Informasi! Harap perhatikan informasi ini. </div>
<div> Peringatan! Tolong jangan kirim. </div>
<div> kesalahan! Tolong buat beberapa perubahan. </div>
(1) peringatan yang dapat dibatalkan (peringatan pemecatan)
Langkah -langkah untuk membuat peringatan yang dapat dibatalkan (peringatan pemecatan) adalah sebagai berikut:
A. Tambahkan kotak peringatan dasar dengan membuat <div> dan menambahkan salah satu kelas .Alert dan empat kelas konteks (mis. Success, .Alert-Info, .Alert-warning, .Alert-Danger).
B. Pada saat yang sama, tambahkan opsional .Alert-dismissable ke kelas <div> di atas.
C. Tambahkan tombol Tutup.
<div> <tombol type = "tombol" data-dismiss = "waspada" aria-hidden = "true"> × </button> Sukses! Pengajuan dilakukan dengan sangat baik. </div>
(2) Tautan dalam peringatan
Langkah -langkah untuk membuat tautan dalam peringatan adalah sebagai berikut:
A. Tambahkan kotak peringatan dasar dengan membuat <div> dan menambahkan salah satu kelas .Alert dan empat kelas konteks (mis. Success, .Alert-Info, .Alert-warning, .Alert-Danger).
B. Gunakan kelas entitas .Alert-Link untuk dengan cepat menyediakan tautan dengan warna yang cocok.
<div>
<a href = "#"> Sukses! Pengajuan dilakukan dengan sangat baik. </a>
</div>
16. Bar Bootstrap Progress
Bab ini akan menjelaskan bilah kemajuan bootstrap. Dalam tutorial ini, Anda akan melihat cara menggunakan bootstrap untuk membuat bilah kemajuan untuk memuat, mengarahkan ulang, atau tindakan tindakan.
Bilah Bootstrap Progress menggunakan transisi dan animasi CSS3 untuk mendapatkan efek ini. Internet Explorer 9 dan versi sebelumnya dan versi Firefox yang lebih lama tidak mendukung fitur ini, dan Opera 12 tidak mendukung animasi.
(1) bilah kemajuan default
Langkah -langkah untuk membuat bilah kemajuan dasar adalah sebagai berikut:
A. Tambahkan <viv> dengan kelas .progress.
B. Selanjutnya, tambahkan <voled <v> dengan kelas .Progress-bar di di atas <viv>.
C. Tambahkan atribut gaya dengan lebar yang diwakili oleh persentase, seperti style = "60%"; untuk menunjukkan bahwa bilah kemajuan adalah 60%.
<dv> <div role = "progressBar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100"> <span> 40% Lengkap </span> </div> </div>
(2) bilah kemajuan bergantian
Langkah -langkah untuk membuat bilah kemajuan dari gaya yang berbeda adalah sebagai berikut:
A. Tambahkan <viv> dengan kelas .progress.
B. Berikutnya, di <div> di atas, tambahkan <div> kosong dengan kelas .Progress-bar dan kelas progres-bar-*. Di antara mereka, * dapat berupa kesuksesan, info, peringatan, bahaya.
C. Tambahkan atribut gaya dengan lebar yang diwakili oleh persentase, seperti style = "60%"; untuk menunjukkan bahwa bilah kemajuan adalah 60%.
<dv> <div role = "progressBar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100"> <span> 90% selesai (berhasil) </span> </div> </div>
(3) Bilah kemajuan garis -garis
Langkah -langkah untuk membuat bilah kemajuan streak adalah sebagai berikut:
A. Tambahkan <viv> dengan kelas .progress dan .progres-striped.
B. Berikutnya, di <div> di atas, tambahkan <div> kosong dengan kelas .Progress-bar dan kelas progres-bar-*. Di antara mereka, * dapat berupa kesuksesan, info, peringatan, bahaya.
C. Tambahkan atribut gaya dengan lebar yang diwakili oleh persentase, seperti style = "60%"; untuk menunjukkan bahwa bilah kemajuan adalah 60%.
<dv> <div role = "progressBar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100"> <span> 90% selesai (berhasil) </span> </div> </div>
(4) bilah kemajuan animasi
Langkah -langkah untuk membuat bilah kemajuan animasi adalah sebagai berikut:
A. Tambahkan <viv> dengan kelas .progress dan .progres-striped. Juga tambahkan kelas. Aktif.
B. Selanjutnya, tambahkan <voled <v> dengan kelas .Progress-bar di di atas <viv>.
C. Tambahkan atribut gaya dengan lebar yang diwakili oleh persentase, seperti style = "60%"; untuk menunjukkan bahwa bilah kemajuan adalah 60%.
Ini akan memberi garis -garis rasa gerakan dari kanan ke kiri.
<dv> <div role = "progressBar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100"> <span> 40% Lengkap </span> </div> </div>
(5) Bilah kemajuan bertumpuk
Anda bahkan dapat menumpuk beberapa bilah kemajuan. Anda dapat menumpuk beberapa bilah kemajuan dalam kemajuan yang sama.
17. Objek Multimedia Bootstrap (Objek Media)
Objek multimedia di bootstrap (objek media). Gaya objek abstrak ini digunakan untuk membuat berbagai jenis komponen (seperti komentar blog). Kita dapat menggunakan grafik dan pencampuran teks dalam komponen, dan gambar dapat disejajarkan kiri atau kanan. Objek media dapat menggunakan lebih sedikit kode untuk mencapai pengaturan campuran objek dan teks media.
Properti penandaan yang ringan dan scaling dari objek media dicapai dengan menerapkan kelas ke tag sederhana. Anda dapat menambahkan dua formulir berikut ke tag HTML untuk mengatur objek media:
A. Media: Kelas ini memungkinkan multimedia (gambar, video, audio) di objek media untuk mengambang ke kiri atau kanan blok konten.
B. Daftar Media: Jika Anda memerlukan daftar, setiap item adalah bagian dari daftar yang tidak dipesan, Anda dapat menggunakan kelas ini. Dapat digunakan untuk daftar komentar dan daftar artikel.
<div> <a href = "#"> <img src = "/wp-content/unggah/2014/06/64.jpg"> </a> <div> <h4> Judul media </h4> Berikut adalah beberapa teks sampel. Berikut adalah beberapa teks sampel. </div> </div>
18. Bootstrap List Group
Komponen daftar digunakan untuk membuat konten kompleks dan kustom dalam formulir daftar. Langkah -langkah untuk membuat grup daftar dasar adalah sebagai berikut:
A. Tambahkan Kelas .List-Group ke Elemen <ul>.
B. Tambahkan kelas. Dist-group-item ke <li>.
<ul> <li> Pendaftaran Nama Domain Gratis </li> <li> Hosting ruang jendela gratis </li> </ul>
(1) Tambahkan lencana ke grup daftar
Kami dapat menambahkan komponen lencana ke item daftar apa pun, yang secara otomatis akan diposisikan ke kanan. Cukup tambahkan <span> ke elemen <li>.
<ul> <li> Pendaftaran nama domain gratis </li> <li> <span> baru </span> 24*7 Dukungan </li> </ul>
(2) Tambahkan tautan ke grup daftar
Dengan menggunakan tag jangkar alih -alih item daftar, kami dapat menambahkan tautan ke grup daftar. Kita perlu menggunakan <div> bukan elemen <ul>.
<a href = "#"> 24*7 dukungan </a>
<a href = "#"> hosting ruang jendela gratis </a>
(3) Tambahkan konten khusus ke grup daftar
Kami dapat menambahkan konten HTML ke grup daftar yang telah ditambahkan ke tautan di atas.
19. Panel Bootstrap (panel)
Panel bootstrap (panel). Unit panel digunakan untuk memasukkan unit DOM ke dalam kotak. Untuk membuat panel dasar, cukup tambahkan kelas .panel dan kelas .panel-default ke elemen <div>,
<div> <div> Ini adalah panel dasar </div> </div>
(1) Judul Panel
Kami dapat menambahkan judul panel dalam dua cara:
A. Menggunakan kelas .panel-heading dapat dengan mudah menambahkan wadah judul ke panel.
B. Gunakan <H1>-<H6> dengan kelas .Panel-judul untuk menambahkan judul gaya yang telah ditentukan.
<div> <div> Judul Platform Tanpa Judul </SIV> <SIV> Konten Platform </div> </div>
(2) Catatan kaki panel
Kita dapat menambahkan catatan kaki ke panel, cukup letakkan tombol atau subteks di <ve> dengan class .panel-footer.
<div> <div> Ini adalah panel dasar </div> <viv> catatan kaki palka </div> </div>
(3) Panel dengan warna kontekstual
Gunakan kelas-kelas konteks Panel-primer, panel-success, panel-info, peringatan panel, dan penggundulan panel untuk mengatur panel dengan warna kontekstual.
<div> <div> <h3> judul platform </h3> </div> <div> Ini adalah panel dasar </div> </div>
(4) Panel dengan meja
Untuk membuat tabel tanpa batas di panel, kita dapat menggunakan kelas .tabel di panel. Dengan asumsi ada <verv> yang mengandung .panel-body, kita dapat menambahkan batas tambahan ke bagian atas tabel untuk memisahkannya. Jika tidak ada <viv> yang mengandung .panel-body, komponen bergerak dari kepala panel ke meja tanpa gangguan.
<div> <div> <h3>Platform Title</h3> </div> <div>This is a basic panel</div> <table> <th>Product</th><th>Price</th> <tr><td>Product A</td><td>200</td></tr> <tr><td>Product B</td><td>400</td></tr> </table></div>
(5) Panel dengan grup daftar
Kami dapat menyertakan grup daftar di panel apa pun, membuat panel dengan menambahkan kelas .panel dan .panel-default di elemen <div>, dan menambahkan grup daftar di panel.
<div> <div> judul platform </div> <div> <p> Ini adalah konten panel dasar. </p> </div> <ul> <li> Pendaftaran Nama Domain Gratis </li> <li> Biaya Pembaruan Tahunan </li> </ul> </div>
20. Bootstrap dengan baik
Nah adalah wadah yang menyebabkan efek lekuk atau ilustrasi pada konten <ver>. Untuk membuat sumur, cukup masukkan konten di <viv> dengan kelas. Well.
<div> halo, saya baik -baik saja! </div>
(1) ukuran
Anda dapat menggunakan kelas opsional Well-LG atau Well-SM untuk mengubah ukuran sumur. Kedua kelas ini digunakan bersama dengan kelas. Kedua kelas ini mempengaruhi padding, dan tergantung pada kelas yang digunakan, baik akan tampak lebih besar atau lebih kecil.
<div> halo, saya berada di sumur besar! </div>
<div> halo, saya berada di sumur kecil! </div>
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.