N/Спейсследващ слайд

Pпредишен слайд

Oвсички слайдове

ctrl+left clickувеличава елемента

If you want print version => add '?print-pdf'
at the end of slides URL (remove '#' fragment) and then print.
Like: https://wwwcourses.github.io/...CourseIntro.html?print-pdf

Въведение в Bootstrap

Създаден за

Създаден от

Ива Е. Попова

2015 - 2023,

Въведение в Bootstrap

Какво е Bootstrap?

Bootstrap е свободен и отворен за използване набор от инструменти за разработване на уебсайтове и уеб приложения.
Той включва HTML и CSS базирани шаблони за типография, форми, бутони, навигация и други компоненти на интерфейса.
Също така включва опционални JavaScript разширения за допълнителна функционалност.

Начало с Bootstrap

За да започнете с Bootstrap, първо трябва да включите CSS файла във вашия HTML документ.
Това може да стане чрез добавяне на следния линк таг в секцията <head> на вашия HTML документ.


				<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

Bootstrap Grid система

Основи на Bootstrap Grid

Grid системата на Bootstrap ви позволява да създадете responsive layouts с лесни за използване класове.
Grid системата на Bootstrap използва контейнери, редове и колони за създаване на responsive layouts.
Тя е базирана на Flexbox и позволява лесно управление на лейаута на уебсайта на различни екранни размери.
Примери: Bootstrap grid examples

Компоненти на Bootstrap

Бутони и форми

Bootstrap предлага различни стилове на бутони и форми, които могат да бъдат лесно интегрирани в уебсайтове.
Тези елементи са предварително стилизирани и могат да бъдат настроени чрез класове.
Примери: Bootstrap buttons examples
Примери: Bootstrap checkout form examples

Пример за бутони и форми


			<button class="btn btn-primary">Основен бутон</button>
			<form>
			<div class="form-group">
				<label for="inputEmail">Email адрес</label>
				<input type="email" class="form-control" id="inputEmail" placeholder="Email">
			</div>
			</form>

JavaScript Плъгини в Bootstrap

Модални прозорци и карусели

Bootstrap включва JavaScript плъгини като модални прозорци и карусели, които добавят интерактивност на уебсайтовете.
Тези плъгини могат да бъдат лесно активирани с помощта на атрибути на данни или JavaScript.

Пример за модален прозорец и карусел


			<!-- Примерен код за модален прозорец и карусел -->

Навигация и компоненти на Bootstrap

Навигационни ленти

Bootstrap предлага гъвкави опции за навигационни ленти, които са responsive и лесни за персонализиране.
Те могат да включват лого, линкове, форми и други компоненти.

Пример за навигационна лента


			<nav class="navbar navbar-expand-lg navbar-light bg-light">
			<a class="navbar-brand" href="#">Navbar</a>
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>
			<div class="collapse navbar-collapse" id="navbarNav">
				<ul class="navbar-nav">
				<li class="nav-item active">
					<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
				</li>
				<!-- Останали линкове -->
				</ul>
			</div>
			</nav>

Персонализация на Bootstrap

Персонализиране на теми

Bootstrap позволява лесно персонализиране на теми чрез промяна на вградените CSS променливи.
Може да се използва SASS за по-гъвкаво управление на стиловете.

Пример за персонализиране на тема


			$theme-colors: (
			"primary": #007bff,
			"success": #28a745,
			"info": #17a2b8
			);

			@import "node_modules/bootstrap/scss/bootstrap";

responsive изображения и медия

Изображения и медийни обекти

Bootstrap съдържа класове за създаване на responsive изображения и медийни обекти, които се адаптират към размера на екрана.
Това включва изображения, видеоклипове и други медийни компоненти.

Пример за responsive изображения


			<img src="image.jpg" class="img-fluid" alt="Отзивчиво изображение">

These slides are based on

customised version of

Hakimel's reveal.js

framework