Skip to content

Aștern cuvinte deștepte

Despre una, despre alta.

Introducere in Bootstrap

Primul pas cu bootstrap

Posted on 13/11/201406/02/2016 By claudiu No Comments on Primul pas cu bootstrap

Nustiu cat de coerent am fost in primul post despre bootstrap, si cat de bine am definit ce este bootstrap. Asta pentru ca nici eu nu am inteles foarte bine ce este, dar asta nu ma impiedica sa lucrez cu el. Intai vreau sa inteleg cum functioneaza, dupa care, poate, reusesc sa inteleg si ce este …

Bootstrap este folosit in paginile web (pentru exemplificare voi alege cel mai populat tip de pagina web, HTML), si primul pas pentru a-l folosi este sa descarci foaia de stil bootstrap. In continuare, un link catre aceasta trebuie inclus in pagina ta HTML. Cel mai usor este sa incluzi link-ul dintr-un CDN:

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

Aceasta abordare poate aduce si un plus de viteza site-ului tau. Si anume, daca un alt site care include aceelasi fisier a fost incarcat in browser-ul vizitatorului, atunci fisierul bootstrap este deja in cache-ul browser-ului.

Pentru ca bootstrap foloseste HTML 5, pagina ta trebuie sa inceapa cu declaratia de document HTML 5:

<!DOCTYPE html>

Pagina ta trebuie sa se afle intr-un div ce contine atributul class cu valoarea container (daca pagina ta are o lungime fixa) sau container-fluid (daca vrei ca pagina ta sa ocupa intreaga lungime a ecranului).

Introducerea etichetei viewport este deasemenea recomandata, in special daca este folosit div-ul container-fluid:

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

Acestea fiind spune, o pagina bootstrap ar trebui sa arate asa:

<!DOCTYPE html>
<html>
<head>
    <title>A bootstrap example</title>
    
	<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
 
<body>
	<div class="container">
	
	</div>  
</body>
</html>

Cateva elemente bootstrap :

<h1>In boootstrap tag-ul h1 are 36 pixeli</h1>
<h2>In boootstrap tag-ul h2 are 32 pixeli</h2>
<h3>In boootstrap tag-ul h3 are 24 pixeli</h3>
<h4>In boootstrap tag-ul h4 are 18 pixeli</h4>
<h5>In boootstrap tag-ul h5 are 14 pixeli</h5>
<h6>In boootstrap tag-ul h6 are 12 pixeli</h6>

Fiecare element din HTML are un stil predefinit in bootstrap. Printre cele mai interesante as alege abbr, kbd si mark. Testeaza-l pe fiecare.

Pentru Webmasteri, Programare Tags:bootstrap, css, html, javascript

Post navigation

Previous Post: De ce am renuntat sa mai intru pe arenaweb
Next Post: Un banc cu MaSha

Related Posts

Bootstrap Sistemul de grid bootstrap Pentru Webmasteri
Domenii personalizate. Adio.com Domenii personalizate de internet Pentru Webmasteri
Construieste corect o pagina web Cum sa creezi corect o pagina web din punct de vedere semantic Pentru Webmasteri
QR Code Ce este un cod QR si cum poti sa generezi unul Pentru Webmasteri
Write less, do more Cum sa adaugi jQuery la site-ul tau Pentru Webmasteri
Bootstrap de la twitter Bootstrap Pentru Webmasteri

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Recent Comments

  • anonim on UEFA Champions League 2014 – 2015, colectia online
  • anonim on UEFA Champions League 2014 – 2015, colectia online
  • anonim on UEFA Champions League 2014 – 2015, colectia online
  • anonim on UEFA Champions League 2014 – 2015, colectia online
  • anonim on UEFA Champions League 2014 – 2015, colectia online

Categories

Pages

  • Colectii de carti
    • Psihologie Practica – Editura Trei
  • Despre blog
    • Ce postez pe blog?
  • Sport
    • EURO 2016
      • Componenta Grupelor si rezultate
      • Lotul Romaniei
      • Situatia Cartonaselor
    • Europa League 2014
    • Tenis – Singapore 2014

Archives

Tags

2014 abilitate adezive alegeri prezidentiale angajare bootstrap cariere colinde comunicare css de sarbatori de vizitat divertisment euro 2016 f64 FOTBAL guma turbo html interviu intrebari javascript liga 1 romania nu ma lua in seama oferte foto olanda panini parc poze-guma-turbo-2014 preliminarii cm2014 restante romania simona halep simona halep 2015 steaua bucuresti sticker-e succes TENIS tenis 2014 tenis 2015 the-west ucl ucl 2013 2014 uefa cl urari de anul nou wta-finals

Copyright © 2025 Aștern cuvinte deștepte.

Powered by PressBook Grid Blogs theme