Source

Оршил

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

Хурдан эхлэх

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

CSS

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

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

JS

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

Бид jQuery-ийн нимгэн бүтцийг ашигладаг боловч бүрэн хувилбарыг нь дэмждэг.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

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

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

JavaScript шаардлагатай бүрэлдэхүүн хэсгүүдийг харуулах
  • Хаах тухай анхааруулга
  • Төлөв болон шалгах хайрцаг/радио функцийг сэлгэх товчлуурууд
  • Слайдын бүх үйлдэл, хяналт, үзүүлэлтүүдийн тойруулга
  • Агуулгын харагдацыг сэлгэхийн тулд буулгана уу
  • Харуулж , байршуулах унадаг цэсүүд (мөн Popper.js шаардлагатай )
  • Үзүүлэн харуулах, байршуулах, гүйлгэх зан үйлийн загварууд
  • Хариу үйлдэл үзүүлэхийн тулд манай Collapse залгаасыг өргөтгөх Navbar
  • Харуулах, байршуулах зөвлөмж , поповер (мөн Popper.js шаардлагатай )
  • 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-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" 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-ийн хөгжүүлэлтийн талаар цаг тухайд нь мэдээлэлтэй байж, эдгээр хэрэгцээт эх сурвалжуудыг ашиглан нийгэмд хандаарай.

  • Twitter дээр @getbootstrap- г дага .
  • The Official Bootstrap блогийг уншиж, бүртгүүлнэ үү .
  • IRC дахь ачаалагч нартай чатлах. irc.freenode.netСервер дээр, суваг ##bootstrapдээр.
  • bootstrap-4Хэрэгжүүлэх тусламжийг Stack Overflow (tagged ) дээрээс олж болно .
  • Хөгжүүлэгчид npm эсвэл үүнтэй төстэй дамжуулах механизмаар bootstrapдамжуулан түгээхдээ Bootstrap-ийн функцийг өөрчлөх эсвэл нэмэх багц дээр түлхүүр үгийг ашиглах ёстой .

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