68 lines
1.8 KiB
Markdown
68 lines
1.8 KiB
Markdown
|
---
|
|||
|
|
id: bad87fee1348bd9aec908846
|
|||
|
|
title: Створення заголовка Bootstrap
|
|||
|
|
challengeType: 0
|
|||
|
|
forumTopicId: 16812
|
|||
|
|
dashedName: create-a-bootstrap-headline
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# --description--
|
|||
|
|
|
|||
|
|
Перейдімо тепер до створення чогось з нуля, щоб відпрацювати набуті навички HTML, CSS та Bootstrap.
|
|||
|
|
|
|||
|
|
Створимо jQuery playground, який незабаром будемо використовувати у завданнях jQuery.
|
|||
|
|
|
|||
|
|
Спершу створіть елемент `h3` з текстом `jQuery Playground`.
|
|||
|
|
|
|||
|
|
Додайте колір до вашого елементу `h3`, використовуючи клас Bootstrap `text-primary`, і відцентруйте його за допомогою класу Bootstrap `text-center`.
|
|||
|
|
|
|||
|
|
# --hints--
|
|||
|
|
|
|||
|
|
На сторінку необхідно додати елемент `h3`.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert($('h3') && $('h3').length > 0);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Елемент `h3` повинен містити кінцевий теґ.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert(
|
|||
|
|
code.match(/<\/h3>/g) &&
|
|||
|
|
code.match(/<h3/g) &&
|
|||
|
|
code.match(/<\/h3>/g).length === code.match(/<h3/g).length
|
|||
|
|
);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Елемент `h3` має бути зафарбований шляхом застосування класу `text-primary`
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert($('h3').hasClass('text-primary'));
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Елемент `h3` повинен бути відцентрований шляхом застосування класу `text-center`
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert($('h3').hasClass('text-center'));
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Елемент `h3` повинен містити текст `jQuery Playground`.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert.isTrue(/jquery(\s)+playground/gi.test($('h3').text()));
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
# --seed--
|
|||
|
|
|
|||
|
|
## --seed-contents--
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
# --solutions--
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<h3 class="text-primary text-center">jQuery Playground</h3>
|
|||
|
|
```
|