Ачаалагч

Шатны шат

Bootstrap нь хариу үйлдэл үзүүлэх чадвартай 12 баганатай сүлжээнд суурилагдсан. Бид мөн энэ системд суурилсан тогтмол болон шингэний өргөнтэй бүдүүвчийг оруулсан.

CSS-ийг дахин тохируулах, хэвлэх болон холбоосын дэлхийн хэв маяг

HTML5 баримт бичгийн төрөл шаардлагатай

Bootstrap нь HTML5 баримт бичгийн төрлийг ашиглах шаардлагатай HTML элементүүд болон CSS шинж чанаруудыг ашигладаг. Үүнийг төслийнхөө Bootstrapped хуудас бүрийн эхэнд оруулахаа мартуузай.

  1. <!DOCTYPE html>
  2. <html lang = "en" > 
  3.   ...
  4. </html>

Типографи ба холбоосууд

scaffolding.less файл дотор бид үндсэн глобал дэлгэц, хэвлэх болон холбоосын хэв маягийг тохируулдаг. Тодруулбал, бид:

  • Биеийн ирмэгийг арилгана
  • дээр тохируулна background-color: white;ууbody
  • @baseFontFamily, @baseFontSize, болон @baseLineHeightшинж чанаруудыг манай хэвлэх суурь болгон ашигла
  • Глобал холбоосын өнгийг тохируулж @linkColor, холбоосын доогуур зураасыг зөвхөн дээр хэрэглэнэ:hover

Normalize дамжуулан дахин тохируулна уу

Bootstrap 2-оос эхлэн уламжлалт CSS тохиргоо нь HTML5 Boilerplate -г дэмждэг Николас Галлахерын төсөл болох Normalize.css - ийн элементүүдийг ашиглахаар болов .

Шинэ тохиргоог reset.less дотроос олж болно , гэхдээ товч бөгөөд нарийвчлалтай байхын тулд олон элементүүдийг хассан.

Өгөгдмөл сүлжээний систем нь мэдрэмжтэй мушгиа бүхий 12 багана

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

Bootstrap-ийн нэг хэсэг болгон өгсөн өгөгдмөл сүлжээний систем нь 940px өргөн, 12 баганатай сүлжээ юм.

Энэ нь мөн янз бүрийн төхөөрөмж, нягтралд зориулсан дөрвөн хариу үйлдэлтэй хувилбартай: утас, таблет хөрөг, таблетын ландшафт болон жижиг ширээний компьютер, том өргөн дэлгэцтэй ширээний компьютер.

  1. <div анги = "мөр" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Энд үзүүлсэнчлэн үндсэн зохион байгуулалтыг хоёр "багана"-аар үүсгэж болох бөгөөд тус бүр нь бидний сүлжээний системийн нэг хэсэг гэж тодорхойлсон 12 суурийн баганын хэд хэдэн хэсгийг хамардаг.


Багануудыг нөхөх

4
4 офсет 4
3 офсет 3
3 офсет 3
8 офсет 4 
  1. <div анги = "мөр" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

Үүрлэх баганууд

Bootstrap дахь статик (шингэн бус) сүлжээний системийн тусламжтайгаар үүрлэх нь хялбар байдаг. Агуулгаа үүрлэхийн тулд одоо байгаа баганад шинээр .rowболон багц багана нэмнэ үү..span*.span*

Жишээ

Оруулсан мөрүүд нь түүний эцэг эхийн баганын тоотой тэнцэх хэмжээний багана агуулсан байх ёстой. Жишээлбэл, хоёр үүрлэсэн .span3баганыг дотор нь байрлуулах ёстой .span6.

Баганын 1-р түвшин
2-р түвшин
2-р түвшин 
  1. <div анги = "мөр" > 
  2.   <div class = "span12" > 
  3.     Баганын 1-р түвшин
  4.     <div анги = "мөр" > 
  5.       <div class = "span6" > 2-р түвшин </div> 
  6.       <div class = "span6" > 2-р түвшин </div> 
  7.     </div>
  8.   </div>
  9. </div>

Шингэн сүлжээний систем 12 хариу үйлдэл үзүүлэх, хувь дээр суурилсан багана

Шингэн багана

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

Пиксел биш хувь

Шингэн сүлжээний систем нь тогтмол пикселийн оронд баганын өргөний хувьд хувийг ашигладаг. Энэ нь мөн манай суурин сүлжээний системтэй адил хариу үйлдэл үзүүлэх хувилбаруудтай бөгөөд дэлгэцийн гол нягтрал болон төхөөрөмжүүдийн зохистой харьцааг хангадаг.

Шингэний эгнээ

