2 Voved - Bootstrap

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

Воена академија WAS
„Генерал Михаило Апостолски“ - Скопје
СОДРЖИНА:

Креирање на видливи класи

Користење на push и pull

Прикривање на класи – hidden

Повеќекратни класи (multiple classes)

Прикажување на текст - Typography
Приказ на екран со големина lg - large
Приказ на средната класа (зелена боја) се

губи екран со големина lg - large
<!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 visible-xs">
</head> <div class="col7">col 7</div>
<body> </div>
<div class="container">
<div class="row">
<div class="col-md-3"> </div> Креирање на видливи
<div class="col1">side left</div> класи за мал екран
</div> </div>
<div class="col-md-6">
<div class="col2">main col 
<div class="row"> <script src="jquery.min.js"></script>
<div class="col-md-4 visible-md visible-lg"> 
</div> <script src="bootstrap/js/bootstrap.min.js"></script>
<div class="col-md-4 visible-md visible-lg"> </body>
<div class="colinside">Inside col</div> </html>
</div>
<div class="col-md-4 visible-md visible-lg">
<div class="colinside">Inside col</div>
</div>
</div>
</div>
</div> Креирање на видливи класи на
<div class="col3">side right</div> голем екран
</div>
</div>
Приказ на екран со мала големина

каде се користи класата visible
Со користење на класата visible не

се прикажува класата col7 на голем
екран
Со користење на класата visible се

се прикажува класата col7 на
многу. мал екран
ПРОБЛЕМ?
Средната колона не се прикажува
како прва (на мал екран), при што
посетителите треба да скролаат
низ контентот на страната
Со користење на pull може да се

преместуваат колоните во лево за
одреден број на места.
Со користење на push може да се

преместуваат колоните во десно за
одреден број на места.
<!DOCTYPE html>
<!DOCTYPE html> <div class="row">
<html lang="en"> <div class="col-md-3">
<head> <div class="col4">col 4</div>
<meta charset="utf-8"> </div>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <div class="col-md-3">
<meta name="viewport" content="width=device-width, initial- <div class="col5">col 5</div>
scale=1"> </div>
 <div class="col6">col 6</div>
<title>Bootstrap 101 Template</title> </div>
 <div class="col7">col 7</div>
<link href="stylesheet.css" rel="stylesheet">
</head> </div>
<body>
</div>


<div class="col-md-6 col-md-push-3"> <script src="bootstrap/js/bootstrap.min.js"></script>
<div class="col2">main col</div> </body>
</div> </html>
<div class="col-md-3 col-md-pull-6">

<div class="col1">side left</div>
</div> Вредностите за push и pull
<div class="col-md-3"> најмногу ќе зависат од вредноста
<div class="col3">side right</div> на col-md-6 и col-md-3 . ЗОШТО?
</div>
</div>
Прикривање на класи - hidden
Доколку се настојува да се прикрие
col7, тогаш се користи класата
hidden.
Bootsrap овозможува класата
hidden се користи за прикривање
на контентот за различни големини.
.
<!DOCTYPE html>
scale=1"> </div>
<div class="col-md-3 hidden">
</head> </div>
<body>
</div>
as needed -->
</div> </html>

</div>
<div class="col3">side right</div> Користење на класата hidden за
</div>
</div>
прикривање на col7.
Col7 e е прикриена со користење

на класата hidden.
.
ПРОБЛЕМ:
Доколку се настојува col7 да се
прикрие само за мали уреди, тогаш
во кодот се додава hidden-xs.
<!DOCTYPE html>
scale=1"> </div>
<div class="col-md-3 hidden-xs">
</head> </div>
<body>
</div>
as needed -->
</div> </html>

</div>
<div class="col3">side right</div> Користење на класата hidden-xs за
</div>
</div>
прикривање на col7.
col7 e прикриена само за мали

уреди, преку користење на класата
hidden-xs.
<!DOCTYPE html>
<html lang="en"> <div class="row">
<head> <div class="col-md-3 col-xs-6">
<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 col-xs-6">
scale=1"> <div class="col5">col 5</div>
 <div class="col-md-3 col-xs-6">
