Guida di avvio di Bootstrap (parte 1): layout visuale

Indirizzo di scaricamento:http://v3.bootcss.com/getting-started/#download

Modello HTML:

<!DOCTYPE html>
<html>
<head>
<title>Template Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Inclusione di Bootstrap -->
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim e Respond.js sono utilizzati per far funzionare Internet Explorer 8 con gli elementi HTML5 e le query media -->
<!-- Attenzione: Se il file Respond.js viene caricato tramite file://, il file non avrà effetto -->
<![if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (i plugin JavaScript di Bootstrap richiedono jQuery) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include tutti i plugin compilati --)
<script src="js/bootstrap.min.js"></script>
</body>
</html>

　　Qui, puoi vedere i file jquery.js, bootstrap.min.js e bootstrap.min.css inclusi, che trasformano un file HTML standard in un template che utilizza Bootstrap.

Raccomandazione CDN di Bootstrap

　　Il CDN del deposito statico di Baidu, l'introduzione del codice è come segue:

<!-- Il file CSS centrale di Bootstrap per il nucleo --><link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Il file opzionale di tema Bootstrap (di solito non utilizzato) --><script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script>
<!-- Il file jQuery. Dev'essere incluso prima di bootstrap.min.js --><script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Il file JavaScript centrale più recente di Bootstrap --><script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Layout visivo:

Il codice è il seguente:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstraptest</title>
<!-- Il file CSS centrale di Bootstrap per il nucleo --><link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Il file opzionale di tema Bootstrap (di solito non utilizzato) --><script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script>
<!-- Il file jQuery. Dev'essere incluso prima di bootstrap.min.js --><script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Il file JavaScript centrale più recente di Bootstrap --><script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img alt="[#0#]" src="img/ad.jpg" class="img-responsive" />
<div class="caption">
<h3>
Etichetta miniature
</h3>
<p>
Justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
<p>
<a class="btn btn-primary" href="#">Azione</a> <a class="btn" href="#">Azione</a>
</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img alt="[#0#]" src="v3/default5.jpg" />
<div class="caption">
<h3>
Etichetta miniature
</h3>
<p>
Justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
<p>
<a class="btn btn-primary" href="#">Azione</a> <a class="btn" href="#">Azione</a>
</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img alt="[#0#]" src="v3/default6.jpg" />
<div class="caption">
<h3>
Etichetta miniature
</h3>
<p>
Justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
<p>
<a class="btn btn-primary" href="#">Azione</a> <a class="btn" href="#">Azione</a>
</p>
</div>
</div>
</div>
</div> <a id="modal-989545" href="#modal-container-989545" role="button" class="btn" data-toggle="modal">Attiva la finestra di copertura</a>
<div class="modal fade" id="modal-container-989545" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">
Titolo
</h4>
</div>
<div class="modal-body">
Contenuto...asdfasdf
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button> <button type="button" class="btn btn-primary">Salva</button>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Titolo del pannello
</h3>
</div>
<div class="panel-body">
Contenuto del pannello
</div>
<div class="panel-footer">
Piè di pagina del pannello
</div>
</div>
<div class="page-header">
<h1>
Intestazione di pagina esempio <small>Sottotesto per l'intestazione</small>
</h1>
</div>
<div class="btn-group">
<button class="btn btn-default" type="button"><em class="glyphicon glyphicon-align-left"></em> Sinistra</button> <button class="btn btn-default" type="button"><em class="glyphicon glyphicon-align-center"></em> Centro</button> <button class="btn btn-default" type="button"><em class="glyphicon glyphicon-align-right"></em> Destra</button> <button class="btn btn-default" type="button"><em class="glyphicon glyphicon-align-justify"></em> Tutta</button>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
<div class="jumbotron">
<h1>
Ciao, mondo!
</h1>
<p>
Questo è un modello per un sito web di marketing o informativo semplice. Include un'annuncio grande chiamato unità eroe e tre pezzi di contenuto di supporto. Utilizzalo come punto di partenza per creare qualcosa di più unico.
</p>
<p>
<a class="btn btn-primary btn-large" href="#">Scopri di più</a>
</p>
</div>
</div>
</div>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Apri navigazione</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> <a class="navbar-brand" href="#">Marchio</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">Link</a>
</li>
<li>
<a href="#">Link</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu a discesa<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li>
<a href="#">Azione</a>
</li>
<li>
<a href="#">Altra azione</a>
</li>
<li>
<a href="#">Qualcosa altro qui</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">Collegamento separato</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">Un altro collegamento separato</a>
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input class="form-control" type="text" />
</div> <button type="submit" class="btn btn-default">Invia</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">Link</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu a discesa<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li>
<a href="#">Azione</a>
</li>
<li>
<a href="#">Altra azione</a>
</li>
<li>
<a href="#">Qualcosa altro qui</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">Collegamento separato</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<h2>
Intestazione
</h2>
<p>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
</p>
<p>
<a class="btn" href="#">Visualizza dettagli »</a>
</p>
<div class="jumbotron">
<h1>
Ciao, mondo!
</h1>
<p>
Questo è un modello per un sito web di marketing o informativo semplice. Include un'annuncio grande chiamato unità eroe e tre pezzi di contenuto di supporto. Utilizzalo come punto di partenza per creare qualcosa di più unico.
</p>
<p>
<a class="btn btn-primary btn-large" href="#">Scopri di più</a>
</p>
</div> <address> <strong>Twitter, Inc.</strong><br /> 795 Folsom Ave, Suite 600<br /> San Francisco, CA 94107<br /> <abbr title="[#2#]">P:</abbr> (123) 456-7890</address>
<div class="btn-group">
<button class="btn btn-default" type="button"><em class="glyphicon glyphicon-align-left"></em> Sinistra</button> <button class="btn btn-default" type="button"><em class="glyphicon glyphicon-align-center"></em> Centro</button> <button class="btn btn-default" type="button"><em class="glyphicon glyphicon-align-right"></em> Destra</button> <button class="btn btn-default" type="button"><em class="glyphicon glyphicon-align-justify"></em> Tutta</button>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-md-4 column">
</div>
<div class="col-md-4 column">
<h2>
Intestazione
</h2>
<p>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
</p>
<p>
<a class="btn" href="#">Visualizza dettagli »</a>
</p>
</div>
<div class="col-md-4 column">
<h2>
Intestazione
</h2>
<p>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
</p>
<p>
<a class="btn" href="#">Visualizza dettagli »</a>
</p>
</div>
</div>
</div>
</body>
</html>

Ecco l'effetto:

Riferimenti correlati:

http://www.runoob.com/bootstrap/bootstrap-environment-setup.html

http://www.runoob.com/try/bootstrap/layoutit/

Come è stato introdotto dall'autore, questo è il primo tutorial di introduzione a BootStrap: layout visivo, spero possa essere utile a tutti. Se avete qualsiasi domanda, lasciate un commento e l'autore risponderà prontamente. In questo senso, anche grazie per il supporto al sito web tutorial di urla!

Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, il copyright spetta ai rispettivi autori, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, questo sito non detiene i diritti di proprietà, non è stato editato manualmente e non assume alcuna responsabilità legale. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata, questo sito eliminerà immediatamente il contenuto sospetto di violazione del copyright.

教程基础