Introducere: Despre bootstrap si configurarea mediului de lucru

Bootstrap | Stefanescu Mihai | 2020-10-11

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>

Articolul urmator

Imi place ce faci aici

Daca iti place ce fac aici imi poti cumpara o cafea

Stefanescu Mihai
Programator de ~8 ani, am lucrat la proiecte din mai multe industrstrii, de la eCommerce la telecomunicatii la automatizari. In acest timp am folosi diferite tehnologii, de la PHP, MySQL, PostgreSql, RabbitMq, Redis, Memcached si altele.

Get in touch

Pentru nelamuriri, dubii, comentarii si chestii de pe suflet ne putem auzi pe Discord, Reddit sau poti deschide o discutie noua pe forum.

Posteaza un comentariu

Comentarii

Inca nu au fost postate comentarii, fii primul care posteaza un comentariu!

🔖 Bookmarks ⊞

✨ Pentru a sustine aceasta comunitate am sa te rog sa te autentifici sau sa te inregistrezi!

🌪️ Discord ⊞