4 Voved - Bootstrap

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

Воена академија WAS
„Генерал Михаило Апостолски“ - Скопје
СОДРЖИНА:
û Вметнување на икони (engl. Glyphicons)
û Собирање на менито (engl. Collapse menu)
û Слики
û Размер или сооднос (engl. Aspect Ratio)

û Вежба 5
Вметнување на икони (engl. Glyphicons)
Линк до веб страна за икони (engl. Glyphicons):
https://getbootstrap.com/docs/3.3/components/
<!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"> 
 <script src="bootstrap/js/bootstrap.min.js"></script>
<title>Bootstrap 101 Template</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> </body>
<link href="stylesheet.css" rel="stylesheet">
</html>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">EJ Media</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Lifestyle</a></li> class="glyphicon glyphicon-envelope” креира икона за контакт
<li><a href="#">Entertainment</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-envelope"></span> Contact Us</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group"> class="glyphicon glyphicon-log-in"креира икона за логирање
<input type="text" class="form-control"
placeholder="Search">
</div>
<button type="submit" class="btn btn-danger">Submit</button>
</form>
</div>
</nav>
.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;
.col2{
min-height:300px;
margin:3px;
text-align:center;
min-height:300px;
background-color:beige;
text-align:center;
}
background-color:#faebd7;
}
#test{
margin:5px;
.col3{
}
margin:3px;
min-height:300px;
text-align:center;
background-color:skyblue;
}
.col4{
margin:3px;
min-height:300px;
text-align:center;
background-color:red;
}
.col5{
margin:3px;
min-height:300px;
text-align:center;
background-color:darkgreen;
}
Собирање на менито (engl. Collapse menu)
При намалување на екранот

менито не се собира во
hamburger icon
<!DOCTYPE html>
<html lang="en"> </form>
<head> </div>
<meta charset="utf-8"> </div>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> </nav>
<meta name="viewport" content="width=device-width, initial-scale=1">

come *after* these tags -->
<title>Bootstrap 101 Template</title> <script src="jquery.min.js"></script>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="stylesheet.css" rel="stylesheet"> 
<body>
<nav class="navbar navbar-inverse"> <script src="bootstrap/js/bootstrap.min.js"></script>
<div class="navbar-header"> </body>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span> </html>
<span class="icon-bar"></span> <span> тагот овозможува да
<span class="icon-bar"></span> се креирaaт цртичките од <button> тагот овозможува да се креира
</button> иконата hamburger icon со функционалност
<a class="navbar-brand" href="#">EJ Media</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar"> class="collapse navbar-collapse" за да го собере менито
<ul class="nav navbar-nav">
<li><a href="#">Lifestyle</a></li>
<li><a href="#">Entertainment</a></li>
</ul>
</ul>
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
При намалување на екранот

менито се собира во
hamburger icon
<!DOCTYPE html>
<html lang="en"> </form>
<head> </div>
<meta charset="utf-8"> </div>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> </nav>
 JavaScript plugins) -->
<title>Bootstrap 101 Template</title> <script src="jquery.min.js"></script>
<link href="stylesheet.css" rel="stylesheet"> 
<body> <script src="bootstrap/js/bootstrap.min.js"></script>
</body>
<nav class="navbar navbar-default"> </html>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navCollapse">
<span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span> <button> тагот овозможува да се креира
</button>
<a class="navbar-brand" href="#">EJ Media</a> hamburger icon со функционалност
</div>
<div class="collapse navbar-collapse" id="navCollapse"> class="glyphicon glyphicon-menu-hamburger” овозможува
<ul class="nav navbar-nav"> креирање на hamburger icon од lyphicon
<li><a href="#">Lifestyle</a></li>
<li><a href="#">Entertainment</a></li> class="collapse navbar-collapse" за да го собере менито
</ul>
</ul>
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
Позадината е со светла боја.

Да се проба со темна
позадина! При намалување на екранот
менито се собира во
hamburger icon
Слики
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>Bootstrap 101 Template</title>


<link href="stylesheet.css" rel="stylesheet">
</head>
<body>
<div class="row"> class="thumbnail” ја одредува големината на сликата
<div class="col-md-3 col-xs-5">
<div class="thumbnail"> class="img-responsive" одредува сликата
<img class="img-responsive" src="arch.jpg" alt="St. Louis Arch">
<div class="caption"> да се прилагоди на екран
This is the St. Louis Arch
</div> class="caption” овозможува да се напише текст
</div>
</div>
</div>
</div>


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

<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Слики
.caption {font-weight:bold}
Слики
Линк до веб страна од слика:
https://upload.wikimedia.org/wikipedia/commons/3/30/Gateway_Arch_%28distant_view%29.jpg
Слики
Галерија (engl. Image Gallery)
<!DOCTYPE html> <div class="col-md-2 col-xs-3">
<html lang="en"> <div class="thumbnail">
<head> <a href="аrch.png">
<meta charset="utf-8"> <img src="аrch.png" class="img-responsive" alt="St. Louis Arch"></img>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <div class="caption">
<meta name="viewport" content="width=device-width, initial-scale=1"> This is the St. Louis Arch
 </div>
<title>Bootstrap 101 Template</title> </div>
 <div class="thumbnail">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> <a href="аrch.png">
