English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Learning Bootstrap is very simple, and the styles it provides are very beautiful. Just a little simple learning can make a beautiful page.
Bootstrap Chinese website: http://v3.bootcss.com/
Bootstrap provides three types of downloads:
Bootstrap for production environment
Compiled and compressed CSS, JavaScript, and font files. Does not include documentation and source code files.
Bootstrap source code
Source code of Less, JavaScript, and font files, with documentation. Requires a Less compiler and some settings.
Sass
This is the source code migration project from Less to Sass for Bootstrap, used to quickly introduce it into Rails, Compass, or projects that only target Sass.
In fact, we can use Bootstrap without downloading it:
Bootstrap Chinese website has built its own free CDN acceleration service for Bootstrap. Based on the CDN service of domestic cloud vendors, the access speed is faster, the acceleration effect is more obvious, there are no speed and bandwidth restrictions, and it is permanently free.
base.html
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- I tre tag meta *devono* essere messi nei primi posti, e qualsiasi altro contenuto deve seguire! --> <title>Template Bootstrap 101</title> <!-- Bootstrap --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"> </head> <body> <h1>Ciao, Bootstrap!</h1> <!-- jQuery (necessario per i plugin JavaScript di Bootstrap) --> <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> <!-- Include tutti i plugin compilati (sotto), o includi file individuali se necessario --> <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> </body> </html>
base.html ha già incluso Bootstrap, salvandolo possiamo utilizzare i stili forniti da Bootstrap.
Icona di carattere
Bootstrap fornisce predefiniti oltre duecento icone. Possiamo utilizzare queste icone tramite il tag span:
<h3>Icona</h3> <span class="glyphicon glyphicon-home"></span> <span class="glyphicon glyphicon-signal"></span> <span class="glyphicon glyphicon-cog"></span> <span class="glyphicon glyphicon-apple"></span> <span class="glyphicon glyphicon-trash"></span> <span class="glyphicon glyphicon-play-circle"></span> <span class="glyphicon glyphicon-headphones"></span>
Pulsante
Il tag <button></button> viene utilizzato per creare pulsanti, bootstrap offre una vasta gamma di stili di pulsanti. <h3>Pulsante</h3> <button type="button" class="btn btn-default">pulsante</button> <button type="button" class="btn btn-primary">primary</button> <button type="button" class="btn btn-success">success</button> <button type="button" class="btn btn-info">info</button> <button type="button" class="btn btn-warning">warning</button> <button type="button" class="btn btn-danger">danger</button> <h3>Dimensione del pulsante</h3> <button type="button" class="btn btn-default">pulsante</button> <button type="button" class="btn btn-primary btn-lg">primary</button> <button type="button" class="btn btn-success btn-sm">success</button> <button type="button" class="btn btn-info btn-xs">info</button> <h3>Mostra l'icona all'interno del pulsante</h3> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-home"></span> Pulsante</button>
Oltre alle dimensioni predefinite, Bootstrap offre tre parametri per regolare la dimensione dei pulsanti, ovvero: btn-lg, btn-sm e btn-xs.
Menu a discesa
Il menu a discesa è uno degli interfacce più comuni, Bootstrap fornisce stili bellissimi.
<h3>Menu a discesa</h3>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
Menu a discesa
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Azione</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Altra azione</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Qualcosa altro qui</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separato link</a></li>
</ul>
</div>
输入框
通过<input></input>标签去创建输入框。
<h3>输入框</h3> <div class="input-group"> <span class="glyphicon glyphicon-user"></span> <input type="text" placeholder="username"> </div> <div class="input-group"> <span class="glyphicon glyphicon-lock"></span> <input type="password" placeholder="password"> </div>
Barrà di navigazione
La barra di navigazione è essenziale come guida per l'intero sito web.
<h3>Barrà di navigazione</h3>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">Informazioni</a></li>
<li><a href="#contact">Contatti</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Menù a discesa <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Azione</a></li>
<li><a href="#">Altra azione</a></li>
<li class="divider"></li>
<li class="dropdown-header">Intestazione nav</li>
<li><a href="#">Link separato</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
Modulo
La trasmissione dei dati tra l'uomo e il sistema deve essere effettuata tramite moduli. Ad esempio, la presentazione delle informazioni di registrazione/autenticazione, la presentazione dei termini di ricerca, ecc. Il tag <form></form> viene utilizzato per creare moduli.
<h3>Modulo</h3>
<form>
<div class="form-group">
<span class="glyphicon glyphicon-user"></span>
<input type="email" id="exampleInputEmail1" placeholder="Inserisci email">
</div>
<div class="form-group">
<span class="glyphicon glyphicon-lock"></span>
<input type="password" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Warning box
The warning box is an important means for the system to convey information to users and provide guidance. Without a specific label for the warning box, beautiful warning boxes can be created instantly with the styles provided by Bootstrap.
<h3>Warning box</h3>
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
<div class="alert alert-success" role="alert">
<a href="#" class="alert-link">success!</a>
</div>
<div class="alert alert-info" role="alert">
<a href="#" class="alert-link">info!</a>
</div>
<div class="alert alert-warning" role="alert">
<a href="#" class="alert-link">avviso!</a>
</div>
<div class="alert alert-danger" role="alert">
<a href="#" class="alert-link">pericolo!</a>
</div>
Barra di progresso
Il processo di elaborazione del sistema richiede spesso la pazienza degli utenti, la barra di progresso permette agli utenti di percepire il processo di elaborazione del sistema, aumentando così la tolleranza.
<h3>Barra di progresso</h3>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
70%
</div>
</div>
Questo è tutto il contenuto dell'articolo, speriamo che sia utile per il tuo studio e che tu supporti fortemente il tutorial di grido.
Se desideri approfondire ulteriormente, puoi fare clic qui per continuare a studiare, e ti forniamo due argomenti speciali: Tutorial di apprendimento Bootstrap Tutorial di applicazione Bootstrap
Dichiarazione: il contenuto di questo articolo è stato raccolto da Internet, di proprietà del rispettivo autore, il contenuto è stato contribuito e caricato dagli utenti di Internet, questo sito non detiene i diritti di proprietà, non è stato editato manualmente e non assume responsabilità legali correlate. Se trovi contenuti sospetti di copyright, ti preghiamo di inviare una e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare, fornendo prove pertinenti. Una volta verificata, questo sito rimuoverà immediatamente il contenuto sospetto di violazione del copyright.