После загрузки и установки Bootstrap вы можете найти 12 файлов JS в файлах d:/программы/nodejs/node_modules/bootstrap/js. Эти файлы JS представляют собой 12 плагинов jQuery, которые поставляются с начальной загрузкой. Вы также можете найти bootstrap.js и bootstrap.min.js в d:/программы файлов/nodejs/node_modules/bootstrap/dist/js. Оба файла содержат 12 плагинов jQuery.
Среди этих 12 плагинов jQuery наиболее часто используются изображения carousel.js, Tag Switching tab.js, прокрутка прослушивания Scrollspy.js, раскрывающийся список списка .
(I) изображение carousel.js
Карусель изображение может установить размер, положение, положение и т. Д. В CSS по мере необходимости.
Image Carousel требует введения jquery.min.js и carousel.js, или Transition.js может быть введен для добавления эффектов перехода.
<div> <div> <div> <!-data-ride = "carousel" атрибут используется для обозначения карусели, которая начинает воспроизведение анимации, когда страница загружается-> <div Data-ride = "carousel" id = "carousel-332839" data-slide-to = "1" data-target = "#carousel-332839"> </li> <li data-slide-to = "2" data-target = "#carousel-332839"> </li> </ol> <div> <div> <img src = "Images/crysanthemum.jpg" </h4> <p> cras justo odio, dapibus ac farsilisis in, egestas eget quam. Donec Id Elit non mi porta gravida в Eget Metus. Nullam id dolor id nibh ultricies eforecula ut id elit. </p> </div> </div> <div> <img src = "Images/desert.jpg"/> <div> <h4> второй миниатюр Donec Id Elit non mi porta gravida в Eget Metus. Nullam id dolor id nibh ultricies eforecula ut id elit. </p> </div> </div> <div> <img src = "Images/Hydrangeas.jpg"> <div> <h4> Третий миниатюр Donec Id Elit non mi porta gravida в Eget Metus. Nullam id dolor id nibh ultricies eforecula ut id elit. </p> </div> </div> </div> <a href = "#carousel-332839" data-slide = "prev"> <pan> </span> </a> <a href = "#carousel-332839" data-slide = "next"> <pan> </span> </iv> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
(Ii) TAG Switching Tab.js
Переключение тегов требует введения jquery.min.js и tab.js, или Transition.js может быть введен для добавления эффектов перехода.
<div> <div> <div> <div id = "tabs-440751"> <ul> <li> <a href = "#panel-1" data-toggle = "Tab"> Раздел 1 </a> </li> <li> <a href = "#panel-2" data-toggle = "tab"> Раздел 2 </a> </li> </ul> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div>. </p> </div> <div id = "panel-2"> <p> Я в разделе 2. </p> </div> </div> </div> </div> </div> </div> </div> </div>
(Iii) Прокрутка прослушивания Scrollspy.js и раскрывающегося списка Dropdown.js
Объедините списки прокрутки и раскрывающихся списков, чтобы создать навигационную панель, которая может прокручивать и прослушать раскрывающийся список.
Вам нужно установить стиль, стиль этого примера:
.a, .b {высота: 500px; Ширина: 100%;}. B {фоновое цветное: белое;}. a {фоновое цветное: черное;}jQuery.min.js, Dropdown.js, Scrollspy.js необходимо ввести.
<body Data spy = "scroll" data-target = "#navbarexample"> <div> <div> <div> <div> <div id = "Navbarexample"> <div> <button type = "button" data-toggle = "collapse" data-target = "#bs-example-navbar-collapse-1 Навигация </span> <pan> </span> <pan> </span> <pran> </span> <pan> </span> </button> <a href = "#"> бренд </a> </div> <div id = "bs-example-navbar-collapse-1"> <ul> <li> <a href = "#1" href = "#2"> link </a> </li> <li> <a href = "#3" Data-toggle = "Выпадающий"> выпадающий в раскрывающийся список <strong> </strong> </a> <ul> <li> <a href = "#"> Action </a> </li> <li> <a href = "#"> другое действие </a> </li> <li> <a href = "#"> href </a> </li> <li> "href ="#" here</a> </li> <li> <a href="#">Separated link</a> </li> <li> <a href="#">Separated link</a> </li> <li> <a href="#">One more separated link</a> </li> </ul> </li> </ul> <form role="search"> <div> <input type="text"> </div> <Button Type = "Отправить"> отправить </button> </form> <ul> <li> <a href = "#4"> link </a> </li> <li> <a href = "#5" Data-toggle = "Выпадение"> выпадает <strong> </strong> </a> <ul> <href = "#"> </stry> </stron action</a> </li> <li> <a href="#">Something else here</a> </li> <li> </li> <li> <a href="#">Separated link</a> </li> </li> </li> </li> </ul> </div> </div> </div> </div> </div> <div> <!-- Use <div data-spy="scroll" data-target="#navbarExample"> --> <div> <div id="1"></div> <div id="2"></div> <div id="3"></div> <div id="4"></div> <div id="5"></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html>
(Iv) Модальный рамный всплывающий слой modal.js
Вам необходимо представить jQuery.min.js и Modal.js, или вы можете представить Transition.js, чтобы добавить эффекты перехода.
<div> <div> <a id = "modal-732948" href = "#modal-container-732948" role = "button" data-toggle = "modal"> запустить демо-модал </a> <div Id = "Modal-Container-732948" ROLE = "Dialog" aria-labelledby = "myModalab-732948" aria-labelledby = "mymodalab-732948" aria-labelledby = "mymodalab-732948" aria-labelledby = "mymodablab-732948". <div> <div> <div> <button Type = "button" data-dismiss = "modal" aria-hidden = "true"> × </button> <h4 id = "mymodallabel"> Модальный заголовок </h4> </div> <div> ... </div> <div> <tood Type = кнопка «кнопка данных»> «Div»> «Кнопка»> </кнопка </кнопка «/кнопка» </кнопка «/кнопка» </кнопка «/кнопка» </кнопка «/кнопка». </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
(V) Подсказка для подсказки
Вам нужно представить jQuery.min.js и Tooltip.js, или вы можете представить Transition.js для добавления эффектов перехода.
Кроме того, плагин для подъема инструментов не похож на другие плагины, это не чистый плагин CSS. Чтобы использовать этот плагин, вы должны использовать jQuery для его активации.
$ (function () {$ ("[[data-toggle = 'tooltip']"). Tooltip ();}); <style Body = "Padding: 100px;" > <a href="#" data-toggle="tooltip" >Default Tooltip</a> <br/> <a href="#" data-toggle="tooltip" data-placement="left">Tooltip on the left</a> <br/> <a href="#" data-toggle="tooltip" data-placement="top" >Tooltip on the top</a> <br/> <a href="#" data-toggle="tooltip" data-placement="bottom" >Tooltip at the bottom</a> <br/> <a href="#" data-toggle="tooltip" data-placement="right" >Tooltip on the right</a> <br/> <button type="button" data-toggle="tooltip" >Default Tooltip</button> <br/> <button type="button" data-toggle="tooltip" data-placement="left">Tooltip on the left</button> <br/> <button type="button" data-toggle="tooltip" data-placement="top">Tooltip at the top</button> <br/> <button type="button" data-toggle="tooltip" data-placement="bottom">Tooltip at the bottom</button> <br/> <button type="button" data-toggle = "toolptip" Data-Slacement = "right"> Потиска инструментов справа </button> </body>Замечательное обмен темами: jquery picture carousel javascript picture carousel bootstrap picture carousel
Если вы все еще хотите учиться глубже, вы можете нажать здесь, чтобы изучить и прикрепить к вам 3 захватывающих тем:
Начальная учебник по обучению
Bootstrap Practical Rutorial
Учебное пособие по использованию таблицы начальной загрузки
Эта статья была составлена в «Учебное пособие по использованию плагинов Bootstrap», и все могут учиться и читать.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.