twitter-bootstrap-3 Tutorial
Iniziare con twitter-bootstrap-3

Angular 2 AngularJS asp.net-mvc CSS HTML JavaScript jQuery PHP Ruby on Rails twitter-bootstrap
Ricerca…


Osservazioni

Bootstrap è un framework web front-end gratuito e open-source per la progettazione di siti Web e applicazioni web. Contiene modelli di progettazione basati su HTML e CSS per tipografia, moduli, pulsanti, navigazione e altri componenti dell'interfaccia, nonché estensioni JavaScript facoltative. A differenza di molti framework web, si occupa solo dello sviluppo front-end.

Bootstrap è il secondo progetto più famoso su GitHub, con quasi 100.000 stelle e quasi 45.000 fork.

Versioni

Versione Data di rilascio
3.3.7 2016/07/25

Installazione

  • Download diretto - collegamento per il download
  • CDN - arriva qui
  • Bower - bower install bootstrap [leggi]
  • NPM - npm install bootstrap [leggi]
  • Compositore - composer require twbs/bootstrap [leggi]
  • Personalizza - Io ho la tua configurazione personale, puoi personalizzare qui .
  • Sass - Per i progetti relativi a Sass puoi averlo qui .

uso 

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

Il riferimento al file jst di bootstrap viene effettuato usando il tag script appena sopra il tag body (vedi sotto). Nota anche bootstrap utilizza jQuery per la maggior parte dei widget, come il carosello della fisarmonica, ecc. Quindi fai riferimento al file jst di bootstrap sotto il file jQuery js.

**Campione** 
<!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>

Ciao mondo

La seguente pagina HTML illustra una semplice pagina Hello World che utilizza Bootstrap 3 .

La pagina contiene una barra di navigazione a larghezza intera con collegamenti di esempio e un controllo a discesa. La barra di navigazione sfrutta le prime funzionalità di Bootstrap per dispositivi mobili. Inizia a collassare nelle visualizzazioni mobili e diventa orizzontale man mano che aumenta la larghezza della finestra disponibile.

Inoltre, è stato utilizzato un elemento jumbotron per visualizzare le informazioni in primo piano. 

<!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>

Installazione Bootstrap e iniziare

introduzione
Quindi vuoi iniziare ad usare il bootstrap per il tuo progetto? Grande! quindi iniziamo subito!

Cos'è il bootstrap? Bootstrap è una libreria open source che puoi utilizzare per realizzare incredibili progetti responsive con l'utilizzo di design reattivo e codice semplice. Responsive Design è una filosofia di design in cui nella progettazione del sistema (la rappresentazione e il layout) risponde / si adatta in base al layout del dispositivo. La ragione principale per mantenere il tuo design reattivo è aumentare la portata della tua applicazione a una base di utenti più ampia utilizzando una serie di dispositivi.
Installazione
Bootstrap può essere installato in molti modi diversi e per molti diversi tipi di progetti. Nella lista di seguito ho inserito alcuni link di download e tutorial su come installare bootstrap
Link per il download

  • Download diretto - collegamento per il download
  • CDN - arriva qui
  • Bower - bower install bootstrap [leggi]
  • NPM - npm install bootstrap [leggi]
  • Compositore - composer require twbs/bootstrap [leggi]
  • Personalizza - Io ho la tua configurazione personale, puoi personalizzare qui .
  • Sass - Per i progetti relativi a Sass puoi ottenerlo [qui] [1].

Informazioni di base
Quindi ora hai installato il bootstrap nel tuo progetto. E ora è il momento di iniziare ad usare i grandi vantaggi del bootstrap. Per prima cosa ti parlerò dell'uso di base del bootstrap, dopo di che mostrerò alcuni piccoli esempi e alla fine ti darò un esempio di codice di avvio che puoi usare come modello di partenza!

Il sistema di griglia
Bootstrap utilizza un sistema a griglia. Questo sistema di rete normalmente consiste di 12 colonne. Ciascuna di queste 12 colonne ha la stessa larghezza ma può avere altezze diverse.

Quindi abbiamo un sistema di griglia costituito da 12 colonne. Possiamo usare queste colonne per costruire il nostro sito web di base. diciamo che vogliamo raggiungere il seguente layout:

menu - larghezza completa
barra laterale - 1/3 dello schermo
Contenuto principale 2/3 dello schermo
Piè di pagina : larghezza intera

