Bootstrap hmangin tan la rawh

Bootstrap hi frontend toolkit chak tak, feature tam tak awmna a ni. Eng thil pawh—prototype atanga production thlengin—minute tlemte chhungin siam rawh.

He page ah hian

A bul tan nghal vat

Bootstrap-a production-ready CSS leh JavaScript chu CDN hmangin build step engmah mamawh lovin dahin tan la rawh. He Bootstrap CodePen demo hmang hian practice-ah en rawh .

index.htmlI project root ah file thar siam rawh . Mobile device-a responsive behavior dik tak neih<meta name="viewport"> theih nan tag pawh telh bawk ang che .

<!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-a CSS leh JS te pawh telh bawk ang che. Kan CSS atan <link>tag chu dah la , kan JavaScript bundle atan tag (dropdown, poppers, leh tooltips positioning atan Popper pawh tel) kha khar hmain dah rawh Kan CDN link te hi zir belh rawh .<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>

Popper leh kan JS te pawh a hranin i dah thei bawk . Dropdown, popovers, tooltips hman i tum loh chuan Popper telh loh hmangin kilobyte engemaw zat save rawh.

<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>

Hello, khawvel! I browser i duh ang page kha hawng la, i Bootstrapped page chu i hmu ang. Tunah chuan Bootstrap hmangin building i tan thei tawh ang a , i layout siamin component dozens tam tak i dah belh a , kan official example te hmangin i siam thei tawh ang .

CDN link te a awm bawk

Reference atan kan primary CDN link te chu hetiang hi a ni.

Hrilhfiahna	URL a ni
CSS a ni	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
JS chuan a ti a	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

CDN hmang hian Contents page a kan build dang tarlan te pawh i la thei bawk .

A dawt leh tur

Bootstrap -in a hman thin global environment setting pawimawh thenkhat chungchang tlem chhiar belh rawh .
Bootstrap-a thil awmte chu kan contents section-ah leh a hnuaia JavaScript mamawh component list-ah hian chhiar la.
Power tlem tal i mamawh em? Bootstrap hmanga siam tum la, package manager kaltlangin source files te dah tel rawh .
Bootstrap hi module atan hman i zawng <script type="module">em ? Bootstrap hi module atan kan hman dan hi lo en ve teh .

JS component hrang hrang te

Eng component nge chiang taka kan JavaScript leh Popper mamawh? A hnuaia show components link ah hian click la. General page structure chungchangah i chiang lo tak tak a nih chuan, entirnan page template atan chhiar chhunzawm zel ang che.

JavaScript mamawh component te chu entir rawh

Hnawhchhuah a nih theihna tur alerts
State toggling tur button leh checkbox/radio hnathawh dan tur
Slide behavior zawng zawng, control leh indicator zawng zawng tan carousel
Content hmuh theihna toggling atan collapse rawh
Display leh positioning atan dropdowns ( Popper pawh a ngai bawk )
Modals te chu a lantir dan tur, a awmna tur hmun tur a ni a, scroll behavior te pawh a awm bawk
Navbar hian kan Collapse leh Offcanvas plugins te chu responsive behaviors implement turin kan tihzauh avangin
Content pane toggl theihna tur Tab plugin hmangin navs
Offcanvases te chu a lan dan tur, a awmna tur hmun tur leh scroll behavior tur a ni
Scroll awm dan leh navigation update te chu scrollspy hmangin
Toasts pholan leh paih chhuah nan
Tooltips leh popovers te entir leh dahna tur ( Popper pawh a ngai bawk )

Global pawimawh tak tak te

Bootstrap hian global style leh setting pawimawh tak tak a hmang a, chung zawng zawng hi cross browser style normalization lam hawia siam vek a ni deuh ber. Dive lut ila.

HTML5 doctype a ni

Bootstrap hian HTML5 doctype hman a ngai a. A tel lo chuan funky leh incomplete styling engemaw zat i hmu ang.

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

Meta tag chhang thei tak a ni

Bootstrap is developed mobile first , chu strategy a ni a, chu chu mobile devices tana code kan optimize hmasa a, chutah chuan CSS media query hmangin a tul angin components kan scale up thin. Device zawng zawng tana rendering leh touch zooming dik tak neih theih nan, i <head>.

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

Chutiang entirnan action-ah chuan quick start ah hian i hmu thei ang .

Box-sizing a ni

CSS-a sizing awlsam zawk neih duh chuan global box-sizingvalue content-boxchu border-box. Hei hian paddingelement pakhat final computed width a nghawng lo tih a tichiang a, mahse third-party software thenkhat Google Maps leh Google Custom Search Engine te nen harsatna a thlen thei a ni.

Override i mamawh hun tlemteah chuan a hnuaia mi ang hian hmang ang che:

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

A chunga snippet hmang hian nested elements—generated content via ::beforeleh te pawh tel— chumi atana ::aftertarlan chu an inherit vek angbox-sizing.selector-for-some-widget

Box model leh sizing chungchang hi CSS Tricks ah hian zir belh rawh .

Reboot leh rawh

Cross-browser rendering tihchangtlun nan Reboot kan hmang a, browser leh device hrang hranga inmil lohna siam\hat nan kan hmang a, chutih rualin HTML element pangngaiah ngaihdan nei reset tlem zawk kan pe bawk.

Khawtlang

Bootstrap siam dan tur hriat reng la, heng \anpui thei thilte hmang hian khawtlang hnenah thlen rawh.

The Official Bootstrap Blog chhiar la, subscribe rawh .
Kan GitHub Discussions te zawt la, chhui rawh .
IRC-a Bootstrapper thawhpui te nen inbiakna nei rawh. irc.libera.chatServer ah chuan, channel #bootstrapah.
Implementation tanpuina chu Stack Overflow (tagged ) ah hian hmuh theih a bootstrap-5ni.
Developer te chuan npm emaw a ang chi delivery mechanism bootstraphmanga an sem chhuah hunah Bootstrap hnathawh dan siam danglam emaw tihpun emaw package-ah keyword hi an hmang tur a ni a, chu chu maximum discoverability atan an hmang tur a ni.

Twitter-ah @getbootstrap hi i follow thei bawk a , thuthang thar leh music video mak tak tak i hmu thei bawk.