Дахин ачаална уу
Нэг файл дахь элементэд хамаарах CSS өөрчлөлтүүдийн цуглуулга бүхий Reboot нь Bootstrap-г эхлүүлж, дэгжин, тууштай, энгийн суурь үзүүлэлтийг бий болгоно.
Арга барил
Дахин ачаалах нь Normalize дээр суурилдаг бөгөөд зөвхөн элемент сонгогчийг ашиглан олон HTML элементүүдийг бага зэрэг үзэл бодолтой хэв маягаар хангадаг. Нэмэлт сарлагийн саваг нь зөвхөн ангиудад хийгддэг. Жишээ нь, бид зарим <table>
хэв маягийг илүү хялбар болгох үүднээс дахин ачаалж, дараа нь .table
, .table-bordered
, болон бусад зүйлсийг өгдөг.
Дахин ачаалахад юуг хүчингүй болгохыг сонгох заавар, шалтгаанууд энд байна:
- Хэмжих боломжтой бүрэлдэхүүн хэсгүүдийн зайнд s-ийн
rem
оронд s -г ашиглахын тулд хөтчийн өгөгдмөл утгыг шинэчилнэ үү .em
- зайлсхийх
margin-top
. Босоо ирмэгүүд нурж, гэнэтийн үр дүнд хүрч болзошгүй. Хамгийн гол нь нэг чиглэлmargin
нь илүү энгийн сэтгэцийн загвар юм. - Төхөөрөмжийн хэмжээг илүү хялбар болгохын тулд блокийн элементүүд нь
rem
s-дmargin
s-г ашиглах ёстой. font
-холбоотой шинж чанаруудын мэдэгдлийгinherit
аль болох бага байлгах.
Хуудасны өгөгдмөл
Хуудасны хэмжээнд илүү сайн өгөгдмөл болгох үүднээс <html>
болон <body>
элементүүдийг шинэчилсэн. Илүү тодорхой:
- болон , -ийг оруулаад
box-sizing
бүх элемент дээр дэлхий даяар тохируулагдсан . Энэ нь элементийн зарласан өргөнийг дэвсгэр эсвэл хүрээний улмаас хэзээ ч хэтрүүлэхгүй байхыг баталгаажуулдаг.*::before
*::after
border-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 macOS and iOS (San Francisco)
-apple-system,
// Chrome < 56 for macOS (San Francisco)
BlinkMacSystemFont,
// Windows
"Segoe UI",
// Android
Roboto,
// Basic web fallback
"Helvetica Neue", Arial,
// Linux
"Noto Sans",
"Liberation Sans",
// Sans serif fallback
sans-serif,
// Emoji fonts
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
Фонтын стек нь эможи фонтыг агуулсан байдаг тул олон нийтлэг тэмдэг/dingbat Юникод тэмдэгтүүдийг олон өнгийн пиктограф хэлбэрээр үзүүлэх болно гэдгийг анхаарна уу. Хөтөч/платформын уугуул эможи фонтод ашигласан загвараас хамааран тэдгээрийн гадаад төрх өөр өөр байх ба ямар ч CSS color
загварт нөлөөлөхгүй.
Үүнийг 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
байна.
- Бүх жагсаалтын дээд захын зай хасагдсан байна
- Мөн тэдний доод маржин хэвийн болсон
- Оруулсан жагсаалтад доод зах байхгүй
- Ингэснээр тэд илүү жигд харагдах болно
- Ялангуяа дараа нь илүү олон жагсаалтын зүйл байвал
- Зүүн жийргэвчийг мөн шинэчилсэн
- Энд дараалсан жагсаалт байна
- Жагсаалтын цөөн хэдэн зүйлтэй
- Энэ нь ерөнхий дүр төрхтэй ижил байна
- Өмнөх эрэмблэгдээгүй жагсаалт шиг
Хялбар загвар, тодорхой шатлал, илүү сайн зай авахын тулд тайлбарын жагсаалтыг margin
s шинэчилсэн. <dd>
дахин тохируулаад margin-left
нэмнэ 0
үү margin-bottom: .5rem
. <dt>
s тод томруулсан байна.
- Тодорхойлолтын жагсаалтууд
- Тодорхойлолтын жагсаалт нь нэр томъёог тодорхойлоход төгс төгөлдөр юм.
- Хугацаа
- Нэр томъёоны тодорхойлолт.
- Ижил нэр томъёоны хоёр дахь тодорхойлолт.
- Өөр нэг нэр томъёо
- Энэ өөр нэр томъёоны тодорхойлолт.
Урьдчилан форматласан текст
Элементийг <pre>
устгахын тулд дахин тохируулж , нэгжийг margin-top
ашиглана .rem
margin-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-ийг зөвхөн босоо чиглэлд өөрчлөх боломжтой болгож өөрчилсөн тул хэвтээ хэмжээсийг өөрчлөх нь ихэвчлэн хуудасны бүтцийг "эвдүүлдэг".<button>
s болон<input>
товчлуурын элементүүд ньcursor: pointer
хэзээ:not(:disabled)
.
Эдгээр өөрчлөлтүүд болон бусад зүйлсийг доор харуулав.
Товчлуур дээрх заагч
role="button"
Дахин ачаалах нь үндсэн курсорыг өөрчлөх сайжруулалтыг агуулдаг pointer
. Элементүүд интерактив байгааг харуулахын тулд энэ шинж чанарыг элементүүдэд нэмнэ үү. Өөрийнхөө өөрчлөлтийг <button>
авдаг элементүүдэд энэ үүрэг шаардлагагүй .cursor
<span role="button" tabindex="0">Non-button element button</span>
Төрөл бүрийн элементүүд
Хаяг
Элемент нь хөтчийн өгөгдмөл тохиргоог -с <address>
дахин тохируулахаар шинэчлэгдсэн . одоо бас өвлөгдөж, нэмэгдсэн байна. s нь хамгийн ойрын өвөг дээдсийн (эсвэл бүхэл бүтэн ажлын хэсэг) холбоо барих мэдээллийг танилцуулах зориулалттай. Мөрүүдийг төгсгөл болгож форматыг хадгал .font-style
italic
normal
line-height
margin-bottom: 1rem
<address>
<br>
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Бүтэн нэр
first.last@example.com
Блок ишлэл
Блок ишлэл дээрх өгөгдмөл margin
нь 1em 40px
, тиймээс бид үүнийг 0 0 1rem
бусад элементүүдтэй илүү нийцүүлэхийн тулд дахин тохируулна.
Блок ишлэлд агуулагдсан алдартай ишлэл.
Дотор элементүүд
Элемент нь <abbr>
догол мөрний текстээс ялгарах үндсэн хэв маягийг хүлээн авдаг.
Дүгнэлт
Дүгнэлт дээр өгөгдмөл 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
классыг ашиглана уу.