Bootstrap - Reboot: руковод beginners

Здравствуйте, будущие веб-разработчики! Я рад приветствовать вас в этом увлекательном путешествии в мир Bootstrap Reboot. Как某人, кто преподавал информатику на протяжении многих лет, я с нетерпением жду возможности поделиться своими знаниями и опытом с вами. Так что возьмите杯咖啡 (или чай, если это ваш выбор) и погружайтесь с мной в это!

Bootstrap - Reboot

Что такое Bootstrap Reboot?

Прежде чем мы начнем, позвольте мне рассказать вам небольшую историю. Представьте, что вы переезжаете в новый дом. Before вы начнетеdecorating, вы бы хотели чистый лист, правильно? Exactly это делает Bootstrap Reboot для веб-разработки. Это как geben вашей веб-странице новый слой краски, создавая последовательную основу для дальнейшего строительства.

Bootstrap Reboot - это коллекция CSS стилей, которые normalize стандартные HTML элементы в разных браузерах. Это как униversalный язык для веб-браузеров, обеспечивающий то, что ваш веб-сайт будет выглядеть последовательно, regardless того, где он viewed.

Подход

Подход Bootstrap Reboot прост, но силен. Он направлен на:

Предоставление чистого листа для веб-разработки
Обеспечение кросс-браузерной последовательности
Улучшениеusable и доступности

Теперь давайте углубимся в детали!

Page defaults

Bootstrap Reboot устанавливает некоторые стили по умолчанию для всей страницы. Вот простой пример:

<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Awesome Website</title>
</head>
<body>
<h1>Welcome to my website!</h1>
</body>
</html>

В этом примере Bootstrap Reboot обеспечивает, что:

box-sizing установлен в border-box для всех элементов
font-family установлен в nativный стек шрифтов (больше об этом稍źniej!)
line-height установлен в 1.5 для улучшения читаемости
background-color для body установлен в белый

Native font stack

Помните, когда мы использовали для точного указания шрифтов для наших веб-сайтов? Well, Bootstrap Reboot introduces nativный шрифтовой стек. Это как having гардероб, который всегда выглядит хорошо, regardless того, какие衣服 вы надеваете!

body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

Этот шрифтовой стек обеспечивает, чтобы ваш текст выглядел хорошо на любом устройстве, используя nativный шрифт системы.

Заголовки

Заголовки как заглавия глав в книге. They help organize ваш контент и делают его easier для чтения. Bootstrap Reboot предоставляет последовательный стиль для всех уровней заголовков (h1 до h6).

<h1>This is a main heading</h1>
<h2>This is a subheading</h2>
<h3>This is a sub-subheading</h3>

Абзацы

Абзацы являются основой вашего контента. Bootstrap Reboot обеспечивает, чтобы они были легки для чтения и хорошо间距.

<p>This is a paragraph. It's easy to read thanks to Bootstrap Reboot's default styles.</p>
<p>Here's another paragraph. Notice the nice spacing between paragraphs?</p>

Ссылки

Ссылки - это магистрали интернета, соединяющие разные части вашего веб-сайта и ведущие на другие веб-сайты. Bootstrap Reboot делает их легко узнаваемыми.

<a href="https://example.com">This is a link</a>

По умолчанию ссылки синие и подчеркиваются. Когда вы наводите курсор на них, подчеркивание disappears.

Горизонтальные линии

Горизонтальные линии как разделители в тетради. They help separate разные разделы вашего контента.

<hr>

Bootstrap Reboot обеспечивает, чтобы горизонтальные линии были видны, но не подавляющими.

Списки

Списки помогают organize информацию структурированным образом. Bootstrap Reboot предоставляет стили для как ordered, так и unordered списков.

<ul>
<li>This is an unordered list item</li>
<li>Here's another one</li>
</ul>

<ol>
<li>This is an ordered list item</li>
<li>This is the second item</li>
</ol>

Встроенный код

Иногда вам нужно выделить фрагмент кода в вашем тексте. Bootstrap Reboot делает это легко и визуально привлекательным.

<p>Use the <code>console.log()</code> function to print to the console.</p>

Блоки кода

Для больших фрагментов кода вы можете использовать блоки кода. Bootstrap Reboot обеспечивает, чтобы они были легки для чтения и визуально отличались от остального контента.

<pre><code>
function greet(name) {
console.log(`Hello, ${name}!`);
}
</code></pre>

Переменные

В программировании переменные как контейнеры, хранящие данные. Bootstrap Reboot предоставляет стили для отображения переменных в вашем тексте.

<p>The variable <var>x</var> represents the x-coordinate.</p>

Ввод пользователя

Когда вам нужно показать, что пользователь должен ввести, Bootstrap Reboot предоставляет для этого стили.

<p>To save your work, press <kbd>Ctrl + S</kbd>.</p>

Пример вывода

Иногда вам нужно показать, как может выглядеть вывод программы. Bootstrap Reboot предоставляет стили и для этого.

<samp>This is what the output might look like.</samp>

Таблицы

Таблицы великолепны для отображения структурированных данных. Bootstrap Reboot обеспечивает, чтобы они были чистыми и легкими для чтения.

<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
</tr>
</tbody>
</table>

Формы

Формы - это то, как пользователи взаимодействуют с вашим веб-сайтом. Bootstrap Reboot предоставляет последовательный стиль для элементов формы.

<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">

<label for="email">Email:</label>
<input type="email" id="email" name="email">

<button type="submit">Submit</button>
</form>

Указатели на кнопки

Кнопки - это интерактивные элементы, и Bootstrap Reboot обеспечивает, чтобы они выглядели соответствующе.

<button>Click me!</button>

Когда вы наводите курсор на кнопку, курсор изменяется на указатель, indicating что она кликабельна.

Разные элементы

Bootstrap Reboot также предоставляет стили для различных других HTML элементов. Вот быстрый пример:

<abbr title="HyperText Markup Language">HTML</abbr> is the standard markup language for web pages.

Цитата

Цитаты великолепны для выделения важных цитат или фрагментов текста.

<blockquote>
<p>To be or not to be, that is the question.</p>
<footer>— William Shakespeare</footer>
</blockquote>

Встроенные элементы

Bootstrap Reboot обеспечивает, чтобы встроенные элементы стилизованы последовательно.

<p>This text is <strong>bold</strong>, this is <em>italicized</em>, and this is <u>underlined</u>.</p>

Summary

Элемент <summary> используется в сочетании с <details>, чтобы создать расширяемый/сворачиваемый раздел.

<details>
<summary>Click to expand</summary>
<p>This is the expanded content.</p>
</details>

Атрибут HTML5 [hidden]

Bootstrap Reboot уважает атрибут HTML5 hidden, который можно использовать для скрытия элементов.

<div hidden>This content is hidden.</div>

И вот и все,folks! Мы рассмотрели основные аспекты Bootstrap Reboot. Помните, что практика делает perfect, так что не бойтесь экспериментировать с этими элементами в своих собственных проектах. Счастливого кодирования!

Credits: Image by storyset

Предыдущий учебник:

Bootstrap - CSS сетка

Следующий учебник:

Bootstrap - Типография