Praktiskais darbs 3

Atpakaļ

Mērķis: Apgūt izklājumu veidošanu

Uzdevums: Izmantot Bootstrap

Izveidojiet lapu (izmantojot Bootstrap) ar zemāk redzamo izkārtojumus:
1. Nepieciešams izkārtot saturu priekš telefona un datora ekrāna kā redzams attēlā.
Ievietot satura elementus:
1. Virsraksti, paragrāfi un saraksti;
2. Attēli;
3. Citāts un autoru (blockquote, source);
4. Tabulu ar iekrāsotām rindām (zebra striped) un parakstu (caption).
Ievietot Bootstrap komponentus:
1. Brīdinājums (alert);
2. Formu ar dažiem formas elementiem;
3. Bilžu karuseli ar navigāciju;

Izmantojiet avotus:
- Instalēšana: http://getbootstrap.com/docs/4.0/getting-started/download/#bootstrapcdn
- Izkārtojums: http://getbootstrap.com/docs/4.0/layout/grid/
- Tipogrāfija: http://getbootstrap.com/docs/4.0/content/typography/
- Komponenti: http://getbootstrap.com/docs/4.0/components/alerts/
- Citi paraugi: https://www.w3schools.com/bootstrap/bootstrap_examples.asp

Paraugs:

Skat. piemēru šeit: piemērs.

Paraugi (instrukcijas):

Izveidot jaunu tukšu dokumentu:

<!doctype HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>
<body>
</body>
</html>

Iekļaut Bootstrap bibliotēku savā lapā (ievietot šo kodu starp <head> un </head> tagiem):

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Izveidot pamata izklājumu (ievietot šo kodu starp <body> un </body> tagiem):

<div class="container">

	<div class="row">
		<div class="banner col-sm-12 col-lg-12">
		Banner
		</div>
	</div>

	<div class="row">
		<div class="navbar col-sm-12 col-lg-12">Navigation</div>
	</div>

	<div class="row">
		<div class="pic1 col-sm-6 col-lg-3">Pic1</div>
		<div class="pic2 col-sm-6 col-lg-3">Pic2</div>
		<div class="pic3 col-sm-6 col-lg-3">Pic3</div>
		<div class="pic4 col-sm-6 col-lg-3">Pic4</div>
	</div>

	<div class="row">
		<div class="article1 col-sm-12 col-lg-6">Article1</div>
		<div class="article2 col-sm-12 col-lg-6">Article2</div>
	</div>

	<div class="row">
		<div class="footer col-sm-12 col-lg-12">Footer</div>
	</div>

</div>

Pievienot virsrakstus, paragrāfus un sarakstus:

<h1>Big heading</h1>
<h2>Subheading</h2>
<h3>Smaller heading</h3>
<p>Paragraph 1. Paragraph 1. Paragraph 1. Paragraph 1. Paragraph 1.</p>
<p>Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2.</p>
<ul>
	<li>List item 1</li>
	<li>List item 2</li>
	<li>List item 3</li>
</ul>

Pievienot attēlus:

<img src="mypicture1.png"/>

Pievienot citātu un avotu:
Dokumentācija: https://getbootstrap.com/docs/4.0/content/typography/#blockquotes

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Pievienot tabulu (ar zebras svītrām) un parakstu:
Dokumentācija: https://getbootstrap.com/docs/4.0/content/tables/

<table class="table table-striped">
  <caption>List of users</caption>
  <tr>
    <td>Mark</td>
    <td>Otto</td>
  </tr>
  <tr>
    <td>Jacob</td>
    <td>Thornton</td>
  </tr>
  <tr>
    <td>Larry</td>
    <td>the Bird</td>
  </tr>
</table>

Pievienot paziņojumu (alert) iekš div taga:
Dokumentācija: https://getbootstrap.com/docs/4.0/components/alerts/

<div class="alert alert-primary" role="alert">
  This is a primary alert—check it out!
</div>

Pievienot formu ar dažiem formas elementiem:
Dokumentācija: https://getbootstrap.com/docs/4.0/components/forms/


	
	
	
		
		Ten
	
	
		
		Eleven

Izveidot attēlu karuseli iekš div taga, aizstāt "..." ar attēliem:
Dokumentācija: https://getbootstrap.com/docs/4.0/components/carousel/

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Darbu sagatavojiet jaunā folderī ar nosaukumu "Vārds Uzvārds Prakt3" (aiztājiet ar savu vārdu un uzvārdu).
Praktiskā darba folderi arhivējiet zip formātā.
Nosūtiet arhīvu uz e-pastu mikelis@va.lv.