Menggunakan kerangka bootstrap untuk desain dan pengembangan adalah tren yang relatif populer di dunia. Saat mengoptimalkan produk baru, banyak perusahaan perangkat lunak akan memilih kerangka kerja pengembangan ini karena keunggulan komprehensifnya di JS dan kontrol.
Kerangka Bootstrap adalah kerangka desain UI front-end. Ini menyediakan antarmuka UI terpadu dan menyederhanakan proses merancang antarmuka UI (kerugiannya adalah bahwa antarmuka disesuaikan, sehingga tidak ada banyak ruang untuk penyesuaian). Terutama tata letak waktu respons saat ini (pemahaman saya adalah bahwa halaman mengadopsi tata letak elemen halaman yang berbeda sesuai dengan resolusi yang berbeda), yang didukung dengan baik dalam bootstrap. Selama properti hanya ditetapkan, tata letak waktu respons dapat diimplementasikan secara otomatis, sangat menyederhanakan proses antarmuka pemrogram.
Oleh karena itu, saya menggunakan kerangka bootstrap untuk mengimplementasikan antarmuka berikut. Meskipun sederhana, itu luar biasa (jika Anda benar -benar ingin menerapkannya sendiri, saya tidak tahu apakah itu akan menjadi tahun monyet dan bulan kuda)
Seluruh halaman dibagi menjadi beberapa bagian, yang diimplementasikan menggunakan kode sampel di situs web resmi Bootstrap, dan akhirnya dibentuk menjadi halaman. Skema masing -masing bagian ditunjukkan pada gambar berikut
Selanjutnya, jelaskan kode masing -masing bagian pada gilirannya
Pertama, buat halaman kosong, kodenya adalah sebagai berikut:
<!DOCTYPE html> <html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content=""><meta name="author" Content = ""> <Title> bootstrap </iteme> <tautan rel = "stylesheet" href = "http://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/boottrap.min.css"> <link = "stylesheet" href = "http://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap-theme.min.css"> <!-[jika lt yaitu 9]> <skrip src = "../../ docs-assets/js/ie8-responsive-file-warning.js"> </script> <! [endif]-> <!-[jika lt yaitu 9]> <script src = "../ docs-asset 9]> <skrip src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </skrip> <skrip src = "https://oss.maxcdn.com/libs/respress.js/1.3.0/respress.min.js"> </script> <! [Endif]-> <tyle> .bs-docs-home {latar belakang-color: #1b31b1; latar belakang-gambar: url (line.png); } </tyle> </head> <body> <script src = "https://code.jquery.com/jquery-1.10.2.min.js"> </script> <skrip src = "http://cdn.bootcss.com/twitter-bootstrap/3.0.1/js/bootstrap.min.js"> </script> </body> </html>Untuk menggunakan Kerangka Bootstrap, Anda harus merujuk ke file kerangka Bootstrap di halaman. Ada empat total: bootstrap.min.css, bootstrap-theme.min.css, jQuery-1.10.2.min.js, bootstrap.min.js
Hanya dengan merujuk pada file -file ini, Anda dapat menggunakan berbagai elemen UI yang disediakan oleh kerangka Bootstrap.
Selanjutnya, seperti yang ditunjukkan pada gambar di atas, jelaskan kode masing -masing bagian secara berurutan
Deskripsi Teratas:
Gagasan merancang seluruh halaman adalah untuk menempatkan seluruh halaman pada panel, dan teks di atas adalah header panel
Halaman kerangka bootstrap adalah tata letak grid 12-kolom. Jadi saya membagi seluruh halaman menjadi tiga bagian. Ada 3 kolom yang kosong di sebelah kiri dan kanan, dan 6 kolom memperluas satu panel (panel).
Kode ini adalah sebagai berikut: Bagian yang tersisa dari kode ada di <viv> </div> secara berurutan
<body> <dv> <h1 style = "line-height: 2em;"> </h1> <br /> <viv> <verv> </div> <viv> <hv> <h3> <strong> Kueri skor keterampilan kejuruan </strong> </h3> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> src = "https://code.jQuery.com/jquery-1.10.2.min.js"> </script> <script src = "http://cdn.bootcss.com/twitter-boottrap/3.0.1/js/boottrap.min.js"> </bootrap/3.0.1/js
Teks cepat
Teks prompt menggunakan komponen peringatan dalam kerangka bootstrap, dan kodenya adalah sebagai berikut:
<div> <tombol type = "tombol" data-dismiss = "waspada" aria-hidden = "true"> × </button> <strong> Catatan! </strong> Skor untuk situs ini berasal dari situs web resmi 12333. Untuk detailnya, silakan berkonsultasi dengan situs web resmi </Div>
Bentuk kartu identitas dan tombol permintaan
Formulir kartu ID dan formulir akun selanjutnya harus dalam satu formulir. Bentuk identitas dan tombol kueri adalah pengelompokan elemen bentuk yang memanfaatkan kerangka bootstrap. Gunakan grup input untuk menggabungkan kotak dan tombol teks. Kerangka kerja bootstrap memberikan efek seperti tanda air dan highlight. Tambahkan banyak warna ke formulir
<Form role = "Form" name = "Form1"> <div> <label for = "idcard"> Harap masukkan nomor ID Anda </label> <Div> <input type = "text" id = "idcard" name = "idcard" placeholder = "iDcard Number"> <span> <tombol type = "tombol" onklick = "Form1.subm ()"> <span> <tombol "Tombol" onklick = "form1.subm () (); > Kueri </button> </span> </div> </form>
Bentuk subjek
Formulir akun juga merupakan kelompok elemen formulir yang memanfaatkan kerangka bootstrap. Gunakan grup input untuk menggabungkan kotak teks (input), tombol (tombol) dan daftar drop-down (UL).
Anda dapat memasukkan subjek secara langsung di kotak teks, atau Anda dapat memilih subjek di menu tarik-turun. Implementasi spesifik adalah menggunakan $ ('#subjek'). Val ('Operator Komputer') dan kode lain untuk mengubah konten di kotak teks di acara klik (klik) hyperlink (a). Formulir akun terletak di bawah formulir ID, di dalam formulir (formulir)
Kodenya adalah sebagai berikut:
<div> <label for="Subject">Please enter the subject you are looking for</label> <div> <input type="text" id="Subject" name="Subject" placeholder="Account, blank subject means querying all subjects" > <div> <button type="button" data-toggle="dropdown">Account<span></span></button> <ul> <li><a href="#" OnClick = "$ ('#subjek'). Val ('operator komputer');"> operator komputer </a> </li> <li> <a href = "#" onclick = "$ ('#subjek'). Val ('desain web');"> Desain web </a> </li> <li> <Li> <a href = "#" OnClick = "$ ('#subjek'). Val ('Multimedia');"> Multimedia </a> </li> </ul> </div> </div> </div>Informasi Kesalahan Permintaan
Ketika tombol kueri diklik dan tidak ada catatan yang ditemukan, pesan kesalahan kueri ditampilkan. Seperti teks prompt sebelumnya, ia menggunakan komponen peringatan dalam kerangka bootstrap.
Apakah informasi ini ditampilkan juga memerlukan kerja sama kode dinamis latar belakang. Kode dinamis memutuskan apakah akan menampilkan informasi berdasarkan hasil kueri (jika tidak ada catatan, informasi akan ditampilkan). Kode dinamis tidak dibahas dalam artikel ini.
Lokasi ada di belakang formulir, dan kodenya adalah sebagai berikut:
<div> <tombol type = "tombol" data-dismiss = "waspada" aria-hidden = "true"> × </button> <strong> Catatan! </strong> tidak ada hasil yang ditemukan, silakan periksa nomor ID dan subjek dan periksa lagi </div>
Formulir kelas
Ketika tombol kueri diklik, formulir skor ditampilkan saat catatan ditemukan. Demikian pula, apakah akan menampilkannya juga memerlukan kerja sama kode dinamis di latar belakang.
Hanya satu pesan kesalahan dan formulir skor yang dapat muncul secara bersamaan
Kodenya adalah sebagai berikut:
<div> <Table CellPacing = "0" cellPadding = "0"> <tr> <th scope = "col"> <span style = "color: white"> subjek </span> </t> <tH scope = "col"> <span style = "color: white"> skor </span> </th> </tr> </TR> </TR> </TD </t t t t t t t t t t t t t t. <tr> <td> Operator komputer </td> <td> sangat baik </td> </tr> <tr> <td> Operator multimedia </td> <td> baik </td> </tr> </td> </td> </td> <td> Gagal </td> </tr> </tabel </td> <td> </td> </tr> </tabel </td> <td> </td> </tr> </tabel> </td> <td> </td> </tr> </tabel </td> <td> </td> </tr> </tabel </td> <td> </td> </tr> </tabel </td> <td> </td> </tr> </tabel
Halaman ini diimplementasikan menggunakan kerangka bootstrap. Berkat kekuatan kerangka bootstrap, merancang UI bukan lagi tugas yang sulit. Tetapi Bootstrap hanyalah kerangka kerja UI, dan keunggulannya tergantung pada kerja sama kode dinamis di latar belakang.
URL berikut adalah fungsi penulis yang menggunakan antarmuka di atas ditambah kode dinamis backend (PHP) untuk mewujudkan permintaan skor tes keterampilan kejuruan (hanya Shanghai). Anda dapat pergi dan melihat dan memberikan komentar yang berharga (berlaku selama 1 bulan).
http://bertin.sturgeon.mopaas.com/
Kode UI lengkap adalah sebagai berikut:
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content=""><meta name="author" Content = ""> <Title> bootstrap </iteme> <tautan rel = "stylesheet" href = "http://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/boottrap.min.css"> <link = "stylesheet" href = "http://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap-theme.min.css"> <!-[jika lt yaitu 9]> <skrip src = "../../ docs-assets/js/ie8-responsive-file-warning.js"> </script> <! [endif]-> <!-[jika lt yaitu 9]> <script src = "../ docs-asset 9]> <skrip src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </skrip> <skrip src = "https://oss.maxcdn.com/libs/respress.js/1.3.0/respress.min.js"> </script> <! [Endif]-> <tyle> .bs-docs-home {latar belakang-color: #1b31b1; latar belakang-gambar: url (line.png); } </tyle> </head> <body> <div> <h1 style = "line-height: 2em;"> </h1> <br/> <v div> </div> <viv> <viv> <h3> <strong> skor skor keterampilan kejuruan </strong> </h3> </div> <v div> <von typede = " aria-hidden = "true"> × </button> <strong> note! </strong> skor yang ditanya di situs ini berasal dari situs web resmi 12333. Untuk rinciannya, silakan berkonsultasi dengan situs web resmi </div> <bentuk role = "Form" name = "Form1"> <Div> <label untuk = "idcard"> Harap masukkan nomor ID Anda </label> "" Placeholder = "Nomor ID"> <span> <tombol type = "tombol" onClick = "form1.submit ();" >Query</button></span></div><div><label for="Subject">Please enter the subject you want to query</label><div><input type="text" id="Subject" name="Subject" placeholder="Account, blank subject means querying all subjects" ><div><button type="button" data-toggle="dropdown">Account<span></span></button><ul><li><a href = "#" ontClick = "$ ('#subjek'). Val ('operator komputer');"> operator komputer </a> </li> <li> <a href = "#" ontClick = "$ ('#subjek'). Val ('Desain Web');"> Desain Web </a> </li> <li> <a href = "#" OnClick = "$ ('#Subjek'). Val ('Multimedia');"> Multimedia </a> </li> </ul> </div> </div> </form> <Div> <tombol type = "Tombol" Data-Dismiss = "Peringatan" ARIA-HIDEN = "TRUE"> × Tombol </Tombol> <Kuat> Perhatian Kuat! <div><table cellpacing="0" cellpadding="0"><tr><th scope="col" ><span style="color:white">subjects</span></th><th scope="col"><span style="color:white">score</span></th></tr><td>computer operator</td><td>no grade</td></tr><td>computer operator</td><td>excellent</td></tr><td>multimedia operator</td><td>good</td></tr><td>web design</td><td>failed</td></tr> </table></div> </div></div><div></div></div></div></div> <script src = "https://code.jquery.com/jquery-1.10.2.min.js"> </script> <script src = "http://cdn.bootcss.com/twitter-boottrap/3.0.1/js/boottrap.min.js"> </body>Di atas adalah pengetahuan yang relevan tentang penggunaan kerangka bootstrap untuk membuat kode contoh antarmuka untuk halaman kueri yang diperkenalkan kepada Anda. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!