logo

Práce s Bootstrap:Část 3

Vytvořte titulek BootStrap

  • Nyní pojďme postavit něco od nuly, abychom si procvičili své dovednosti v HTML, CSS a Bootstrap. FreeCodeCamp Poskytuje nám následující pokyny.

  • Nejprve vytvořte prvek h3 s textem jQuery Playground.

  • Potom si vybarvěte h3 prvek s text-primary Bootstrap třídu a vycentrujte ji pomocí text-center Třída bootstrap. 

<h3 class="text-primary text-center">JQuery Playground</h3>

Umístěte naši stránku do oddílu Bootstrap kontejner-fluid

  • Pokračujeme z minulé lekce a nyní chtějí, abychom se ujistili, že veškerý obsah na vaší stránce reaguje na mobilní zařízení.

  • Vnořením h3 prvek v rámci div prvek s třídou container-fluid . 

<div class="container=fluid
<h3 class="text-primary text-center">JQuery Playground</h3>

</div>

Vytvoření řádku Bootstrap, rozdělení řádku, jamky bootstrapu, přidání prvků do jamek Bootstrap, použití výchozího stylu tlačítka bootstrap..

  • FreeCodeCamp jen chtěl, abychom do našeho kódu přidali další věci, protože níže nevidíte nic nového kromě jamek, které mohou vytvořit vizuální dojem hloubky vašich sloupců.
<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <div class="well">
        <button class="btn btn-default"></button>
        <button class="btn btn-default"></button>
        <button class="btn btn-default"></button>
      </div>
    </div>
    <div class="col-xs-6">
      <div class="well">
        <button class="btn btn-default"></button>
        <button class="btn btn-default"></button>
        <button class="btn btn-default"></button>
      </div>
    </div>
  </div>
</div>

Vytvořte cílovou třídu pomocí selektorů jQuery

  • Někdy vytváříme třídy za účelem snadnějšího výběru těchto prvků pomocí jQuery. Tím, že každému z našich prvků tlačítka přiřadíme třídu target 
 <button class="btn btn-default target"></button>
        <button class="btn btn-default target"></button>
        <button class="btn btn-default target"></button>
      </div>
    </div>
    <div class="col-xs-6">
      <div class="well">
        <button class="btn btn-default target"></button>
        <button class="btn btn-default target"></button>
        <button class="btn btn-default target"></button>

Přidejte atributy id do prvků Bootstrap

  • Každému z našich prvků můžeme přiřadit id atribut.
  • Každé ID by mělo být jedinečné pro určitý prvek a mělo by být použito pouze jednou na stránce.
  • Pojďme dát jamce nalevo ID left-well a jedna vpravo je id right-well .
<div class="well" id="left-well">
  <button class="btn btn-default target"></button>
        <button class="btn btn-default target"></button>
        <button class="btn btn-default target"></button>
      </div>
    </div>
    <div class="col-xs-6">
<div class="well" id="right-well">

Přiřaďte každému prvku jedinečné ID

*Přidělme každému z našich tlačítek jedinečné ID začínající target1 a končící target6 . 

<button class="btn btn-default target" id="target1"></button>
        <button class="btn btn-default target" id="target2"></button>
        <button class="btn btn-default target" id="target3"></button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4"></button>
        <button class="btn btn-default target" id="target5"></button>
        <button class="btn btn-default target" id="target6"></button>

Larson, Q., 2019. Vývojové knihovny frontendu. [online] Freecodecamp.org. Dostupné na:https://www.freecodecamp.org/learn/front-end-development-libraries/bootstrap