<link href="stylesheet.css" rel="stylesheet"> <img src="аrch.png" class="img-responsive" alt="St. Louis Arch"></img>
<div class="caption">
</head> This is the St. Louis Arch
<body> </div>
<div class="container-fluid"> </div>
<div class="row"> </div>
<div class="col-md-2 col-xs-3"> <div class="col-md-2 col-xs-3">
<div class="thumbnail"> <div class="thumbnail">
<a href="аrch.png"> <a href="аrch.png">
 This is the St. Louis Arch
<img src="аrch.png" class="img-responsive" alt="St. Louis Arch"></img </div>
<div class="caption"> </div>
This is the St. Louis Arch </div>
</div>
</div> </div>
</div> </div>
<div class="col-md-2 col-xs-3"> 
<div class="thumbnail"> <script src="jquery.min.js"></script>
<a href="аrch.png"> 
<div class="caption"> <script src="bootstrap/js/bootstrap.min.js"></script>
This is the St. Louis Arch </body>
</div> </html>
</div>
Галерија (engl. Image Gallery)
Размер или сооднос (engl. Aspect Ratio)
Доколку во веб страната се вметне нова слика со следните димензии:
https://upload.wikimedia.org/wikipedia/commons/5/51/Waldorf_Hotel_1893.jpg
<!DOCTYPE html> <div class="col-md-2 col-xs-3">
<html lang="en"> <div class="thumbnail">
<head> <a href="аrch.png">
<meta charset="utf-8"> <img src="аrch.png" class="img-responsive" alt="St. Louis Arch"></img>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <div class="caption">
<meta name="viewport" content="width=device-width, initial-scale=1"> This is the St. Louis Arch
 </div>
<title>Bootstrap 101 Template</title> </div>
 <div class="thumbnail">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> <a href="аrch.png">
<link href="stylesheet.css" rel="stylesheet"> <img src="аrch.png" class="img-responsive" alt="St. Louis Arch"></img>
<div class="caption">
</head> This is the St. Louis Arch
<body> </div>
<div class="container-fluid"> </div>
<div class="row"> </div>
<div class="col-md-2 col-xs-3"> <div class="col-md-2 col-xs-3">
<div class="thumbnail"> <div class="thumbnail">
<a href="аrch.png"> <a href="аrch.png">
 This is the St. Louis Arch
<img src="аrch.png" class="img-responsive" alt="St. Louis Arch"></img </div>
<div class="caption"> </div>
This is the St. Louis Arch </div>
</div>
</div> </div>
</div> </div>
<div class="col-md-2 col-xs-3"> 
<div class="thumbnail"> <script src="jquery.min.js"></script>
<a href="Waldorf.jpg"> 
<div class="caption"> <script src="bootstrap/js/bootstrap.min.js"></script>
This is the St. Louis Arch </body>
</div> </html>
</div>
Коментари и дикусија за проблемот со втората слика

§ Зошто се појавува сликата на овој начин?
§ Дали сте се сретнале со ваков проблем и искуство?
§ Опции за рашање на проблемот.
Опции за решние на проблемот:

§ Да се смени размерот (engl. aspect
ratio) со иста големина како другата
слика;
§ да се користи софтверска алатка за да
се измени големината (Photoshop или
online алатка);
§ да се направи измена на сликата
преку CSS – не се препорачува
бидејќи ќе зголеми времето за
вчитување на веб страната;

https://resizeimage.net/
Опции за решние на проблемот:

§ Да се смени размерот (engl. aspect
ratio) со иста големина како другата
слика;
§ да се користи софтверска алатка за да
се измени големината (Photoshop или
online алатка);
§ да се направи измена на сликата
преку CSS – не се препорачува
бидејќи ќе зголеми времето за
вчитување на веб страната;

https://resizeimage.net/
Вежба 5
Да се креира Welcome веб страна, по следното:
§ да се креира навигациско мени со 3 копчиња;
§ да се креира текстуално лого;
§ да се креира копче со лого за пребарување;
§ да се креира на едно копче паѓачко мени(engl. dropdown);
§ паѓачкото мени да се подели со два хедери;
§ да се користи divider класата.
§ да има слика која ќе биде позадината на секцијата;
§ на средина на секцијата со сликата да се напише текст:
It is not perfect…It is paradise
§ да се креира нова секција со две слики кои ќе зафаќаат по 1/2 од страната;
§ на секоја од сликите да се вметне копче на средината кое ќе има транспарентна позадина;
§ копчињата да имаат текст;
§ Над сликите да има текст кој ќе биде како наслов за сликата;
§ да има можност да се поврзува со FB страна;
Вежба 5
Време за работа:
∼ 35 минути
Дискусија за резултатите:
∼ 10 минути
Потребно е:
§ студентот да користи лаптоп или десктоп компјутер;
§ интернет конекција.
Вежба 5
ПРИМЕР:
Вежба 5
ПРИМЕР:
Вежба 5
ПРИМЕР:
Вежба 5
ПРИМЕР:
ПРАШАЊА

4 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

4 Voved - Bootstrap

Uploaded by

Copyright:

Available Formats

Т-4: BOOTSTRAP

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

û Размер или сооднос (engl. Aspect Ratio)

При намалување на екранот

При намалување на екранот

Позадината е со светла боја.

Коментари и дикусија за проблемот со втората слика

Опции за решние на проблемот:

Линк до веб страна од слика:

Опции за решние на проблемот:

Линк до веб страна од слика:

You might also like