Эхлэгчдэд зориулсан Twitter Bootstrap дээр суурилсан хэрэглэгчийн интерфэйс. Bootstrap суулгаж байна Шаардлагатай бүрэлдэхүүн хэсгүүдийг сонгож байна
Татаж авахаасаа өмнө код засварлагч (бид Sublime Text 3-ыг санал болгож байна) болон HTML болон CSS-ийн талаар бага зэрэг мэдлэгтэй байгаа эсэхийг шалгаарай. Энд бид эх файлуудыг хөндөхгүй, гэхдээ та тэдгээрийг өөрөө татаж аваад судлах боломжтой. Бид хөрвүүлсэн Bootstrap файлуудыг эхлүүлэхэд анхаарлаа хандуулах болно.
Эмхэтгэсэн файлуудыг ачаалж байнаЭхлэх хамгийн хурдан арга: манай CSS, JS болон зургийн эмхэтгэсэн, жижигрүүлсэн хувилбаруудыг авах. Баримт бичиг эсвэл эх файл байхгүй.
2. Файлын бүтэцТатаж авсан файлуудаас та нийтлэг шинж чанаруудаар логик бүлэглэсэн, жижиглэсэн болон эмхэтгэсэн хувилбаруудыг агуулсан дараах бүтэц, агуулгыг олох болно.
Татаж авсны дараа (эмхэтгэсэн) Bootstrap-ийн бүтцийг харахын тулд шахсан хавтсыг задлаарай. Энэ нь иймэрхүү байх ёстой:
bootstrap / +-- css / ¦ +-- bootstrap . css ¦ +-- ачаалах . мин. css +-- js / ¦ +-- ачаалах . js ¦ +-- ачаалах . мин. js +-- img / ¦ +-- глификонууд - хагас . png ¦ +-- глифонууд - хагас зулзаганууд - цагаан . png L-- README . mdЭнэ бол Bootstrap-ийн үндсэн хэлбэр юм: бараг бүх вэб төсөлд хурдан бөгөөд хялбар ашиглах хөрвүүлсэн файлууд. Бид танд эмхэтгэсэн CSS болон JS (bootstrap.*), мөн эмхэтгэсэн, жижигрүүлсэн CSS болон JS (bootstrap.min.*) -ийг санал болгож байна. Зургийн файлуудыг PNG формат руу шахах Mac программ болох ImageOptim ашиглан шахдаг.
Бүх JavaScript залгаасууд jQuery шаарддаг гэдгийг анхаарна уу.
3. Юу багтсан бэBootstrap нь бүх төрлийн ажилд зориулагдсан HTML, CSS болон JS-ээр тоноглогдсон бөгөөд тэдгээр нь бүгд хуудасны дээд хэсэгт байрлах ангилалд багтсан болно.
Баримт бичгийн хэсгүүд Дэмжигдсэн элементүүдТөрөл болон дэвсгэрийг дахин тохируулах нийтлэг биеийн хэв маяг, холбоосын хэв маяг, загварын сүлжээ болон хоёр энгийн тэмдэглэгээний элемент.
CSS загваруудHTML-ийн нийтлэг элементүүдийн хэв маяг: дизайн, код, хүснэгт, маягт, товчлуурууд. Мөн гайхалтай дүрсний багц болох Glyphicons багтсан болно.
Бүрэлдэхүүн хэсгүүдЭнгийн интерфейсийн бүрэлдэхүүн хэсгүүдийн үндсэн хэв маяг: таб ба товчлуурууд, навигацийн мөр, мессеж, хуудасны толгой гэх мэт.
Javascript залгаасуудБүрэлдэхүүн хэсгүүдийн нэгэн адил эдгээр Javascript залгаасууд нь зааварчилгаа, мэдээллийн блок, модаль бүрэлдэхүүн хэсэг гэх мэт интерактив бүрэлдэхүүн хэсгүүд юм.
Бүрэлдэхүүн хэсгүүдийн жагсаалтХамтдаа Javascript бүрэлдэхүүн хэсгүүд болон залгаасууд нь дараах интерфейсийн элементүүдийг агуулна.
- Товчлуурын бүлгүүд
- Унждаг товчлуурын жагсаалт
- Навигацийн таб, товчлуурууд болон жагсаалтууд
- Навигацийн талбар
- Товчлолууд
- Тэмдгүүд
- Хуудасны толгой ба баатар элемент
- Бяцхан зураг
- Мессежүүд
- Үйл явцын үзүүлэлтүүд
- Модаль элементүүд
- Унтраах жагсаалтууд
- Зөвлөмж
- Мэдээллийн блокууд
- "Баян хуур" элемент
- Тойрог элемент
- Гарын оролт өмнө
Богино танилцуулсны дараа бид Bootstrap-ийг ашиглахад анхаарлаа хандуулах болно. Үүнийг хийхийн тулд бид жагсаалтад орсон бүх элементүүдийг агуулсан үндсэн HTML загварыг ашиглана.
Ердийн HTML файл иймэрхүү харагдаж байна:
Ийм Bootstrap загварыг хийхийн тулд тохирох CSS болон JS файлуудыг хавсаргахад л хангалттай.
Мөн бүх зүйл тохируулагдсан! Эдгээр хоёр файлыг нэмснээр та Bootstrap ашиглан вэб сайт эсвэл программыг хөгжүүлэх боломжтой.
Сайн уу? Энэ нийтлэлд би Bootstrap хүрээг хэрхэн суулгах, холбох талаар танд хэлэх болно. Та Bootstrap гэж юу болох талаар уншиж болно.
Өмнөх нийтлэлүүдэд стандарт суулгацын талаар би аль хэдийн олон зүйлийг хэлсэн. Энд бүх зүйл энгийн. Бид getbootstrap.com албан ёсны вэбсайт руу орж, Эхлэх зүйл дээр товшоод хамгийн эхний сонголтыг сонгоно уу. Тиймээс бид бүх js болон css бүрэлдэхүүн хэсгүүдтэй bootstrap-ийн бүрэн хувилбарыг татаж авдаг.
Bootstrap CDN нь CDN хадгалах сангаас файлуудыг компьютер дээрээ татаж авахгүйгээр хүрээг холбох боломж юм. Мэдээжийн хэрэг, энэ тохиолдолд ямар нэгэн тохируулгын талаар ярих боломжгүй юм.
Хүрээний тохиргооГэхдээ үнэндээ bootstrap нь анхдагчаар олон бүрэлдэхүүн хэсгүүдийг агуулдаг бөгөөд тэдгээрийн зарим нь тодорхой сайтыг хөгжүүлэхэд танд хэрэг болохгүй байж магадгүй юм. Жишээлбэл, та онлайн дэлгүүрийн дизайн хийж байна. Танд модаль болон хэрэгслийн зөвлөмж хэрэггүй байж магадгүй, мөн CSS-ийн олон бүрэлдэхүүн хэсэг хэрэггүй байж магадгүй. Энэ тохиолдолд эдгээр бүрэлдэхүүн хэсгүүдийг хүрээнд оруулахгүй байх нь ухаалаг хэрэг болно.
Эсвэл та энгийн блог үүсгэж байна. Тэнд үнэхээр юу ч хэрэггүй гэж бодъё, тиймээс та зөвхөн тор болон хамгийн чухал хэд хэдэн бүрэлдэхүүн хэсгүүдийг үлдээж болно.
Зөвхөн хэрэгтэй зүйлээ сонгох нь вэбсайт үүсгэх, Bootstrap ашиглах мэргэжлийн арга юм. Анхдагчаар, хамгийн сүүлийн үеийн хувилбар дахь хүрээний CSS загварын шахагдаагүй хувилбар нь 143 килобайт жинтэй. Мөн скриптүүд нь 60 килобайтаас илүү байдаг. Тийм ээ, хэрэв та кодыг шахвал жинг 20-40% -иар бууруулах боломжтой боловч файлууд нь хамгийн хөнгөн биш байх болно.
Жишээлбэл, та бүх бүрэлдэхүүн хэсгүүдийг идэвхгүй болгож, зөвхөн сүлжээг үлдээвэл (энэ нь ихэвчлэн хийгддэг) css-ийн жин ердөө 15-20 килобайт, шахсан хэлбэрээр өөр хоёр килобайт бага байх болно. Ингэснээр та төслийн хамгийн дээд хурд, оновчтой байдалд хүрэх болно.
За, энэ бол зүгээр л онол байсан. Хүрээг өөрчлөхийн тулд албан ёсны вэбсайтад зочилж, Customize руу очно уу.
Шаардлагатай бүрэлдэхүүн хэсгүүдийг сонгохЭнд хийх хамгийн эхний алхам бол Bootstrap-ийн хувилбарт ямар бүрэлдэхүүн хэсгүүдийг оруулахаа тохируулах явдал юм. CSS-ээс эхэлцгээе:
Print Media Styles – хэвлэх медиа асуулга. Хэрэв та сайтын хуудсыг хэвлэхээр төлөвлөөгүй бол үүнийг идэвхгүй болгож болно.
Тэмдэглэл, код, хүснэгт, маягт, товчлуурууд нь хэрэв та үнэхээр хүсвэл CSS дээр өөрөө загварчилж болох зүйл юм. Мэдээжийн хэрэг, үүнд цаг хугацаа шаардагдана, гэхдээ хэрэв таны элементүүдийн дизайн нь анхдагчаар санал болгож буй хүрээнээс тэс өөр бол та эдгээр бүх CSS хэв маягийг идэвхгүй болгож, өөрөө бичиж болно.
Сүлжээний систем нь үнэндээ сүлжээ юм. Би үүнийг идэвхгүй болгох ямар ч утгагүй юм, учир нь энэ бол хүрээний гол хүч юм. Сүлжээний ачаар та загваруудыг ямар ч төхөөрөмжид хялбархан тохируулах боломжтой бөгөөд өнөөдөр гар утасны хөдөлгөөний эрин үед энэ нь маш чухал юм. Бид ямар ч тохиолдолд үүнийг унтраадаггүй.
Хариуцлагатай хэрэгслүүд - дасан зохицох хэрэгслүүд, би тэдгээрийг хэзээ ч идэвхгүй болгохгүй байхыг зөвлөж байна. Дараагийн өгүүллээр бид дасан зохицох хэрэгслүүдийн талаар ярих болно, бид сүлжээний системийг нарийвчлан авч үзэх болно. Эдгээр нь элементийг нуух эсвэл тодорхой дэлгэцийн өргөнд харагдах боломжийг олгодог ангиуд юм. Маш тохиромжтой, ашигтай.
Эдгээр нь жишээлбэл жагсаалтын бүлгүүд, товчлуурын мөр, дүрс тэмдэг, самбар, анхааруулга, хуудаслах, талхны үйрмэг гэх мэт зүйлс юм. Та мөн дүрсний фонтыг идэвхгүй болгож болно. Сайт дээр дүрс огт хэрэггүй эсвэл өөр багц холбож байгаа тохиолдолд үүнийг хийх нь зүйтэй. Үнэн хэрэгтээ та суугаад танилцуулсан бүх бүрэлдэхүүн хэсгүүдээс юу хэрэгтэй, юу хэрэггүй вэ гэдгээ бодох хэрэгтэй. Сайт бүр өөр өөр дизайн, функцтэй байдаг тул сайт бүр өөрийн гэсэн багцтай байх болно.
Javascript бүрэлдэхүүн хэсгүүд
Эдгээр нь унждаг цэс, хэрэгслийн зөвлөмж, модаль цонх, гулсагч юм. Хэрэв танд эдгээрийн аль нь ч хэрэггүй бол унтраа. Зарим тохиолдолд таны сайт унждаг цэс, үндсэн хуудсан дээрх гулсагч, модаль цонхтой үед бүх бүрэлдэхүүн хэсгүүд үнэхээр хэрэг болно. Зарим тохиолдолд хамгийн ихдээ 1-2 бүрэлдэхүүн хэсэг нь ашигтай байж болох тул кодыг уртасгах шаардлагагүй, шаардлагагүй бүрэлдэхүүн хэсгүүдийг идэвхгүй болгох шаардлагагүй болно.
JQuery залгаасуудЭнд та javascript бүрэлдэхүүн хэсгүүдийг зөв ажиллуулахад тусалдаг jQuery номын сангийн залгаасуудыг идэвхгүй болгож болно. Үүний дагуу, хэрэв та өөрийн сайт дээр гулсагч ашигладаггүй бол тойруулгыг үүсгэх залгаас хэрэггүй, хэрэв танд заавар хэрэггүй бол tooltips.js гэх мэтийг идэвхгүй болго.
Scrollspy залгаас нь текстийн байрлалыг хянаж, үүнээс хамааран цэсийн нэг юмуу өөр зүйлийг тодруулдаг. Ихэвчлэн ийм функцийг буух хуудсан дээр шаарддаг бөгөөд би үүнийг ердийн сайтууд дээр хэзээ ч харж байгаагүй. гэх мэт. Өөрт хэрэгтэй, хэрэггүй зүйлээ сайн ажиглаарай.
Бага хувьсагчДараа нь таны өмнө маш том зүйл нээгдэх бөгөөд үүнд бага хувьсагчийн тохиргоо бүхий олон дэд зүйлүүд байх болно. Энд та бараг бүх зүйлийг өөрчлөх боломжтой: өнгө, үсгийн хэмжээ, таслах цэг, сүлжээн дэх баганын тоо, догол мөр гэх мэт.
Мэдээжийн хэрэг, үүнийг хийхийн тулд та Less-ийн наад зах нь үндсийг мэддэг байх ёстой эсвэл ядаж эдгээр маягтуудыг зөн совингоор удирдах ёстой.
Жишээлбэл, хэрэв та @font-family-base хувьсагчийг харвал энэ нь сайтын үндсэн фонт болох үсгийн нэрийг хариуцдаг гэдгийг ядаж зөн совингоор ойлгох хэрэгтэй. @font-size-base хувьсагч нь үндсэн үсгийн хэмжээг тохируулдаг. Анхдагчаар bootstrap-д энэ нь 14 пиксел юм.
Та эдгээр бүх талбарыг засах боломжтой. Зүгээр л 14-ийг 20 болгож өөрчил, одоо та үндсэн үсгийн хэмжээ нь 20 пиксел байх хүрээг татаж авах боломжтой. Үүний дагуу та гарчгийн хэмжээг нэн даруй тохируулах боломжтой.
Сүлжээг тохируулахСүлжээний системийн тохиргоо нь бидний хувьд маш сонирхолтой бөгөөд энд байна:
Таны харж байгаагаар баганын тоо болон тэдгээрийн хоорондох доголын өргөнийг хэдхэн секундын дотор өөрчлөх боломжтой. Grid-float-breakpoint хувьсагч нь гар утасны цэсийг дүрс болгон буулгах цэгийг тогтоодог.
Хэрэв та утгыг жишээлбэл @screen-md-min болгож өөрчилвөл 991 пиксел буюу түүнээс бага өргөнтэй үед нуралт үүснэ. Та мөн энэ хувьсагчийг устгаад утгыг пикселээр бичиж болно. Жишээлбэл, 520 пиксел. Дараа нь цэсийг нураах нь зөвхөн ухаалаг утас, гар утсан дээр л тохиолдох болно.
Үнэн хэрэгтээ Bootstrap-ийн тохиргооны хуудас нь маш олон тохиргоотой боловч ерөнхийдөө энэ өөрчлөх арга (албан ёсны вэбсайт дээрх Customize хуудсыг ашиглах) нь хамгийн хурдан бөгөөд хамгийн тохиромжтой биш юм. Дараа нь би танд хамгийн хурдан арга замыг зааж өгөх болно.
Хүрээнд 2-10 өөрчлөлт хийх эсвэл шаардлагатай бүрэлдэхүүн хэсгүүдийг идэвхгүй болгох шаардлагатай бол Customize хуудсыг ашиглана уу. Хэрэв та өөр олон утгыг өөрчлөх гэж байгаа бол өөр аргыг ашиглах хэрэгтэй.
Үнэн хэрэгтээ, та хүрээний хувилбараа тохируулахдаа хуудасны хамгийн доод хэсэгт байрлах том товчлуур дээр дарна уу. Энэ нь танд зориулж Bootstrap-ийн хувилбарыг эмхэтгэж, компьютерт татаж авах болно. Дараа нь холболт хийгээд ашиглахад л хангалттай. Би өмнөх нийтлэлүүдэд холболтын талаар аль хэдийн ярьсан (үүнд WordPress дээр үүнийг хэрхэн хийх талаар).
Бага эх сурвалжийг татаж авч засварлаж байнаӨмнө хэлсэнчлэн, хэрэв та фрэймворкийн эх кодод олон засвар хийх шаардлагатай бол өөрчлөлтийг шууд харахыг хүсч байвал танд бага эх сурвалж хэрэгтэй болно. Та тэдгээрийг "Эхлэх" хэсгээс бүрэн хувилбартай ижил газраас татаж авах боломжтой.
Бага эх сурвалжтай ажиллах, тэдгээрийг засахын тулд танд дараах зүйлс хэрэгтэй:
Наад зах нь css болон түүнээс бага эсвэл өөр препроцессорын талаар бага зэрэг мэдлэгтэй байх
Бага хөрвүүлэгч (үнэгүй татаж авах боломжтой)
Үнэндээ би бага эх сурвалжаар тохируулах талаар дэлгэрэнгүй ярихгүй, гэхдээ энэ нь хамгийн сайн арга юм, учир нь та Customize хуудас руу 100 удаа очиж, хүрээний илүү олон шинэ хувилбаруудыг эмхэтгэх шаардлагагүй болно.
Ачаалах загвар эсвэл элементүүдийн харагдах байдлыг өөрчлөхАнхдагч байдлаар, хүрээний бүрэн хувилбар дээр та css хавтаснаас bootstrap-theme.css файлыг олох боломжтой. Үүнийг сайт руу холбох шаардлагагүй. Энэ нь ямар үүрэг гүйцэтгэдэг вэ? Файл нь зөвхөн шаардлагатай бол шаардлагатай элементүүдийн хэв маягийг өөрчлөхөд л хэрэгтэй.
Үүнтэй ижил үүргийг өөрийн style.css гүйцэтгэж болох бөгөөд үүнд та мөн хэв маягийг дарж болно. Bootstrap-theme нь шаардлагатай файл биш бөгөөд үүнийг захиалгад ашигладаг. Жишээлбэл, танд 3 файл байна:
bootstrap.css – мэдээжийн хэрэг, энэ нь өөрөө хүрээний код юм;
bootstrap-theme.css – энд та bootstrap элементүүдийн хэв маягийг дарна;
style.css – энэ файл дахь өөрийн элементүүдийн хэв маягийг бичнэ.
Дараа нь та код болон төслийн бүтцэд дараалалтай байх болно. Гэхдээ хэн ч таныг бүх үйлдлүүдийг нэг файл - style.css-д хийж, сэдэв файлыг огт ашиглахгүй байхыг хориглодоггүй.
Хамгийн чухал зүйл бол стрэймворк кодтой файлаас хожуу html тэмдэглэгээнд сэдвийн файл болон өөрийн css-ийг оруулах нь хэв маягийг амжилттай дарах явдал юм.
Сэдэв хэрхэн ажилладаг тухай жишээӨмнө нь хэлсэнчлэн Bootstrap нь анхдагчаар bootstrap-theme файлыг агуулдаг. Үүнийг холбож үзээрэй. Үндсэн файлын дараа холбогдоно уу.
Анхдагчаар Bootstrap дээрх товчлуурууд дараах байдалтай байна.
Файлыг сэдэвтэй холбосны дараа тэдний гадаад байдал ингэж өөрчлөгдөнө.
Таны харж байгаагаар бага зэрэг градиент гарч ирнэ. Үүний дагуу та bootstrap-theme файл дахь кодыг дахин бичиж, товчлууруудын өөрийн хэв маягийг авах боломжтой. Гэхдээ та яагаад эдгээр өөрчлөлтийг bootstrap.css дээр шууд хийж болохгүй гэж асууж магадгүй юм. Баримт нь хүрээний шинэ хувилбарууд байнга гарч байгаа бөгөөд хэрэв та шинэчлэхээр шийдсэн бол өөрчлөлтөө шинэ хувилбарт хэрэгжүүлэхэд хэцүү байх болно. Тусдаа файл үүсгэж, тэнд байгаа өөрчлөлтийг тайлбарлах боломжтой үед эх кодыг нь хөндөхгүй байх нь хөгжүүлэгчийн хувьд сайн хэлбэр гэж тооцогддог. Энэ нь илүү ухаалаг бөгөөд илүү тохиромжтой.
Интернетээс татаж авсан шинэ Bootstrap сэдвүүдийг хэрхэн суулгах вэ?Олон тооны сэдэв, загваруудыг үнэ төлбөргүй татаж авах боломжтой маш олон сайтууд байдаг, ихэнхдээ гадаадын сайтууд. Төөрөгдөлөөс зайлсхийхийн тулд Bootstrap-ийг загвар болгон, сэдвийг элементүүдийн стандарт харагдах байдлыг үгүйсгэдэг CSS дүрмийн багц болгон боловсруулсан вэбсайтыг авч үзье.
Ийм сэдвүүдийг жишээ нь bootswatch.com/ сайтаас татаж авч болох ба хайлтын систем ашиглан олон арван өөр сэдвийг олох боломжтой.
Ийм сэдвүүдийг суулгах ерөнхий зарчим нь тэдгээрийг татаж авсан сайтаас хамаарна. Хэрэв та үүнийг bootstrap-theme форматаар татаж авах боломжтой бол маш сайн, татаж аваад холбоно уу. Жишээлбэл, bootswatch дээр та bootstrap.css-г татаж аваад түүгээр өөрийн стандарт фреймворк загварын файлыг солих хэрэгтэй. Бага эх сурвалжтай сонголт бас бий.
Энэ нийтлэлээс эхлэн бид вэбсайт, админ самбар, буух хуудас, вэб програм үүсгэхэд ихэвчлэн ашиглагддаг Twetter Bootstrap 3 хүрээг судалж эхлэх болно, учир нь энэ нь хуудсуудыг хөгжүүлэхэд хялбар, тодорхой бүтэц, дасан зохицох чадварыг баталгаажуулдаг.
Үндсэн Bootstrap 3 загварыг суулгаж байнаBootstrap 3 хэрэгсэл, аргуудыг ашиглахын тулд та http://getbootstrap.com хаягаар орж css, фонт, js хавтас болон тэдгээрийн доторх холбогдох файлуудыг агуулсан архивыг татаж авах хэрэгтэй.
Хэрэв та CSS стиль болон js скриптүүдийг хэрхэн холбохоо мэдэхгүй байгаа бол энэ болон энэ нийтлэлийг үзэхийг зөвлөж байна, манай тохиолдолд CSS хэв маягийг хэсэг хэсгээр нь холбосон болно.
болон хаалтын тагны өмнөх скриптүүд
хуудасны доод талд.Мөн bootstrap.min.css болон bootstrap.min.js файлуудыг ашиглах нь таны сайтад ашиг тустай, учир нь эдгээр файлууд нь жижиг хэмжээтэй бөгөөд ачаалах хурдад эерэгээр нөлөөлнө гэдгийг тэмдэглэхийг хүсч байна.
Фонтын фонтыг хоёр аргаар холбож болно.
Хоёрдахь хувилбар нь илүү тохиромжтой, гэхдээ аль аргыг сонгохоос үл хамааран холболт ийм байдлаар үргэлжлэх болно
@font-face( font-family: glyphicons-halflings-regular; src: url(/fonts/glyphicons-halflings-regular.eot); src: local(glyphicons-halflings-regular), url(фонт/glyphicons-halflings- Regular.ttf); ) h2(фонт-гэр бүл: glyphicons-halflings-regular,sans-serif; )
эсвэл эхний аргын загварын шошгонд оруулаад хоёр дахь аргын доторх бүх текстийг css файл руу оруулна.
jQuery суулгацBootstrap 3 зөв ажиллахын тулд jquery номын сангийн файлыг jquery.com албан ёсны вэбсайтаас холбоосоор дамжуулан татаж аваад сайтынхаа js хавтсанд байрлуулах шаардлагатай.
jQuery холболт нь хаалтын тагны өмнө болдог
Күүки нь танд үйлчилгээгээ үзүүлэхэд илүү хялбар болгодог. Манай үйлчилгээг ашигласнаар та күүки ашиглахыг бидэнд зөвшөөрч байна.
, гэхдээ bootstrap.js файлын өмнө
Учир нь jQuery ачаалахаас өмнө ачаалагдах ёстой.
Bootstrap 3 сүлжээ болон дэлгэцийн хэмжээBootstrap-ийн үндэс нь 12 баганатай сүлжээ (col-) баригдсан ангиудын багц юм. Сүлжээнд 5 төрлийн дэлгэцийг дэмждэг -xs- -sm- -md- -lg- -xl-.
- -xs- дэлгэцийн хэмжээ 575px-ээс бага;
- -sm- дэлгэцийн хэмжээ 576px-ээс их, 767px-ээс ихгүй байх;
- -md- дэлгэцийн хэмжээ 768px-ээс их, 991px-ээс ихгүй байх;
- -lg- дэлгэцийн хэмжээ 992px-ээс их, 1199px-ээс ихгүй байх;
- -xl- дэлгэцийн хэмжээ 1200px-ээс их;
Тиймээс, col-lg-12 ангилалтай div нь том дэлгэцэн дээр div багана нь 12 багана буюу өргөний 100%-ийг эзэлнэ гэсэн үг бөгөөд ухаалаг утасны дэлгэц дээрх div col-sm-6 нь 6 багана буюу өргөний 50%.
Торон савны төрлүүд. Резинэн зохион байгуулалтСүлжээнд зориулсан савны үндсэн төрлүүд нь сав ба сав-шингэний ангилал юм.
Савны дотор ашиглах үед таны сүлжээ дэлгэцийн төв хэсэгт байрлах дэлгэцийн гуравны нэгийг эзлэх бөгөөд энэ хэсэгт бүх 12 багана байрлана.
Сүлжээг савны шингэний ангилалд оруулснаар бүх зохион байгуулалтын элементүүд нь резинэн шиг бүхэл бүтэн дэлгэц дээр байрлах бөгөөд өргөн нь багасах тусам бие бие рүүгээ шилжих болно.
Сав, савны шингэнийг ашиглах талаар тусгайлсан зөвлөмж байхгүй, учир нь бүх зүйл дизайны зохион байгуулалт, байршлын зорилгоос хамаарна, гэхдээ сайтын админ самбар, савны хувьд савны шингэнийг ашиглах нь зүйтэй.
Нэмж дурдахад, -fluid ангиллыг зөвхөн контейнерийн ангилалд төдийгүй эгнээний мөрөнд элементүүдийг дараалан байрлуулах боломжтой. Гэсэн хэдий ч, хэрэв та эгнээний шингэнийг ердийн саванд хийвэл ялгааг анзаарахгүй байх болно. Энэ хослолыг div.container-аас гадна дараах байдлаар ашиглах нь дээр.
Сайн байна уу, би Bootstrap 3 загвар юм
Миний сав шингэн биш байна!
Мөн би эгнээний шингэн байна!Элементүүдийг байрлуулах шугамуудМөрний анги нь сүлжээний элементүүдийг нэг мөрөнд байрлуулахад ашиглагддаг бөгөөд энэ нь тэдгээрийг хэвтээ байдлаар байрлуулах боломжийг олгодог боловч мөр дэх индексүүдийн нийлбэр нь 12-оос ихгүй байх ёстой гэдгийг анхаарч үзэх хэрэгтэй, эс тэгвээс сүүлийн элемент байх болно. хоёр дахь эгнээ рүү шилжсэн.
Гарчиг 1 Гарчиг 2 Гарчиг 3
Хэрэв та хөтчийн хуудасны хэмжээг багасгавал гарчиг нь хэвтээ эгнээнээс босоо жагсаалтад эгнэнэ.
Элементийн харагдах байдлын ангиудBootstrap 3 зохион байгуулалтын систем нь өөр өөр төхөөрөмж болон дэлгэц дээр элементүүдийг харуулах, нуух нэмэлт ангиудыг өгдөг. Тэдгээрийг харагдахуйц-*-* ба далд-* гэж тодорхойлсон.
Эхний зураасны дараа visible-*-*-г харуулах анги нь ихэвчлэн дэлгэцийн төрлийн танигч (xs, sm, md, lg, xl), хоёр дахь зураасны дараа баганын хэмжээ (1-12) байдаг. Жишээлбэл, visible-lg-6 - элемент нь 6 баганын өргөнтэй том дэлгэц дээр харагдаж байна.
Далд анги нуугдаж байна-* Зураасны дараа дэлгэцийн төрлийн танигч (xs,sm,md,lg,xl) байна, жишээлбэл, hidden-xs ангитай тэмдэглэгээний элемент жижиг төхөөрөмжүүд дээр харагдахгүй (дэлгэцийн хэмжээ 575px).
Эдгээр элементүүдийг нэгтгэснээр div савыг харуулах эсвэл нуух боломжтой болно:
Гарчиг 1 Гарчиг 2
Эхний гарчиг нь том төхөөрөмж дээр харагдах бөгөөд хоёр дахь нь жижиг дэлгэц дээр алга болно. Үүнийг хийхийн тулд хөтчийн цонхны хэмжээг багасгаж, хэмжээ нь хөдөлгөөнт төхөөрөмжийн дэлгэцтэй ижил хэмжээтэй байна.
Мөн анги дахь div контейнерт show эсвэл hidden гэж зааж өгөх боловч энэ тохиолдолд дэлгэц өөрчлөгдөхөд дэлгэцийн шинж чанар өөрчлөгдөхгүй: хэрэв харагдаж байвал харагдах болно, нуугдмал бол зөвхөн ангиас нуугдсан үгийг арилгах болно. хүссэн элементийг харах боломжийг танд олгоно.
Bootstrap 3 дээрх медиа асуулгаCSS медиа асуулга ашиглахын тулд css файл дахь @media тусгай тэмдэг, хаалтанд дэлгэцийн хамгийн бага ба/эсвэл хамгийн их өргөнийг зааж өгөх шаардлагатай. Хэрэв ердийн css тэмдэглэгээнд дэлгэцийн хэмжээг пикселээр бичих шаардлагатай бол bootstrap 3 дээр дараах бүтцийг бичиж болно.
@media(min-width: @screen-sm-min)( ... ) @media(min-width: @screen-md-min)( ... ) @media(min-width: @screen-lg- мин)( ... )
Элементүүдийн дарааллыг шилжүүлэхСавны доторх блокуудыг зөөх боломжийг олгодог өөр нэг сонирхолтой анги бол түлхэх анги нь элементийг баруун тийш, татах анги нь зүүн тийш шилжих болно.
Ойролцоох савнаас нэгтгэхдээ дэлгэцийн хэмжээг өөрчлөхдөө дарааллыг нь өөрчилж болно. Энэ жишээн дээр том дэлгэц дээр (-lg-) Гарчиг 2 зүүн талд, Гарчиг 1 баруун талд байрлах ба дэлгэцийн өргөнийг дунд хэмжээтэй (-md-) болгон багасгахад элементүүд шилжиж, дараалал өөрчлөгдөнө. дараалсан болно.
Гарчиг 1 Гарчиг 2
Bootstrap 3 layout системтэй анхны танилцлаа дуусгая; та загварын хэв маяг, скрипт, үндсэн сүлжээний элементүүд, медиа асуулга, контейнерийн төрлүүд гэх мэтийг хэрхэн суулгах талаар сурсан. Дараах нийтлэлүүдэд бид туслах болон нэмэлт элементүүдийг авч үзэх болно: цэс, товчлуур, гулсагч, дүрс болон бусад.
2012 оны 2-р сарын 24, 21:25 Twitter Bootstrap-д суурилсан эхлэгчдэд зориулсан хэрэглэгчийн интерфейс- Вэб дизайн
Танилцуулга Би чөлөөт цагаараа хоббигийнхоо хувьд сонирхолтой мэдээний гарчиг бүхий нэг хуудас нэгтгэгч боловсруулдаг. Хэзээ нэгэн цагт прототипийн үндсэн функц бэлэн болсон бөгөөд цорын ганц зүйл бол "Дизайн" даалгаврын хажууд байгаа чагт тэмдэг дутуу байсан. Асуудлын мэдэгдэл Дизайнерын ид шидийг эзэмшихгүйгээр үзэсгэлэнтэй хэрэглэгчийн интерфэйстэй болохын тулд (танд зөвхөн үндсэн байна. будагны мэдлэг) болон програмист (та зөвхөн html болон css-ийн анхан шатны мэдлэгтэй) .
Хуудас нь дараах элементүүдээс бүрдэнэ
- Нэр
- Мэдээний холбоосыг илгээх маягт
- Уншигчийн өвөрмөц кодыг цахим шуудангаар илгээх маягт
- Уншигчийн код оруулах өвөрмөц маягт
- Огноогоор нь бүлэглэсэн мэдээний жагсаалт (огноо, цаг, гарчиг-холбоос, товшилтын тоо, мэдээ унших эсвэл шинээр унших боломжтой)
- Rss-ийн холбоос
- Chrome өргөтгөлийн холбоос
- хувилбарын ID
- санал хүсэлтийн имэйл
... ...
Хоёрдахь мөр нь интерфейсийг Bootstrap дэмждэг төхөөрөмжүүдэд автоматаар тохируулахад шаардлагатай.Алхам 2. "Мах"-ыг зохион бүтээх. "Мах" гэж би мэдээний жагсаалтыг хэлж байна. Үүнийг хийх хамгийн хялбар арга бол хүрээг идэвхгүй болгосон хүснэгтийг ашиглах явдал юм. Эхний багана нь огноо (бүлэг бүрт зөвхөн нэг удаа), хоёр дахь багана нь цаг, гурав дахь нь гарчиг, шилжилтийн тоо юм. Энэ бүгдийг Bootstrap дүрмийн дагуу саванд хийх шаардлагатай.
| (огноо) | (Цаг) | (Гарчиг) ((шилжилтийн тоо)) |
Уншсан мэдээний хувьд бид тусгай ангиллыг зааж байна:
(Гарчиг) Алхам 3. Мэдээний холбоосыг илгээх маягт. Энд дахин бүх зүйл энгийн, Bootstrap нь хэд хэдэн бэлэн маягтуудыг санал болгодог: ердийн маягт, нэг мөрт маягт, хайлтын маягт ... Бидэнд хоёрдахь хэрэгтэй, үүнийг хүснэгтийн урд байрлах саванд нэмнэ үү:
Нэмэх ...
class="span10" - Bootstrap нь 12 баганаас бүрдсэн сүлжээн дээр суурилсан интерфэйсийг бүтээнэ гэж үздэг; бидний элементүүдийг үүн дагуу зэрэгцүүлж болно. Туршилт, алдааны шинжлэх ухааны аргаар би 10-тай тэнцэх оролтын талбарын өргөнд хүрсэн. 4,5,6-р алхам. Малгай. Хэрэглэгчдэд ээлтэй вэбсайт хэрхэн харагдах тухай миний санаанууд нь минималист хэв маягийг санал болгож байна: шаардлагагүй бүх зүйл нуугдаж, нуух боломжгүй бүх зүйл цайвар байна. Бид унадаг цэсэнд маягтуудыг нууж, rss болон Chrome өргөтгөлийн холбоосыг цайруулж өгдөг. Бид энэ бүгдийг сайтын дээд талд наасан толгой хэсэгт байрлуулдаг (анги = "navbar navbar-fixed-top"):
*** ...
Маягтууд нь өөрөө:
... ×Өвөрмөц кодыг имэйлээр илгээнэ үү Илгээхийг цуцлах ×Уншигчийн өвөрмөц код оруулна уу
Янз бүрийн компьютер дээр уншсан мэдээг синхрончлох боломжийг танд олгоно.
Илгээхийг цуцлахЧухал цэг. Үүнийг ажиллуулахын тулд та хэд хэдэн скриптийг холбох хэрэгтэй:
...
...
хувилбар 2012/02/19 23:49 *****
ResultEpilogue Twitter Bootstrap нь маш их хүчин чармайлт, мэдлэггүйгээр, CSS-ийн нэг мөр бичихгүйгээр, html кодыг задлахгүйгээр хүмүүст үзүүлэхээс ичдэггүй, маш сайхан загвар интерфэйсийг авах боломжтой болгосон. Хэрэв та сонирхож байгаа бол дараагийн өгүүллээр би PHP + MySQL-ийн гүнзгий мэдлэггүйгээр (зөвхөн програмчлалын анхан шатны мэдлэгтэй) өөрийн сая долларын санаагаа зөвхөн цаасан дээр төдийгүй, харуулах боломжийг олгодог функцийг хэрхэн хэрэгжүүлж болохыг танд хэлэх болно. ажлын прототип хэлбэрээр.Анхаарал тавьсанд баярлалаа!
UPD: Би "Би PR" гэсэн сэдвийг устгахыг хүсэхгүй байна, би бүх шаардлагагүй холбоосыг устгасан.
Залуус аа, миний бодлоор Bootstrap бол маш сайхан зүйл юм. Би энэ нийтлэлд яагаад ийм байдгийг тайлбарлахыг хичээх болно. За явцгаая.Өгүүллийн бараг эхний хагасыг бүхэлд нь зураггүй бичсэн, сүлжээ хэрхэн ажилладаг тухай онол, тайлбар л байгаа тул шууд уучлалт гуйж байна. Гэхдээ энэ нь маш чухал юм! Та нарын хэнд ч хэрэгтэй байгаа нь гартаа бариад уншаад, ойлгоно гэж найдаж байна. Өгүүллийн хоёрдугаар хагасыг аль хэдийн илүү энгийнээр ойлгосон, дэлгэцийн агшинтай олон жишээ бий.
Bootstrap - энэ юу вэ?Тиймээс нэг чухал асуултаас эхэлцгээе. Bootstrap нь CSS болон JS фреймворк бөгөөд үндсэндээ бэлэн бичигдсэн код бүхий файлуудын багц юм. Бараг бүх хүрээний хөгжүүлэгчдийн зорилго бол өөрсдөдөө болон уг хэрэгсэлд хандах боломжтой бусад хүмүүст вэбсайт хөгжүүлэх ажлыг хялбарчлах явдал юм. Bootstrap-ийн хувьд энэ нь бүрэн үнэ төлбөргүй тул та үүнийг ямар ч хэлбэрээр ашиглах, эх кодыг засварлах, хүрээг хүссэн хэлбэрээр тохируулах боломжтой. Энэ нь төгс төгөлдөр юм.
Bootstrap суулгаж байнаХэрэв та зүгээр л хүрээ файлуудыг HTML баримт бичигт холбох шаардлагатай бол (жишээлбэл, дадлага хийх зорилгоор) getbootstrap.com албан ёсны вэбсайтаас уг хүрээг татаж аваад, түүний файлуудыг төсөл рүү хуулж аваад өөрт хэрэгтэй файлуудыг холбоно уу. Эдгээр файлуудын талаар товч мэдээлэл өгье.
Энэ бол хүрээний стандарт багц юм. Үнэн хэрэгтээ та үүнийг хялбархан өөрчилж, өөрт тохируулан өөрчилж болно. Жишээлбэл, скриптийг огт бүү ашигла эсвэл зөвхөн нэг сүлжээг холбоно. Ерөнхийдөө бид энэ талаар бас ярих болно.
Оросын Bootstrap баримт бичигТа getbootstrap-д зочлохдоо энд бүх зүйл англи хэл дээр байгааг анзаарсан байх. Бид энэ хүрээнд Оросын тусламжийг ашиглаж болно. Үүнийг олоход хялбар. Үүнийг хийхийн тулд үндсэн хуудаснаас Эхлэх хэсэг рүү очно уу. Хамгийн доод тал руу гүйлгэвэл орчуулгын холбоос байх болно. Тэнд Орос хэлийг хайж олоод дээр нь дарна уу. Энэ бол одоо та сайтын орос хувилбар дээр байна. Үнэн, энд бүгдийг орчуулаагүй ч хаа нэгтээ 70-80% нь үнэн зөв байдаг тул та бүгдийг ойлгох болно.
Ачаалах сүлжээЮу ч хэлж болохоос үл хамааран Bootstrap-ийн гол элемент бол хариу үйлдэл үзүүлэх сүлжээ юм. Ерөнхийдөө үүнгүйгээр хүрээ бараг бүх үнэ цэнээ алдах болно, учир нь сүлжээний ачаар та дасан зохицох загваруудыг хурдан үүсгэж чадна. Үүний зэрэгцээ, та медиа асуулгын талаар огт мэддэггүй байж магадгүй; танд хэрэггүй, учир нь систем нь дасан зохицох чадварыг хэрэгжүүлэхэд анхаардаг; та зүгээр л блокуудад зөв ангиудыг хуваарилах хэрэгтэй.
Эдгээр ангиуд юу вэ? Баримт бичиг рүү явцгаая, энэ нь бидэнд маш их тус болно. CSS - Grid System хэсэг рүү очно уу. Сүлжээтэй ажиллах ерөнхий дүрмүүд нь энгийн бөгөөд би тэдгээрийг одоо жагсаах болно.
Тортой хэрхэн ажиллах вэ?Үүнийг html хүснэгт гэж төсөөлөөд үз дээ. Хэрэв та хэзээ нэгэн цагт хүснэгтэд зориулж HTML код бичиж байсан бол бүх агуулгыг хүснэгтийн шошгонд байрлуулж, нэг мөрийг tr тэмдэглэгээнд байрлуулж, дараа нь нүдийг дотор нь байрлуулсан гэдгийг та мэднэ - td .
Тиймээс сүлжээнд бүх зүйл ижил төстэй байна. Контейнерийн анги нь сүлжээнд зориулсан ерөнхий савны үүрэг гүйцэтгэдэг. Ачаалах сүлжээний 2 сонголт байдаг - бүрэн резинэн, хязгаарлагдмал хамгийн их өргөнтэй. Тиймээс, ерөнхий блокыг контейнерийн ангиллаар өгөх үед сайт хамгийн ихдээ 1170 пикселийн өргөнтэй байх болно. Цаашид тэлэхгүй. Мэдээжийн хэрэг, агуулга нь төвлөрсөн байх болно.
Хэрэв та савны шингэний ангиллыг тохируулсан бол тор нь бүрэн резин байх болно, өөрөөр хэлбэл хэмжээ хязгаарлалт байхгүй болно. Жишээлбэл, хэрэв хүн 1920 пикселийн өргөнтэй монитор дээр вэбсайт нээвэл тэр үүнийг бүхэлд нь харах болно.
Үүний дагуу вэбсайтыг хөгжүүлэх хамгийн эхний зүйл бол загвар нь ямар байхыг шийдэх явдал юм - бүрэн резин, эсвэл түүний өргөнийг хязгаарлах шаардлагатай хэвээр байна.
Гайхалтай, савны блок нь эгнээний сүлжээг агуулсан байх ёстой. Та нэг мөрөнд байгаа бүх блокуудыг байрлуулах хэрэгтэй. Өөрөөр хэлбэл, хэрэв бид хамгийн энгийн загварыг авбал: толгой, үндсэн хэсэг, баруун багана, доод хэсэг, 3 багана байна. Эхнийх нь зөвхөн толгой хэсэгтэй, хоёр дахь нь агуулга, хажуугийн самбартай, сүүлчийнх нь хөлтэй байна. Ийм сайтын тэмдэглэгээ нь дараах байдалтай байна.
Толгой хэсгийн контент... болон хөл хэсгийн хажуугийн хэсэг
Гэхдээ одоохондоо энэ нь буруу тэмдэглэгээ, учир нь энэ нь дутуу байна ... юу вэ? Тийм шүү, эсүүд! Bootstrap-ийн хувьд тэдгээрийг багана гэж нэрлэдэг. Ачаалах сүлжээ нь 12 баганаас бүрдэнэ. Үүнийг ямар ч өргөнтэй, дор хаяж 1200 пиксел, 100-аас доошгүй аль ч блокт суулгаж болно. Энэ бүхэн нь баганын өргөнийг пикселээр биш, харин хувиар зааж өгсөнтэй холбоотой юм.
Энэ 12 багана систем хэрхэн ажилладаг вэ?Ингээд бид хүрээтэй холбоотой хамгийн чухал асуудал руугаа орлоо. Надад итгээрэй, хэрэв та үүнийг ойлгож байгаа бол бусад бүх зүйл утгагүй болно. Хамгийн гол нь сүлжээ хэрхэн ажилладагийг ойлгох явдал бөгөөд хурдан дасан зохицох байршил танд нээлттэй байх болно.
Үүнийг хийхийн тулд доор байгаа баримт бичгүүдийг гүйлгэвэл та чухал сүлжээний шинж чанаруудыг агуулсан хүснэгтийг олох болно.
Дашрамд хэлэхэд, баганууд нь Bootstrap-д col- классаар тэмдэглэгдсэн байдаг, гэхдээ энэ нь нийлмэл анги тул хэзээ ч зүгээр л col- гэж бичдэггүй. Bootstrap нь өөр өөр өргөнтэй блокуудын хэмжээг хянах зориулалттай 4 тусгай ангитай бөгөөд энд байна:
Эдгээр нь 4 анги боловч элементүүдийн хэмжээг хянахын тулд 1-ээс 12 хүртэлх тоог ашигладаг, учир нь таны санаж байгаагаар сүлжээнд яг 12 багана байдаг.
Толгой хэсгийн контент Хажуугийн мөр Хөл хэсэг
Ойлгоход тун амархан. Юуны өмнө бид толгойг үүсгэдэг бөгөөд энэ нь ямар ч тохиолдолд өргөний 100% (ихэвчлэн) эзэлдэг тул сүлжээнд огт байрлуулах шаардлагагүй болно. Гэхдээ бид үүнийг ямар ч байсан оруулах болно. Энэ col-md-12 гэж юу вэ? Би та нарт хэлсэнчлэн хэн ч зүгээр л col- бичдэггүй, энэ ангид бид үндсэндээ вэб хөтчид хэлдэг:
Энэ бол эс | багана
Дунд зэргийн төхөөрөмж (md анги) дээр түүний өргөн нь 12 баганаас 12 багана, өөрөөр хэлбэл мөрийн өргөний 100% байх ёстой.
Гэхдээ бусад төхөөрөмжүүдийн өргөний талаар юу хэлэх вэ? Том (lg) дэлгэц дээр энэ нь бас 100% байх болно, учир нь том дэлгэцийн утгууд өвлөгддөг боловч жижиг дэлгэцийн хувьд тийм биш юм. Энэ нь маш энгийн: хэрэв та col-xs-4 гэж бичсэн бол баганын өргөн нь бүх төхөөрөмж дээр 33%, хэрэв col-lg-4 бол зөвхөн том төхөөрөмжүүд дээр байх болно. Энэ бол онцлог, үүнийг санаарай.
Хэрэв өргөн утгыг жижиг дэлгэц дээр хадгалахгүй бол юу болох вэ? Энэ нь дахин тохируулагдана. Энэ нь дараах байдалтай байна.
col-sm-4 - жижиг дэлгэц дээр блок нь өргөний 33% -ийг эзэлнэ, md болон lg дэлгэц дээр ижил байх болно, харин xs, өөрөөр хэлбэл хамгийн жижиг дэлгэц дээр өргөнийг 100% болгон тохируулна. Тиймээс, өөр нэг энгийн дүрмийг санаарай: Хэрэв жижиг дэлгэцийн хувьд юу ч заагаагүй бол тэдгээрт блок 100% өргөнтэй харагдах болно.
Агуулгын хажуугийн самбар
Үндсэндээ бид хөтөч рүү хэлж байна:
Агуулгын блок нь 12 баганаас 8-ыг нь өргөнөөр байрлуулж, энэ нөхцөл байдал жижиг, дунд, том дэлгэц дээр байх болно (жижиг, том дэлгэцийн хувьд үүнийг зааж өгөхөд хангалттай, таны санаж байгаагаар утга нь өвлөгддөг). Гэхдээ хамгийн жижиг дэлгэц дээр блок 100% эзэлнэ. Энэ нь зөв; ихэвчлэн мобайл төхөөрөмж дээр сайтууд 1 баганад харагдана.
Хажуугийн багана нь ижил жижиг, дунд, том дэлгэцэн дээрх эгнээний өргөний гуравны нэг байх ёстой. За, хамгийн жижиг дээр, та аль хэдийн ойлгосноор түүний өргөнийг 100% болгож тохируулсан байна. Ийм энгийн.
За, хөлтэй харьцах зүйл алга. За, бид сүлжээ хэрхэн ажилладаг тухай үндсэн зарчмуудыг авч үзсэн ч энэ нь хэрхэн ажилладагийг харах шаардлагатай хэвээр байна ...
Bootstrap Nested GridБаримт нь одоо бид загварыг зөвхөн үндсэн блокуудад хуваасан боловч дотор нь багана болгон хувааж болно. Жишээлбэл, контент нь бүтээгдэхүүнийг хэд хэдэн баганад харуулж болно. Би юу хийх хэрэгтэй вэ? Энэ нь маш энгийн - бид дотроо яг ижил тор үүсгэдэг. Энэ нь үүрлэсэн байх боловч 12 багана агуулна. Хэрэв бид энэ бүгдийг нэгтгэн дүгнэвэл дараахь дүгнэлтэд хүрнэ.
Аливаа блок дотор хязгааргүй тооны тор байж болно. Жишээлбэл, бүтээгдэхүүнтэй блок дээр бүтээгдэхүүнийг салгах сүлжээ байдаг; нэг бүтээгдэхүүнтэй блок дээр та өөр сүлжээ үүсгэж болно, жишээлбэл, үнэ, бэлэн байдлын мэдээлэл, нэмэлт мэдээллийг тусгаарлах боломжтой. мэдээлэл.
Одоо бид 3 баганад бүтээгдэхүүнийг байрлуулахын тулд агуулгын блок дотор өөр сүлжээ хийхийг хичээх болно. Тиймээс, бидний агуулгыг агуулсан блокыг авч үзье:
Агуулга
Мөн бид үүнд бичнэ:
Бүтээгдэхүүний каталог: Бүтээгдэхүүний нэр 
Бүтээгдэхүүний тодорхойлолт
Таны харж байгаагаар бид агуулгын дотор шинэ сүлжээ үүсгэсэн - бид дотор нь эгнээ тавьсан бөгөөд эгнээнд аль хэдийн бүтээгдэхүүнтэй 3 блок байх болно. Бүтээгдэхүүний карттай col-sm-4 блокыг хуулж аваад дахин 2 удаа буулгахад л ийм зүйл гарч ирнэ (та ямар ч бүтээгдэхүүний зургийг авч болно, би том зургийг авсан):
Би өөр нэг чухал зүйлийг орхигдуулсан: зургууд нь байгаа блокуудад дасан зохицохын тулд тус бүрдээ img-responsive анги өгөх хэрэгтэй. Хэрэв та над шиг үүнийг хийх нь тохиромжгүй гэж бодож байгаа бол өөрийнхөө style.css-г дараах байдлаар бичээрэй.
Img( хамгийн их өргөн: 100%; өндөр: автомат; дэлгэц: блок; )
Ингээд л энэ кодыг хадгалаад css файлаа төсөлтэй холбоно уу. Одоо зургууд нь анхдагчаар дасан зохицох болно.
За, энэ нь нэлээд жигд болсон уу? Тийм ээ, гэхдээ ачаалах оосоргүй бол та илүү удаан зовох болно. Цорын ганц зүйл бол ямар ч блок дотор сүлжээ үүсгэх үед та дотор нь контейнер анги бүхий блок үүсгэх шаардлагагүй болно. Энэ яагаад шаардлагагүй гэж? Тийм ээ, учир нь сүлжээ үүсгэсэн блок нь савны үүрэг гүйцэтгэдэг.
Тиймээс та аль ч блок дээр хүссэн хэмжээгээрээ багана үүсгэж, ямар ч төвөгтэй загвар хийх боломжтой. Энэ бүхэн Bootstrap-гүй байснаас хамаагүй хурдан, учир нь та бүх css-ийг эхнээс нь бичих хэрэгтэй.
Хариуцлагатай хэрэгслүүдЭнэ бол bootstrap-ийн бас нэг гайхалтай шинж чанар юм. Энэ нь танд шаардлагатай өргөний дагуу ямар ч блокыг нуух эсвэл харагдахуйц болгох боломжтой юм. Жишээлбэл, нарийхан дэлгэц дээр хажуугийн баганыг бүрэн нуух, хөдөлгөөнт төхөөрөмж дээр шинэ элемент нэмэх, өргөн дэлгэц дээр багана нэмэх гэх мэт.
Хэрэглээний олон сонголт байдаг, гэхдээ би танд хамгийн чухал зүйлийн талаар хэлээгүй: эдгээр хэрэгслийг хэрхэн ашиглах вэ? Үүнийг хийхийн тулд хүссэн блок дээрээ анги нэмэхэд л хангалттай. Хэрэв та үүнийг нуух шаардлагатай бол дараах ангиллыг зааж өгнө үү.
Хөл хэсэг
Энэ тохиолдолд hidden-xs анги юу хийх вэ? Энэ нь нэмэлт жижиг төхөөрөмжүүдийн хөл хэсгийг нуух болно. Бусад бүх зүйл дээр блок харагдах болно.
Хэрэв та эсрэгээр үүнийг зөвхөн хамгийн жижиг дэлгэц дээр харуулах шаардлагатай бол visible-xs-block классыг ашиглах хэрэгтэй. Энэ тохиолдолд блок нь хамгийн нарийн дэлгэцээс бусад бүх хэсэгт нуугдах болно. Тиймээс дасан зохицох хэрэглээний ангиудыг дараах байдлаар бичсэн болно.
За, тодорхой болгохын тулд хэдэн жишээ хэлье:
Бүх зүйл ингэж ажилладаг. Энэ нь яг ийм бөгөөд өөр арга байхгүй. Та үүнийг ойлгосон гэж найдаж байна. Үүнийг амьдрал дээр хэрэгжүүлье. Бидэнд маш энгийн боловч тестийн загвар бий.
Даалгавар: жижиг дэлгэц дээр хажуугийн багана, мөн хамгийн жижиг дэлгэц дээр нэг бүтээгдэхүүнийг алга болгох. Тиймээс xs төхөөрөмж дээр бүтээгдэхүүнүүд аль хэдийн 3 биш харин 2 баганад байна.
Зөвхөн html кодыг засварлаж, өөрөө хийхийг оролдоорой. Юу хийх шаардлагатай вэ? Эхлээд багана руу харцгаая, үүнийг sm дэлгэц дээр нуухын тулд та зүгээр л далд-sm анги нэмэх хэрэгтэй.
Гайхалтай, одоо гурав дахь бүтээгдэхүүнд hidden-xs анги нэмэх шаардлагатай бөгөөд энэ нь хамгийн жижиг дэлгэцэн дээр алга болно. За, үлдсэн хоёр барааны ангилал дараах байдалтай байна.
Өөрөөр хэлбэл, дунд хэмжээний төхөөрөмж дээр блок нь 12 баганаас 4 багана эзэлдэг бөгөөд үүнийг өргөний 33.33%, хэт жижиг төхөөрөмжид 50% болгон хөрвүүлэх боломжтой. Бүтээгдэхүүнтэй нэг блок энэ өргөнд алга болох тул бүтээгдэхүүнтэй блок хоёулаа 1 эгнээнд цэвэрхэн байрлуулна.
Агуу их! Үүнийг ойлгосноор та вэб хуудсан дээрх блокуудыг хүссэнээрээ бараг л удирдаж болно. Өөртөө даалгавар гаргаж, хэрэгжүүлэхийг хичээ.
Намайг тэр чигт нь хөдөлгөДараа нь би танд өөр нэг маш сайн заль мэхийг харуулах болно - блокыг баруун эсвэл зүүн тийш шилжүүлэх чадвар. Бид дараалсан 3 бүтээгдэхүүн биш, харин 1 бүтээгдэхүүнтэй гэж бодъё. Энэ нь бүхэл бүтэн өргөнийг эзэлдэггүй. Таны даалгавар бол үүнийг төвд байрлуулах явдал юм. Хэрэв та 12 баганын системтэй ажиллаж байгаагаа санаж байвал үүнийг хийхэд хялбар байдаг.
Бүтээгдэхүүнтэй хамт нэг блок үлдээе:
Блокыг голлуулахын тулд хэр их хөдөлгөх шаардлагатайг ойлгохын тулд энгийн тооцоолол хийхэд хангалттай. Дунд болон том дэлгэц дээр зүүн тийш 4 багана, жижиг дэлгэц дээр 3 баганыг зөөх шаардлагатай. Энэ нь иймэрхүү харагдаж байна:
col-md-offset-4 ангид: Дунд болон том дэлгэц дээр блокийг зүүн талд нь эх савны өргөний 33%-иар офсет (1/3 зүүн офсет, 1/3 блок өргөн, ⅓ баруун зөрүү, төвлөрөхөд хүргэдэг).
Ангилал col-xs-offset-6: Хэт жижиг болон жижиг дэлгэц дээр зүүн тийш 25%-иар шилжүүлнэ үү (¼ дэвсгэр зүүн, ½ блокны өргөн, ¼ дэвсгэр баруун).
Та гол санааг ойлгож, шаардлагатай бол эдгээр хичээлүүдийг ашиглана гэж найдаж байна.
Bootstrap бүрэлдэхүүн хэсгүүд ба тэдгээрийн хэрэглээний жишээБи чамд баяр хүргэе. Бид дөнгөж сая хүрээтэй холбоотой хамгийн чухал сэдвийг хөндлөө. Энэ бол сүлжээ бөгөөд түүнтэй ажиллах нь чухал юм. Бүрэлдэхүүн хэсгүүдтэй ажиллах нь та зүгээр л баримт бичигт очиж, хүссэн бүрэлдэхүүн хэсгийн кодыг хуулж, шаардлагатай бол өөрийн хэрэгцээнд нийцүүлэн өөрчлөх хэрэгтэй гэсэн үг юм. Гэхдээ би бүрэлдэхүүн хэсгүүдийг хэрхэн ашиглах талаар зарим жишээг доор өгөх болно.
Хурдан хөвөх, боодол цуцлахЗүүн болон баруун тийш татах ангиуд нь ямар ч блокийг зүүн эсвэл баруун тийш илгээх замаар хурдан хөвөх боломжийг олгодог. Урсгалыг цуцлах талаар бүү мартаарай. Үүний тулд та clearfix анги ашиглаж болно.
Bootstrap: Хэвтээ мэдрэмжтэй (гар утасны) цэсБид дараах бүрэлдэхүүн хэсгүүдийг загварт шууд нэмэх тул хэрэв та зүгээр л уншаад зогсохгүй кодтой ажиллахыг хүсвэл миний дараа бүх алхмуудыг дагана уу.
Үнэн хэрэгтээ Bootstrap-ийн тусламжтайгаар та зүгээр л дасан зохицох цэс биш, харин жижиг дэлгэц дээр бүрэн нурж, нэг товчлуурын дор нуугдсан гар утасны цэсийг хялбархан хийж чадна. Энэ техникийг хариу үйлдэл үзүүлэх олон загвараас харж болох бөгөөд хэрэгжүүлэхэд тун хялбар юм. Гар утасны цэсийн жишээ код нь баримт бичигт байгаа, би үүнийг тэндээс аваад бага зэрэг дахин хийх болно.
Тиймээс, миний хийх хамгийн эхний зүйл бол толгойтой блокыг арилгах явдал юм, учир нь манай цэс нь миний загварын хувьд толгой хэсэг байх болно. Цэсийн кодыг сайтын бүх контентын өмнө, тэр ч байтугай контейнер блокийн өмнө байрлуулсан байх ёстой. Яагаад? Тийм ээ, та одоо сүлжээг навигацийн мөрөнд аль хэдийн суулгасан гэдгийг өөрөө харах болно. Тэгэхээр энд код байна:
Солих товчлуурын лого/нэр
Хайх
Маш олон код байгаа тул бүү сандар. Энэ сайт одоо иймэрхүү харагдаж байна:
Гэхдээ хэрэв таны цэс дэлгэцийн өргөнийг бүхэлд нь эзэлдэггүй бол үүнийг голчлох нь зүйтэй юм. Үүнийг хийхийн тулд та цэсэнд зориулж нэмэлт боодлын блок үүсгэх хэрэгтэй бөгөөд үүнийг савны шингэний ангилалтай блокийн дараа байрлуулах хэрэгтэй. Энэ блокыг хаахаа бүү мартаарай. Би түүнд navbar-wrap анги өгсөн. Үүнд зориулсан загварууд энд байна:
Өөрөөр хэлбэл, та зүгээр л өргөнийг нь хязгаарлаж, төвлүүлж болно. Эсвэл эхлээд савны шингэнийг саваар солино.
Таны харж байгаагаар бид лого, хоёр энгийн зүйл, унадаг зүйл, хайлтын маягтыг цэсэнд нэмсэн. Өөрөөр хэлбэл, олон элемент байсан. Та цэсэнд өөрийн ангиудыг нэмснээр өөрийнхөө цэсийг хялбархан өөрчлөх боломжтой. Гэхдээ одоогоор миний зорилго бол энэ бүрэлдэхүүн хэсгийг танд үзүүлэх явдал юм.
Дэлгэцийн өргөн нь 768 пикселээс бага төхөөрөмж дээр цэс ингэж харагдах болно.
Таны харж байгаагаар цэс нурсан байна. Энэ нь баруун дээд буланд байгаа товчлуур дээр дарахад нээгдэнэ. Дэлгэц дээр зөвхөн лого л үлдсэн.
Доош урсдаг цэсҮүний зэрэгцээ, дээрх жишээнээс та Bootstrap дээр унадаг цэсний зүйл хэрхэн үүсдэгийг ойлгож болно; илүү нарийвчилсан харагдуулахын тулд энэ кодыг задалъя:
Тиймээс унждаг зүйлийн сав нь унждаг ангитай ердийн жагсаалтын зүйл юм. Үүний дотор үндсэн холбоос байгаа бөгөөд үүн дээр дарснаар доош унах цэс нээгдэнэ. Код дээр харагдах өгөгдлийн атрибутыг өгөх нь маш чухал бөгөөд үүнгүйгээр юу ч ажиллахгүй. Та мөн bootstrap.js файлыг вэб хуудсуудтай холбосон эсэхийг шалгах хэрэгтэй.
Карет анги бүхий зай нь сумнаас өөр зүйл биш бөгөөд үүний ачаар тухайн зүйл нь унждаг зүйл гэдгийг ойлгох боломжтой бөгөөд цэсний доор стандарт тэмдэглэгдсэн жагсаалтыг ашиглан үүсгэсэн болно. Энэ бол бүх зүйл маш энгийн, та энэ кодыг унадаг зүйлсийг хэрэгжүүлэхийн тулд ашиглаж болно.
Bootstrap ашиглан Breadcrumbs (Breadcrumbs) нэмэхОлон дэлгүүрт та одоогийн хуудас руу орох бүрэн замыг агуулсан талхны үйрмэг гэж нэрлэгддэг блокыг олж болно. Үүнийг мөн фреймворк ашиглан хийхэд хялбар, кодыг үзнэ үү:
Үнэн хэрэгтээ дугаарласан жагсаалтад талхны үйрмэгийн ангиллыг зааж өгөхөд хангалттай бөгөөд жагсаалтын ердийн зүйлүүдийг оруулахад хангалттай. Дашрамд хэлэхэд, би хоёр дахь түвшний гарчгийг загварт төвлөрүүлэх болно (үүнийг css дээр бичих шаардлагатай):
H2(текстийг зэрэгцүүлэх: төвд; )
Хэрэв та талхны үйрмэгийн харагдах байдлыг ямар нэгэн байдлаар өөрчлөхийг хүсвэл CSS-ийн .breadcrumb сонгогчийг ашигла. Жишээлбэл, арын өнгийг дараах байдлаар арилгах боломжтой.
Breadcrumb( дэвсгэр: ил тод; )
Энэ сайт одоо иймэрхүү харагдаж байна:
Анхдагч байдлаар, хүснэгт нь бүхэл бүтэн цонхоор сунах тул хэмжээсийг хязгаарлахын тулд хязгаарлагдмал өргөнтэй хайрцагт боож өгнө. Анхдагч байдлаар энэ нь аймшигтай харагдаж байна, гэхдээ хэрэв та хүснэгтийн ангийг хүснэгтийн шошгон дээр нэмбэл бүх зүйл илүү сайхан болно:
