Eco:Dashboard: Difference between revisions

From Eco - English Wiki
No edit summary
Tags: Reverted 2017 source edit
No edit summary
Tags: Reverted 2017 source edit
Line 302: Line 302:
<svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#777"/></svg>
<svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#777"/></svg>


 
<center>
 
<div class="container">
 
<div class="carousel-caption">
 
<h1>Другой пример заголовка.</h1>
 
<p>Некоторое репрезентативное содержимое-заполнитель для второго слайда карусели.</p>
 
<p><a class="btn btn-lg btn-primary" href="#">Learn more</a></p>
 
</div>
 
</div>
 
</div>
 
<div class="carousel-item">
 
<svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#777"/></svg>
 
 
 
<div class="container">
 
<div class="carousel-caption text-end">
 
<h1>Еще один для хорошей меры.</h1>
 
<p>Некоторые репрезентативные материалы-заполнители для третьего слайда этой карусели.</p>
 
<p><a class="btn btn-lg btn-primary" href="#">Browse gallery</a></p>
 
</div>
 
</div>
 
</div>
 
</div>
 
<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">Предыдущий</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">Следующий</span>
 
</button>
 
</div>
 
<gallery widths=320 heights=180 perrow=4 caption="MEDIA">
<gallery widths=320 heights=180 perrow=4 caption="MEDIA">
File:Eco-hafen.jpg
File:Eco-hafen.jpg
Line 372: Line 313:
File:Eco-hafen.jpg
File:Eco-hafen.jpg
</gallery>
</gallery>
</center>

Revision as of 05:13, 6 December 2024

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

   <a href="#" class="btn btn-primary">Go somewhere</a>
Featured
Card title
Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

   <a href="#" class="card-link">Card link</a>
   <a href="#" class="card-link">Another link</a>
Featured
Card title
Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

   <a href="#" class="card-link">Card link</a>
   <a href="#" class="card-link">Another link</a>
Featured
Card title
Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

   <a href="#" class="card-link">Card link</a>
   <a href="#" class="card-link">Another link</a>



                 <a href="contacts.html" class="tile-link d-flex align-items-center flex-column text-center rounded-2">
                   <img src="assets/images/users.svg" class="img-3x m-auto mb-4" alt="Admin Dashboards">
Users

Manage admin people

                 </a>
                 <a href="#" class="tile-link d-flex align-items-center flex-column text-center rounded-2">
                   <img src="assets/images/group.svg" class="img-3x m-auto mb-4" alt="Admin Dashboards">
Groups

Create grouping lists

                 </a>
                 <a href="dashboard5.html" class="tile-link d-flex align-items-center flex-column text-center rounded-2">
                   <img src="assets/images/dashboard.svg" class="img-3x m-auto mb-4" alt="Admin Dashboards">
Dashboard

Insights about company

                 </a>
                 <a href="#" class="tile-link d-flex align-items-center flex-column text-center rounded-2">
                   <img src="assets/images/devices.svg" class="img-3x m-auto mb-4" alt="Admin Dashboards">
Devices

Secure data devices

                 </a>
                 <a href="#" class="tile-link d-flex align-items-center flex-column text-center rounded-2">
                   <img src="assets/images/apps.svg" class="img-3x m-auto mb-4" alt="Admin Dashboards">
Apps

Manage app settings

                 </a>
                 <a href="account-settings.html" class="tile-link d-flex align-items-center flex-column text-center rounded-2">
                   <img src="assets/images/security.svg" class="img-3x m-auto mb-4" alt="Admin Dashboards">
Security

Configure security logs

                 </a>
                 <a href="#" class="tile-link d-flex align-items-center flex-column text-center rounded-2">
                   <img src="assets/images/payments.svg" class="img-3x m-auto mb-4" alt="Admin Dashboards">
Billing

Manage subscribe bills

                 </a>
                 <a href="#" class="tile-link d-flex align-items-center flex-column text-center rounded-2">
                   <img src="assets/images/roles.svg" class="img-3x m-auto mb-4" alt="Admin Dashboards">
Roles

Manage admin roles

                 </a>
                 <a href="#" class="tile-link d-flex align-items-center flex-column text-center rounded-2">
                   <img src="assets/images/buildings.svg" class="img-3x m-auto mb-4" alt="Admin Dashboards">
Buildings

Manage building rooms

                 </a>
                 <a href="#" class="tile-link d-flex align-items-center flex-column text-center rounded-2">
                   <img src="assets/images/resources.svg" class="img-3x m-auto mb-4" alt="Admin Dashboards">
Resources

Manage our resources

                 </a>
                 <a href="#" class="tile-link d-flex align-items-center flex-column text-center rounded-2">
                   <img src="assets/images/domains.svg" class="img-3x m-auto mb-4" alt="Admin Dashboards">
Domains

Manage our domains

                 </a>
                 <a href="support.html" class="tile-link d-flex align-items-center flex-column text-center rounded-2">
                   <img src="assets/images/support.svg" class="img-3x m-auto mb-4" alt="Admin Dashboards">
Support

Talk to tech support

                 </a>

Изменить фон

Поменяйте местами утилиту background-color и добавьте цветовую утилиту `.text- *`, чтобы смешать внешний вид jumbotron. Затем смешайте и сопоставьте с дополнительными темами компонентов и многим другим..

         <button class="btn btn-outline-light" type="button">Пример кнопки</button>

Добавить границы

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

         <button class="btn btn-outline-secondary" type="button">Пример кнопки</button>