«Bootstrap5 нулевой на основе опытного» раздела 10 рисунок нагрузки и профиля загрузочного элемента

внешний интерфейс внешний фреймворк

Это 10-й день моего участия в Gengwen Challenge.Подробности о мероприятии:Обновить вызов

"Bootstrap5 Zero Basic to Proficient" Я Лао Лю оригинал, и стремиться обновлять раздел каждый день.

10.1 Изображения

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

10.1.1 Адаптивные изображения

Изображения поддерживают адаптивный макет с помощью класса .img-fluid, предоставляемого Bootstrap. Принцип заключается в том, чтобы присвоить изображению max-width: 100% и height: auto, чтобы оно масштабировалось вместе с родительским элементом.

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>图片演示</title>
  </head>
  <body>
        <div class="container">

            <img src="pic/taohua.jpg" class="img-fluid" alt="桃花朵朵开">

        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Контейнер выше предназначен для центрирования изображения и отображения его с полями вокруг него, а не с частью компонента изображения.Ниже приведено демонстрационное видео.

10.1.gif

10.1.2 Миниатюры изображений

В дополнение к предоставленному радиусу границы, предоставляемому универсальным классом, вы также можете использовать .img-thumbnail, чтобы придать изображению закругленную рамку шириной 1 пиксель.

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <style>
      .div1{width: 300;  height: 300px;text-align: center;padding-top: 50px;}
    </style>
    <title>图片演示</title>
  </head>
  <body>
            <div class="div1">
                 <img src="pic/taohua.jpg"  width="50%" class="img-thumbnail" alt="点击查看大图">
            </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Этот компонент тоже адаптивный, но я привожу только скриншот, стиль CSS выше, чтобы картинка не была близко к краю, и невозможно было увидеть границу, по сути, это то же самое, что и использовать контейнер напрямую. Чтобы все не думали, что контейнер тоже является его частью.

Image 1.png

10.1.3 тег изображения

Элемент изображения используется путем включения одного или нескольких исходных элементов и элемента img в сочетании с медиа (медиазапросы), Отображение разных картинок в соответствии с разными размерами экрана совпадают.Если совпадения нет или браузер не поддерживает атрибут изображения, используется элемент img.Независимо от того, сколько источников указано для элемента изображения, только один из них или img будет отображаться.

Если вы используете элемент для<img>указать несколько<source>элементы, не забудьте добавить классы .img-* в<img>элемент вместо<picture>элемент или исходный элемент.

Исходные элементы расположены по порядку. Значение медиа-запроса: если это max-width, то оно будет отсортировано от меньшего к большему, если это min-width, то оно будет отсортировано в порядке возрастания. Ниже приведен исходный код.JS-код в исходном коде предназначен для получения ширины экрана в качестве сравнения.

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>图片演示</title>
  </head>
  <body>
        <div class="container">
            <p>
                <span id="info"></span>
                <script>
                getwidth();
                window.onresize = function(){
                    getwidth();
                }
                function getwidth(){
                document.getElementById("info").innerHTML="宽度："+document.documentElement.clientWidth+"，高度："+document.documentElement.clientHeight;
                }
                </script>
                    </p>
            <picture>
                <source media="(max-width: 600px)" srcset="pic/girl1.jpg">
                <source media="(max-width: 700px)" srcset="pic/girl2.jpg">
                <img src="pic/taohua.jpg" class="img-thumbnail">
            </picture>

            <picture>
                <source media="(min-width: 700px)" srcset="pic/girl1.jpg">
                <source media="(min-width: 600px)" srcset="pic/girl2.jpg">
                <img src="pic/taohua.jpg" class="img-thumbnail">
            </picture>
        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Вот демо

10.2.gif

10.2 Рисунки

Отображение связанных изображений и текста с помощью компонента рисунка Bootstrap. Всякий раз, когда вам нужно отобразить часть контента (например, изображение с необязательным заголовком), используйте <figure>Этикетка.

HTML5 доступен с использованием встроенных категорий .figure, .figure-img и .figure-caption.<figure>а также<figcaption>Назовите некоторые основные параметры стиля. Изображение не имеет четкого размера, пожалуйста, обязательно<img>Тег с классом .img-fluid настроен на адаптивное изображение.

На самом деле компонент схемы используется не только для изображений, компонент схемы использовался в части макета текста предыдущего раздела и в части источника цитирования.

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>figure演示</title>
  </head>
  <body>
        <div class="container">

            <figure class="figure">
                <img src="pic/taohua.jpg" class="figure-img img-fluid rounded" alt="...">
                <figcaption class="figure-caption text-center">桃花朵朵开</figcaption>
                </figure>
        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Image 2.png

Кратко объясните, что класс rounded в теге img — это скругленные углы вокруг изображения, и писать его не обязательно. Класс text-center в теге figcaption — это выравнивание изображения по центру, а text-end также можно использовать для выравнивания по правому краю.По умолчанию нельзя записать выравнивание по левому краю.

Вот и все на сегодняшнем уроке.пожалуйста следуйте за мной, изучите таблицы в Bootstrap в разделе 11 «Bootstrap5 Zero Basic to Mastery», первоначально написанном Лао Лю в свое время. Таблицы очень полезны и сложны в разработке. К счастью, мы можем легко создавать красивые таблицы с помощью бутстрапа. .

Если эта статья оказалась для вас полезной, не забудьте поставить лайк!

Категории