in English

Ներածություն

Սկսեք Bootstrap-ով, որն աշխարհում ամենահայտնի շրջանակն է՝ պատասխանատու, առաջին հերթին բջջային կայքեր ստեղծելու համար, jsDelivr-ով և կաղապարի մեկնարկային էջով:

Արագ մեկնարկ

Ցանկանու՞մ եք արագ ավելացնել Bootstrap-ը ձեր նախագծին: Օգտագործեք jsDelivr՝ անվճար բաց կոդով CDN: Օգտագործո՞ւմ եք փաթեթի կառավարիչ, թե՞ պետք է ներբեռնել աղբյուրի ֆայլերը: Գնացեք ներբեռնումների էջ :

CSS

Պատճենեք-տեղադրեք ոճաթերթը <link>ձեր մեջ <head>բոլոր մյուս ոճաթերթերից առաջ՝ մեր CSS-ը բեռնելու համար:

<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-ի բարակ կառուցվածքը , սակայն ամբողջական տարբերակը նույնպես ապահովված է:

Տեղադրեք ստորև նշվածներից<script> մեկը ձեր էջերի վերջի մոտ՝ փակման պիտակից անմիջապես առաջ ՝</body> դրանք միացնելու համար: jQuery-ն պետք է գա առաջինը, հետո Popper-ը, իսկ հետո մեր JavaScript պլագինները:

Փաթեթ

Ներառեք Bootstrap JavaScript-ի յուրաքանչյուր պլագին մեր երկու փաթեթներից մեկի հետ: Երկուսն էլ bootstrap.bundle.js, և bootstrap.bundle.min.jsներառում է Popper- ը մեր գործիքների հուշումների և popover-ների համար, բայց ոչ 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>

Առանձին

Եթե ​​դուք որոշեք գնալ առանձին սկրիպտների լուծմանը, ապա Popper-ը պետք է գա առաջինը (եթե դուք օգտագործում եք գործիքի հուշումներ կամ popovers), ապա մեր 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
  • Ծանուցումներ աշխատանքից հեռացնելու համար
  • Կոճակներ՝ վիճակները փոխելու և վանդակ/ռադիո ֆունկցիոնալությունը փոխելու համար
  • Կարուսել սլայդի բոլոր վարքագծերի, հսկիչների և ցուցիչների համար
  • Ծալել՝ բովանդակության տեսանելիությունը փոխելու համար
  • Ցուցադրման և դիրքավորման բացվող պատուհաններ (նաև պահանջում է Popper )
  • Մոդալներ ցուցադրման, դիրքավորման և ոլորման վարքագծի համար
  • Navbar՝ մեր Collapse հավելվածը ընդլայնելու համար՝ արձագանքող վարքագիծն իրականացնելու համար
  • Scrollspy ոլորման վարքագծի և նավիգացիայի թարմացումների համար
  • Գործիքների հուշումներ և փոփերներ ցուցադրման և դիրքավորման համար (նաև պահանջում է Popper )

Սկսնակ ձևանմուշ

Համոզվեք, որ ձեր էջերը կազմված են դիզայնի և զարգացման վերջին ստանդարտներով: Դա նշանակում է օգտագործել HTML5 doctype և ներառել տեսադաշտի մետա թեգ՝ պատշաճ արձագանքող վարքագծի համար: Միավորեք այս ամենը միասին, և ձեր էջերը պետք է այսպիսի տեսք ունենան.

<!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-ի փաստաթղթերը կամ մեր պաշտոնական օրինակները ՝ ձեր կայքի բովանդակությունը և բաղադրիչները դասավորելու համար:

Կարևոր գլոբալներ

Bootstrap-ն օգտագործում է մի քանի կարևոր գլոբալ ոճեր և կարգավորումներ, որոնց մասին դուք պետք է տեղյակ լինեք այն օգտագործելիս, որոնք բոլորը գրեթե բացառապես ուղղված են բրաուզերի խաչաձեւ ոճերի նորմալացմանը : Եկեք սուզվենք:

