Tujuan utama artikel ini memungkinkan Anda belajar menggunakan Bootstrap Twitter untuk membuat situs dalam waktu 20 menit. Cara membangun situs diperkenalkan di bawah ini:
Hal pertama yang perlu dikatakan adalah bahwa Twitter Bootstrap adalah kerangka kerja open source front-end yang sangat baik. Ini memberikan kasus penggunaan terperinci untuk semua pengelompokan utama, memungkinkan Anda untuk dengan mudah melekat pada desain Anda dengan menyalin dan menempel.
Templat HTML dasar
Kita perlu menggunakan templat HTML dasar sehingga kita dapat menyertakan file bootstrap yang kita butuhkan. Berikut adalah awal dari proyek Bootstrap Twitter kami, salin kode -kode ini ke dalam file dan beri nama index.html.
<! Doctype HTML> <HEAD> <Title> tutorial Bootstrap Twitter - tutorial tata letak responsif </iteme> <style type = 'text/css'> body {background -color: #ccc; } </tyle> </head> <body> </body> </html>Dalam kode ini kami telah menambahkan beberapa CSS untuk membuat latar belakang halaman berwarna abu -abu, karena dengan cara ini kami dapat dengan mudah melihat kolom yang berbeda dalam desain kami, membuatnya lebih mudah dipahami.
Memperkenalkan file bootstrap Twitter
Untuk menggunakan Bootstrap Twitter, kami hanya perlu memperkenalkan file ke dalam templat kami. Ada banyak cara untuk memperkenalkan file. Jika Anda ingin mengetahui metode ini, silakan berkonsultasi dengan dokumen yang relevan.
Berdasarkan titik awal tutorial ini, kami akan memperkenalkan file bootstrap-combined.min.css melalui CDN tanpa mengunduh file apa pun.
Salinan kode adalah sebagai berikut: href = "http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel = "stylesheet">
Twitter Bootstrap CSS berlaku di templat kami.
Wadah Twitter Bootstrap
Kelas wadah bootstrap sangat berguna. Ini dapat membuat area terpusat di halaman, dan kemudian kita dapat meletakkan isi lokasi lain di dalam. Kelas kontainer setara dengan membuat kotak div terpusat dengan lebar statis dan nilai magin otomatis. Keuntungan dari kelas wadah Bootstrap Twitter adalah responsif, dan menghitung lebar terbaik berdasarkan lebar layar saat ini untuk tujuan praktis.
Di tag tubuh, gunakan kelas wadah untuk membuat div. Ini akan berfungsi sebagai pembungkus luar utama untuk kode lain di halaman.
Jika Anda menyesuaikan ketinggian div ini dan mengatur warna latar belakangnya menjadi putih, efek yang Anda lihat akan seperti ini:
Judul dan navigasi
Sekarang kami memiliki tempat untuk menambahkan kode HTML tambahan, kami dapat menambahkan teks judul dan kemudian membuat bilah navigasi utama untuk situs tersebut.
Tambahkan teks berikut atau teks yang Anda pilih ke tag div dari kelas wadah.
<h1> Tutorial Bootstrap Twitter </h1>
Tidak banyak yang baru sekarang, itu hanya judul, mari kita pindah ke aspek yang lebih menarik dari navigasi Bootstrap Twitter.
Bootstrap memiliki kelas NAV yang memungkinkan kami membuat berbagai elemen navigasi. Anda dapat menambahkan kode berikut setelah tag H1.
<Div class = 'navbar navbar-inverse'> <div class = 'nav-collapse' style = "height: auto;"> <ul> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> halaman satu </a> </li> <li> <li> <a href = "#">
Kelas terkait Navbar memiliki semua gaya bilah navigasi. Menambahkan kelas invers navbar akan menerapkan gaya hitam keren, yang merupakan kombinasi umum dari Bootstrap Twitter. Saya sarankan memperluas gaya ini untuk membuat navigasi unik Anda. Tetapi dalam tutorial ini kami masih akan menggunakan gaya bootstrap dasar.
Dalam div dengan Navbar kelas, kami menambahkan div lain dengan kelas-collapse kelas dan menambahkan tinggi gaya inline: auto; Ini memberi tahu Bootstrap bahwa ketika halaman ini berada di jendela browser dengan lebar kurang dari 970px, itu akan memberikan tampilan sakelar terkompresi.
Jika Anda menyimpan file index.html dan membukanya di browser, Anda akan dapat melihat perubahan ini ketika Anda menyesuaikan lebar jendela browser, seperti yang ditunjukkan pada gambar.
Lebih besar dari 979px:
Kurang dari 979px:
Selain itu, kami dapat menambahkan kelas NAV ke elemen daftar HTML yang tidak dipesan untuk menerapkan lebih banyak gaya dari file CSS Bootstrap, atau kami dapat menambahkan kelas aktif ke item daftar "Beranda".
Bagikan artikel indah tentang navigasi bootstrap: "navigasi yang harus dipelajari setiap hari dengan bootstrap", "navigasi yang harus dipelajari setiap hari dengan bootstrap"
Konten utama dan bilah samping
Kami telah menyelesaikan navigasi utama situs, dan sekarang kami perlu menambahkan area konten utama dan bilah samping untuk mendukung lebih banyak tautan atau jalur navigasi. Harap tambahkan kode berikut ke bilah navigasi.
<Div id = 'content' class = 'row-fluid'> <div class = 'span9 main'> <h2> bagian konten utama </h2> </div> <div class = 'span3 sidebar'> <h2> sidebar </h2> </div> </div>
Inilah yang perlu kita pahami tentang sistem raster Bootstrap. Tentu saja, dokumentasi bootstrap resmi mencakup lebih banyak detail, tetapi kami akan mulai dengan dasar -dasarnya dan membiarkan Anda memahaminya dengan lebih baik.
Sistem raster menggunakan tata letak 12-kolom, yang berarti bahwa halaman dapat dibagi menjadi 12 kolom yang identik. Gambar berikut yang diperoleh dari dokumen Bootstrap resmi memberikan tampilan yang bagus.
Dalam kode kami baru saja menempel di bilah navigasi Anda dapat melihat kelas -kelas bernama Span9 dan Span3. Mereka akan membagi halaman menjadi dua bagian dari 9 kolom di kiri dan 3 kolom di sebelah kanan, membentuk area konten dan sidebar kami. Salah satu manfaat menggunakan sistem raster adalah secara dinamis menghitung lebar kolom berdasarkan lebar jendela, sehingga Anda tidak perlu menulis kueri media apa pun untuk membuat situs Anda berfungsi pada resolusi layar apa pun.
Anda dapat mengamati efeknya dengan mengubah jumlah rentang dan menyesuaikan ukuran browser Anda. Anda akan melihat bahwa ketika area konten kurang dari 724px, kolom ini ditumpuk secara vertikal.
Sekarang kami meletakkan teks berikut atau teks lain di belakang tag H2 di area konten utama, hanya untuk memperpanjang halaman sedikit.
Salin kode sebagai berikut: psum dolor duduk amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. UT wisi enim ad veniam minimum, quis nostrud latihan sta ulllamcorper suscipit lobortis nisl ut aliquip ex ea commodo konsekuensi. DUIS Autem Vel Eum Iriure Dolor Di Hendrerit dalam Velit Esse Esse Molestie Consekuel, Vel Illum Dolore Eu Feugiat Nulla Facilisis di Vero eros et accumsan et iusto odio dignissim qui feistit nuLauga lumtatum zzrilis delenit augue duisu duison nnulaTit nuLatum nol zzrilis augle augue duisu naLULITIT NUTATUM ZZRILISIT. Nam Liber Tempor Cum Soluta Nobis Eleifend Option Congue Nihil Imperdiet Doming Id Quod Mazim Placerat Facer Possim Assim. </p>
<p> Typi non habent clariitatem insitam; Est usus legitis di IIS qui facit eorum clariitatem. Investigasi demonstraverunt clariitres legende me lius quod II legunt saepius. Claritas est Etiam Process Dynamicus, Qui Sequencer Mutationem Consuetudium legorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum format humanitatis per seacula quarta decima et quinta decima. Eodem Modo Typi, qui nunc nobis videntur parum clari, sollemnes fiant di futurum. </p>
Sekarang situs akan ditampilkan sebagai berikut:
Navigasi sidebar
Anda dapat melihat semua elemen navigasi yang disediakan Twitter Bootstrap kepada kami di sini (twitter.github.com/bootstrap/components.html#navs).
Kami akan menggunakan tab vertikal untuk membuat area navigasi tambahan. Salin dan tempel kode berikut ke tag H2 bilah samping.
<ul> <li> <a href = '#'> tautan lain 1 </a> </li> <li> <a href = '#'> tautan lain 2 </a> </li> <li> <a href = '#'> tautan lain 3 </a> </li> </ul>
Ini adalah tampilan sederhana! Kode di atas secara harfiah hanya daftar yang tidak tertib dengan kelas-kelas-tab-tab dan Nav-stacked, tetapi itu menciptakan panel navigasi untuk kita.
Melihat efek akhir, halaman berdasarkan Bootstrap Twitter selesai.
Setelah membaca tutorial ini, Anda harus dapat menggunakan bootstrap untuk membuat halaman tata letak responsif dasar, memahami sistem grid, dan dapat menggunakan bootstrap untuk menavigasi, bilah navigasi dan memahami dasar -dasar desain responsif.
Lebih banyak konten tentang bootstrap juga dapat ditemukan dalam topik khusus: "Tutorial Pembelajaran Bootstrap"
Semua hal di atas adalah pengetahuan yang diperlukan untuk menggunakan Bootstrap Twitter. Saya berharap ini akan membantu untuk pembelajaran semua orang. Saya harap Anda dapat menghabiskan lebih banyak waktu dan menjadi sempurna. Dalam waktu dekat, Anda bisa menjadi ahli di Bootstrap.