Bootstrap 1

Bootstrap Începeți
❮ Anterior (https://translate.googleusercontent.com/translate_c?depth=1&hl=ro&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&sp=nmt4&tl=ro&u=https://www.w3schools.com/bootstr
=ro&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&sp=nmt4&tl=ro&u=https://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp&usg=ALkJrhi63hPCtC3bL8mKPVBM9rdkBlQsYw)
Ce este Bootstrap?
Bootstrap este un framework gratuit pentru front-end pentru dezvoltarea web mai rapidă și mai ușoară
Bootstrap include șabloane de design HTML și CSS pentru tipografii, formulare, butoane, tabele, navigație, modalități, caruseluri de imagine și multe alte pluginuri JavaScript, precum și opționale
Bootstrap vă oferă, de asemenea, posibilitatea de a crea cu ușurință modele receptive
Ce este un design web responsiv?
Responsabilitatea web design-ului este de a crea site-uri web care se adaptează automat pentru a arăta bine pe toate dispozitivele, de la telefoane mici la desktop-uri mari.
Istoria bootstrapului
Bootstrap a fost dezvoltat de Mark Otto și Jacob Thornton pe Twitter și lansat ca produs open source în august 2011 pe GitHub.
În iunie 2014 Bootstrap a fost proiectul nr.1 pe GitHub!
De ce folosiți Bootstrap?
Avantajele Bootstrap:
Ușor de folosit: Oricine are cunoștințe de bază despre HTML și CSS poate începe să utilizeze Bootstrap
Funcții responsabile: CSS-ul receptiv al lui Bootstrap se adaptează la telefoane, tablete și desktop-uri
Abordarea mobilă: În Bootstrap 3, stilurile mobil-prim sunt parte a cadrului de bază
Compatibilitatea cu browserele : Bootstrap este compatibil cu toate browserele moderne (Chrome, Firefox, Internet Explorer, Safari și Opera)
De unde să obțineți Bootstrap?

Există două moduri de a începe să utilizați Bootstrap pe propriul dvs. site web.
Poti:
Descărcați Bootstrap de la getbootstrap.com

Includeți Bootstrap de pe un CDN
Descărcarea Bootstrap
Dacă doriți să descărcați și să găzduiți Bootstrap singur, mergeți la getbootstrap.com (https://translate.googleusercontent.com/translate_c?
depth=1&hl=ro&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&sp=nmt4&tl=ro&u=http://getbootstrap.com/getting-started/&usg=ALkJrhjoeEeipMaVQglBD4RC_tiazUKexg) și urmați instrucțiunile de acolo.
Bootstrap CDN
Dacă nu doriți să descărcați și să găzduiți singur Bootstrap, îl puteți include dintr-o rețea CDN (Content Delivery Network).
MaxCDN oferă suport CDN pentru CSS și JavaScript de la Bootstrap. Trebuie să includeți și jQuery:
MaxCDN:


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Un avantaj al utilizării Bootstrap CDN:

Mulți utilizatori au descărcat deja Bootstrap de la MaxCDN atunci când vizitează un alt site. Ca rezultat, acesta va fi încărcat din memoria cache atunci când vizitează site-ul dvs., ceea ce duce la un timp de
încărcare mai rapid. De asemenea, majoritatea CDN-urilor se vor asigura că, odată ce un utilizator solicită un fișier din acesta, acesta va fi difuzat de la cel mai apropiat server, ceea ce duce și la un timp de
încărcare mai rapid.
jQuery
Bootstrap utilizează jQuery pentru pluginuri JavaScript (cum ar fi modals, tooltips, etc). Cu toate acestea, dacă utilizați doar partea CSS a Bootstrap, nu aveți nevoie de jQuery.
Creați prima pagină Web cu Bootstrap

1. Adăugați doctype HTML5
Bootstrap utilizează elemente HTML și proprietăți CSS care necesită doctype HTML5.
Întotdeauna includeți doctype HTML5 la începutul paginii, împreună cu atributul lang și setul de caractere corect:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>
2. Bootstrap 3 este mobil-primul
Bootstrap 3 este proiectat să răspundă la dispozitivele mobile. Stilurile mobile primite fac parte din cadrul central.
Pentru a asigura redarea corectă și zoom-ul tactil, adăugați următoarea etichetă <meta> în interiorul elementului <head> :
<meta name="viewport" content="width=device-width, initial-scale=1">
Partea width=device-width stabilește lățimea paginii pentru a urmări lățimea ecranului dispozitivului (care va varia în funcție de dispozitiv).
initial-scale=1 stabilește nivelul de zoom inițial atunci când pagina este încărcată pentru prima dată de browser.
3. Containere
Bootstrap necesită, de asemenea, un element care să conțină conținutul site-ului.
Există două clase de containere dintre care puteți alege:
1. Clasa .container oferă un container cu lățimea fixă

2. Clasa .container-fluid asigură un container cu lățime întreagă , care acoperă întreaga lățime a ferestrei de vizualizare
.container .container-fluid
Două pagini de bază pentru bootstrap

Următorul exemplu arată codul pentru o pagină principală Bootstrap (cu un container cu lățime fixă receptivă):
Exemplu
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>
Incearca-l tu insuti " (https://translate.googleusercontent.com/translate_c?depth=1&hl=ro&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&sp=nmt4&tl=ro&u=https://www.w3schools.com/bootstrap/tryit.asp%
Următorul exemplu prezintă codul pentru o pagină principală Bootstrap (cu un container cu lățime întreagă):
Exemplu
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>
Incearca-l tu insuti " (https://translate.googleusercontent.com/translate_c?depth=1&hl=ro&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&sp=nmt4&tl=ro&u=https://www.w3schools.com/bootstrap/tryit.asp%
❮ Anterior (https://translate.googleusercontent.com/translate_c?depth=1&hl=ro&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&sp=nmt4&tl=ro&u=https://www.w3schools.com/bootstr
=ro&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&sp=nmt4&tl=ro&u=https://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp&usg=ALkJrhi63hPCtC3bL8mKPVBM9rdkBlQsYw)
Copyright 1999-2015 (/about/about_copyright.asp) by Refsnes Data. All Rights Reserved.

Bootstrap 1

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Bootstrap 1

Transféré par

Droits d'auteur :

Formats disponibles

Bootstrap Începeți

Ce este un design web responsiv?

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

De unde să obțineți Bootstrap?

Descărcați Bootstrap de la getbootstrap.com

Un avantaj al utilizării Bootstrap CDN:

Creați prima pagină Web cu Bootstrap

2. Bootstrap 3 este mobil-primul

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

Bootstrap necesită, de asemenea, un element care să conțină conținutul site-ului.

Există două clase de containere dintre care puteți alege:

1. Clasa .container oferă un container cu lățimea fixă

Două pagini de bază pentru bootstrap

Incearca-l tu insuti " (https://translate.googleusercontent.com/translate_c?depth=1&hl=ro&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&sp=nmt4&tl=ro&u=https://www.w3schools.com/bootstrap/tryit.asp%

Incearca-l tu insuti " (https://translate.googleusercontent.com/translate_c?depth=1&hl=ro&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&sp=nmt4&tl=ro&u=https://www.w3schools.com/bootstrap/tryit.asp%

Vous aimerez peut-être aussi