Introducere: Despre bootstrap si configurarea mediului de lucru

postat acum un an de Stefanescu Mihai in categorie Bootstrap

In aceasta serie de articole am sa vorbesc despre Bootstrap, care este un framework frontend intuitiv si puternic, mobile first ce ne ajuta sa cream site-uri rapid si usor folosind HTML, CSS si JavaScript.

De ce as vrea sa folosesc bootstrap?

  • Este Mobile First
  • Este suportat de toate browserele populare
  • Usor de invatat
  • Este responsive

Cu ce vine Bootstrap?

  • Scaffolding: Bootstrap vine cu o sistem de grile (grids), stiluri pentru link-uri, background-uri, butoane, si multe altele.
  • CSS: Bootstrap vine cu setari ce pot fi modificate din CSS si elemente prestabilite.
  • Componente: Bootstrap contine o multime de elemente refolosibile precum icon-uri, dropdown-uri, meniuri, alerte, pop-overs si multe altele.
  • Plugin-uri JavaScript: Bootstrap contine o multime de plugin-uri jQuery pe care le puteti include in funuctie de necesitati, fie pe toate.

Setarea mediului de lucru

Putem incepe sa folosim bootstrap foarte usor, iar mai jos am sa va explic cum puteti descarca bootstrap, structura de fisiere si cum ar trebuii sa arate prima voastra pagina HTMl scrisa cu ajutorul Bootstrap. 

Download

Puteti descarca ultima versiune de bootstrap de pe http://www.getbootstrap.com. O data ce ati apasat pe butonul Download bootstrap esti trimis pe o pagina cu 3 optiuni de download:

·        Download Bootstrap – Aceasta este versiunea precompilata si minified. In aceasta versiune nu este inclusa docuemntatia.

·        Download Source – Aceasta este versiunea LESS descarcata direct de pe GitHub.

·        Download Sass – Versiunea SASS.

Pentru a intelege mai bine bootstrap in aceasta serie de articole folosim versiunea precompilata de Bootstrap.

Structura de fisiere

Versiunea precompilata

O data ce ati descarcat versiunea prcompilata si dezarhivati fisierul veti avea aceste fisiere aranjate in aceasta structura:

Se poate observa ca avem atat versiunile normale cat si verisunile min ale fisierelor impreuna cu fonturile.

Versiunea Source Code

Fisierele se gasesc in folderele less, js, fonts, iar in folderul dist gasiti versiunea precompilata.

Primul Template

<!DOCTYPE html>
<html>
   <head>
      <title>Invata-programare : Bootstrap</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      <!-- Bootstrap -->
      <link href = "css/bootstrap.min.css" rel = "stylesheet">     
   </head>
   
   <body>
      <h1>Salut Invata-Programare!</h1>


      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src = "https://code.jquery.com/jquery.js"></script>      
      <!-- Include all compiled plugins (below), or include individual files as needed -->
      <script src = "js/bootstrap.min.js"></script>
   </body>
</html>

 

Sunt un tanar programator din Bucuresti ce lucreaza in PHP/Mysql (MySqli/PDO), Laravel, CodeIgniter, MySQL, PostgreSQL, Wordpress, HTML5/CSS3, Sass, Photoshop si multe altele.
Google+ Community Facebook Group