HTML5 doctype

Bootstrap-ը պահանջում է օգտագործել HTML5 doctype: Առանց դրա, դուք կտեսնեք ինչ-որ զվարճալի թերի ոճավորում, բայց դրա ընդգրկումը չպետք է զգալի զկռտոց առաջացնի:

<!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արժեքը ից content-boxդեպի border-box: Սա երաշխավորում paddingէ, որ չի ազդի տարրի վերջնական հաշվարկված լայնության վրա, բայց դա կարող է խնդիրներ առաջացնել որոշ երրորդ կողմի ծրագրերի հետ, ինչպիսիք են Google Maps-ը և Google Custom Search Engine:

Հազվագյուտ դեպքերում, երբ դուք պետք է անտեսեք այն, օգտագործեք հետևյալը.

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

Վերոնշյալ հատվածով, nested տարրերը, ներառյալ գեներացված բովանդակությունը ::beforeև, ::afterբոլորը կժառանգեն դրա box-sizingհամար նախատեսվածը .selector-for-some-widget:

Իմացեք ավելին տուփի մոդելի և չափերի մասին CSS Tricks-ում :

Վերագործարկեք

Բրաուզերների միջև բարելավված մատուցման համար մենք օգտագործում ենք Reboot- ը՝ բրաուզերների և սարքերի միջև անհամապատասխանությունները շտկելու համար՝ միևնույն ժամանակ տրամադրելով HTML-ի սովորական տարրերի մի փոքր ավելի կարծիքի վերակայումներ:

Համայնք

Եղեք արդիական Bootstrap-ի զարգացման մասին և կապվեք համայնքի հետ այս օգտակար ռեսուրսների միջոցով:

  • Կարդացեք և բաժանորդագրվեք The Official Bootstrap բլոգին :
  • Զրուցեք ընկերակից Bootstrappers-ի հետ IRC-ում: irc.libera.chatՍերվերի վրա, ալիքում #bootstrap:
  • Իրականացման օգնությունը կարող եք գտնել Stack Overflow-ում (պիտակավորված bootstrap-4):
  • Ծրագրավորողները պետք է օգտագործեն հիմնաբառը bootstrapփաթեթների վրա, որոնք փոփոխում կամ ավելացնում են Bootstrap-ի ֆունկցիոնալությունը npm-ի կամ նմանատիպ առաքման մեխանիզմների միջոցով տարածելիս՝ առավելագույն հայտնաբերման համար:

Դուք կարող եք նաև հետևել @getbootstrap-ին Twitter-ում ՝ վերջին բամբասանքների և հիանալի երաժշտական ​​տեսահոլովակների համար:

CSP-ներ և ներկառուցված SVG-ներ

Bootstrap-ի մի քանի բաղադրիչներ ներառում են ներկառուցված SVG-ներ մեր CSS-ում՝ բրաուզերներում և սարքերում բաղադրիչները հետևողականորեն և հեշտությամբ ձևավորելու համար: CSP- ի ավելի խիստ կոնֆիգուրացիաներ ունեցող կազմակերպությունների համար մենք փաստաթղթավորել ենք մեր ներկառուցված SVG-ների բոլոր օրինակները (որոնք բոլորը կիրառվում են միջոցով background-image), որպեսզի կարողանաք ավելի մանրակրկիտ վերանայել ձեր տարբերակները:

Հիմնվելով համայնքի զրույցի վրա ՝ ձեր սեփական կոդերի բազայում դրան անդրադառնալու որոշ տարբերակներ ներառում են URL-ների փոխարինումը տեղական հյուրընկալող ակտիվներով, պատկերների հեռացում և ներկառուցված պատկերների օգտագործում (բոլոր բաղադրիչներում հնարավոր չէ) և ձեր CSP-ի փոփոխությունը: Մեր առաջարկությունն է ուշադիր վերանայել ձեր սեփական անվտանգության քաղաքականությունը և անհրաժեշտության դեպքում որոշել լավագույն առաջընթացը: