Bootstrap ашиглаж эхлээрэй

Bootstrap бол хүчирхэг, олон функцээр дүүрэн урд талын хэрэгсэл юм. Прототипээс эхлээд үйлдвэрлэл хүртэлх бүх зүйлийг хэдхэн минутын дотор бүтээ.

Энэ хуудсан дээр

Хурдан эхлэх

Эхлэхийн тулд Bootstrap-ийн үйлдвэрлэлд бэлэн CSS болон JavaScript-г CDN-ээр дамжуулан ямар ч бүтээх алхамгүйгээр суулгаарай. Үүнийг Bootstrap CodePen демо ашиглан практик дээр үзээрэй .

index.htmlТөслийн үндсэн хэсэгт шинэ файл үүсгэнэ үү . Мобайл төхөөрөмжид зохих хариу үйлдэл<meta name="viewport"> үзүүлэхийн тулд шошгыг мөн оруулаарай .

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Bootstrap-ийн CSS болон JS-г оруулаарай. Хаалтын өмнө манай CSS-д зориулсан <link>шошгыг , мөн JavaScript багцын шошгыг (унтраах цэс, поппер, хэрэгслийн зөвлөмжийг байрлуулах Попперыг оруулаад) байрлуул . Манай CDN холбоосуудын талаар илүү ихийг мэдэж аваарай .<head><script></body>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

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

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

Сайн уу, дэлхий! Өөрийн Bootstrapped хуудсыг харахын тулд сонгосон хөтөч дээрээ хуудсыг нээнэ үү. Одоо та Bootstrap ашиглан өөрийн зохион байгуулалтыг үүсгэж , олон арван бүрэлдэхүүн хэсгүүдийг нэмж, манай албан ёсны жишээнүүдийг ашиглан бүтээж эхлэх боломжтой .

CDN холбоосууд

Лавлагааны хувьд энд бидний үндсэн CDN холбоосууд байна.

Тодорхойлолт	URL
CSS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
JS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

Та мөн CDN ашиглан Агуулгын хуудсанд жагсаасан манай нэмэлт бүтээцийг татаж авах боломжтой .

Дараагийн алхмууд

Bootstrap-ийн ашигладаг дэлхийн орчны чухал тохиргооны талаар бага зэрэг уншина уу .
Манай контентын хэсгээс Bootstrap-д юу багтсан тухай болон JavaScript-г шаарддаг бүрэлдэхүүн хэсгүүдийн жагсаалтыг доороос уншина уу.
Жаахан илүү хүч хэрэгтэй байна уу? Багц менежерээр дамжуулан эх файлуудыг оруулах замаар Bootstrap ашиглан бүтээх талаар бодож үзээрэй .
Bootstrap-г модуль болгон ашиглахыг хүсч байна <script type="module">уу? Манай Bootstrap-ийг модуль болгон ашиглах хэсгээс үзнэ үү.

JS бүрэлдэхүүн хэсгүүд

Ямар бүрэлдэхүүн хэсэг нь манай JavaScript болон Popper-ийг шаарддагийг сонирхож байна уу? Доорх бүрэлдэхүүн хэсгүүдийг харуулах холбоос дээр дарна уу. Хэрэв та хуудасны ерөнхий бүтцийн талаар эргэлзэж байгаа бол хуудасны жишээний загварыг үргэлжлүүлэн уншаарай.

JavaScript шаардлагатай бүрэлдэхүүн хэсгүүдийг харуулах

Хаах тухай анхааруулга
Нөхцөл байдал болон шалгах хайрцаг/радио функцийг солих товчлуурууд
Слайдын бүх үйлдэл, хяналт, үзүүлэлтүүдийн тойруулга
Агуулгын харагдацыг унтраахын тулд буулгана уу
Харуулж, байршуулах унадаг цэсүүд (мөн Поппер шаардлагатай )
Үзүүлэн харуулах, байрлуулах, гүйлгэх зан үйлийн загварууд
Манай Collapse болон Offcanvas залгаасуудыг өргөтгөж, хариу үйлдэл үзүүлэхийн тулд Navbar
Агуулгын самбарыг сэлгэхийн тулд Tab залгаастай Navs
Харуулах, байршуулах, гүйлгэх үйлдлийг гүйцэтгэхэд зориулагдсан Offcanvases
Scrollspy нь гүйлгэх үйлдэл болон навигацийн шинэчлэлтүүдийг авах боломжтой
Үзүүлэн харуулах, үл тоомсорлох шарсан талх
Харуулах, байршуулах зөвлөмж, поповер (мөн Поппер шаардлагатай )

