Apakah hubungan antara bootstrap dan kurang?

Dalam bootstrap, banyak komponen gaya berulir disediakan oleh kurang Anda tidak perlu tahu lebih sedikit untuk menggunakan bootstrap Less termasuk set sintaks tersuai dan penghurai untuk menjana fail css yang sepadan .

Persekitaran pengendalian tutorial ini: sistem Windows 10, bootstrap versi 3.3.7, komputer DELL G3

Apakah hubungan antara bootstrap dan kurang

Dalam bootstrap, banyak komponen gaya berulir disediakan oleh kurang. Anda tidak perlu tahu lebih sedikit untuk menggunakan bootstrap.

seni bina projek bootstrap

Melaksanakan sistem susun atur dan kandungan

1) Reka bentuk sistem grid Kandungan tambahan: pengisihan lajur col-md-push- 4

2) Lengkapkan kandungan sel

Penyesuaian gaya

• kurang

• Ubah suai sumber bootstrap Kod

kurang

CSS ialah bahasa penanda dengan sintaks yang mudah dan kesukaran pembelajaran yang rendah Walau bagaimanapun, CSS memerlukan penulisan kod yang kelihatan tidak logik dan menyusahkan untuk dikekalkan . Dan pengembangan tidak kondusif untuk digunakan semula Alasan besar untuk kesukaran ini ialah CSS adalah bahasa bukan prosedur dan tidak mempunyai konsep seperti pembolehubah, fungsi dan SKOP (skop).

LESS termasuk set tatabahasa tersuai dan penghurai Pengguna menentukan peraturan gaya mereka sendiri berdasarkan tatabahasa ini akhirnya akan disusun oleh penghurai untuk menghasilkan fail CSS yang sepadan.

  LESS tidak memotong ciri asal CSS, dan tidak digunakan untuk menggantikan CSS Sebaliknya, ia menambah ciri bahasa prosedur pada CSS berdasarkan sintaks CSS sedia ada. Less adalah berdasarkan sintaks CSS dan memperkenalkan fungsi seperti pembolehubah, Mixin (pencampuran), operasi dan fungsi, yang sangat memudahkan penulisan CSS dan mengurangkan kos penyelenggaraan CSS

Kurang boleh dijalankan Nod atau bahagian penyemak imbas.

Kaedah 1 - Jalankan program kurang penukaran pada klien

  Perkenalkan xx.less ke dalam html, dan kemudian perkenalkan less.js, iaitu kurang yang boleh dijalankan dalam program Pengkompil pelayar klien -- kecekapan rendah, tidak disyorkan

Kaedah 2 - jalankan kurang program penukaran pada pelayan - disyorkan

  1) Muat turun dan pasang jurubahasa js sebelah pelayan - nodejs

2) Muat turun program penukaran fail lessc lessc --js skrip

  3) Jalankan penukar lessc pada penterjemah js sebelah pelayan untuk menukar fail .less yang anda tulis kepada fail css

a) Anda boleh menggunakan program penukaran dalam baris arahan

    node.exe lessc my.less my.css

b) Gunakan program penukaran dalam hbuilder

4) Dalam fail html, rujuk fail css yang telah disusun

2. Kurang pembelajaran sintaks

kurang menyokong sintaks css sepenuhnya

lss menyokong ulasan satu baris dan komen berbilang baris, tetapi hanya ulasan berbilang baris akan ditukar kepada fail css

kurang menyokong pembolehubah

  @Nama Pembolehubah: nilai

  Gunakan: pemilih {Gaya: @nama pembolehubah}

kurang menyokong pencampuran gaya - Rujuk gaya lain dalam satu gaya

 .class1(){...}
 .class2{
     ...
     .class1
     ...
 }

Pencampuran dengan parameter

 .class()(@参数1，@参数2，。。。){....}
 .class2 {
     ...
     .class(参数1，参数2);
     ...
 }

Peraturan bersarang

 .class1{
    ...
   .class2 {}
 }

Hasil penukaran

 .class1{  }
 .class1 .class2{ }

kurang dapat dilakukan operasi aritmetik pada pembolehubah dan pemalar

kurang menyediakan berpuluh-puluh fungsi aplikasi untuk gaya

mencerahkan (warna, nilai kecerahan): mencerahkan warna yang ditentukan Peratusan

menggelapkan (warna, kecerahan nilai): Gelapkan warna yang ditentukan dengan peratusan yang ditentukan

lantai (nombor) Bundarkan ke bawah nilai

siling (nombor) Bundarkan nilai ke atas

Import halaman

Cuba elakkan menggunakan arahan @import dalam fail css - ia akan meningkatkan bilangan permintaan HTTP

Untuk membahagikan fail gaya kepada berbilang Fail gaya kecil ditulis oleh berbilang orang di masa yang sama. Anda boleh menggunakan @import-less dalam less untuk mengimport fail lain yang kurang semasa penukaran, fail gaya css yang besar dan lengkap akan disambungkan bersama-sama, adalah disyorkan untuk mengimport fail lain yang kurang ke dalam

<code> @import "xx.less"</code>

**kurang struktur fail dalam projek besar**

pembolehubah.kurang - letakkan semua pembolehubah

mixin.less - letak semua campuran

tetapkan semula. less - Letakkan elemen HTML untuk menetapkan semula gaya

navbar.less - Bar navigasi berkaitan

footer.less - Gaya berkaitan footer

js.less - Banyak fail kurang

3. Capai penyesuaian gaya dengan mengubah suai fail kurang sumber bootstrap

Padam gaya yang tidak perlu, seperti iklan karusel/kotak modal

  Dalam fail bootstrat.less, komen keluarkan @import yang tidak perlu kepada

Sesuaikan gaya lalai komponen yang diperlukan, seperti mengubah suai warna latar belakang lalai bar navigasi

  Ubah suai pembolehubah Pembolehubah dalam fail .less boleh

Buat gaya baharu berdasarkan gaya lalai yang disediakan oleh bootstrap, seperti menyesuaikan gaya pembahagi dalam lungsur turun - penyesuaian komponen yang mendalam

   Mengubah suai komponen Kurang fail

Cadangan berkaitan: tutorial bootstrap

Atas ialah kandungan terperinci Apakah hubungan antara bootstrap dan kurang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!