Source

Дахин ачаална уу

Нэг файл дахь элементэд хамаарах CSS өөрчлөлтүүдийн цуглуулга бүхий Reboot нь Bootstrap-г эхлүүлж, дэгжин, тууштай, энгийн суурь үзүүлэлтийг бий болгоно.

Арга барил

Дахин ачаалах нь Normalize дээр суурилдаг бөгөөд зөвхөн элемент сонгогч ашиглан олон HTML элементүүдийг бага зэрэг үзэл бодолтой хэв маягаар хангадаг. Нэмэлт сарлагийн саваг нь зөвхөн ангиудад хийгддэг. Жишээ нь, бид зарим <table>хэв маягийг илүү хялбар болгох үүднээс дахин ачаалж, дараа нь .table, .table-bordered, болон бусад зүйлсийг өгдөг.

Дахин ачаалахад юуг хүчингүй болгохыг сонгох заавар, шалтгаанууд энд байна:

Хэмжих боломжтой бүрэлдэхүүн хэсгийн зайнд s-ийн remоронд s -г ашиглахын тулд хөтчийн өгөгдмөл утгыг шинэчилнэ үү .em
зайлсхийх margin-top. Босоо ирмэгүүд нурж, гэнэтийн үр дүнд хүрч болзошгүй. Хамгийн гол нь нэг чиглэл marginнь илүү энгийн сэтгэцийн загвар юм.
Төхөөрөмжийн хэмжээг илүү хялбар болгохын тулд блокийн элементүүд нь rems-д margins-г ашиглах ёстой.
font-холбоотой шинж чанаруудын мэдэгдлийг inheritаль болох бага байлгах.

Хуудасны өгөгдмөл

Хуудасны хэмжээнд илүү сайн өгөгдмөл болгох үүднээс <html>болон <body>элементүүдийг шинэчилсэн. Илүү тодорхой:

болон , -ийг оруулаад box-sizingбүх элемент дээр дэлхий даяар тохируулагдсан . Энэ нь элементийн зарласан өргөнийг дэвсгэр эсвэл хүрээний улмаас хэзээ ч хэтрүүлэхгүй байхыг баталгаажуулдаг. *::before*::afterborder-box
- -д ямар ч суурь font-sizeзарлаагүй <html>, гэхдээ 16px(хөтчийн өгөгдмөл) гэж үздэг. Хэрэглэгчийн сонголтыг хүндэтгэж, илүү хүртээмжтэй хандлагыг хангахын зэрэгцээ медиа асуулгад хялбар хариу үйлдэл үзүүлэх төрлийг масштаблахад ашигладаг font-size: 1rem.<body>
нь <body>мөн глобал font-family, line-height, болон text-align. Энэ нь үсгийн фонтын зөрчилдөөнөөс урьдчилан сэргийлэхийн тулд дараа нь зарим хэлбэрийн элементүүдээр өвлөгддөг.
Аюулгүй байдлын үүднээс <body>зарласан background-color, анхдагч нь #fff.

Эх үсгийн стек

Өгөгдмөл вэб фонтууд (Helvetica Neue, Helvetica болон Arial) Bootstrap 4-д хасагдсан бөгөөд төхөөрөмж болон үйлдлийн систем бүрт текстийг оновчтой болгох үүднээс "үндсэн фонтын стек"-ээр сольсон. Энэхүү Smashing Magazine нийтлэлээс уугуул үсгийн стекийн талаар дэлгэрэнгүй уншина уу .

$font-family-sans-serif:
  // Safari for OS X and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for OS X (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  "Roboto",
  // Basic web fallback
  "Helvetica Neue", Arial, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

Үүнийг Bootstrap font-family-д ашигладаг бөгөөд <body>автоматаар дэлхий даяар удамшдаг. Глобал руу шилжихийн тулд Bootstrap font-family-г шинэчилж $font-family-base, дахин хөрвүүлнэ үү.

Гарчиг ба догол мөр