<title>Bootstrap 101 Template</title> <div class="col6">col 6</div>
</div>
 <div class="col-md-3 col-xs-6">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> <div class="col7">col 7</div>
<link href="stylesheet.css" rel="stylesheet"> </div>
</div>
</head> </div>
<body> 
<div class="container"> <script src="jquery.min.js"></script>
<div class="row"> 
<div class="col1">side left</div> <script src="bootstrap/js/bootstrap.min.js"></script>
</div>
<div class="col-md-6"> </body>
<div class="col2">main col</div>
</div> </html>
<div class="col3">side right</div>
</div>
</div>
Со користење на повеќекратните
класи се овозможува приказ на
екранот за мали уреди согласно
дизајнот на апликацијата.
приказ без користење на Приказ со користење на

повеќекратни класи повеќекратни класи
<!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</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="row"> H1 heading, Bootstrap користи 36 пиксели фонт BOLD

<div> <small> овозможува креирање на поднаслов(subheading)
<h1>H1 Heading</h1> “text-hide“ класата овозможува прикривање на текстот
<h2>H2 Heading <small> Secondary text </small></h2>
<h3 class="text-hide">H3 hide Heading</h3>
<h3>H3 Heading</h3>
H3 heading, Bootstrap користи 24 пиксели фонт BOLD
<p class="lead"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
H2 heading, Bootstrap class=“lead”, овозможува да се презентира парагафот како
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum doloreглавен
користи 30 пиксели фонт во однос
eu fugiat на текстот
nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
BOLD
<p> <span class="lead"> Lorem ipsum dolor </span> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
тагот Duis
nisi ut aliquip ex ea commodo consequat. овозможува
aute irureда се in
dolor презентира текстот
reprehenderit во <span>
in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
како главен во однос на останатиот
<p class="text-center"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
velit esseтагот овозможува
cillum да сеnulla
dolore eu fugiat постави текстот
pariatur. во центар
Excepteur sint occaecat cupidatat non
<p class="text-nowrap"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
тагот овозможува
velit esse cillumда не сеeuпрефрла
dolore текстот
fugiat nulla во новExcepteur
pariatur. ред sint occaecat cupidatat non
<p class="small"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
тагот овозможува
velit esseтекстот
cillum да се намали
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
</div>
</div>
</div>

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

<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Вежба 2
Да се креира веб страна, по следното:
 користење на класата text-right;
 користење на класата text-capitalize;
 користење на класата text-uppercase;
 користење на класата text-lowercase.
Време за работа:
∼ 25 минути
Потребно е:
 студентот да користи лаптоп или десктоп компјутер;
 интернет конекција.
Дискусија за резултатите:
∼ 10 минути
Вежба 3
Да се креира веб страна, по следното:
 користење на класата container;
 да се креираат два реда;
 секој ред да има по три колони;
 средната колона во редот да биде основна;
 во секоја колона да има текст;
 класите за текст од Bootstrap, да се користат во секоја колона;
 за мали уреди, основната колона во редот да се прокажува прва.
 секоја колона и секој ред да се со различна боја;
 container класата да има различна боја во однос редовите и колоните.
Време за работа:
∼ 25 минути
Потребно е:
 студентот да користи лаптоп или десктоп компјутер;
 интернет конекција.
Дискусија за резултатите:
∼ 10 минути
ПРАШАЊА

2 Voved - Bootstrap

Uploaded by

Document Information

Original Title

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

2 Voved - Bootstrap

Uploaded by

Copyright:

Available Formats

Т-2: BOOTSTRAP

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

Приказ на екран со големина lg - large

Приказ на средната класа (зелена боја) се

Приказ на екран со мала големина

Со користење на класата visible не

Со користење на класата visible се

Со користење на pull може да се

Со користење на push може да се

<div class="col-md-3 col-md-pull-6">

<div class="col-md-3 col-md-pull-6">

Col7 e е прикриена со користење

<div class="col-md-3 col-md-pull-6">

col7 e прикриена само за мали

<div class="container"> <script src="jquery.min.js"></script>

приказ без користење на Приказ со користење на

<div class="row"> H1 heading, Bootstrap користи 36 пиксели фонт BOLD

You might also like