Оршил

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

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

Хурдан эхлэх

Та төсөлдөө Bootstrap-г хурдан нэмэхийг хүсч байна уу? Үнэгүй нээлттэй эхийн CDN-г jsDelivr ашиглана уу. Багц менежер ашиглаж байна уу эсвэл эх файлуудыг татаж авах шаардлагатай юу? Татаж авах хуудас руу очно уу .

CSS

Манай CSS-г ачаалахын тулд загварын хүснэгтийг бусад бүх загварын хуудас <link>руу хуулж буулгана уу.<head>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

JS

Манай бүрэлдэхүүн хэсгүүдийн ихэнх нь ажиллахын тулд JavaScript ашиглахыг шаарддаг. Тодруулбал, тэд өөрсдийн JavaScript залгаасууд болон Popper . Дараах s -ийн аль нэгийг<script> хуудасныхаа төгсгөлд, хаалтын </body>шошгоны өмнө байрлуулж идэвхжүүлнэ үү.

Багц

Манай хоёр багцын аль нэгэнд Bootstrap JavaScript залгаас болон хамаарлыг оруулаарай. Хоёуланг нь манай заавар bootstrap.bundle.jsболон поповерт Попперыг оруулаарайbootstrap.bundle.min.js . Bootstrap-д юу багтсан талаар дэлгэрэнгүй мэдээлэл авахыг хүсвэл манай агуулгын хэсгээс үзнэ үү.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Тусдаа

Хэрэв та тусдаа скриптийн шийдлийг ашиглахаар шийдсэн бол Поппер эхлээд (хэрэв та зааварчилгаа эсвэл поповер ашиглаж байгаа бол), дараа нь манай JavaScript залгаасуудыг ашиглах ёстой.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

Модулиуд

Хэрэв та ашиглаж <script type="module">байгаа бол манай Bootstrap-г модуль болгон ашиглах хэсгээс үзнэ үү.

Бүрэлдэхүүн хэсгүүд

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

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

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

Эхлэх загвар

Хуудаснуудаа хамгийн сүүлийн үеийн дизайн, хөгжүүлэлтийн стандартаар тохируулахаа мартуузай. Энэ нь HTML5 баримт бичгийн төрлийг ашиглаж, зөв хариу үйлдэл үзүүлэхийн тулд харах талбарын мета шошгыг оруулна гэсэн үг юм. Бүгдийг нь нийлүүлж, таны хуудас дараах байдлаар харагдах болно.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Дараагийн алхмуудыг хийхийн тулд Layout docs эсвэл манай албан ёсны жишээн дээр очиж сайтынхаа контент болон бүрэлдэхүүн хэсгүүдийг байрлуулж эхэлнэ үү.

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

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

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