Source

Sava lalana

Atombohy amin'ny Bootstrap, rafitra malaza indrindra eran-tany amin'ny fananganana tranokala mandray andraikitra, voalohany amin'ny finday, miaraka amin'ny jsDelivr sy pejy fanombohana môdely.

Manomboka haingana

Mitady hampiditra haingana ny Bootstrap amin'ny tetikasanao? Ampiasao ny jsDelivr, omen'ny olona ao amin'ny jsDelivr maimaimpoana. Mampiasa mpitantana fonosana sa mila misintona ireo rakitra loharano? Mankanesa any amin'ny pejy fampidinana.

CSS

Adikao-mametaka ao amin'ny takelakao ny stylesheet <link>alohan'ny <head>hafa rehetra hampidirana ny CSS.

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

JS

Maro amin'ireo singantsika no mitaky ny fampiasana JavaScript mba hiasa. Indrindra indrindra, mitaky jQuery , Popper.js , ary ny plugins JavaScript antsika manokana izy ireo. <script>Apetraho eo akaikin'ny faran'ny pejinao ireto s manaraka ireto, alohan'ny </body>marika famaranana, mba hahafahan'izy ireo. Ny jQuery dia tsy maintsy tonga aloha, avy eo Popper.js, ary avy eo ny plugins JavaScript.

Mampiasa jQuery's slim build , fa ny dikan-teny feno dia tohana ihany koa.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Manontany tena hoe inona no singa mitaky mazava ny jQuery, ny JS, ary ny Popper.js? Kitiho ny rohy aseho eto ambany. Raha tsy azonao antoka mihitsy ny momba ny firafitry ny pejy ankapobeny dia tohizo ny famakiana ny môdely pejy ohatra.

Asehoy ireo singa mila JavaScript
  • Fanairana ho an'ny fandroahana
  • Bokotra ho an'ny fampandehanana fanjakana sy ny fampandehanana ny boaty/radio
  • Carousel ho an'ny fihetsika, fanaraha-maso ary tondro rehetra
  • Mirodana noho ny famadihana ny fahitana ny atiny
  • Dropdowns ho an'ny fampisehoana sy fametrahana toerana (mitaky Popper.js ihany koa )
  • Modely amin'ny fampisehoana, ny fametrahana ary ny fihetsika amin'ny horonana
  • Navbar amin'ny fanitarana ny plugin Collapse mba hampiharana ny fitondrantena mandray andraikitra
  • Tooltips sy popover ho an'ny fampisehoana sy ny fametrahana (mitaky Popper.js ihany koa )
  • Scrollspy ho an'ny fihetsehan'ny horonana sy fanavaozana ny fitetezana

Modely fanombohana

Ataovy azo antoka fa amboarina miaraka amin'ny fenitry ny famolavolana sy fampandrosoana farany ny pejinao. Midika izany fa mampiasa doctype HTML5 ary mampiditra meta tag viewport ho an'ny fitondran-tena mety. Ampifandraiso daholo izany ary ny pejinao dia tokony ho toy izao:

<!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-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 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.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

Izay ihany no ilainao amin'ny fitakiana pejy ankapobeny. Tsidiho ny Layout docs na ny ohatra ofisialy mba hanombohana ny fametrahana ny atiny sy ny singa ao amin'ny tranokalanao.

Globals manan-danja

Bootstrap dia mampiasa fomba sy toe-javatra manan-danja eran-tany vitsivitsy izay tokony ho fantatrao amin'ny fampiasana azy, izay saika miompana manokana amin'ny fanamafisana ny fomba navigateur cross avokoa. Andao hiroboka.

HTML5 doctype

Ny Bootstrap dia mitaky ny fampiasana ny HTML5 doctype. Raha tsy misy an'io dia hahita endrika tsy feno mahatsikaiky ianao, fa ny fampidirana azy io dia tsy tokony hiteraka hiccups be.

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

Mamaly meta tag

Ny Bootstrap dia novolavolaina voalohany ho an'ny finday , paikady izay ahafahantsika manatsara ny kaody ho an'ny fitaovana finday aloha ary avy eo mampitombo ny singa araka izay ilaina amin'ny alàlan'ny fangatahana media CSS. Mba hiantohana ny famandrihana araka ny tokony ho izy sy ny zooming mikasika ny fitaovana rehetra, ampio ny meta tag viewport mandray andraikitra amin'ny <head>.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Azonao atao ny mahita ohatra amin'izany amin'ny hetsika ao amin'ny môdely fanombohana .

Fametahana boaty

For more straightforward sizing in CSS, we switch the global box-sizing value from content-box to border-box. This ensures padding does not affect the final computed width of an element, but it can cause problems with some third party software like Google Maps and Google Custom Search Engine.

On the rare occasion you need to override it, use something like the following:

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

With the above snippet, nested elements—including generated content via ::before and ::after—will all inherit the specified box-sizing for that .selector-for-some-widget.

Learn more about box model and sizing at CSS Tricks.

Reboot

For improved cross-browser rendering, we use Reboot to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.

Community

Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.

  • Follow @getbootstrap on Twitter.
  • Read and subscribe to The Official Bootstrap Blog.
  • Chat with fellow Bootstrappers in IRC. On the irc.freenode.net server, in the ##bootstrap channel.
  • Implementation help may be found at Stack Overflow (tagged bootstrap-4).
  • Ny mpamorona dia tokony hampiasa ny teny fototra bootstrapamin'ny fonosana izay manova na manampy amin'ny fiasan'ny Bootstrap rehefa mizara amin'ny npm na mekanika fanaterana mitovitovy amin'izany mba hahitana haingana indrindra.

Azonao atao ihany koa ny manaraka @getbootstrap ao amin'ny Twitter ho an'ny fifosana farany sy horonan-tsary mahafinaritra.