Бүх гарчгийн элементүүд, жишээлбэл, <h1>тэдгээрийг <p>арилгахын тулд дахин тохируулна margin-top. Хоорондоо хялбар байх үүднээс гарчиг margin-bottom: .5remболон догол мөрүүдийг нэмсэн margin-bottom: 1rem.

Гарчиг	Жишээ
`<h1></h1>`	h1. Ачаалагчийн гарчиг
`<h2></h2>`	h2. Ачаалагчийн гарчиг
`<h3></h3>`	h3. Ачаалагчийн гарчиг
`<h4></h4>`	h4. Ачаалагчийн гарчиг
`<h5></h5>`	h5. Ачаалагчийн гарчиг
`<h6></h6>`	h6. Ачаалагчийн гарчиг

Жагсаалтууд

Бүх жагсаалт— <ul>, <ol>, болон — <dl>хасагдсан margin-topбөгөөд margin-bottom: 1rem. Оруулсан жагсаалтад байхгүй margin-bottomбайна.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Масса дахь бүхэл тоо
Дээд зэрэглэлийн nisl aliquet дахь Facilisis
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Идээний идээт ундаа
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutp at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Масса дахь бүхэл тоо
Дээд зэрэглэлийн nisl aliquet дахь Facilisis
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Илүү хялбар загвар, тодорхой шатлал, илүү сайн зайтай байхын тулд тайлбарын жагсаалтыг margins шинэчилсэн. <dd>дахин тохируулаад margin-leftнэмнэ 0үү margin-bottom: .5rem. <dt>s тод томруулсан байна.

Тодорхойлолтын жагсаалтууд: Тодорхойлолтын жагсаалт нь нэр томъёог тодорхойлоход төгс төгөлдөр юм.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.; Donec id elit non mi porta gravida at eget metus.
Малесуада порта: Etiam porta sem malesuada magna mollis euismod.

Урьдчилан форматласан текст

Элементийг <pre>устгахын тулд дахин тохируулж , нэгжийг margin-topашиглана .remmargin-bottom

.example-element {
  захын доод хэсэг: 1rem;
}

Хүснэгтүүд

Хүснэгтүүдийг хэв маягт бага зэрэг тохируулж, хүрээг буулгаж, бүхэлд <caption>нь жигд байлгахыг баталгаажуулдаг text-align. Хил, дэвсгэр болон бусад нэмэлт өөрчлөлтүүд нь .tableангийн хамт ирдэг .

Энэ бол жишээ хүснэгт бөгөөд агуулгыг тайлбарлах тайлбар юм.
Хүснэгтийн гарчиг	Хүснэгтийн гарчиг	Хүснэгтийн гарчиг	Хүснэгтийн гарчиг
Хүснэгтийн нүд	Хүснэгтийн нүд	Хүснэгтийн нүд	Хүснэгтийн нүд
Хүснэгтийн нүд	Хүснэгтийн нүд	Хүснэгтийн нүд	Хүснэгтийн нүд
Хүснэгтийн нүд	Хүснэгтийн нүд	Хүснэгтийн нүд	Хүснэгтийн нүд

Маягтууд

Хялбар үндсэн хэв маягийн хувьд янз бүрийн хэлбэрийн элементүүдийг дахин ачаалсан. Энд хамгийн анхаарал татахуйц өөрчлөлтүүдийн зарим нь байна:

<fieldset>s нь ямар ч хил хязгааргүй, дүүргэгч, захын зайгүй тул тэдгээрийг бие даасан оролт эсвэл бүлгийн оролтын хувьд хялбархан боодол болгон ашиглаж болно.
<legend>s нь талбарын багцын нэгэн адил гарчгийг гарчиг болгон харуулахаар өөрчилсөн.
<label>s-ийг хэрэглэхийг display: inline-blockзөвшөөрөхөөр тохируулсан margin.
<input>s, <select>s, <textarea>s, болон <button>s-г ихэвчлэн Normalize-д ханддаг боловч Reboot нь тэдгээрийн marginболон багцуудыг устгадаг line-height: inherit.
<textarea>s-ийг зөвхөн босоо чиглэлд өөрчлөх боломжтой болгож өөрчилсөн тул хэвтээ хэмжээсийг өөрчлөх нь ихэвчлэн хуудасны бүтцийг "эвдүүлдэг".

