Voved Bootstrap

Т-1: BOOTSTRAP
ВЕБ АПЛИКАЦИСКИ СОФТВЕР

Воена академија WAS
„Генерал Михаило Апостолски“ - Скопје
СОДРЖИНА:

Вежба 1

Вовед

Превземање и конфигурација

Ќелии (engl. Grid layout)

Вметнување на редови

Offset - Поместување на колони
Вежба 1
Да се креира веб страна, по следното:
 користење на HTML или друга технологија;
 веб страната да содржи една редица со пет колони;
 редицата да има различна позадина од колоните, а секоја колона
да е со различна боја;
 секоја од колоните да биде означена со одреден назив;
 веб страната да има можност да се прилагодува на различни големини
на уреди (десктоп, таблет, мобилен телефон, лаптоп).
Време за работа:
∼ 25 минути
Потребно е:
 студентот да користи лаптоп или десктоп компјутер;
 интернет конекција.
Дискусија за резултатите:
∼ 20 минути
Вовед
 Open source framework што дозволува креирање и развој на веб страни
 Што се овозможува?
• CSS framework, која е флексибилна и едноставна за употреба

• Grid system (ќелии) за подобра организација - layout на вебсајтот
• Многу други компоненти
 Потребни предзнаења
• HTML
• CSS
• JavaScript - не е задолжително
 Bootstrap може да се превземе од следниот линк:
https://getbootstrap.com/docs/3.3/
 Да се креира нов фолдер со назив Web Site

 Да се креира нов фајл со TextEdit и да се зачува како
index.html документ во фолдерот Web Site
 Се копира следниот HTML темплејт во index.html
https://getbootstrap.com/docs/3.3/getting-started/#template
<!DOCTYPE html>
<html lang="en">
<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>Bootstrap 101 Template</title>


<link href="css/bootstrap.min.css" rel="stylesheet">



</head>
<body>
<h1>Hello, world!</h1>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script src="js/bootstrap.min.js"></script>
</body>
</html>
 Bootstrap фолдерот се преместува во фолдерот Web Site
 Да се преимени фолдерот bootstrap-3.3.7-dist во bootstrap
 jQuery може да се превземе од следниот линк:
https://jquery.com/
 jQuery фајлот се преместува во фолдерот Web Site

 Да се преимени фајлот jquery-3.6.0.min.js во jquery.min.js
 Се едитира фајлот index.html ( доколку се работи на Windows, да се користи Notepad++)
utf-8 тагот се користи за безбедност
<!DOCTYPE html>
<html lang="en">
<head> тагот ја покажува последната вер. на IE
<meta charset="utf-8"> тагот се користи за да се провери
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> приказот на мобилен уред



<link href=”bootstrap/css/bootstrap.min.css" rel="stylesheet">



</head>
<body>
<h1>Hello, world!</h1>


<script src="jquery.min.js"></script>

<script src=”bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Ќелии (engl. Grid Layout)
 Зошто се користат ќелиите
 Полесно додавање и одземање на контентот;
 Обезбедува структура;
 Ќелиите користат колони и редови со цел да се конфигурира подобро контентот;
 Со помош на ќелиите со Bootstrap контентот може да се конфигугрира подеднакво
исто на сите пребарувачи;
 Ќелиите поддржуваат до 12 колони, кои се може да ја поделат страницата;
 Поддржува измена на големината на колоните во ќелиите;
1.<!DOCTYPE html>
2.<html lang="en">
3.<head>
4.<meta charset="utf-8">
5.<meta http-equiv="X-UA-Compatible" content="IE=edge">
6.<meta name="viewport" content="width=device-width, initial-scale=1">
7.
8.<title>Bootstrap 101 Template</title>
9. Поврзува CSS фајл со container класата
10.
11.<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
12.<link href="stylesheet.css" rel="stylesheet">
13.
14.</head>
Ќелиите мора да бидат вметнати во container класата
15.<body>
16.
17.<div class="container">
18. row класата секогаш е во container класата, при што овозможува да
19.<div class="row"> се внесуваат колоните.
20.
21.<div class="col-md-2">col 1</div> Скратеницата col -,означува дека е колона. Во колоните се
22.<div class="col-md-2">col 2</div> разликуваат четир величини:
23.<div class="col-md-2">col 3</div>
24.<div class="col-md-2">col 4</div>  xs (extra small) за телефони;
25.<div class="col-md-2">col 5</div>  sm (small) за таблети;
26.<div class="col-md-2">col 6</div>
27.
 md (medium) за десктоп PC;