Дэлхийн чухал хүмүүс

Bootstrap нь дэлхийн хэмжээний хэд хэдэн чухал загвар, тохиргоог ашигладаг бөгөөд тэдгээр нь бараг зөвхөн хөтчийн хэв маягийг хэвийн болгоход чиглэгддэг . Усанд орцгооё.

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

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

<!doctype html>
<html lang="en">
  ...
</html>

Хариуцлагатай мета шошго

Bootstrap нь эхлээд гар утсанд зориулагдсан бөгөөд бид эхлээд мобайл төхөөрөмжийн кодыг оновчтой болгож, дараа нь CSS медиа асуулга ашиглан шаардлагатай бол бүрэлдэхүүн хэсгүүдийн хэмжээг нэмэгдүүлэх стратеги юм. Бүх төхөөрөмжид тохирох дүрслэл, мэдрэгчтэй томруулагчийг баталгаажуулахын тулд өөрийн <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

Үүний жишээг та хурдан эхлүүлэхээс харж болно.

Хайрцагны хэмжээ

CSS-ийн хэмжээг илүү хялбар болгохын тулд бид глобал утгыг box-sizing-аас шилжүүлдэг . Энэ нь элементийн эцсийн тооцоолсон өргөнд нөлөөлөхгүй гэдгийг баталгаажуулдаг боловч Google Maps болон Google Custom Search Engine зэрэг гуравдагч талын програм хангамжид асуудал үүсгэж болзошгүй юм.content-boxborder-boxpadding

Ховор тохиолдолд та үүнийг хүчингүй болгох шаардлагатай бол дараахь зүйлийг ашиглана уу.

.selector-for-some-widget {
  box-sizing: content-box;
}

Дээрх хэсэгчилсэн байдлаар, ::beforeболон дамжуулан үүсгэсэн агуулгыг багтаасан үүрлэсэн элементүүд ::afterбүгд үүнд заасан зүйлийг өвлөх box-sizingболно .selector-for-some-widget.

Хайрцагны загвар болон хэмжээсийн талаар CSS Tricks-ээс нэмэлт мэдээлэл аваарай .

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

Хөтөч хоорондын дамжуулалтыг сайжруулахын тулд бид хөтчүүд болон төхөөрөмжүүд дээрх үл нийцэх байдлыг засахын тулд дахин ачаалах функцийг ашигладаг бол нийтлэг HTML элементүүдэд арай илүү үзэл бодолтой дахин тохируулга хийдэг.

Нийгэмлэг

Bootstrap-ийн хөгжлийн талаар цаг тухайд нь мэдээлэлтэй байж, эдгээр хэрэгцээт эх сурвалжуудыг ашиглан нийгэмд хандаарай.

The Official Bootstrap блогийг уншиж, бүртгүүлнэ үү .
Манай GitHub хэлэлцүүлгийг асууж судлаарай .
IRC дахь ачаалагч нартай чатлах. irc.libera.chatСервер дээр, суваг #bootstrapдээр.
bootstrap-5Хэрэгжүүлэх тусламжийг Stack Overflow (tagged ) дээрээс олж болно .
Хөгжүүлэгчид npm эсвэл үүнтэй төстэй дамжуулах механизмаар bootstrapдамжуулан түгээхдээ Bootstrap-ийн функцийг өөрчлөх эсвэл нэмэх багцууд дээр түлхүүр үгийг ашиглах ёстой .

Та мөн Twitter дээр @getbootstrap- г дагаж сүүлийн үеийн хов жив, гайхалтай хөгжмийн видеог үзэх боломжтой.