twitter-bootstrap-3Aan de slag met twitter-bootstrap-3


Opmerkingen

Bootstrap is een gratis en open-source front-end webframework voor het ontwerpen van websites en webapplicaties. Het bevat op HTML en CSS gebaseerde ontwerpsjablonen voor typografie, formulieren, knoppen, navigatie en andere interface-componenten, evenals optionele JavaScript-extensies. In tegenstelling tot veel webframes houdt het zich alleen bezig met front-end ontwikkeling.

Bootstrap is het tweede meest gewaardeerde project op GitHub, met bijna 100.000 sterren en bijna 45.000 vorken.

versies

Versie Publicatiedatum
3.3.7 2016/07/25

Bootstrap-installatie en aan de slag gaan

Invoering
Dus je wilt bootstrap gaan gebruiken voor je project? Super goed! dan laten we meteen beginnen !.

Wat is bootstrap? Bootstrap is een open source-bibliotheek die u kunt gebruiken om geweldige responsieve projecten te maken met behulp van responsive design en eenvoudige code. Responsive Design is een ontwerpfilosofie waarbij in het ontwerp van het systeem (de weergave en de lay-out) reageert / zich aanpast, afhankelijk van de lay-out van het apparaat. De primaire reden om uw ontwerp responsief te houden, is het vergroten van het bereik van uw toepassing naar een groter gebruikersbestand met behulp van een reeks apparaten.
Installatie
Bootstrap kan op veel verschillende manieren en voor veel verschillende soorten projecten worden geïnstalleerd. In de onderstaande lijst heb ik enkele download- en zelfstudielinks geplaatst over hoe bootstrap te installeren
Download links

  • Directe download - downloadlink
  • CDN - kom hier
  • Bower - bower install bootstrap [lezen]
  • NPM - npm install bootstrap [lezen]
  • Componist - composer require twbs/bootstrap [lezen]
  • Aanpassen - ik heb je eigen configuratie, je kunt deze hier aanpassen.
  • Sass - Voor aan Sass gerelateerde projecten kun je het [hier] [1] krijgen.

Basis informatie
Dus je hebt nu bootstrap in je project geïnstalleerd. En nu is het tijd om de grote voordelen van bootstrap te gaan gebruiken. Eerst ga ik je wat basisgebruik van bootstrap vertellen, daarna zal ik enkele kleine voorbeelden tonen en aan het einde zal ik je een opstartcodevoorbeeld geven dat je als startsjabloon kunt gebruiken!

Het rastersysteem
Bootstrap maakt gebruik van een rastersysteem. Dit rastersysteem bestaat normaal gesproken uit 12 kolommen. Elk van deze 12 kolommen heeft dezelfde breedte maar kan verschillende hoogtes hebben.

We hebben dus een rastersysteem dat uit 12 kolommen bestaat. We kunnen deze kolommen gebruiken om onze basiswebsite te bouwen. laten we zeggen dat we de volgende lay-out willen bereiken:

menu - volledige breedte
zijbalk - 1/3 van het scherm
Hoofdinhoud 2/3 van het scherm
Voettekst - volledige breedte

Het menu
Eerst gaan we naar het menu kijken. Zoals we weten, werkt het rastersysteem met 12 kolommen. Omdat we het menu op volledige breedte willen, moeten we het menu in alle 12 kolommen plaatsen. Het ziet eruit als het onderstaande voorbeeld

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    Menu
</div>
 

Door het menu een col-lg-12-klasse te geven, geven we het volgende aan:
col - De col in de klassennaam staat voor kolommen.
lg - De lg in de klassennaam staat voor de breedte van het scherm, in dit geval groot.
12 - de 12 in de klassennaam staat voor het aantal kolommen dat we willen dat ons menu bezit. omdat we in dit geval het menu op volledige breedte willen, krijgen we alle 12 kolommen (12/12)

Omdat we 12 van de 12 kolommen voor ons menu hebben gebruikt, wordt alles nadat het menu op een nieuwe rij is ingesteld.

De zijbalk
Het tweede item dat we aan onze sjabloon willen toevoegen, is de zijbalk. Zoals ik al zei, willen we dat de zijbalk 1/3 van het scherm is. Dus wat we gaan doen, is de 12 kolommen in 3 delen. Dat is 4. We weten nu hoeveel kolommen we willen vullen om 1/3 van het scherm te bereiken. Volg de onderstaande code.

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    The menu
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
    The sidebar
</div>
 

Hetzelfde als bij het menu nu verschilt ons aantal col's van het menu.
col - De col in de klassennaam staat voor kolommen.
lg - De lg in de klassennaam staat voor de breedte van het scherm, in dit geval groot.
4 - de 12 in de klassennaam staat voor het aantal kolommen dat onze sidebar moet hebben. omdat we in dit geval willen dat de zijbalk 1/3 van het scherm vult, dus we nemen slechts 4 van de 12 kolommen (4/12)

De inhoud
Nu hebben we nog steeds 8 kolommen over naast onze zijbalk. Dus nu gaan we die vullen met onze inhoud. Zie onderstaande voorbeeldcode

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    The menu
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
    The sidebar
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
    The main content
</div>
 

Nu we de resterende 8 kolommen van onze 12 kolommen in deze rij hebben gevuld, begint de volgende sectie opnieuw op een nieuwe rij met 12 kolommen.

De voettekst
De voettekst is, net als het menu, een blok met volledige breedte op het scherm, dus we nemen alle 12 kolommen in deze rij voor onze voettekst, zie de onderstaande voorbeeldcode.

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    The menu
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
    The sidebar
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
    The main content
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    The footer
</div>i are described below.
 

Dus nu hebben we, met slechts een heel klein HTML-bestand, onze eerste bootstrapsjabloon gemaakt. Maar dit is de basis. Normaal zouden we deze code een beetje meer vormen om hem de volledige bootstrap-ervaring te geven. Sommige van deze ervaringen worden hieronder beschreven.

Rijen en containers gebruiken Zoals ik in het eenvoudige voorbeeld hierboven heb verteld, gebruikt bootstrap rijen van 12 kolommen. wanneer een rij is gevuld met 12 kolommen, start bootstrap op een nieuwe rij. de beste manier om deze rijen weer te geven is door rijklassen te gebruiken. We zullen ook een containerklasse gebruiken. dit is als een body-tag, in deze container plaatsen we al onze code. U kunt kiezen tussen een container of een container-vloeistofklasse. Het enige verschil is dat de container-vloeistofklasse de volledige breedte van een scherm gebruikt en de containerklasse niet. Een voorbeeld van deze basisfuncties vindt u hieronder.

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            The menu consisting of 12 columns
        </div>
    </div>
    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
            The sidebar consisting of 4 columns
        </div>
        <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
            The main content consisting of 8 columns
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            The footer consisting of 12 columns
        </div>
    </div>
</div>
 

Daarom hebben we nu een volledige paginasjabloon met bootstrap gemaakt. Het is inderdaad heel eenvoudig, maar begin bij de basis en later kun je allerlei bootstrap-klassen en -functionaliteiten gebruiken. Laatste ding. De kolomnamen lg - md - sm en xs in de klassen komen overeen, zoals ik de breedte van de pagina heb verteld. LarGe, MeDium, SMall en XSmall. Vergeet niet dat je dat kunt gebruiken om kolommen zelfs op verschillende breedten anders te stijlen door het aantal kolommen te wijzigen. Vergeet niet dat een volledige rij bestaat uit 12 kolommen!

Voor meer informatie bezoek: http://getbootstrap.com/ <br? Ga voor geweldige voorbeelden naar: http://expo.getbootstrap.com of http://bootsnipp.com/

Laat het me weten als je meer informatie wilt toevoegen of als je problemen tegenkomt. en gelukkig codering voor jullie allemaal!

Hallo Wereld

De volgende HTML pagina illustreert een eenvoudige Hello World-pagina met Bootstrap 3 .

De pagina bevat een navigatiebalk over de volledige breedte met voorbeeldkoppelingen en een vervolgkeuzelijst. De navigatiebalk maakt gebruik van de eerste mobiele mogelijkheden van Bootstrap. Het begint in te klappen in mobiele weergaven en wordt horizontaal naarmate de beschikbare viewport-breedte toeneemt.

Bovendien is een jumbotron element gebruikt om aanbevolen informatie weer te geven.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Hello World</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>

    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Hello, World!</a>
            </div>


            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container">
        <div class="jumbotron">
            <h1>Bootstrap</h1>
            <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
            <p><a class="btn btn-primary btn-lg">Learn more</a></p>
        </div>
    </div>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>
 

Installatie

  • Directe download - downloadlink
  • CDN - kom hier
  • Bower - bower install bootstrap [lezen]
  • NPM - npm install bootstrap [lezen]
  • Componist - composer require twbs/bootstrap [lezen]
  • Aanpassen - ik heb je eigen configuratie, je kunt deze hier aanpassen.
  • Sass - Voor Sass-gerelateerde projecten kunt u deze hier downloaden .

Gebruik

<head>
  <link rel="stylesheet" href="path/to/bootstrap.min.css">
</head>
 

Verwijzing naar het bootstrap js-bestand wordt gemaakt met behulp van de script-tag net boven de body-tag (zie hieronder). Merk ook op dat bootstrap jQuery gebruikt voor de meeste widgets - zoals accordeoncarrousel enz .. dus verwijs naar het bootstrap js-bestand onder het jQuery js-bestand.

**Monster**
<!DOCTYPE html>
<html lang="en">

<head>

  <title>Form Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>

  <div class="container">
    <h2>Form Email</h2>
    <form role="form">
      <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" class="form-control" id="email" placeholder="Enter email">
      </div>
      <div class="form-group">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" id="pwd" placeholder="Enter password">
      </div>
      <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>

</html>