28.</div>  lg (large) за големи десктоп PC.
Бројот „2“ врши контрола на големината, при што вредноста може да
29.</div>
30. биде од 1 до 6.
31.
32.<script src="jquery.min.js"></script>
33.
34.<script src="bootstrap/js/bootstrap.min.js"></script>
35.</body>
36.</html>
stylesheet.css
.row {background-color:lavender}<html lang="en">
1.<!DOCTYPE html> 39.
2.<html lang="en"> 40.<script src="jquery.min.js"></script>
3.<head> 41.
5.<meta http-equiv="X-UA-Compatible" content="IE=edge"> 43.<script src="bootstrap/js/bootstrap.min.js"></script>
6.<meta name="viewport" content="width=device-width, initial-scale=1"> 44.</body>
7.
8.<title>Bootstrap 101 Template</title>
9.
10.
11.<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
12.<link href="stylesheet.css" rel="stylesheet">
13.
14.</head>
15.<body>
16.<div class="container">
17.<div class="row">
18.
19.<div class="col-md-2">
20.<div class="col1">col 1</div>
21.</div>
23.<div class="col2">col 2</div> Креираме сопствени класи
24.</div>
27.</div>
30.</div>
33.</div>
36.</div>
37. </div>
38.</div>
stylesheet.css
.row {background-color:lavender}
.col1{
margin:3px;
min-height:300px;
text-align:center;
background-color:silver;
}
.col2{
margin:3px;
min-height:300px;
text-align:center;
background-color:green;
}
.col3{
margin:3px;
min-height:300px;
text-align:center;
background-color:blue;
}
.col4{
margin:3px;
min-height:300px;
text-align:center;
background-color:red;
}
.col5{
margin:3px;
min-height:300px;
text-align:center;
background-color:darkgreen;
}
.col6{
margin:3px;
min-height:300px;
text-align:center;
background-color:orange;
}
<!DOCTYPE html>
<html lang="en"> 
<head> <script src="jquery.min.js"></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
scale=1"> <script src="bootstrap/js/bootstrap.min.js"></script>
 </body>
 </html>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="stylesheet.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="col1">side left</div> Преименување на класите
</div>
<div class="col2">main col</div>
</div>
<div class="col3">side right</div>
</div>

</div>
</div>
<!DOCTYPE html>
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="bootstrap/js/bootstrap.min.js"></script>
 </html>
</head>
<body>
<div class="row">
<div class="col1">side left</div>
</div>
</div>
<div class="col3">side right</div> Вметнување на редови
</div>
</div>
<div class="row">
</div>
</div>
</div>
</div>
</div>
</div>
Offset – Поместување на колони
<!DOCTYPE html>
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial- <script src="bootstrap/js/bootstrap.min.js"></script>
scale=1"> </body>



</head>
<body>
<div class="row">
<div class="col1">side left</div>
</div>
<div class="col-md-6"> Вметнување на редови
</div>
</div>
</div>
<div class="row"> Offset представува функционалност што дозволува

<div class="col-md-3 col-md-offset-9">
<div class="col4">col 4</div> подесување на колоната во редот на одредено
</div> место
</div>
</div>
Offset – Поместување на колони
Nesting – Вгнездување на редови
<!DOCTYPE html>
<html lang="en"> <div class="row">
<head> <div class="col-md-3">
<meta charset="utf-8"> <div class="col4">col 4</div>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> </div>
<meta name="viewport" content="width=device-width, initial- <div class="col-md-3">
scale=1"> <div class="col5">col 5</div>
 <div class="col-md-3">
<title>Bootstrap 101 Template</title> <div class="col6">col 6</div>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> </div>
<link href="stylesheet.css" rel="stylesheet"> <div class="col-md-3">
</head> <div class="col7">col 7</div>
<body> </div>
<div class="container"> </div>
<div class="row"> </div>
<div class="col1">side left</div> 
</div> <script src="jquery.min.js"></script>
<div class="col-md-6"> 
<div class="row"> <script src="bootstrap/js/bootstrap.min.js"></script>
<div class="col-md-4"> </body>
<div class="colinside">Inside col</div> </html>
</div>
<div class="colinside">Inside col</div>
</div> Вгнездуавање на ред
<div class="colinside">Inside col</div>
</div>
</div>
</div>
</div>
</div>
</div>
stylesheet.css
.row {background-color:lavender} .col6{
margin:3px;
.col1{ min-height:300px;
margin:3px; text-align:center;
min-height:300px; background-color:orange;
text-align:center; }
background-color:silver;
} .col7{
margin:3px;
min-height:300px; background-color:beige;
background-color:green;
} .colinside{
min-height:300px; background-color:orange;
background-color:blue;
}
.col4{
margin:3px;
min-height:300px;
text-align:center;
background-color:red;
}
.col5{
margin:3px;
min-height:300px;
text-align:center;
background-color:darkgreen;
}
ПРАШАЊА

Voved Bootstrap

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Voved Bootstrap

Uploaded by

Copyright:

Available Formats

Т-1: BOOTSTRAP

ВЕБ АПЛИКАЦИСКИ СОФТВЕР

• CSS framework, која е флексибилна и едноставна за употреба

 Да се креира нов фолдер со назив Web Site

 jQuery фајлот се преместува во фолдерот Web Site

<!-- HTML коментар

<div class="row"> Offset представува функционалност што дозволува

You might also like