Оршил

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

Хурдан эхлэх

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

CSS

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

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

JS

Манай бүрэлдэхүүн хэсгүүдийн ихэнх нь ажиллахын тулд JavaScript ашиглахыг шаарддаг. Тодруулбал, jQuery , Popper болон бидний өөрсдийн JavaScript залгаасуудыг шаарддаг . Бид jQuery-ийн нимгэн бүтцийг ашигладаг боловч бүрэн хувилбарыг нь дэмждэг.

Дараах s -ийн аль нэгийг<script> хуудасныхаа төгсгөлд, хаалтын </body>шошгоны өмнө байрлуулж идэвхжүүлнэ үү. Эхлээд jQuery, дараа нь Поппер, дараа нь манай JavaScript залгаасууд байх ёстой.

Багц

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

Тусдаа

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

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

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

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

Хаах тухай анхааруулга
Нөхцөл байдал болон шалгах хайрцаг/радио функцийг солих товчлуурууд
Слайдын бүх үйлдэл, хяналт, үзүүлэлтүүдийн тойруулга
Агуулгын харагдацыг сэлгэхийн тулд буулгана уу
Харуулж, байршуулах унадаг цэсүүд (мөн Поппер шаардлагатай )
Үзүүлэн харуулах, байрлуулах, гүйлгэх зан үйлийн загварууд
Хариу үйлдэл үзүүлэхийн тулд манай Collapse залгаасыг өргөтгөх Navbar
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, shrink-to-fit=no">

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

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

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

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" 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, shrink-to-fit=no">

Та үүний жишээг эхлүүлэх загвараас харж болно.

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

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

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

CSP болон суулгагдсан SVG

Хэд хэдэн Bootstrap бүрэлдэхүүн хэсэг нь манай CSS-д суулгагдсан SVG-г агуулдаг бөгөөд хөтчүүд болон төхөөрөмжүүд дээр бүрэлдэхүүн хэсгүүдийг тогтмол бөгөөд хялбар загварчлах боломжтой. Илүү хатуу CSP тохиргоотой байгууллагуудын хувьд бид суулгасан SVG-н бүх тохиолдлыг баримтжуулсан (бүгдийг нь -р дамжуулан ашигладаг background-image) тул та сонголтуудаа сайтар нягталж үзэх боломжтой.

Хаах товчлуур (анхаарал болон загварт ашигладаг)
Захиалгат шалгах хайрцаг болон радио товчлуурууд
Маягтын шилжүүлэгч
Маягтын баталгаажуулалтын дүрсүүд
Тусгай сонголттой цэсүүд
Тойрог удирдлага
Navbar сэлгэх товчлуурууд

Олон нийтийн харилцан ярианд үндэслэн үүнийг өөрийн кодын санд шийдвэрлэх зарим сонголтууд нь URL-уудыг локал байршуулсан хөрөнгөөр солих, зургуудыг устгах, доторлогооны зургийг ашиглах (бүх бүрэлдэхүүн хэсэгт боломжгүй) болон CSP-ээ өөрчлөх зэрэг орно. Бидний санал болгож буй зүйл бол аюулгүй байдлын бодлогоо сайтар хянаж үзээд, шаардлагатай бол хамгийн сайн замыг сонгох явдал юм.