CSS karkasai

frameworks

Karkasas

Didelis CSS taisyklių rinkinys.

 

Pagal tam tikrą tvarką rašant HTML kodą automatiškai suformuojami dažnai naudojami tinklalapio elementai.

 

Pagrindas tolimesniam tobulinimui

Karkaso savybės

  • Tinklelis (grid)
  • Tipografija
  • UI elementai
    • Mygtukai
    • Formos
    • Meniu
    • Lentelės
    • Paveikslėliai
    • Galerijos
    • Dialogai
    • ir t.t.

Bootstrap

Bootrstap 3

  • Autorius: Twitter
  • Populiariausias projektas GitHub tinkle
    • 86,000+ stars
    • 35,000+ forks
  • Pilnavertis, plačių galimybių frontend karkasas
    • CSS
    • JS (naudoja jQuery)

Kaip naudoti?

<!DOCTYPE html>
<html>
  <head>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
</html>

Hello World!

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>1 pavyzdys</title>
    <!-- Bootstrap CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Bootstrap JS -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
</html>

Užduotis #3

Padaryti puslapio struktūrą iš 3 stulpelių:

  • Didelis ekranas - 2:8:2 proporcijos
  • Vidutinis ekranas - 3:6:3 proporcijos
  • Mažas ekranas - 3:9:12 proporcijos
  • Mažiausias ekranas - 12:8:4 proporcijos

Užduotis #4 Lab. darbas #3

Užduotis #5

Užduotis #5 Lab. darbas #4

Naudojant Bootstrap sukurti tinklaraščio pirmojo puslapio šabloną;

 

  • Antraštė
  • Navigacija
    • Pradžia
    • Apie mane
    • Archyvas
      • 2013
      • 2012
      • 2011
  • 4 straipsniai
    • Pavadinimas
    • Autorius
    • Data
    • Tema
    • Tekstas
    • Paveikslėliai
  • Šoninė juosta
    • Apie mane
    • Naujausi įrašai
    • 3 reklamos skydai
  • Poraštė (footer)

CSS karkasai

By Arūnas Liuiza

CSS karkasai

  • 4,733

More from Arūnas Liuiza