Guida di base Bootstrap4

Sistema di griglia Bootstrap4 教程 Bootstrap4

安装和使用 Bootstrap4

Possiamo installare Bootstrap4 in due modi:

Utilizzare il CDN di Bootstrap 4.
Dal sito ufficiale getbootstrap.com Scaricare Bootstrap 4.

Bootstrap 4 CDN

Raccomandato in Cina l'uso delle librerie su Staticfile CDN:

Bootstrap4 CDN

<!-- I nuovi file CSS di base di Bootstrap4 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　
<!-- File jQuery. Assicurati di includere prima bootstrap.min.js -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　
<!-- bootstrap.bundle.min.js viene utilizzato per finestre popup, suggerimenti e menu a discesa, e include popper.min.js -->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　
<!-- I file JavaScript di base più recenti di Bootstrap4 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

Attenzione:popper.min.js viene utilizzato per impostare finestre popup, suggerimenti e menu a discesa, attualmente bootstrap.bundle.min.js include già popper.min.js.

Inoltre, puoi utilizzare i seguenti servizi CDN:

Raccomandato in Cina: https://www.staticfile.org/
Raccomandato internazionalmente:https://cdnjs.com/

Scaricare Bootstrap 4

Puoi visitare il sito ufficiale https://getbootstrap.com/ Scaricare la libreria di risorse Bootstrap4

Nota:Inoltre, puoi installare tramite strumenti di gestione dei pacchetti come npm, gem, composer e altri:
npm install [email protected]
gem 'bootstrap', '~> 4.0.0.beta2'
composer require twbs/bootstrap:4.0.0-beta.2

Creare la prima pagina di Bootstrap 4

1. Aggiungere il doctype HTML5

Bootstrap richiede l'uso del tipo di file HTML5, quindi è necessario aggiungere la dichiarazione doctype HTML5.

Il doctype HTML5 viene dichiarato nella testa del documento e impostato con la codifica corrispondente:

<!DOCTYPE html>
<html>
　　<head>
　　　　<meta charset="utf-8">　
　　</head>
</html>

Prima mobile

Per garantire che i siti sviluppati con Bootstrap siano amichevoli ai dispositivi mobili, con una disegno adeguato e una scala touch, è necessario aggiungere il tag meta viewport all'interno della head della pagina, come segue:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

width=device-width indica che la larghezza è la larghezza dello schermo del dispositivo.

initial-scale=1 indica la scala iniziale.

shrink-to-fit=no si adatta automaticamente alla larghezza dello schermo del telefono.

Classi contenitore

Bootstrap 4 richiede un elemento contenitore per avvolgere il contenuto del sito.

Possiamo utilizzare le seguenti due classi di contenitore:

La classe .container è utilizzata per un contenitore con larghezza fissa e supporto per la layout responsive.
La classe .container-fluid è utilizzata per una larghezza del 100% e un contenitore che occupa l'intero viewport.

Due pagine Bootstrap 4

Esempio Bootstrap4 .container

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap esempio</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>La mia prima pagina Bootstrap</h1>
　　<p>Questo è un testo.</p>　
</div>
</body>
</html>

Prova a vedere ‹/›

Esempio seguente mostra un contenitore che occupa l'intero viewport.

Esempio Bootstrap4 .container-fluid

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap esempio</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
　　<h1>La mia prima pagina Bootstrap</h1>
　　<p>È stato utilizzato　.container-fluid，larghezza del 100%，che occupa tutto il viewport.</p>　
</div>
</body>
</html>

Prova a vedere ‹/›

Sistema di griglia Bootstrap4 教程 Bootstrap4