Ямар ч эгнээний шингэнийг зүгээр л өөрчлөх .rowзамаар .row-fluidхийнэ. Баганууд нь яг ижил хэвээр байгаа тул тогтмол болон шингэний байршлын хооронд шилжихэд маш хялбар болгодог.

Тэмдэглэгээ

  1. <div анги = "мөр-шингэн" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Шингэний үүрлэх

Шингэн тортой үүрлэх нь арай өөр: үүрлэсэн баганын тоо нь эцэг эхтэй таарах шаардлагагүй. Үүний оронд мөр бүр эх баганын 100%-ийг эзэлдэг тул таны багануудыг түвшин бүрт шинэчилнэ.

Шингэн 12
Шингэн 6
Шингэн 6 
  1. <div анги = "мөр-шингэн" > 
  2.   <div class = "span12" > 
  3.     Баганын 1-р түвшин
  4.     <div анги = "мөр-шингэн" > 
  5.       <div class = "span6" > 2-р түвшин </div> 
  6.       <div class = "span6" > 2-р түвшин </div> 
  7.     </div>
  8.   </div>
  9. </div>

Сүлжээний тохиргоо

Хувьсагч Өгөгдмөл утга Тодорхойлолт
@gridColumns 12 Баганын тоо
@gridColumnWidth 60px Багана бүрийн өргөн
@gridGutterWidth 20px Баганын хоорондох сөрөг зай

LESS дэх хувьсагчид

Bootstrap-д суурилуулсан нь дээр бичигдсэн өгөгдмөл 940px сүлжээний системийг тохируулах цөөн тооны хувьсагч юм. Сүлжээний бүх хувьсагч хувьсагчдад хадгалагдана. бага.

Хэрхэн тохируулах вэ

Сүлжээг өөрчлөх нь гурван @grid*хувьсагчийг өөрчилж, Bootstrap-ийг дахин хөрвүүлнэ гэсэн үг. variables.less доторх сүлжээний хувьсагчдыг сольж, дахин хөрвүүлэхийн тулд баримтжуулсан дөрвөн аргын аль нэгийг ашиглана уу . Хэрэв та илүү олон багана нэмж байгаа бол grid.less доторх CSS-г нэмэхээ мартуузай.

Хариуцлагатай байх

Сүлжээний тохиргоо нь зөвхөн өгөгдмөл түвшинд буюу 940px сүлжээнд ажилладаг. Bootstrap-ийн хариу үйлдэл үзүүлэхийн тулд та мөн responsive.less дээр сүлжээг тохируулах хэрэгтэй болно.

Layouts Вэб хуудас үүсгэх үндсэн загварууд

Тогтмол зохион байгуулалт

Нэг <div class="container">.

  1. <бие>
  2.   <div class = "контейнер" > 
  3.     ...
  4.   </div>
  5. </body>

Шингэний зохион байгуулалт

<div class="container-fluid">хуудасны уян хатан бүтэц, хамгийн бага ба хамгийн их өргөн, зүүн талын хажуугийн самбарыг өгдөг. Энэ нь програмууд болон баримт бичигт тохиромжтой.

  1. <div class = "контейнер-шингэн" > 
  2.   <div анги = "мөр-шингэн" > 
  3.     <div class = "span2" > 
  4.       <!--Хажуугийн контент-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--Биеийн агуулга-->
  8.     </div>
  9.   </div>
  10. </div>

Хариуцлагатай дизайн Төрөл бүрийн төхөөрөмж, нягтралд зориулсан медиа асуулга

Хариуцлагатай төхөөрөмжүүд

Тэд юу хийх

Медиа асуулга нь харьцаа, өргөн, дэлгэцийн төрөл гэх мэт хэд хэдэн нөхцлөөс хамааран өөрчлөн CSS-г ашиглах боломжийг олгодог боловч ихэвчлэн min-widthболон эргэн тойронд анхаарлаа хандуулдаг max-width.

  • Манай сүлжээн дэх баганын өргөнийг өөрчил
  • Шаардлагатай газар хөвөхийн оронд элементүүдийг овоолно
  • Төхөөрөмжүүдэд илүү тохиромжтой байхын тулд гарчиг болон текстийн хэмжээг өөрчил

Хэвлэл мэдээллийн асуулгыг хариуцлагатай, зөвхөн гар утасны үзэгчдийнхээ эхлэл болгон ашигла. Томоохон төслүүдийн хувьд медиа асуулгын давхаргыг бус тусгай кодын суурийг анхаарч үзээрэй.

Дэмжигдсэн төхөөрөмжүүд

Bootstrap нь таны төслүүдийг өөр төхөөрөмж болон дэлгэцийн нягтралд илүү тохиромжтой болгоход туслахын тулд нэг файл дахь цөөн хэдэн медиа асуулга дэмждэг. Үүнд юу багтсан байна:

