twitter-bootstrap Zelfstudie
Aan de slag met twitter-bootstrap
Zoeken…
Opmerkingen
Bootstrap is een HTML-, CSS- en JavaScript-framework dat wordt gebruikt om websites te maken die zijn gemaakt met behulp van een mobiel-eerst paradigma en responsief webontwerp (RWD). Het maakt gebruik van een combinatie van vooraf gemaakte CSS-klassen en JavaScript om verschillende dingen op internet te maken. Het bevat dingen zoals een aangepast, responsief raster waarmee websites op elk scherm kunnen worden bekeken, een dropdown-navigatiebalk die kan reageren en zelfs eenvoudige dingen die tijdrovend kunnen zijn, zoals vooraf gemaakte knoppen, formulieren en accordeons om een naam te geven weinig.
Bootstrap kan nuttig zijn om de volgende redenen:
Tijdwinst : Bootstrap bevat veel dingen die vooraf zijn gebouwd en die eenvoudigweg moeten worden opgeroepen bij het schrijven van code. Dit bespaart een aanzienlijke hoeveelheid tijd en kan de tijd die nodig is om een website te coderen aanzienlijk verkorten.
Gebouwd met responsief webontwerp in het achterhoofd : met Bootstrap kunnen webontwikkelaars zich geen zorgen maken over het maken van dingen die kunnen schalen met de grootte van hun scherm, aangezien Bootstrap mobile-first, responsief ontwerp gebruikt waarmee ze dingen kunnen bouwen die op elk scherm werken grootte.
Vereenvoudigt het ontwerpproces : Bootstrap wordt vooraf gebouwd met elementen die goede ontwerppraktijken hebben. Dit kan handig zijn voor degenen wier webontwerpvaardigheden niet zo geweldig zijn, of voor degenen die ontwerp als een vervelende taak zien, omdat veel van de Bootstrap-klassen esthetisch aantrekkelijk zijn en geweldig om naar te kijken.
In dit gedeelte moeten alle grote onderwerpen binnen twitter-bootstrap worden vermeld en naar de gerelateerde onderwerpen worden gelinkt. Omdat de documentatie voor twitter-bootstrap nieuw is, moet u mogelijk eerste versies van die gerelateerde onderwerpen maken.
versies
| Versie | Publicatiedatum |
|---|---|
| 4.0 | 2999/01/01 |
| 3.3.7 | 2016/07/25 |
| 3.3.6 | 2015/11/24 |
| 3.3.5 | 2015/06/15 |
| 3.3.4 | 2015/03/16 |
| 3.3.1 | 2014/11/12 |
| 3.3.0 | 2014/10/29 |
| 3.2.0 | 2014/06/26 |
| 3.1.0 | 2014/01/30 |
| 3.0 | 2013/08/19 |
| 2.3 | 2013/02/07 |
| 2.2 | 2012/10/29 |
| 2.1 | 2012-08-20 |
| 2.0 | 2012-02-01 |
| 1.0 | 2011-08-18 |
Installatie / Setup
downloaden:
- Download Bootstrap rechtstreeks of kloon, etc. uit de GitHub- repository
- Download uw aangepaste versie van Bootstrap uit officiële documenten
- Installeren met prieel:
bower install bootstrap - Installeren met npm:
npm install bootstrap - Installeren met componist:
composer require twbs/bootstrap
De bestandsstructuur 
installeren:
Neem op uw HTML-pagina de CSS, JS van Bootstrap en de afhankelijkheid van jQuery (pre-versie 3, ten minste vanaf de nieuwste Bootstrap-versie) op. Houd er rekening mee dat als u van plan bent de JavaScript-functies van Bootstrap te gebruiken, uw jQuery-referentie vóór uw bootstrap.js-referentie in uw HTML moet komen.
U kunt uw geïnstalleerde Bootstrap-bestanden uit de bovenstaande sectie gebruiken, of verwijzen naar een CDN verstrekt door de makers van Bootstrap (links overgenomen uit Aan de slag met Bootstrap ):
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Een zeer eenvoudige Bootstrap-webpagina:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Basissjabloon
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title> <!-- The title of the Website -->
<!-- Reference to Bootstrap's CSS file -->
<!-- This is the line to reference the bootstrap's Stylesheet -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!-- [if lt IE 9] -->
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<!--[endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- Referencing jQuery (necessary for Bootstrap JavaScript plugins(bootstrap.min.js) to work) -->
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Referencing Javascript Bootstrap Plugin to Facilitate Bootstrap Animations and functionalities. -->
<!-- (Necessary to run Bootstrap) -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Wanneer Bootstrap gebruiken?
Bootstrap is een eigenzinnig framework voor HTML, CSS en Javascript. Het bevat basisstijl en functionaliteit voor wat geaccepteerde [User Interface] -elementen zijn, zoals formulierelementen, knoppen, modale vensters en navigatie-elementen.
Bootstrap is een responsief webframework, wat betekent dat het is ontworpen om de lay-out en het ontwerp aan te passen voor grote en kleine schermen, zoals mobiele apparaten, tablets en desktopcomputers, allemaal in één codebasis.
Een van de fundamentele concepten van Bootstrap is het rasterframework. Door klassen toe te passen op HTML-elementen, is het mogelijk om ingewikkelde lay-outs te maken met behulp van een basisraster van twaalf kolommen. Een lay-out met vier kolommen kan zich bijvoorbeeld aanpassen aan twee kolommen op tabletapparaten en één kolom op mobiele apparaten. Het raster gebruikt media queries , een CSS-methode om specifieke schermformaten te targeten, om dit te bereiken.
Bootstrap presteert bijzonder goed als:
- Aangepast ontwerp is geen topprioriteit
- Het is prettiger om HTML te bewerken en klassen toe te voegen dan wanneer u aangepaste CSS maakt
- U bent vertrouwd met het gebruik van een framework dat veel visuele overeenkomsten zal vertonen met veel andere websites
Bootstrap kan worden gebruikt door mensen die nieuw zijn in HTML, CSS en Javascript, omdat de documentatie uitstekend is. Er is echter een leercurve voor degenen die niet helemaal vertrouwd zijn met de drie basistechnologieën die worden gebruikt door Bootstrap (HTML, CSS en Javascript).
Het is mogelijk om Bootstrap-thema's te kopen of te downloaden om de stijl of functionaliteit van Bootstrap te wijzigen. Het is ook mogelijk om Bootstrap als startpunt te gebruiken, met aanpassing van CSS en Javascript.
Basis webpagina met bootstrap componenten
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</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 class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="../navbar/">Default</a></li>
<li><a href="../navbar-static-top/">Static top</a></li>
<li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="jumbotron">
<h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>To see the difference between static and fixed top navbars, just scroll.</p>
<p>
<a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs »</a>
</p>
</div>
</div> <!-- /container -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>