Блочная верстка сайта

Если табличная вёрстка подразумевает, что содержимое страницы находятся внутри тега <table>, то концепция блочной вёрстки основана на активном использовании универсальных тегов <div>, внутрь которых помещается содержимое, включая другие теги.

Блочная вёрстка лишена недостатков табличной — поисковыми системами она индексируется лучше, её код не такой развесистый, да и блоки <div>, которые так любят называть «слоями», изначально задумывались универсальными, то есть «для всего», тогда как <table> — это таблица, которую нужно использовать для отображения табличных данных и не более того.

Единственный ощутимый минус блочной вёрстки — сделанные на ней сайты могут по-разному отображаться в обозревателях. Чтобы этого избежать, нужно делать вёрстку «кроссбраузерной», то есть одинаково отображаемой любым обозревателем.

Используем React, а BEM как CSS методологию.

Есть следующая проблема связанная с адаптивным дизайном.

Допустим есть сущность, которая имеет следующие состояния (модификаторы) small , medium и large .

Бывает так, что на всех разрешениях он имеет одно состояние (к примеру, small ), но и так, что на одном разрешении одно, а на другом еще какое-нибудь (к примеру, small по умолчанию, а medium на разрешении > 1280px)

У меня пока два способа решения этой проблемы:

• по подобию адаптивных CSS фреймворков — использовать постпрефиксы, например, -xs , -md , -lg . Получается, что если мне нужно, чтобы на разрешении > 1280px сущность имела состояние medium , я задаю ему medium-lg . То есть такая некая надстройка у состояния. Также есть мысли использовать вместо — символ @ (как обозначение, что это именно media query ), то есть medium@lg ;
• использовать JS — через window.mathMedia рендерить нужное состояние. Именно всю страницу рендерить с нужными состояниями с учетом разрешения, а не конкретно компонент.

Открытие модального окна при нажатии на кнопку

Открытие модального окна обычно осуществляется при наступлении какого-то события, например, при нажатии на кнопку. При этом это можно сделать как с помощью JavaScript, так и без написания кода (с помощью data-атрибутов).

С помощью data-атрибутов

Например, создадим кнопку для которой с помощью data-атрибутов укажем действие, которое она будет выполнять.

Атрибуты Bootstrap 5 для управления Modal:

• data-bs-toggle=»modal» – говорит о том, что необходимо вызвать модальное окно;
• data-bs-target=»#modal» – указывает на цель с помощью селектора (в данном случае на модальное окно с id=»modal» ).

В третьей и четвёртой версии этого фреймворка для этого тоже используются два атрибута, но с немного другими именами:

С помощью JavaScript

Пример кода на чистом JavaScript для открытия модального окна на Bootstrap 5:

В третьей и четвёртой версии данного фреймворка открытие модального окна выполняется посредством вызова modal(«show») :

Как прижать элементы к верху родительского

Обратная ситуация. Допустим нам нужно прижать div к верху родительского элемента.

Такая необходимость может появиться, например, если у вас внутри дочерних элементов высота регулируется не в CSS, а объёмом текста:

Чтобы это исправить, и прижать все элементы к верху родительского, нам необходимо задать свойство vertical-align в значение top:

Вот и всё, спасибо за внимание. На востоке Украины сегодня пасмурно, но, несмотря на это желаю всем только солнечной погоды в ваших делах, удачи!

Пожалуйста, оцените эту статью

Статья оказалась вам полезной? Подпишитесь, чтобы не пропустить новые!

Вы можете помочь развитию проекта, сделав всего 1 клик:

Пожалуйста, прокомментируйте, как Вам моя статья?

vertical-align : «Выравнивает элемент по вертикали относительно своего родителя, окружающего текста или ячейки таблицы»

Ключевое слово ИЛИ

Метод не работает при большей высоте родителя
<style>
#parent <
height:800px;
background:black;
>
#child,#child2,#child3 <
vertical-align:bottom; /* вот она */
display:inline-block;
>
#child <
background:red;
height:300px;
width:100px;
>
#child2 <
background:yellow;
height:100px;
width:100px;
>
#child3 <
background:green;
height:200px;
width:100px;
>
</style>

<div >
<div >Текст дочернего элемента 1</div>
<div >Текст дочернего элемента 2</div>
<div >Текст дочернего элемента 3</div>
</div>

<!DOCTYPE html>
<html lang=»en»>
<head>
<title>Bootstrap Example</title>
<meta charset=»utf-8″>
<meta name=»viewport» content=»width=device-width, initial-scale=1″>
<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css»>
<script src=»https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js»></script>
<script src=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js»></script>
</head>
<body>

<div >
<div >
<div >
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. </p>
</div>
<div >
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. </p>
</div>
<div >
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. </p>
</div>
</div>
</div>