Шошго Байршлын өргөн Баганын өргөн Сувагны өргөн
Ухаалаг утаснууд 480px ба түүнээс доош Шингэн багана, тогтмол өргөнгүй
Ухаалаг гар утаснаас таблет руу 767px ба түүнээс доош Шингэн багана, тогтмол өргөнгүй
Хөрөг зургийн таблетууд 768px ба түүнээс дээш 42px 20px
Өгөгдмөл 980px ба түүнээс дээш 60px 20px
Том дэлгэц 1200px ба түүнээс дээш 70px 30px

Мета шошго шаардлагатай

Төхөөрөмжүүд хариу үйлдэл үзүүлэх хуудсуудыг зөв харуулахын тулд viewport мета шошгыг оруулна уу.

  1. <meta name = "viewport" content = "өргөн=төхөөрөмжийн өргөн, анхны масштаб=1.0" >

Хэвлэл мэдээллийн асуулга ашиглах

Bootstrap нь эдгээр медиа асуулгад автоматаар ордоггүй ч ойлгох, нэмэх нь маш хялбар бөгөөд хамгийн бага тохиргоо шаарддаг. Танд Bootstrap-ийн хариу үйлдэл үзүүлэх боломжуудыг оруулах хэд хэдэн сонголт байна:

  1. Эмхэтгэсэн responsive хувилбар болох bootstrap-responsive.css-г ашиглана уу
  2. @import "responsive.less"-г нэмээд Bootstrap-г дахин эмхэтгэнэ
  3. Responsive.less-г тусдаа файл болгон өөрчилж, дахин эмхэтгэ

Яагаад зүгээр оруулж болохгүй гэж? Үнэнийг хэлэхэд бүх зүйл хариу үйлдэл үзүүлэх шаардлагагүй. Хөгжүүлэгчдийг энэ функцийг устгахыг уриалахын оронд бид үүнийг идэвхжүүлэх нь дээр гэж бодож байна.

  1.   // Ландшафтын утаснууд ба доош
  2.   @media ( хамгийн их өргөн : 480px ) { ... }     
  3.  
  4.   // Хөрөг таблет руу ландшафтын утас
  5.   @media ( хамгийн их өргөн : 767px ) { ... }     
  6.  
  7.   // Хөрөг таблетыг ландшафтын болон ширээний компьютерт суулгана
  8.   @media ( мин - өргөн : 768px ) ба ( хамгийн их өргөн : 979px ) { ... }        
  9.  
  10.   // Том ширээний компьютер
  11.   @media ( мин - өргөн : 1200px ) { ... }

Хариуцлагатай хэрэглээний ангиуд

Тэд юу вэ

Гар утсанд илүү хурдан ашиглахын тулд контентыг төхөөрөмжөөр харуулах, нуухын тулд эдгээр үндсэн хэрэглээний ангиудыг ашиглаарай.

Хэзээ хэрэглэх вэ

Хязгаарлагдмал байдлаар ашиглах ба нэг сайтын огт өөр хувилбар үүсгэхээс зайлсхий. Үүний оронд тэдгээрийг төхөөрөмж бүрийн танилцуулгыг нөхөхөд ашиглаарай.

Жишээлбэл, та <select>таблет эсвэл ширээний компьютер дээр биш, харин гар утасны загвар дээр nav-д зориулсан элементийг харуулах боломжтой.

Туслах ангиуд

Энд бидний дэмждэг ангиудын хүснэгт ба тэдгээрийн өгөгдсөн медиа асуулгын байршилд үзүүлэх нөлөөг (төхөөрөмжөөр тэмдэглэсэн) харуулав. Тэдгээрээс олж болно responsive.less.

Анги Утаснууд480px ба түүнээс доош Таблетууд767px ба түүнээс доош Ширээний компьютерууд768px ба түүнээс дээш
.visible-phone Харагдах
.visible-tablet Харагдах
.visible-desktop Харагдах
.hidden-phone Харагдах Харагдах
.hidden-tablet Харагдах Харагдах
.hidden-desktop Харагдах Харагдах

Туршилтын тохиолдол

Дээрх ангиудыг шалгахын тулд хөтчийнхөө хэмжээг өөрчлөх эсвэл өөр төхөөрөмж дээр ачаална уу.

Харагдана...

Ногоон тэмдэглэгээ нь таны одоогийн харах хэсэгт анги харагдаж байгааг илтгэнэ.

  • Утас✔ Утас
  • Таблет✔ Таблет
  • Ширээний компьютер✔ Ширээний компьютер

Нууцлагдсан...

Энд ногоон тэмдэглэгээ нь таны одоогийн харах хэсэгт анги нуугдаж байгааг илтгэнэ.

  • Утас✔ Утас
  • Таблет✔ Таблет
  • Ширээний компьютер✔ Ширээний компьютер