Keuntungan menggunakan CSS kerangka kerja adalah bahwa perancang tata letak tidak perlu memikirkan banyak nuansa tata letak yang telah dipikirkan oleh pembuat kerangka kerja untuknya. Nuansa tersebut termasuk kompatibilitas lintas-browser, dukungan berbagai resolusi layar dan banyak lagi. Perancang tata letak hanya menunjukkan apa, bagaimana dan kapan menampilkannya, selebihnya dilakukan oleh framework itu sendiri. Pendekatan ini dapat mempercepat tata letak situs web. Kelebihan Bootstrap antara lain popularitasnya. Artinya, akan lebih mudah bagi perancang kode lain untuk memelihara kode Anda.

Kerugian menggunakan kerangka kerja adalah halaman tersebut harus memuat seluruh gaya ekstra kerangka kerja, meskipun hanya menggunakan sebagian kecil saja. Kerangka kerja ini adalah alat yang sangat baik untuk membuat prototipe dan membuat halaman yang desainnya bersifat sekunder, seperti halaman admin. Jika Anda memiliki desain yang sangat spesifik, menatanya menggunakan kerangka kerja mungkin lebih sulit daripada berarti asli. Namun, hal ini juga mungkin terjadi.

Setelah itu, untuk mengubah gaya Bootstrap Anda perlu mengubahnya di style.css Anda seperti ini:

A ( warna: #beceda; )
Sebuah kerugian yang jelas pendekatan ini adalah Anda harus mencari secara manual gaya yang diperlukan, yang perlu disela dan tidak selalu sepele, karena Beberapa opsi Bootstrap berlaku untuk banyak penyeleksi dalam bentuk yang dimodifikasi, seperti melalui rumus. Alat Kustomisasi dapat membantu di sini; alat ini akan membantu mengkompilasi perubahan Anda dengan benar, tetapi hanya sekali. Jika di masa depan Anda ingin mengubah beberapa parameter, Anda harus memasukkan kembali nilai yang diubah untuk semua bidang untuk mengkompilasi gaya Anda.

Ada jumlah besar cara untuk mengkompilasi file KURANG dan Bootstrap menyerahkannya pada kebijaksanaan pengembang. Bootstrap sendiri menggunakan Grunt untuk kompilasi, Anda mungkin lebih memilih plugin untuk produk JetBrains, dan kami, karena artikel ini ditujukan untuk pemula, akan mencari solusi yang lebih sederhana. Solusi tersebut adalah WinLess untuk Windows, SimpLESS untuk Mac atau Koala untuk Linux. Semua program ini melakukan hal yang kurang lebih sama: mereka menerima folder dengan file KURANG sebagai masukan dan mendengarkan perubahan di dalamnya. Segera setelah Anda membuat perubahan pada file apa pun, file tersebut segera dikompilasi menjadi CSS yang ditentukan mengajukan. Dengan cara ini Anda tidak perlu menjalankan kompilasi manual setelah setiap perubahan. Anda mengubah file LESS, menyimpannya dan segera melihat perubahannya di situs dalam bentuk terkompresi yang sudah dikompilasi.

• Bagaimana gambarnya dipotong?
• Komponen apa saja yang akan digunakan?
• Apa gaya utamanya?
• Tata letak halaman apa yang akan kita dapatkan?

Simpan gambar peta:

Mari kita simpan logonya sebagai berikut:

Gambar/logo.png
gambar/footer-logo.png

Berulang-ulang gambar latar belakang perlu untuk memotong potongan minimum yang cukup untuk membentuk gambar yang lengkap, mengulanginya secara vertikal dan horizontal.

/gambar/bg.png
/gambar/h1-bg.png

Lebih mudah untuk menyimpan ikon jejaring sosial dengan ukuran yang sama dalam satu file dan menggunakannya sebagai sprite untuk file lainnya pemuatan cepat. Rincian lebih lanjut tentang menempelkan gambar dijelaskan di bagian pertama. Hasilnya akan menjadi dua file:

/gambar/sosial.png
/images/social-small.png

Jika Anda melihat template kami, Anda dapat melihat bahwa kami memerlukan komponen berikut:

Pertama-tama, Anda perlu menambahkan variabel yang tidak ada dalam pengaturan Bootstrap agar Anda dapat menggunakannya di masa mendatang. Bagi kami ini hanya font desain tertentu.

@ font-merek: "Oswald",sans-serif;
Jika Anda ingin menggunakan template untuk situs Rusia, Anda dapat mencoba mengganti font Oswald dengan Cuprum terdekat, yang mendukung Cyrillic.

Sekarang mari kita ganti pengaturan Bootstrap dengan pengaturan kita sendiri:

Sekarang kita sudah selesai dengan variabelnya, mari mulai menata desain kita di file style.less. Pertama, mari kita hubungkan Bootstrap itu sendiri dan variabel kita:

@import "bootstrap/bootstrap.less"; @import "variabel.kurang";
Tidak semua gaya default Bootstrap dapat diubah menggunakan variabel, jadi mari kita lakukan secara manual:

P ( margin: 20px 0; ) .form-control ( box-shadow: none; ) .btn ( font-family: @brand-font; )
Di sini kita telah menghilangkan bayangan dari elemen formulir, dan memberi teks pada tombol font halaman tertentu.

Kemudian kami menjelaskan latar belakang halaman dan bilah atas:

Badan ( batas atas: 5px solid #7e7e7e; gambar latar: url(../images/bg.png); )
Lebih lanjut dalam teks tidak akan ditunjukkan di file mana gaya tersebut ditulis. Ingatlah bahwa kita menyimpan semua variabel dalam file variabel.kurang, dan gaya CSS Kami akan menyimpannya di style.less.

kotak putih
Blok ini menciptakan struktur dokumen HTML5. Dalam judul kami menunjukkan nama halaman kami – Whitesquare. Dengan tag meta viewport kami menunjukkan bahwa lebar halaman adalah perangkat seluler akan sama dengan lebar layar dan skala awal akan menjadi 100%. Kemudian file gaya disertakan. Dan untuk versi Penjelajah Internet kurang dari sembilan, kami menghubungkan skrip yang memungkinkan kami menampilkan tata letak kami dengan benar.

Mari tambahkan kode berikut ke badan:

Di sini kita menemukan komponen Bootstrap pertama - kolom. Elemen induk kolom diberi kelas "baris", dan kelas kolom dimulai dengan awalan "col-", kemudian ukuran layar (xs, sm, md, lg), dan diakhiri dengan lebar relatif kolom .

Sebuah kolom dapat ditetapkan secara bersamaan kelas yang berbeda dengan nilai untuk layar, misalnya class="col-xs-12 col-md-8". Kelas-kelas ini hanya mengatur lebar kolom sebagai persentase untuk ukuran layar tertentu. Jika kolom tidak diberi kelas layar tertentu, maka kelas untuk layar spesifik minimum akan diterapkan, dan jika tidak ditentukan, maka lebar tidak akan diterapkan dan blok akan mengambil lebar maksimum yang mungkin.

Kelas kita “col-md-7” dan “col-md-17” menunjukkan bahwa blok adalah kolom dengan lebar 7 dan 17 relatif terhadap wadah induk. Secara default, jumlah lebar kolom di Bootstrap adalah 12, namun kami menggandakan jumlah ini untuk mencapai fleksibilitas yang kami butuhkan.

Isi ( … .wrapper ( padding: 0 0 50px 0; ) header ( padding: 20px 0; ) )
Kami menempatkan struktur ini di dalam tubuh. Sintaks LESS memungkinkan Anda untuk menyusun aturan satu sama lain, yang kemudian dikompilasi ke dalam konstruksi berikut:

Badan .wrapper (…) tajuk badan (…)
Pendekatan ini memungkinkan Anda melihat struktur HTML tepat di dalam CSS dan memberikan beberapa “cakupan” pada aturan.

Masukkan logo ke dalam tag header:

Gaya tambahan tidak diperlukan.

Untuk membuat pencarian, kita memerlukan komponen Bootstrap berikut: formulir inline, kontrol yang dikelompokkan, dan tombol.
Pada tag header kita membuat form inline, rata ke kanan. Bidang formulir tersebut harus memiliki kelas "kontrol formulir" dan label.

Kami menempatkan komponen "kontrol yang dikelompokkan" ke dalam formulir. Kontrol pengelompokan memungkinkan Anda menghilangkan spasi antara input teks dan tombol dan, seolah-olah, menggabungkannya menjadi satu elemen.
Ini adalah div dengan kelas dan bidang "grup input", dan tombol komponen tersebut ditempatkan di blok dengan kelas "grup input-btn".

Karena kita tidak perlu menampilkan label untuk kolom pencarian, kita akan menyembunyikannya dengan kelas “sr-only”. Ini diperlukan untuk pembaca layar khusus.

Tombol tersebut diberi kelas “btn-primary”, artinya merupakan tombol utama dari formulir ini.

…Cari PERGI
Yang tersisa hanyalah mengatur lebar formulir pencarian di gaya.

Badan ( … .wrapper ( … header ( … .form-search ( lebar: 200px; ) ) ) )

Untuk menampilkan menu, ambil komponen “panel navigasi” dan tempatkan di dalamnya komponen “navigasi”, yang merupakan daftar dengan link. Untuk navigasi, kelas "navbar-nav" ditambahkan, yang menerapkan gaya navigasi khusus dalam navbar.

• Rumah
• Tentang kami
• Layanan
• Mitra
• Pelanggan
• Proyek
• Karir
• Kontak

/*tinggi navbar*/ @navbar-tinggi: 37px; /*mengatur lebih banyak padding horizontal*/ @nav-link-padding: 10px 30px; /*latar belakang untuk item menu*/ @navbar-default-bg: @panel-bg; /*warna teks pada item menu*/ @navbar-default-link-color: #b2b2b2; /*dan saat mengarahkan mouse - sama*/ @navbar-default-link-hover-color: @navbar-default-link-color; /*latar belakang item menu aktif adalah warna biru spesifik kami*/ @navbar-default-link-active-bg: @brand-primary; /*warna teks item menu aktif*/ @navbar-default-link-active-color: #fff;
Selain parameter yang dapat disesuaikan, kami akan menjelaskan parameter tambahan dalam gaya - ini adalah teks huruf besar dan font khusus kami:

Isi ( … .wrapper ( … .navbar a ( transformasi teks: huruf besar; font: 14px @brand-font; ) ) )

Judul halaman ditempatkan dalam div dengan kelas "heading".

Tentang kami
Dan memiliki gaya berikut:

Badan ( … .wrapper ( … .heading ( tinggi: 40px; latar belakang: url transparan(../images/h1-bg.png); margin: 30px 0; padding-kiri: 20px; h1 ( tampilan: blok sebaris; warna: #7e7e7e; font: normal 40px/40px "Oswald", sans-serif; latar belakang: url(../images/bg.png);
Di sini kita menggambar garis abu-abu sebagai latar belakang div, dan memasukkan h1 sebaris ke dalamnya dalam font yang diperlukan dan warna latar belakang halaman untuk menciptakan kesan latar belakang transparan untuk h1.

Saat membuat submenu, kita tidak akan menggunakan komponen "navigasi", karena gayanya kurang cocok untuk kita; komponen "daftar yang dikelompokkan" jauh lebih cocok untuk kita. Setiap elemen dari komponen tersebut memiliki kelas "daftar-grup-item".

Submenu harus ditempatkan di tag samping. Kami membuat daftar tautan dengan cara yang sama seperti menu utama.

• Lorem ipsum
• Sangat bagus
• Elit ruang depan
• Etiam pharetra
• Phasellus placerat
• Cras et nisi vitae odio

@daftar-grup-bg: @panel-bg; @daftar-grup-perbatasan: @panel-perbatasan dalam;
Dan terapkan gaya berikut ke submenu:

Badan ( … .wrapper ( … .submenu ( margin-bawah: 30px; li ( tampilan: item-daftar; font: 300 14px @brand-font; posisi-gaya-daftar: di dalam; tipe-gaya-daftar: persegi; padding : 10px; transformasi teks: huruf besar; &.aktif ( warna: @merek-primer; ) a ( warna: @teks-warna; dekorasi teks: tidak ada; &:hover ( warna: @teks-warna; ) ) ) )
Pertama, kita mengembalikan gaya standar ke elemen daftar, karena Bootstrap menggantinya dengan miliknya sendiri. Tambahkan bantalan di bagian bawah. Submenu menggunakan font yang lebih tipis dan spidol persegi. Dan untuk link kami mengatur warna, huruf besar dan menghilangkan garis bawah. Tanda ampersand pada kode "&.active" akan digantikan oleh pemilih induk pada waktu kompilasi menggunakan sintaks LESS: ".submenu li.active".

Untuk menampilkannya, kita akan menggunakan komponen “panel”, atau lebih tepatnya variasi “panel-primary” untuk mewarnai judul. Komponen ini berisi blok header (panel-heading) dan blok konten panel (panel-body). Kami menambahkan kelas “img-responsive” ke gambar peta, yang akan memungkinkan gambar menyusut ketika lebar layar kecil.

… Kantor kami
Dalam variabel Bootstrap kita telah mengatur warna untuk latar belakang panel (panel-bg), dan sekarang kita akan menunjukkan bahwa panel "utama" akan memiliki batas panel default berwarna abu-abu, bukan yang biru default:

@panel-perbatasan-utama: @panel-perbatasan-dalam;
Sekarang Anda perlu mengubah gaya situs pengaturan standar panel yang tidak diubah melalui variabel:

Panel ( box-shadow: none; .panel-heading ( font: 14px @brand-font; text-transform: huruf besar; padding: 10px; ) .panel-body ( padding: 10px; ) )
Di sini kita menghapus bayangan dari panel, menambahkan indentasi kita sendiri dan mengatur font judul kita sendiri.

Elemen halaman ini paling mirip dengan komponen Jumbotron. Mari tambahkan ke kolom konten:

“Quisque in enim velit, at dignissim est.” nulla ul corper, dolor ac pellentesque placerat, justo tellus gravida erat, vel porttitor libero erat.”

@jumbotron-bg: @brand-primary; @jumbotron-warna: #fff;
Dan mari kita jelaskan gaya kita:

Body ( … .wrapper ( … .jumbotron ( border-radius: 0; padding: 0; margin: 0; blockquote ( border-left: none; p ( font: 300 italic 33px @brand-font; text-transform: uppercase; margin-bawah: 0; ) kecil ( perataan teks: kanan; warna: #1D8EA6; font: 300 20px @brand-font; &:before ( konten: ""; ) ) ) )
Di dalamnya, kami menghapus pembulatan sudut, padding komponen, dan dekorasi kutipan yang diatur oleh Bootstrap secara default. Kami juga akan menambahkan gaya untuk font kami.

Lorem ipsum dolor duduk amet…

Selesai, tidak apa-apa…

Selesai, tidak apa-apa…

Kelas "thumbnail" mengubah gambar menjadi komponen "thumbnail". Dia akan melakukan semua pekerjaan menata gambar untuk kita. Satu-satunya yang tersisa bagi kita adalah mengatur warna padding dan border pada variabel untuk komponen ini:

@ padding thumbnail: 1 piksel; @ batas thumbnail: #c9c9c9;

Saat menata blok ini, mari tambahkan judul terlebih dahulu:

tim kami
dengan gaya:

Isi ( … .wrapper ( … h2 ( latar belakang: tidak ada gulir ulang 0 0 #29C5E6; warna: #fff; font: 300 30px @brand-font; padding: 0 10px; transformasi teks: huruf besar; ) ) )
Dan kemudian kita akan menambahkan blok dengan kelas “tim”, yang terdiri dari dua baris yang berisi kartu karyawan. Setiap kartu adalah kolom. Kartu tersebut memiliki lebar yang sama dengan empat kolom kisi kita. Semua kartu kecuali yang pertama di baris memiliki indentasi kiri, yang dibuat oleh kelas “col-md-offset-1”. Isi kartu terdiri dari gambar dan deskripsi (.caption)

John Doe Saundra Pittsley

pemimpin tim

direktur seni

desainer ui senior

Isi ( … .wrapper ( … .team ( .row ( margin-top: 20px; .col ( spasi putih: nowrap; .thumbnail ( margin-bottom: 5px; ) ) .col-md-offset-1 ( margin- kiri: 3,7%; ) .caption ( h3 ( font: 300 16px @brand-font; margin: 0; ) p ( font: 300 14px @brand-font; warna: @brand-primary; margin: 0; ) ) ) ) )
Selain indentasi dan gaya font yang diatur di sini, kami mengubah kelas “col-md-offset-1”. Dia harus mengatur indentasi menjadi 3,7% karena... lekukan standarnya terlalu besar.

Pertama, mari buat wadah footer dengan blok-blok berikut:

Dan terapkan desainnya:

Footer ( latar belakang: #7e7e7e; warna: #dbdbdb; ukuran font: 11px; .container ( tinggi: 110px; padding: 10px 0; ) )
Tag footer mendefinisikan area abu-abu di seluruh lebar layar, dan wadah di dalamnya menampilkan area yang berpusat pada layar besar dan mengatur tinggi dan lekukan footer. Kami menggunakan kolom untuk menyelaraskan blok di dalam footer.

umpan Twitter 23 Oktober

Di masa ultricies pellentesque massa sebuah porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. Di eget mi dui, duduklah amet scelerisque nunc. Aenean Agustus

Isi ( ... footer ( ... .container ( ... h3 ( border-bottom: 1px solid #919191; warna: #ffffff; ukuran font: 14px; tinggi garis: 21px; font-family: @brand -font; margin: 0 0 10px; transformasi teks: huruf besar; ) p ( margin: 5px 0; ) .twitter ( p ( padding-kanan: 15px; ) waktu a ( warna: #b4aeae; dekorasi teks: garis bawah; ) ) )
Untuk semua judul footer, kami mengatur font dan indentasi, dan juga membuat garis bawah melalui bingkai bawah. Untuk paragraf, tunjukkan indentasinya. Untuk link yang menampilkan tanggal, atur warna dan garis bawah.

Peta Situs Rumah Tentang Layanan Mitra Mendukung Kontak
Kami mengatur tautan berdasarkan warna, font, dan spasi di antaranya.

Isi ( ... footer ( ... .container ( ... a ( warna: #dbdbdb; ) .sitemap a ( tampilan: blok; ukuran font: 12 piksel; margin-bawah: 5 piksel; ) ) )

Kami memasukkan satu set tautan ke dalam blok dengan kelas "sosial".

Jejaring sosial
Dan mari kita menatanya:

Badan ( … footer ( … .container ( … .social ( .social-icon ( lebar: 30px; tinggi: 30px; latar belakang: url(../images/social.png) tanpa pengulangan; tampilan: blok sebaris; margin -kanan: 10px; .social-icon-small ( lebar: 16px; tinggi: 16px; latar belakang: url(../images/social-small.png) tanpa pengulangan; tampilan: blok sebaris; margin: 5px 6px 0 0; ) .twitter ( posisi latar belakang: 0 0; ) .facebook ( posisi latar belakang: -30px 0; ) .google-plus ( posisi latar belakang: -60px 0; ) .vimeo ( posisi latar belakang: 0 0 ; ) .youtube ( posisi latar belakang: -16px 0; ) .flickr ( posisi latar belakang: -32px 0; ) .instagram ( posisi latar belakang: -48px 0; ) .rss ( posisi latar belakang: -64px 0; ) ) ) ) )
Di sini kami menggunakan teknik sprite - ketika satu file gambar digunakan untuk gambar yang berbeda. Semua tautan dibagi menjadi ikon besar (.social-icon) dan ikon kecil (.social-icon-small). Kami mengatur kelas-kelas ini untuk ditampilkan sebagai blok inline dengan dimensi tetap dan latar belakang yang sama. Dan kemudian menggunakan CSS kami memindahkan latar belakang ini sehingga gambar yang sesuai ditampilkan di setiap tautan.

Hak Cipta 2012 Whitesquare. Pembuatan pcklab

Badan ( … .footer ( … .container ( … .footer-logo ( float: kanan; margin-atas: 20px; ukuran font: 10px; perataan teks: kanan; a ( dekorasi teks: garis bawah; ) ) ) ) )

Ini melengkapi tata letaknya. Proyek siap dapat diunduh

Sebelum mengunduh, pastikan Anda memiliki editor kode (kami merekomendasikan Sublime Text 3) dan pengetahuan tentang HTML dan CSS. Di sini kami tidak akan menyentuh file sumbernya, tetapi Anda selalu dapat mengunduh dan mempelajarinya sendiri. Kami akan memusatkan perhatian kami untuk memulai dengan kompilasi file Bootstrap.

Cara tercepat untuk memulai: dapatkan versi CSS, JS, dan gambar kami yang dikompilasi dan diperkecil. Tidak ada dokumen atau file sumber.

Dalam file yang diunduh, Anda akan menemukan struktur dan konten berikut, dikelompokkan secara logis berdasarkan properti umum dan berisi versi yang diperkecil dan dikompilasi.

Setelah mengunduh, unzip folder terkompresi untuk melihat struktur (yang dikompilasi) Bootstrap. Seharusnya seperti ini:

Ini adalah bentuk dasar Bootstrap: file yang dikompilasi untuk digunakan dengan cepat dan mudah di hampir semua proyek Web. Kami memberi Anda kompilasi CSS dan JS (bootstrap.*), serta CSS dan JS yang dikompilasi dan diperkecil (bootstrap.min.*). File gambar dikompres menggunakan ImageOptim, aplikasi Mac untuk mengompresi gambar menjadi PNG.

Harap dicatat bahwa semua plugin JavaScript memerlukan jQuery.

Bootstrap dilengkapi dengan HTML, CSS dan JS untuk segala jenis pekerjaan, semuanya tercantum dalam kategori yang dapat Anda temukan di bagian atas halaman.

Gaya isi umum untuk mengatur ulang jenis dan latar belakang, gaya tautan, kisi templat, dan dua elemen markup sederhana.

Gaya untuk umum elemen HTML: desain, kode, tabel, formulir dan tombol. Juga termasuk Glyphicons, kumpulan ikon yang hebat.

Gaya dasar untuk komponen sederhana antarmuka: tab dan tombol, bilah navigasi, pesan, header halaman, dll.

Seperti komponen, plugin Javascript ini adalah komponen interaktif untuk tooltips, blok informasi, komponen modal, dan banyak lagi.

Bersama-sama, komponen dan plugin Javascript berisi elemen antarmuka berikut:

• Grup Tombol
• Daftar tombol tarik-turun
• Tab navigasi, tombol dan daftar
• Bilah navigasi
• Jalan pintas
• Lencana
• Header halaman dan elemen pahlawan
• Miniatur
• Pesan
• Indikator proses
• Elemen modal
• Daftar tarik-turun
• Keterangan alat
• Blok informasi
• Elemen "Akordeon"
• Elemen korsel
• Masukan keyboard terlebih dahulu

Setelah perkenalan singkat, kita akan fokus menggunakan Bootstrap. Untuk melakukan ini, kita akan menggunakan template HTML dasar yang mencakup semua elemen yang tercantum dalam .

Seperti inilah tampilan file HTML pada umumnya:

Untuk membuat template Bootstrap seperti ini, cukup lampirkan file CSS dan JS yang sesuai:

Dan semuanya sudah siap!

Dengan menambahkan kedua file ini, Anda dapat mengembangkan website atau aplikasi menggunakan Bootstrap.

Perangkat Pembelajaran Bootstrap

• Kumpulan alat (program) minimum untuk membuat proyek web menggunakan kerangka Bootstrap:
• editor teks untuk bekerja dengan kode (Notepad, Brackets, Notepad++, dll.);

Mengunduh kerangka Bootstrap Membuat proyek web yang desainnya didasarkan pada framework Bootstrap selalu dimulai dengan mendownloadnya. Anda dapat mengunduh kerangka Bootstrap dalam berbagai cara

. Misalnya melalui link yang terdapat di situs getbootstrap.com atau menggunakan manajer paket npm, Composer, Bower, atau lainnya. Cara melakukannya tergantung pada pengalaman atau situasi spesifik Anda.

Cara install framework Bootstrap menggunakan package manager, serta cara build menggunakan Grunt dapat dibaca pada artikel ini.

Cara termudah untuk mengunduh adalah dengan menggunakan tautan. Ada 2 link di situs Bootstrap.

Unduh Bootstrap 3.4.0 Unduh Bootstrap 4.2.1 Tautan kedua berisi kerangka di kode sumber

Kode sumber Bootstrap 3.4.0 Kode sumber Bootstrap 4.2.1 Membongkar arsip Bootstrap Setelah mengunduh arsip (dengan siap digunakan penerapan CSS

dan file JavaScript), itu harus dibongkar ke direktori proyek web Anda. Jika Anda melihat arsipnya, Anda akan melihat bahwa arsip tersebut berisi konten berikut (aktif 3.4.0):

Bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ └── bootstrap-theme.min.css ├── j s/ │ ├ ── bootstrap.js │ └── bootstrap.min.js └── font/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf └ ── glyphicons-halflings-regular.woff

Direktori css berisi gaya kerangka Bootstrap, dan direktori js berisi plugin untuk membuat beberapa komponen berfungsi. Plugin ditulis menggunakan fungsi perpustakaan jQuery. Oleh karena itu, sebelum Bootstrap JS Anda perlu menyertakan perpustakaan jQuery.

Seperti yang Anda lihat, ada 2 di arsip versi CSS dan file JavaScript, mis. dengan dan tanpa akhiran min. Versi file dengan min tidak berbeda dengan tanpa min, hanya diminimalkan (dikompresi).

Dalam produksi (di situs produksi), lebih baik menggunakan versi file yang diperkecil. File-file ini berukuran lebih kecil dan karenanya memastikan pemuatan halaman situs lebih cepat.

Versi yang tidak diperkecil lebih nyaman digunakan selama pengembangan, serta untuk belajar.

Selain file-file ini, arsip ini juga menyertakan font ikon "Glyphicons". Font Glyphicons menampilkan lebih dari 250 ikon dari set Glyphicon Halflings. Font disajikan menggunakan 4 file: glyphicons-halflings-regular.eot, glyphicons-halflings-regular.svg, glyphicons-halflings-regular.ttf, glyphicons-halflings-regular.woff).

Variasi format untuk font yang sama diperlukan untuk memastikan tampilannya di semua browser.

Mengenai ikon dalam format font, serta kelebihan dan kekurangannya, Anda dapat membaca di artikel ini.

Arsip framework Bootstrap 4 secara praktis tidak berbeda dengan Bootstrap 3. Perbedaan utamanya adalah tidak mengandung font "Glyphicons". Jika Anda memerlukan ikon font, Anda harus menghubungkannya sendiri. Misalnya, menggunakan salah satu set berikut: FontAwesome, Octicons, Glyphicons, IcoMoon, atau lainnya. Jika Anda tidak ingin menggunakan font yang sudah jadi, tetapi buat sendiri, yang hanya terdiri dari ikon yang diperlukan, gunakan saja. informasi ini.

Selain itu, arsip Bootstrap 4 juga berisi file bootstrap-grid.css dan bootstrap-reboot.css. File-file ini hanya diperlukan bagi mereka yang tidak membutuhkan keseluruhan kerangka kerja, tetapi hanya sebagian saja.

File pertama (bootstrap-grid.css) berisi grid Bootstrap, dan yang kedua (bootstrap-reboot.css) adalah normalizer yang mengatur gaya dasar agar sama untuk semua elemen HTML di semua browser.

Proses instalasi framework Bootstrap 3 terdiri dari menghubungkan file-file berikut ke halaman HTML 5:

Catatan: Sebaiknya sertakan file JavaScript sebelum tag penutup body(), karena ini akan memastikan konten utama halaman web dimuat dan ditampilkan lebih cepat.

...

Menghubungkan kerangka Bootstrap 4 dilakukan seperti ini:

...

Anda juga dapat menghubungkan Bootstrap 4 menggunakan CDN (Anda tidak perlu mengunduh Bootstrap ke dalam proyek):

Disalin

...

Bootstrap CDN 3.4.0:

Disalin

Untuk menguji fungsionalitas kerangka kerja, kami akan membuat tombol yang, ketika disentuh, akan menampilkan tooltip popover.

Arahkan kursor ke saya $(function () ( $("").popover((trigger:"hover")); ));

“Kami telah mengenal framework ini, melihat kelebihannya, melihat secara singkat apa yang disebut grid, sekarang saatnya untuk mempraktekkan cara menggunakan Bootstrap.

Anda dapat mengunduh Bootstrap dari situs resminya getbootstrap.com. Pada halaman rumah klik tombol “ Unduh Bootstrap.dll».

Setelah mengklik, kita dibawa ke halaman yang menawarkan beberapa jenis download. Pada artikel ini kita akan melihat pengunduhan reguler versi lengkap kerangka.

Setelah mengunduh dan membongkar arsip, kami mendapatkan tiga folder:

• CSS- folder dengan gaya
• JS- folder dengan skrip js
• FONT- folder dengan font ikon

Ini adalah keseluruhan kerangka kerja. Untuk lebih lanjut bekerja dengan Bootstrap, saya akan membuat folder dengan nama yang sama bootstrap, di folder tersebut saya akan membuatnya berkas kosong index.html dan akan mengisi folder dan file beserta analisa framework pada artikel ini, dan di akhir postingan saya akan memberikan linknya agar anda bisa melihat hasilnya. Jika Anda mengikuti saya, Anda akan memahami bahwa bekerja dengan kerangka kerja itu sangat mudah.

Dari kerangka yang diunduh kita memerlukan seluruh folder font, satu file gaya dari folder css bernama bootstrap.css atau bootstrap.min.css dan juga satu skrip dari folder js bernama bootstrap.js atau bootstrap.min.js .

Perbedaan antara file dengan “.min.” dari yang biasa di file itu dengan “.min.” dioptimalkan, yaitu kode ditulis dalam satu baris tanpa jeda baris dan spasi, sehingga bobotnya lebih ringan dari biasanya, dan isi file benar-benar sama.

Sekarang saya akan membuat folder css di folder bootstrap saya, meletakkan file bootstrap.min.css di dalamnya dan membuat folder js di mana saya akan meletakkan bootstrap.min.js. Selain itu, di folder css, saya akan membuat file style.css kosong untuk saat ini untuk menambahkan gaya saya sendiri.

File kerangka kerja yang diperlukan telah dipindahkan, dan sekarang kami hanya akan bekerja dengan file index.html. Agar tidak menulis kode sendiri, mari kita buka dokumentasinya; pada halaman download situs resmi di bawah ini terdapat kerangka dokumen HTML yang sudah jadi, salin dan tempel ke file indeks kita.

File gaya kami, skrip js, dan perpustakaan jQuery sudah termasuk dalam kerangka, tetapi jika Anda tidak menggunakan “ bootstrap» templat, tetapi pada beberapa templat Anda sendiri, maka Anda perlu menghubungkan file gaya bootstrap.min.css di antara tag, dan setelah itu dibuat style.css .

Kemudian, sebelum tag penutup, kita sertakan terlebih dahulu perpustakaan jQuery.

Dan setelah perpustakaan kita menghubungkan skrip js.

Secara umum, kerangka HTML dokumen terlihat seperti ini.

tali sepatu

Proses persiapan selesai, Bootstrap sudah terhubung, kita bisa melanjutkan dan mulai mengisi halaman WEB kita dengan komponen framework.

Dokumentasi kerangka kerja ini sangat bagus, sehingga mudah digunakan. Menu utama situs resminya memiliki beberapa bagian: “ Memulai», « CSS», « Komponen», « JavaScript" Dan " Sesuaikan", pada halaman masing-masing bagian di kolom kanan terdapat nama komponen yang berbeda, mengkliknya akan menampilkan deskripsi dan kasus penggunaannya dalam bentuk kode siap pakai.

Jika ada kesulitan dengan Bahasa inggris, lalu ada beberapa sumber di jaringan dengan dokumentasi yang diterjemahkan, berikut adalah alamat salah satu situs tersebut www.oneskyapp.com/ru/docs/bootstrap. Anda juga dapat menggunakan semacam penerjemah browser, terjemahannya tentu saja akan bengkok, tetapi inti dari apa yang ditulis akan jelas. Secara umum, Anda hanya perlu membaca dokumentasi, mengambil contoh kode, dan berlatih.

Seperti yang saya katakan di artikel sebelumnya, grid berfungsi seperti tabel, termasuk baris .baris dan speaker .col, maksimal ada dua belas kolom. Awalan (lg, md, sm, xs) ditambahkan ke kelas .col, yang menunjukkan lebar kolom tertentu pada resolusi layar tertentu.

Baris dan kolom digabungkan menjadi satu blok dengan kelas .wadah atau class.container-fluid . Perbedaannya adalah kelas .container memiliki lebar maksimum 1170 piksel, sedangkan kelas .container-fluid memiliki lebar tidak terbatas, yaitu seluruh lebar layar, meskipun resolusi layarnya sangat besar. Informasi lengkap Untuk informasi tentang grid Bootstrap, lihat dokumentasi di bagian " CSS».

Dengan menggunakan framework grid, kita akan membuat layout klasik halaman kita (header, konten, kolom samping dan footer), untuk ini kita akan membuat tiga baris dan empat kolom, inilah kode yang kita dapatkan.

FOOTER SIDEBAR ISI KEPALA

Untuk memisahkan blok, saya menulis dua kelas tambahan: .block, .block2 dan menambahkan beberapa aturan ke masing-masing aturan di file style.css yang dibuat.

Blokir( latar belakang: #eee; batas: 1px solid #000; ) .block2( latar belakang: #ccc; batas: 1px solid #000; )

Mari tambahkan font ikon ke judul kita. Di bagian " Komponen» pilih ikon yang Anda suka, salin teks di bawah gambar, teks ini adalah kelas. Buat tag di dalam tag header dan tempelkan kelas yang disalin.

KEPALA

Sekarang tidak ada salahnya untuk menambahkan beberapa jenis menu. Untuk melakukan ini, di bagian " Komponen"pergi ke" bilah navigasi", pilih menu yang anda suka, copy kodenya dan paste setelah tag pembuka.

Yang tersisa hanyalah mengisi" isi t" dan " bilah sisi" Kami melakukan semuanya sesuai dengan skema yang sama: pilih komponen dalam dokumentasi, baca deskripsi, salin dan tempel tempat yang tepat. Saya akan menambahkan formulir dan tombol, mengklik yang mana akan memanggil jendela modal dengan meja.

Begitu saja, hanya dalam 5 menit, kami membuat sketsa tata letak halaman paling sederhana, adaptif untuk semua perangkat, dan praktis tidak menulis kode apa pun sendiri. Ikuti tautannya dan lihat hasilnya.

Di sinilah saya akan mengakhiri artikel ini. Kami hanya melihat sebagian kecil dari fungsionalitas kerangka kerja ini, tetapi saya rasa Anda memahami cara bekerja dengan Bootstrap. Langkah selanjutnya adalah mengubah gaya kerangka kerja agar sesuai dengan kebutuhan Anda dan mengunduh komponen-komponen yang diperlukan saja. Kami akan menganalisis semua ini di artikel “

Keuntungan menggunakan kerangka kerja CSS adalah perancang tata letak tidak perlu memikirkan banyak nuansa tata letak yang telah dipikirkan oleh pembuat kerangka kerja tersebut. Nuansa tersebut termasuk kompatibilitas lintas-browser, dukungan untuk resolusi layar yang berbeda, dan banyak lagi. Perancang tata letak hanya menunjukkan apa, bagaimana dan kapan menampilkannya, selebihnya dilakukan oleh framework itu sendiri. Pendekatan ini dapat mempercepat tata letak situs web. Kelebihan Bootstrap antara lain popularitasnya. Artinya, akan lebih mudah bagi perancang kode lain untuk memelihara kode Anda.

Kerugian menggunakan kerangka kerja adalah halaman harus membawa seluruh gaya ekstra kerangka kerja, meskipun hanya menggunakan sebagian kecil saja. Kerangka kerja ini adalah alat yang sangat baik untuk membuat prototipe dan membuat halaman yang desainnya bersifat sekunder, seperti halaman admin. Jika Anda memiliki desain yang sangat spesifik, menatanya menggunakan kerangka kerja mungkin lebih sulit dibandingkan menggunakan alat asli. Namun, hal ini juga mungkin terjadi.

Setelah itu, untuk mengubah gaya Bootstrap Anda perlu mengubahnya di style.css Anda seperti ini:

A ( warna: #beceda; )
Kerugian yang jelas dari pendekatan ini adalah Anda harus mencari secara manual gaya-gaya yang diperlukan yang ingin Anda interupsi, dan ini tidak selalu sepele, karena Beberapa opsi Bootstrap berlaku untuk banyak penyeleksi dalam bentuk yang dimodifikasi, seperti melalui rumus. Alat Kustomisasi dapat membantu di sini; alat ini akan membantu mengkompilasi perubahan Anda dengan benar, tetapi hanya sekali. Jika di masa depan Anda ingin mengubah beberapa parameter, Anda harus memasukkan kembali nilai yang diubah untuk semua bidang untuk mengkompilasi gaya Anda.

Ada banyak cara untuk mengkompilasi file LESS dan Bootstrap menyerahkan hal ini kepada kebijaksanaan pengembang. Bootstrap sendiri menggunakan Grunt untuk kompilasi, Anda mungkin lebih memilih plugin untuk produk JetBrains, dan kami, karena artikel ini ditujukan untuk pemula, akan mencari solusi yang lebih sederhana. Solusi tersebut adalah WinLess untuk Windows, SimpLESS untuk Mac atau Koala untuk Linux. Semua program ini melakukan hal yang kurang lebih sama: mereka menerima folder dengan file KURANG sebagai masukan dan mendengarkan perubahan di dalamnya. Segera setelah Anda membuat perubahan pada file apa pun, file tersebut segera dikompilasi ke dalam file CSS yang ditentukan. Dengan cara ini Anda tidak perlu menjalankan kompilasi manual setelah setiap perubahan. Anda mengubah file LESS, menyimpannya dan segera melihat perubahannya di situs dalam bentuk terkompresi yang sudah dikompilasi.

• Bagaimana gambarnya dipotong?
• Komponen apa saja yang akan digunakan?
• Apa gaya utamanya?
• Tata letak halaman apa yang akan kita dapatkan?

Simpan gambar peta:

Mari kita simpan logonya sebagai berikut:

Gambar/logo.png
gambar/footer-logo.png

Gambar latar yang berulang harus dipotong kecil-kecil hingga membentuk gambar utuh dengan mengulangi secara vertikal dan horizontal.

/gambar/bg.png
/gambar/h1-bg.png

Lebih mudah untuk menyimpan ikon jejaring sosial dengan ukuran yang sama ke dalam satu file dan menggunakannya sebagai sprite untuk memuat lebih cepat. Rincian lebih lanjut tentang menempelkan gambar dijelaskan di bagian pertama. Hasilnya akan menjadi dua file:

/gambar/sosial.png
/images/social-small.png

Jika Anda melihat template kami, Anda dapat melihat bahwa kami memerlukan komponen berikut:

Pertama-tama, Anda perlu menambahkan variabel yang tidak ada dalam pengaturan Bootstrap agar Anda dapat menggunakannya di masa mendatang. Bagi kami ini hanya font desain tertentu.

@ font-merek: "Oswald",sans-serif;
Jika Anda ingin menggunakan template untuk situs Rusia, Anda dapat mencoba mengganti font Oswald dengan Cuprum terdekat, yang mendukung Cyrillic.

Sekarang mari kita ganti pengaturan Bootstrap dengan pengaturan kita sendiri:

Sekarang kita sudah selesai dengan variabelnya, mari mulai menata desain kita di file style.less. Pertama, mari kita hubungkan Bootstrap itu sendiri dan variabel kita:

@import "bootstrap/bootstrap.less"; @import "variabel.kurang";
Tidak semua gaya default Bootstrap dapat diubah menggunakan variabel, jadi mari kita lakukan secara manual:

P ( margin: 20px 0; ) .form-control ( box-shadow: none; ) .btn ( font-family: @brand-font; )
Di sini kita telah menghilangkan bayangan dari elemen formulir, dan memberi teks pada tombol font halaman tertentu.

Kemudian kami menjelaskan latar belakang halaman dan bilah atas:

Badan ( batas atas: 5px solid #7e7e7e; gambar latar: url(../images/bg.png); )
Lebih lanjut dalam teks tidak akan ditunjukkan di file mana gaya tersebut ditulis. Ingatlah bahwa kita menyimpan semua variabel di file variabel.less, dan gaya CSS akan disimpan di style.less.

kotak putih
Blok ini menciptakan struktur dokumen HTML5. Dalam judul kami menunjukkan nama halaman kami – Whitesquare. Dengan tag meta viewport kami menunjukkan bahwa lebar halaman pada perangkat seluler akan sama dengan lebar layar dan skala awal akan menjadi 100%. Kemudian file gaya disertakan. Dan untuk versi Internet Explorer kurang dari kesembilan, kami menyertakan skrip yang memungkinkan kami menampilkan tata letak dengan benar.

Mari tambahkan kode berikut ke badan:

Di sini kita menemukan komponen Bootstrap pertama - kolom. Elemen induk kolom diberi kelas "baris", dan kelas kolom dimulai dengan awalan "col-", kemudian ukuran layar (xs, sm, md, lg), dan diakhiri dengan lebar relatif kolom .

Sebuah kolom dapat ditetapkan secara bersamaan kelas yang berbeda dengan nilai untuk layar, misalnya class="col-xs-12 col-md-8". Kelas-kelas ini hanya mengatur lebar kolom sebagai persentase untuk ukuran layar tertentu. Jika kolom tidak diberi kelas layar tertentu, maka kelas untuk layar spesifik minimum akan diterapkan, dan jika tidak ditentukan, maka lebar tidak akan diterapkan dan blok akan mengambil lebar maksimum yang mungkin.

Kelas kita “col-md-7” dan “col-md-17” menunjukkan bahwa blok adalah kolom dengan lebar 7 dan 17 relatif terhadap wadah induk. Secara default, jumlah lebar kolom di Bootstrap adalah 12, namun kami menggandakan jumlah ini untuk mencapai fleksibilitas yang kami butuhkan.

Isi ( … .wrapper ( padding: 0 0 50px 0; ) header ( padding: 20px 0; ) )
Kami menempatkan struktur ini di dalam tubuh. Sintaks LESS memungkinkan Anda untuk menyusun aturan satu sama lain, yang kemudian dikompilasi ke dalam konstruksi berikut:

Badan .wrapper (…) tajuk badan (…)
Pendekatan ini memungkinkan Anda melihat struktur HTML tepat di dalam CSS dan memberikan beberapa “cakupan” pada aturan.

Masukkan logo ke dalam tag header:

Tidak diperlukan gaya tambahan.

Untuk membuat pencarian, kita memerlukan komponen Bootstrap berikut: formulir inline, kontrol yang dikelompokkan, dan tombol.
Pada tag header kita membuat form inline, rata ke kanan. Bidang formulir tersebut harus memiliki kelas "kontrol formulir" dan label.

Kami menempatkan komponen "kontrol yang dikelompokkan" ke dalam formulir. Kontrol pengelompokan memungkinkan Anda menghilangkan spasi antara input teks dan tombol dan, seolah-olah, menggabungkannya menjadi satu elemen.
Ini adalah div dengan kelas dan bidang "grup input", dan tombol komponen tersebut ditempatkan di blok dengan kelas "grup input-btn".

Karena kita tidak perlu menampilkan label untuk kolom pencarian, kita akan menyembunyikannya dengan kelas “sr-only”. Ini diperlukan untuk pembaca layar khusus.

Tombol tersebut diberi kelas “btn-primary”, artinya merupakan tombol utama dari formulir ini.

…Cari PERGI
Yang tersisa hanyalah mengatur lebar formulir pencarian di gaya.

Badan ( … .wrapper ( … header ( … .form-search ( lebar: 200px; ) ) ) )

Untuk menampilkan menu, ambil komponen “panel navigasi” dan tempatkan di dalamnya komponen “navigasi”, yang merupakan daftar dengan link. Untuk navigasi, kelas "navbar-nav" ditambahkan, yang menerapkan gaya navigasi khusus dalam navbar.

• Rumah
• Tentang kami
• Layanan
• Mitra
• Pelanggan
• Proyek
• Karir
• Kontak

/*tinggi navbar*/ @navbar-tinggi: 37px; /*mengatur lebih banyak padding horizontal*/ @nav-link-padding: 10px 30px; /*latar belakang untuk item menu*/ @navbar-default-bg: @panel-bg; /*warna teks pada item menu*/ @navbar-default-link-color: #b2b2b2; /*dan saat mengarahkan mouse - sama*/ @navbar-default-link-hover-color: @navbar-default-link-color; /*latar belakang item menu aktif adalah warna biru spesifik kami*/ @navbar-default-link-active-bg: @brand-primary; /*warna teks item menu aktif*/ @navbar-default-link-active-color: #fff;
Selain parameter yang dapat disesuaikan, kami akan menjelaskan parameter tambahan dalam gaya - ini adalah teks huruf besar dan font khusus kami:

Isi ( … .wrapper ( … .navbar a ( transformasi teks: huruf besar; font: 14px @brand-font; ) ) )

Judul halaman ditempatkan dalam div dengan kelas "heading".

Tentang kami
Dan memiliki gaya berikut:

Badan ( … .wrapper ( … .heading ( tinggi: 40px; latar belakang: url transparan(../images/h1-bg.png); margin: 30px 0; padding-kiri: 20px; h1 ( tampilan: blok sebaris; warna: #7e7e7e; font: normal 40px/40px "Oswald", sans-serif; latar belakang: url(../images/bg.png);
Di sini kita menggambar garis abu-abu sebagai latar belakang div, dan menyisipkan inline h1 ke dalamnya dengan font yang diinginkan dan latar belakang warna halaman untuk menciptakan kesan latar belakang transparan untuk h1.

Saat membuat submenu, kita tidak akan menggunakan komponen "navigasi", karena gayanya kurang cocok untuk kita; komponen "daftar yang dikelompokkan" jauh lebih cocok untuk kita. Setiap elemen dari komponen tersebut memiliki kelas "daftar-grup-item".

Submenu harus ditempatkan di tag samping. Kami membuat daftar tautan dengan cara yang sama seperti menu utama.

• Lorem ipsum
• Sangat bagus
• Elit ruang depan
• Etiam pharetra
• Phasellus placerat
• Cras et nisi vitae odio

@daftar-grup-bg: @panel-bg; @daftar-grup-perbatasan: @panel-perbatasan dalam;
Dan terapkan gaya berikut ke submenu:

Badan ( … .wrapper ( … .submenu ( margin-bawah: 30px; li ( tampilan: item-daftar; font: 300 14px @brand-font; posisi-gaya-daftar: di dalam; tipe-gaya-daftar: persegi; padding : 10px; transformasi teks: huruf besar; &.aktif ( warna: @merek-primer; ) a ( warna: @teks-warna; dekorasi teks: tidak ada; &:hover ( warna: @teks-warna; ) ) ) )
Pertama, kita mengembalikan gaya standar ke elemen daftar, karena Bootstrap menggantinya dengan miliknya sendiri. Tambahkan bantalan di bagian bawah. Submenu menggunakan font yang lebih tipis dan spidol persegi. Dan untuk link kami mengatur warna, huruf besar dan menghilangkan garis bawah. Tanda ampersand pada kode "&.active" akan digantikan oleh pemilih induk pada waktu kompilasi menggunakan sintaks LESS: ".submenu li.active".

Untuk menampilkannya, kita akan menggunakan komponen “panel”, atau lebih tepatnya variasi “panel-primary” untuk mewarnai judul. Komponen ini berisi blok header (panel-heading) dan blok konten panel (panel-body). Kami menambahkan kelas “img-responsive” ke gambar peta, yang akan memungkinkan gambar menyusut ketika lebar layar kecil.

… Kantor kami
Dalam variabel Bootstrap kita telah mengatur warna untuk latar belakang panel (panel-bg), dan sekarang kita akan menunjukkan bahwa panel "utama" akan memiliki batas panel default berwarna abu-abu, bukan yang biru default:

@panel-perbatasan-utama: @panel-perbatasan-dalam;
Sekarang dalam gaya situs Anda perlu mengubah pengaturan panel standar, yang tidak diubah melalui variabel:

Panel ( box-shadow: none; .panel-heading ( font: 14px @brand-font; text-transform: huruf besar; padding: 10px; ) .panel-body ( padding: 10px; ) )
Di sini kita menghapus bayangan dari panel, menambahkan indentasi kita sendiri dan mengatur font judul kita sendiri.

Elemen halaman ini paling mirip dengan komponen Jumbotron. Mari tambahkan ke kolom konten:

“Quisque in enim velit, at dignissim est.” nulla ul corper, dolor ac pellentesque placerat, justo tellus gravida erat, vel porttitor libero erat.”

@jumbotron-bg: @brand-primary; @jumbotron-warna: #fff;
Dan mari kita jelaskan gaya kita:

Body ( … .wrapper ( … .jumbotron ( border-radius: 0; padding: 0; margin: 0; blockquote ( border-left: none; p ( font: 300 italic 33px @brand-font; text-transform: uppercase; margin-bawah: 0; ) kecil ( perataan teks: kanan; warna: #1D8EA6; font: 300 20px @brand-font; &:before ( konten: ""; ) ) ) )
Di dalamnya, kami menghapus pembulatan sudut, padding komponen, dan dekorasi kutipan yang diatur oleh Bootstrap secara default. Kami juga akan menambahkan gaya untuk font kami.

Lorem ipsum dolor duduk amet…

Selesai, tidak apa-apa…

Selesai, tidak apa-apa…

Kelas "thumbnail" mengubah gambar menjadi komponen "thumbnail". Dia akan melakukan semua pekerjaan menata gambar untuk kita. Satu-satunya yang tersisa bagi kita adalah mengatur warna padding dan border pada variabel untuk komponen ini:

@ padding thumbnail: 1 piksel; @ batas thumbnail: #c9c9c9;

Saat menata blok ini, mari tambahkan judul terlebih dahulu:

tim kami
dengan gaya:

Isi ( … .wrapper ( … h2 ( latar belakang: tidak ada gulir ulang 0 0 #29C5E6; warna: #fff; font: 300 30px @brand-font; padding: 0 10px; transformasi teks: huruf besar; ) ) )
Dan kemudian kita akan menambahkan blok dengan kelas “tim”, yang terdiri dari dua baris yang berisi kartu karyawan. Setiap kartu adalah kolom. Kartu tersebut memiliki lebar yang sama dengan empat kolom kisi kita. Semua kartu kecuali yang pertama di baris memiliki indentasi kiri, yang dibuat oleh kelas “col-md-offset-1”. Isi kartu terdiri dari gambar dan deskripsi (.caption)

John Doe Saundra Pittsley

pemimpin tim

direktur seni

desainer ui senior

Isi ( … .wrapper ( … .team ( .row ( margin-top: 20px; .col ( spasi putih: nowrap; .thumbnail ( margin-bottom: 5px; ) ) .col-md-offset-1 ( margin- kiri: 3,7%; ) .caption ( h3 ( font: 300 16px @brand-font; margin: 0; ) p ( font: 300 14px @brand-font; warna: @brand-primary; margin: 0; ) ) ) ) )
Selain indentasi dan gaya font yang diatur di sini, kami mengubah kelas “col-md-offset-1”. Dia harus mengatur indentasi menjadi 3,7% karena... lekukan standarnya terlalu besar.

Pertama, mari buat wadah footer dengan blok-blok berikut:

Dan terapkan desainnya:

Footer ( latar belakang: #7e7e7e; warna: #dbdbdb; ukuran font: 11px; .container ( tinggi: 110px; padding: 10px 0; ) )
Tag footer mendefinisikan area abu-abu di seluruh lebar layar, dan wadah di dalamnya menampilkan area terpusat pada layar yang lebih besar dan menentukan tinggi dan padding footer. Kami menggunakan kolom untuk menyelaraskan blok di dalam footer.

umpan Twitter 23 Oktober

Di masa ultricies pellentesque massa sebuah porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. Di eget mi dui, duduklah amet scelerisque nunc. Aenean Agustus

Isi ( ... footer ( ... .container ( ... h3 ( border-bottom: 1px solid #919191; warna: #ffffff; ukuran font: 14px; tinggi garis: 21px; font-family: @brand -font; margin: 0 0 10px; transformasi teks: huruf besar; ) p ( margin: 5px 0; ) .twitter ( p ( padding-kanan: 15px; ) waktu a ( warna: #b4aeae; dekorasi teks: garis bawah; ) ) )
Untuk semua judul footer, kami mengatur font dan indentasi, dan juga membuat garis bawah melalui bingkai bawah. Untuk paragraf, tunjukkan indentasinya. Untuk link yang menampilkan tanggal, atur warna dan garis bawah.

Peta Situs Rumah Tentang Layanan Mitra Mendukung Kontak
Kami mengatur tautan berdasarkan warna, font, dan spasi di antaranya.

Isi ( ... footer ( ... .container ( ... a ( warna: #dbdbdb; ) .sitemap a ( tampilan: blok; ukuran font: 12 piksel; margin-bawah: 5 piksel; ) ) )

Kami memasukkan satu set tautan ke dalam blok dengan kelas "sosial".

Jejaring sosial
Dan mari kita menatanya:

Badan ( … footer ( … .container ( … .social ( .social-icon ( lebar: 30px; tinggi: 30px; latar belakang: url(../images/social.png) tanpa pengulangan; tampilan: blok sebaris; margin -kanan: 10px; .social-icon-small ( lebar: 16px; tinggi: 16px; latar belakang: url(../images/social-small.png) tanpa pengulangan; tampilan: blok sebaris; margin: 5px 6px 0 0; ) .twitter ( posisi latar belakang: 0 0; ) .facebook ( posisi latar belakang: -30px 0; ) .google-plus ( posisi latar belakang: -60px 0; ) .vimeo ( posisi latar belakang: 0 0 ; ) .youtube ( posisi latar belakang: -16px 0; ) .flickr ( posisi latar belakang: -32px 0; ) .instagram ( posisi latar belakang: -48px 0; ) .rss ( posisi latar belakang: -64px 0; ) ) ) ) )
Di sini kami menggunakan teknik sprite - ketika satu file gambar digunakan untuk gambar yang berbeda. Semua tautan dibagi menjadi ikon besar (.social-icon) dan ikon kecil (.social-icon-small). Kami mengatur kelas-kelas ini untuk ditampilkan sebagai blok inline dengan dimensi tetap dan latar belakang yang sama. Dan kemudian menggunakan CSS kami memindahkan latar belakang ini sehingga gambar yang sesuai ditampilkan di setiap tautan.

Hak Cipta 2012 Whitesquare. Pembuatan pcklab

Badan ( … .footer ( … .container ( … .footer-logo ( float: kanan; margin-atas: 20px; ukuran font: 10px; perataan teks: kanan; a ( dekorasi teks: garis bawah; ) ) ) ) )

Ini melengkapi tata letaknya. Proyek yang sudah selesai dapat diunduh