Il menu
Per prima cosa andiamo a guardare il menu. Come sappiamo, il sistema di griglia funziona con 12 colonne. Dato che vogliamo il menu a tutta larghezza, dobbiamo inserire il menu in tutte e 12 le colonne. Sembrerà come nell'esempio qui sotto 

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

Dando al menu una classe col-lg-12 indichiamo quanto segue:
col - La colonna nel nome della classe sta per colonne.
lg - Il lg nel nome della classe indica la larghezza dello schermo, in questo caso grande.
12 - il 12 nel nome della classe indica il numero di colonne che vogliamo che il nostro menu abbia. dato che in questo caso vogliamo il menu su tutta la larghezza otteniamo tutte le 12 colonne (12/12)

Dal momento che abbiamo utilizzato 12 delle 12 colonne per il nostro menu, tutto dopo il menu verrà impostato su una nuova riga.

La barra laterale
Il secondo elemento che vogliamo aggiungere al nostro modello è la barra laterale. Ora, come ho detto, vogliamo che la barra laterale sia 1/3 dello schermo. Quindi, quello che stiamo per fare è dividere le 12 colonne in 3. che è 4. Ora sappiamo quante colonne vogliamo riempire per raggiungere 1/3 dello schermo. Segui il codice qui sotto. 

<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>

Lo stesso del menu solo ora il nostro numero di colonne differisce dal menu.
col - La colonna nel nome della classe sta per colonne.
lg - Il lg nel nome della classe indica la larghezza dello schermo, in questo caso grande.
4 - il 12 nel nome della classe indica il numero di colonne che vogliamo che la nostra barra laterale possieda. dato che in questo caso vogliamo che la barra laterale riempia 1/3 dello schermo, quindi prendiamo solo 4 delle 12 colonne (4/12)

Il contenuto
Ora su questa riga abbiamo ancora otto colonne accanto alla nostra barra laterale. Quindi ora li riempiremo con i nostri contenuti. Vedi il codice di esempio qui sotto 

<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>

Da quando abbiamo riempito le restanti 8 colonne delle nostre 12 colonne su questa riga, la prossima sezione inizierà di nuovo su una nuova riga con 12 colonne.

Il piè di pagina
Il piè di pagina è, ancora una volta, proprio come il menu diventerà un blocco a tutta larghezza sullo schermo, quindi prendiamo tutte le 12 colonne di questa riga per il nostro footer, vedi il codice di esempio qui sotto. 

<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.

Così ora abbiamo creato, con un file html molto piccolo, il nostro primo modello di bootstrap. Ma queste sono le basi. Normalmente formeremmo questo codice un po 'di più per dargli l'esperienza completa di bootstrap. Alcune di queste esperienze sono descritte di seguito.

Uso di righe e contenitori Come ho detto nel semplice esempio sopra bootstrap utilizza righe di 12 colonne. quando una riga viene riempita con 12 colonne, il bootstrap inizierà su una nuova riga. il modo migliore per mostrare queste righe è usando le classi di riga. Useremo anche una classe contenitore. questo è come un tag del corpo, in questo contenitore inseriremo tutto il nostro codice. Puoi scegliere tra un contenitore o una classe di fluido container. L'unica differenza è che la classe container-fluid utilizza l'intera larghezza di uno schermo e la classe container non lo fa. Un esempio di queste funzionalità di base è il seguente. 

<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>

Quindi abbiamo creato un modello di pagina completa con bootstrap. In effetti è molto semplice, ma inizia dalle basi e in seguito potrai utilizzare tutti i tipi di classi e funzionalità di bootstrap. Ultima cosa. I nomi delle colonne lg-md-sm e xs nelle classi corrispondono, come ho detto alla larghezza della pagina. LarGe, MeDium, SMall e XSmall. Non dimenticare che puoi usarlo per uniformare lo stile alle colonne in modo differente su diverse larghezze cambiando la quantità di colonne. Ricorda una fila completa composta da 12 colonne!

Per maggiori informazioni visita: http://getbootstrap.com/ <br? Per ottimi esempi visita: http://expo.getbootstrap.com o http://bootsnipp.com/

Se vuoi che aggiunga ulteriori informazioni o se incontri qualche problema per favore fammelo sapere! e felice codifica a tutti voi!



Modified text is an extract of the original Stack Overflow Documentation
Autorizzato sotto CC BY-SA 3.0
Non affiliato con Stack Overflow