Ultimele tutoriale de dezvoltare web
 

Bootstrap Get Started

❮ Anterior Urmatorul capitol ❯

Ce este Bootstrap ?

  • Bootstrap este un cadru gratuit front-end pentru dezvoltare web mai rapid și mai ușor
  • Bootstrap include HTML si CSS template - uri de design pe bază de tipografie, formulare, butoane, tabele, navigare, modalelor, carusele imagine și multe alte, precum și plugin - uri opționale JavaScript
  • Bootstrap , de asemenea , vă oferă posibilitatea de a crea cu ușurință modele sensibile

What is Responsive Web Design?

web design receptivă este despre crearea de site-uri web care se ajustează în mod automat pentru a arata bine pe toate dispozitivele, de la telefoane mici la desktop-uri mari.

Bootstrap Istoric

Bootstrap a fost dezvoltat de Mark Otto și Jacob Thornton de la Twitter și lansat ca un produs open source în august 2011 pe GitHub.

Din iunie 2014 Bootstrap a fost proiectul nr.1 pe GitHub!

De ce să folosim Bootstrap ?

Avantajele Bootstrap :

  • Ușor de utilizat: Oricine cu cunoștințe de bază doar de HTML si CSS poate începe să utilizați Bootstrap
  • Caracteristici Responsive: Bootstrap e receptiv CSS ajustează la telefoane, tablete și desktop - uri
  • Mobile prima abordare: În Bootstrap 3, stiluri de -mobile prima parte a cadrului de bază
  • Compatibilitate Browser: Bootstrap este compatibil cu toate browserele moderne (Chrome, Firefox, Internet Explorer, Safari, and Opera)

În cazul în care pentru a obține Bootstrap ?

Există două moduri de a începe utilizarea Bootstrap pe propriul dvs. site -ul web.

Poti:

  • Descărcați Bootstrap din getbootstrap.com
  • Include Bootstrap dintr - un CDN

descărcarea Bootstrap

Dacă doriți să descărcați și gazdă Bootstrap - te, du - te la getbootstrap.com , și urmați instrucțiunile de acolo.

Bootstrap CDN

Dacă nu doriți să descărcați și să găzduiască Bootstrap le puteți include de la un CDN (Content Delivery Network) .

MaxCDN oferă suport CDN pentru Bootstrap CSS e și JavaScript. De asemenea, includ jQuery:

MaxCDN:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

One advantage of using the Bootstrap CDN :
Mulți utilizatori au descărcat deja Bootstrap de la MaxCDN atunci când vizitează un alt site. Ca urmare, acesta va fi încărcat de memorie cache atunci când vizitează site-ul dvs., ceea ce duce la timpul de încărcare mai rapidă. De asemenea, cele mai multe CDN's se va asigura că , odată ce un utilizator cere un fișier de la ea, acesta va fi difuzat de serverul cel mai apropiat de ei, ceea ce conduce , de asemenea , timp de încărcare mai rapidă.

Crearea Prima pagină web cu Bootstrap

1. Adăugați DOCTYPE HTML5

Bootstrap utilizează elemente HTML și proprietăți CSS care necesită DOCTYPE HTML5.

Includeți întotdeauna DOCTYPE HTML5 la începutul paginii, împreună cu lang atributul și setul corect de caractere:

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

2. Bootstrap 3 este mobil primul

Bootstrap 3 este proiectat pentru a fi receptiv la dispozitive mobile. Mobile primele stiluri sunt parte a cadrului de bază.

Pentru a asigura o redare corectă și atingeți zoom, adăugați următorul <meta> tag - ul în interiorul <head> elementului:

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width părții stabilește lățimea paginii pentru a urmări ecran lățimea dispozitivului (which will vary depending on the device) în (which will vary depending on the device) .

initial-scale=1 la initial-scale=1 parte stabilește nivelul inițial de zoom atunci când pagina este mai întâi încărcat de către browser.

3. Containere

Bootstrap necesită , de asemenea , un element care conține să -și încheie conținutul site - ului.

Există două clase de containere pentru a alege de la:

  1. .container Clasa ofera un container receptiv lățime fixă
  2. .container-fluid clasa ofera un container plin lățime, se întinde pe întreaga lățime a ferestrei de vizualizare

Notă: Containerele nu sunt încorporabile (nu se poate pune un recipient în interiorul altui container).

Două bază Bootstrap Pagini

Exemplul următor prezintă codul pentru o bază Bootstrap pagina (with a responsive fixed width container) :

Exemplu

<!DOCTYPE html>
<html lang="en">
<head>
  <title> Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

</body>
</html>
Încearcă - l singur »

Exemplul următor prezintă codul pentru o bază Bootstrap pagina (with a full width container) de (with a full width container) :

Exemplu

<!DOCTYPE html>
<html lang="en">
<head>
  <title> Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

</body>
</html>
Încearcă - l singur »

❮ Anterior Urmatorul capitol ❯