Блог

Главная - Вопросы по программированию - Настройка вкладок начальной загрузки

Настройка вкладок начальной загрузки

#html #css #bootstrap-5

Вопрос:

В настоящее время я работаю над проектом, в котором мне нужно реализовать вкладки с пользовательскими стилями. Я застрял в достижении двух вещей в настройке, касающихся границ вкладок. Мне нужно обвести нижнюю границу, которая окрашена в красный цвет, и добавить расстояние между правой границей и нижней границей, а высота правой границы должна быть равна высоте текста во вкладке ссылка. Приложите эталонное изображение и код того, что я сделал, чтобы вы могли получить лучшее представление. Любая помощь или предложение будут высоко оценены. Примечание: Используемая версия начальной загрузки-5.0

 <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
 />
 <style>
 .categories {
  padding-top: 25px;
  background-color: #f5f6fa;

}
.categories .category__item {
  border-right: 1px solid #dcdcdc;
}
.categories .category__link {
  color: #0b1320;
  font-size: 24px;
  opacity: 0.6;
  padding: 0 34px 14px 34px;
  transition: none;
}
.categories .category__link.active {
  background: transparent;
  border: none;
  color: #000;
  opacity: 1;
  font-weight: bold;
  border-bottom: 5px solid red;
}
 </style>
  <ul
      class="nav justify-content-center nav-tabs categories"
      id="myTab"
      role="tablist"
    >
      <li class="nav-item category__item" role="presentation">
        <button
          class="nav-link category__link active"
          id="home-tab"
          data-bs-toggle="tab"
          data-bs-target="#home"
          type="button"
          role="tab"
          aria-controls="home"
          aria-selected="true"
        >
          link1
        </button>
      </li>
      <li class="nav-item category__item" role="presentation">
        <button
          class="nav-link category__link"
          id="profile-tab"
          data-bs-toggle="tab"
          data-bs-target="#profile"
          type="button"
          role="tab"
          aria-controls="profile"
          aria-selected="false"
        >
          link2
        </button>
      </li>
      <li class="nav-item category__item" role="presentation">
        <button
          class="nav-link category__link"
          id="contact-tab"
          data-bs-toggle="tab"
          data-bs-target="#contact"
          type="button"
          role="tab"
          aria-controls="contact"
          aria-selected="false"
        >
          link3
        </button>
      </li>
      <li class="nav-item category__item" role="presentation">
        <button
          class="nav-link category__link"
          id="profile-tab"
          data-bs-toggle="tab"
          data-bs-target="#profile"
          type="button"
          role="tab"
          aria-controls="profile"
          aria-selected="false"
        >
          link4
        </button>
      </li>
      <li class="nav-item category__item" role="presentation">
        <button
          class="nav-link category__link"
          id="profile-tab"
          data-bs-toggle="tab"
          data-bs-target="#profile"
          type="button"
          role="tab"
          aria-controls="profile"
          aria-selected="false"
        >
          link5
        </button>
      </li>
    </ul>
<script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM"
      crossorigin="anonymous"
 ></script>

введите описание изображения здесь

Ответ №1:

Вы не можете округлить концы границы, но вы можете применить border-radius параметр, который округляет форму элемента по высоте и ширине.

Это решение применяет a border-radius к :after псевдоэлементу, расположенному вдоль нижнего края его родительского элемента. Обратите внимание, что у родителя .categories .category__link теперь есть стиль position: relative; .

 .categories {
    padding-top: 25px;
    background-color: #f5f6fa;

}
.categories .category__item {
    border-right: 1px solid #dcdcdc;
}
.categories .category__link {
    color: #0b1320;
    font-size: 24px;
    opacity: 0.6;
    padding: 0 34px 14px 34px;
    transition: none;
    position: relative;
}
.categories .category__link.active {
    background: transparent;
    border: none;
    color: #000;
    opacity: 1;
    font-weight: bold;
}
.categories .category__link.active:after {
    background-color: red;
    border-radius: 5px;
    content: '';
    bottom: -1px;
    display: block;
    height: 5px;
    left: 12.5%;
    position: absolute;
    width: 75%;
}
.nav-tabs .nav-link.active {
    background-color: transparent;
} 
 <link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
  rel="stylesheet"
  integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
  crossorigin="anonymous"
/>
<ul
  class="nav justify-content-center nav-tabs categories"
  id="myTab"
  role="tablist"
>
  <li class="nav-item category__item" role="presentation">
    <button
      class="nav-link category__link active"
      id="home-tab"
      data-bs-toggle="tab"
      data-bs-target="#home"
      type="button"
      role="tab"
      aria-controls="home"
      aria-selected="true"
    >
      link1
    </button>
  </li>
  <li class="nav-item category__item" role="presentation">
    <button
      class="nav-link category__link"
      id="profile-tab"
      data-bs-toggle="tab"
      data-bs-target="#profile"
      type="button"
      role="tab"
      aria-controls="profile"
      aria-selected="false"
    >
      link2
    </button>
  </li>
  <li class="nav-item category__item" role="presentation">
    <button
      class="nav-link category__link"
      id="contact-tab"
      data-bs-toggle="tab"
      data-bs-target="#contact"
      type="button"
      role="tab"
      aria-controls="contact"
      aria-selected="false"
    >
      link3
    </button>
  </li>
  <li class="nav-item category__item" role="presentation">
    <button
      class="nav-link category__link"
      id="profile-tab"
      data-bs-toggle="tab"
      data-bs-target="#profile"
      type="button"
      role="tab"
      aria-controls="profile"
      aria-selected="false"
    >
      link4
    </button>
  </li>
  <li class="nav-item category__item" role="presentation">
    <button
      class="nav-link category__link"
      id="profile-tab"
      data-bs-toggle="tab"
      data-bs-target="#profile"
      type="button"
      role="tab"
      aria-controls="profile"
      aria-selected="false"
    >
      link5
    </button>
  </li>
</ul>
<script
  src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM"
  crossorigin="anonymous"
></script>

Комментарии:

1. Что ж, спасибо, Джордж! Высоко ценю вашу помощь.

Метки: