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
- Bootstrap 3
- Zurb Foundation
- Pure CSS
- Skeleton
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?
- Parsisiųsti
- CDN
<!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,736