Tujuan utama artikel ini memungkinkan Anda belajar menggunakan Bootstrap Twitter untuk membuat situs dalam waktu 20 menit. Cara membangun situs diperkenalkan di bawah ini:
Templat HTML dasar
.Kami perlu menggunakan templat HTML dasar sehingga kami dapat memasukkan file bootstrap yang diperlukan. 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: <tautan href = "http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel = "stylesheet">
Ini memungkinkan semua CSS Bootstrap Twitter untuk mulai 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".
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.
<p> lorem ipsum dolor duduk amet, consectetuer elit apiscing, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. UT wisi enim ad venia 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.
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.
sebagai kesimpulan
Dengan fitur yang disediakan oleh Twitter Bootstrap, kami telah memberikan tutorial bootstrap dasar yang sangat cepat ini, tetapi luangkan waktu untuk berlatih dan membaca lebih banyak dokumen resmi, dan Anda akan segera menjadi ahli bootstrap.
Setelah membaca tutorial ini, Anda harus memahami cara menggunakan sistem raster, prinsip -prinsip dasar dari berbagai jenis navigasi dan desain responsif.
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.