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 - 2025,
Въведение в Bootstrap
Въведение в Bootstrap
Какво е Bootstrap?
- Bootstrap е свободен и отворен за използване фронтенд инструментариум за разработка на responsive уебсайтове и приложения.
- Той включва HTML и CSS готови компоненти, като навигационни ленти, бутони, модални прозорци, формуляри и др.
- Предлага мощна и гъвкава 12-колонна грид система, която позволява лесно подреждане и организиране на съдържание за различни размери на екрани.
- Също така включва опционални JavaScript разширения за допълнителна функционалност.
- Проектиран е да работи добре в различни браузъри, включително по-стари версии и мобилни браузъри.
- Официален сайт: getbootstrap.com
Начало с Bootstrap
- За да използвате Bootstrap във вашата страница, първо трябва да включите CSS файла чрез добавяне на следния линк таг в секцията <head> на вашия HTML документ.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
Bootstrap Grid система
Bootstrap Grid система
Въведение
- Grid системата на Bootstrap ви позволява да създадете responsive layouts с лесни за използване класове.
- В нея се използват контейнери, редове и колони за създаване на responsive layouts.
- Тя е базирана на Flexbox и позволява лесно управление на лейаута на уебсайта на различни екранни размери.
- Документация: Grid system
- Примери: Bootstrap grid examples
Основни понятия
- Контейнер: Обхваща цялото съдържание и може да бъде
.container(фиксирана ширина) или.container-fluid(пълна ширина). - Редове: В контейнера съдържанието се организира в редове (
rows), използвайки класа.row. - Колони: В редовете съдържанието се подрежда в колони (
columns), които са разделени на 12 единици (units). Колоните се дефинират с класове като.col,.col-sm-4,.col-md-6и др. - Една колона може да обхваща няколко единици, но сумата на всички колони в един ред трябва да е 12.
Класове на колони
- Класовете на колоните (като col-sm-4) определят ширината на колоните в grid системата в зависимост от размера на екрана. Ето какво означават:
- col: Базов клас за създаване на колона, която автоматично заема равно пространство в реда.
- sm: Указва, че класът се прилага за екрани със "small" ширина или по-големи (≥576px).
- 4: Посочва, че колоната заема 4 от общо 12 единици в реда (една трета от ширината на реда)
- Предефинирани размери на екрани
- sm (малки екрани): ≥ 576px
- md (средни екрани): ≥ 768px
- lg (големи екрани): ≥ 992px
- xl (изключително големи екрани): ≥ 1200px
- xxl (изключително големи екрани): ≥ 1400px
Пример
<head>
<meta charset="UTF-8">
<title>Bootstrap Grid System Example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<style>
.container .row div{
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-3">(col-sm-3)</div>
<div class="col-sm-3">(col-sm-3)</div>
<div class="col-sm-3">(col-sm-3)</div>
<div class="col-sm-3">(col-sm-3)</div>
</div>
<div class="row">
<div class="col-md-4">(col-md-4)</div>
<div class="col-md-4">(col-md-4)</div>
<div class="col-md-4">(col-md-4)</div>
</div>
<div class="row">
<div class="col-lg-6">col-lg-6</div>
<div class="col-lg-6">col-lg-6</div>
</div>
</div>
</body>
Bootstrap компоненти
Bootstrap компоненти
Бутони
- Bootstrap предлага богат набор от стилове за бутони с определена семантика.
- Документация: Buttons
Пример за бутони
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
Навигационни ленти
- Bootstrap предлага гъвкави опции за навигационни ленти, които са responsive и лесни за персонализиране.
- Документация: Navs
Пример за навигационна лента
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Начало <span class="sr-only">(текущо)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Функции</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Цени</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Неактивен линк</a>
</li>
</ul>
</nav>
Carousel (Slider)
- Carousel е компонент, използван за създаване на слайдшоу, което преминава през елементи като изображения или текст.
- Поддържа различни функции като анимации при преход, индикатори и контроли за навигация.
- Използва предимно CSS 3D трансформации и малко JavaScript.
- Освен Bootsrap CSS, e необходимо да вмъкенте в края на BODY и Bootsrap JS:
- Документация: Carousel
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
Пример за Carousel
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<!-- Indicators -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<!-- Slides -->
<div class="carousel-inner">
<div class="carousel-item active">
<div class="d-block w-100 text-center py-5 bg-primary text-white">
<h3>Slide 1: Welcome to Our Website</h3>
<p>This is the first slide with some text content.</p>
</div>
</div>
<div class="carousel-item">
<div class="d-block w-100 text-center py-5 bg-secondary text-white">
<h3>Slide 2: Features</h3>
<p>Here are the features of our service that you will love.</p>
</div>
</div>
<div class="carousel-item">
<div class="d-block w-100 text-center py-5 bg-success text-white">
<h3>Slide 3: Get Started</h3>
<p>Start using our service today and enjoy amazing benefits!</p>
</div>
</div>
</div>
<!-- Controls -->
<button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
Responsive изображения
Responsive изображения
Responsive изображения
- Bootstrap улеснява създаване на responsive изображения чрез класа
.img-fluid, което ограничава изображението до ширината на родителския елемент и поддържа пропорциите. - Ако искате кръгли изображения, добавете клас
.rounded-circle. - За изображения със заоблени ъгли използвайте
.rounded. - Документация: Responsive images
Пример за responsive изображения
<img src="image.jpg" class="img-fluid" alt="Отзивчиво изображение">
These slides are based on
customised version of
framework