Эдгээр өөрчлөлтүүд болон бусад зүйлсийг доор харуулав.

Үлгэр домог

Жишээ оролт

Жишээ сонгох

Энэ хайрцгийг шалгана уу

Эхний сонголт бол энэ, тэр юм Хоёрдахь сонголт бол эдгээр гоёмсог маягтын хяналтын багцыг харуулахад маш урт хугацаа юм. Гурав дахь сонголт идэвхгүй байна

Текстийн талбарын жишээ

Жишээ огноо

Жишээ цаг

Жишээ гаралт 100

Төрөл бүрийн элементүүд

Хаяг

Элемент нь хөтчийн өгөгдмөл тохиргоог -с <address>дахин тохируулахаар шинэчлэгдсэн . одоо бас өвлөгдөж, нэмсэн. s нь хамгийн ойрын өвөг дээдсийн (эсвэл бүхэл бүтэн ажлын хэсэг) холбоо барих мэдээллийг танилцуулах зориулалттай. Мөрүүдийг төгсгөл болгож форматыг хадгална.font-styleitalicnormalline-heightmargin-bottom: 1rem<address><br>

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Бүтэн нэр
[email protected]

Блок ишлэл

Блок ишлэл дээрх өгөгдмөл marginнь 1em 40px, тиймээс бид үүнийг 0 0 1remбусад элементүүдтэй илүү нийцүүлэхийн тулд дахин тохируулна.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бүхэл тоо нь ante.

Эх сурвалжийн гарчигт алдартай нэгэн

Дотор элементүүд

Элемент нь <abbr>догол мөрний текст дундаас ялгарах үндсэн хэв маягийг хүлээн авдаг.

Nulla attr vitae elit libero, a pharetra augue.

Дүгнэлт

Дүгнэлт дээр өгөгдмөл cursorнь text, тиймээс бид pointerтүүн дээр дарснаар тухайн элементтэй харьцах боломжтой байхын тулд үүнийг дахин тохируулсан.

Зарим дэлгэрэнгүй мэдээлэл

Дэлгэрэнгүй мэдээллийг дэлгэрэнгүй.

Бүр илүү дэлгэрэнгүй

Дэлгэрэнгүй байдлын талаар илүү дэлгэрэнгүй мэдээлэл энд байна.

HTML5 `[hidden]`шинж чанар

HTML5 нь өгөгдмөлөөр загварчилсан шинэ глобал шинж чанарыг нэмдэг. [hidden]PureCSSdisplay: none - ээс санаа авч , бид үүнийг санамсаргүй дарагдахаас урьдчилан сэргийлэхийн тулд анхдагч тохиргоог сайжруулж байна. Хэдийгээр IE10-аар дэмжигдээгүй ч манай CSS-ийн тодорхой мэдэгдэл нь энэ асуудлыг тойрч гардаг.[hidden] { display: none !important; }display[hidden]

<input type="text" hidden>

jQuery-ийн үл нийцэх байдал

[hidden]$(...).hide()jQuery болон $(...).show()аргуудтай нийцэхгүй байна . Тиймээс бид элементүүдийг [hidden]удирдах бусад арга техникийг одоогоор төдийлөн сайшаахгүй байна .display

Элементийн харагдах байдлыг солихын тулд, өөрөөр хэлбэл энэ displayнь өөрчлөгдөөгүй бөгөөд тухайн элемент нь баримт бичгийн урсгалд нөлөөлөх боломжтой хэвээр байхын тулд оронд нь .invisibleклассыг ашиглана уу.