какие файлы необходимы для работы bootstrap? - PullRequest
Новая
       33

какие файлы необходимы для работы bootstrap?

0 голосов
/ 28 февраля 2020

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

  <div class="dropdown">
    <a data-toggle="dropdown" class="dropdown-toggle">display dropdown</a>
    <ul
      class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-scrollable dropdown-content"
    >
      <li class="dropdown-item">Option 1</li>
      <li class="dropdown-item">Option 2</li>
    </ul>
  </div>

Я скопировал dropdown.s css из библиотеки tabler.io.

Это все, что он содержит ... 

.dropdown {
  display: inline-block;
  color: orange;
}

.dropdown-menu {
  box-shadow: $dropdown-box-shadow;
  min-width: 12rem;
}

.dropdown-item {
  color: $text-muted-dark;
  z-index: 1000;
}

.dropdown-menu-arrow {
  &:before {
    position: absolute;
    top: -6px;
    left: 12px;
    display: inline-block;
    border-right: 5px solid transparent;
    border-bottom: 5px solid $border-color;
    border-left: 5px solid transparent;
    border-bottom-color: rgba(0, 0, 0, 0.2);
    content: "";
  }

  &:after {
    position: absolute;
    top: -5px;
    left: 12px;
    display: inline-block;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #fff;
    border-left: 5px solid transparent;
    content: "";
  }

  &.dropdown-menu-right {
    &:before,
    &:after {
      left: auto;
      right: 12px;
    }
  }
}

.dropdown-toggle {
  user-select: none;
  cursor: pointer;

  &:after {
    vertical-align: 0.155em;
  }

  &:empty:after {
    margin-left: 0;
  }
}

.dropdown-icon {
  color: $text-muted;
  margin-right: 0.5rem;
  margin-left: -0.5rem;
  width: 1em;
  display: inline-block;
  text-align: center;
  vertical-align: -1px;
}

Я знаю, что мой код ссылается на эту таблицу стилей, потому что цвет шрифта оранжевый, а первое правило таблицы стилей включает в себя color: orange.

enter image description here

Я также знаю, что мой код обнаруживает, что пользователь нажимает на текст, потому что я проверил, добавив @ click.prevent = "doSomething ()", где doSomething () просто консоль зарегистрировала сообщение. Сообщение действительно распечатайте в консоли инструментов Chrome.

Однако, когда я нажимаю на слова display dropdown, раскрывающееся меню не открывается.

Я понимаю, что есть javascript файлы Мне может понадобиться Какие это файлы и как я могу убедиться, что мой код использует этот файл? Это приложение Vuejs, использующее Nuxt.

...