twitter-bootstrap Handledning
Komma igång med twitter-bootstrap
Sök…
Anmärkningar
Bootstrap är ett HTML-, CSS- och JavaScript-ramverk som används för att skapa webbplatser som skapas med ett mobil-första paradigm såväl som responsiv webbdesign (RWD). Den använder en kombination av premade CSS-klasser och JavaScript för att göra en mängd saker på webben. Det inkluderar saker som ett anpassat, lyhörande rutnät som gör det möjligt att titta på webbplatser på vilken skärm som helst, en nedrullningsbar navla som kan vara lyhörd och till och med enkla saker som kan vara tidskrävande såsom premade knappar, former och dragspel för att namnge en få.
Bootstrap kan vara användbart av följande skäl:
Tidsbesparingar : Bootstrap har många saker som är förbyggda och helt enkelt behöver begäras när du skriver kod. Detta sparar en avsevärd tid och kan avsevärt minska den tid som krävs för att koda en webbplats.
Byggt med responsiv webbdesign i åtanke : Bootstrap gör det möjligt för webbutvecklare att inte vara oroliga för att skapa saker som ska skalas med storleken på sin skärm, eftersom Bootstrap använder mobil-först, responsiv design som gör att de kan bygga saker som fungerar på vilken skärm som helst. storlek.
Förenklar designprocessen : Bootstrap är förbyggt med element som har god design. Detta kan vara användbart för dem vars webbdesignfärdigheter inte är så bra, eller för de som ser design som en tråkig uppgift, eftersom många av Bootstrap-klasserna är estetiskt tilltalande och bra att titta på.
Det här avsnittet bör nämna alla stora ämnen inom twitter-bootstrap och länka till relaterade ämnen. Eftersom dokumentationen för twitter-bootstrap är ny kan du behöva skapa initialversioner av relaterade ämnen.
versioner
| Version | Utgivningsdatum |
|---|---|
| 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 |
Installation / Setup
Laddar ner:
- Ladda ner Bootstrap direkt eller klon, etc. från GitHub- förvaret
- Ladda ner din anpassade version av Bootstrap från officiella dokument
- Installera med bower:
bower install bootstrap - Installera med npm:
npm install bootstrap - Installera med kompositör:
composer require twbs/bootstrap
Filstrukturen 
Installation:
Inom din HTML-sida, inkludera Bootstraps CSS, JS och beroende av jQuery (pre version 3, åtminstone från den senaste Bootstrap-versionen). Observera att om du planerar att använda Bootstraps JavaScript-funktioner måste din jQuery-referens komma före din bootstrap.js-referens i din HTML.
Du kan använda dina installerade Bootstrap-filer från ovanstående avsnitt eller referera till ett CDN som tillhandahålls av tillverkarna av Bootstrap (länkar tagna från Komma igång med 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>
En mycket grundläggande Bootstrap-webbsida:
<!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>
Grundläggande mall
<!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>
När du ska använda Bootstrap
Bootstrap är ett meningsfullt ramverk för HTML, CSS och Javascript. Den innehåller grundläggande styling och funktionalitet för vad som har blivit accepterat [User Interface] -element, såsom formelement, knappar, modala fönster och navigationselement.
Bootstrap är en lyhörd webbram, vilket innebär att den är utformad för att anpassa layout och design för stora och små skärmstorlekar, till exempel mobila enheter, surfplattor och stationära datorer, allt i en enda kodbas.
Ett av de grundläggande koncepten för Bootstrap är rutnätet. Genom att använda klasser på HTML-element är det möjligt att skapa komplicerade layouter med ett grundläggande rutnät med tolv kolumner. Till exempel kan en fyra kolumnlayout anpassas till två kolumner på surfplattor och en kolumn på mobila enheter. Rutnätet använder media queries , en CSS-metod för att rikta in specifika skärmstorlekar, för att uppnå detta.
Bootstrap fungerar särskilt bra om:
- Anpassad design är inte högsta prioritet
- Du är bekvämare att redigera HTML och lägga till klasser än du skapar anpassad CSS
- Du är bekväm med att använda ett ramverk som kommer att ha många visuella likheter med många andra webbplatser
Bootstrap kan användas av dem som är nya med HTML, CSS och Javascript, eftersom dokumentationen är utmärkt. Men det finns en inlärningskurva för dem som inte är helt bekväma med de tre grundläggande teknikerna som används av Bootstrap (HTML, CSS och Javascript).
Det är möjligt att köpa eller ladda ner Bootstrap-teman för att ändra stilen eller funktionaliteten för Bootstrap. Det är också möjligt att använda Bootstrap som utgångspunkt med anpassning av CSS och Javascript.
Grundläggande webbsida med hjälp av bootstrap-komponenter
<!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>