В двух предыдущих статьях рассказывается только о том, как использовать компоненты, в основном не о JS. Этот блог должен обсуждаться в сочетании с JS.
Позвольте мне объяснить несколько компонентов
1. Модальная коробка
2. Прокрутите мониторинг
3. Страница тега
4. По мотивам инструментов
5. всплывающая коробка
6. Кнопка
7. Укладка
8. вращающаяся страница
9. Боковая панель
Импорт CSS и JS первым
<link rel = "styleSheet" type = "text/css" href = "css/bootstrap.min.css"> <link rel = "styleSheet" href = "// cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> src = "js/jquery-3.1.0.min.js"> </script> <script src = "js/bootstrap.min.js"> </script>
1. Модальная коробка
Мы обычно используем эту модальную коробку при входе или чтении определенных правил, поэтому модальная коробка очень распространена
Сначала напишите кнопку, чтобы открыть модальную коробку
<!-Data-Target-это идентификатор нашего модального поле, а data-whatever = "@ime"-это тег и значение модального блока, которое мы передаем-> <button type = "кнопка" data-toggle = "modal" target = "#mymodal" data-whatever = "@ime"> Откройте модальное поле </button> "#mymodal" data-whatever = "@ime"> Откройте модальное поле </button> button> "#mymodal" whatever = "@ime"> «Откройте модальное поле» </button> "#mymodal" whatever = "@ime"> «Откройте модальное поле» </button>
Затем напишите модальную коробку
<div id = "mymodal" rol = "dialog" aria-label = "mymodallabel" aria-hidden = "true"> <!-Это маленькая модальная коробка. Изменить Modal-SM на Modal-LG-это большая модальная коробка-> <div> <!-Модальная коробка-> <div> <!-Кнопка закрытия в верхнем правом уголке-> <Кнопка типа = "Кнопка" Data-dismiss = "Modal" Aria-label = "Close"> <span aria-hidden = "true"> × </span> </button> <! Содержание коробки-> <div> <!-Модальное содержимое кадры может быть текстом или таблицей-> <!-<p> hello </p>-> <form> <div> <sabel> Имя пользователя </label> <input type = "text"> </div> <div> <sabel> Пароль </label> <inpourse = "пароль"> </div> </div> <div> <! data-dismiss="modal"> Close </button> <button type="button"> Save</button> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
Если вы нажимаете кнопку, а затем передайте параметры в таблицу в модальном поле
Добавить данные данных к атрибуту кнопки: значение
Приведенный выше Data-Whatever = ”@ime” добавляется в качестве примера. Параметр с меткой, что угодно и значение @ime добавлено.
Ниже приводится операция JS
// Метод $ ("#mymodal"). On ("show.bs.modal", function (e) {// Получить кнопку, которую вы нажимаете, чтобы открыть кнопку var = $ (e.relatedtarget) // Получить параметр, переданный кнопкой var recurent = cutting.data ("что угодно") // modal.find (". Modal-title"). Text ("hello"+получатель); // Изменение значения ввода в корпусе modal.find (".. Modal-Colie Input"). Val (получатель)})2. Прокрутите мониторинг
Слайд в различное содержимое, страница вкладок изменится
Сначала напишите атрибут тела
<!-смещение установлено в 70, это значение является лучшим проверенным значением->
<body Data spy = "scroll" data-target = ". Navbar" Data Offset = "70">
Затем напишите вкладку
<!-Верхняя часть отображаемого контента, исправленная в панели вкладок-> <NAV ROLE = "navigation"> <div> <div id = "myscrollspy"> <ul> <!-соединение в теге-это идентификатор названия ниже-> <li> <a href = "#iwen"> iwen </a> </li> <li> <a href = "#iwen"> iwen </a> </li> <li> <li> Раскрывающееся меню в теге-> <li> <a href = "#" data-toggle = "выпадающий"> раскрывающееся меню <pran> </span> </a> <ul rol = "menu"> <li> <a href = "#One" tabindex = "-1"> One </a> </li> <li> <a href = "#tabindex ="-1 "/li> <li> <href ="#tabindex = <li> <a href = "#three" tabindex = "-1"> три </a> </li> </ul> </li> </li> </ul> </div> </div> </nav>
Затем напишите контент
<h2 id = "iwen">@iwen </h2> <p> Это человек, это человек, который </p> <h2 id = "ime">@ime </h2> <p> Это человек, это человек </p> <h2 id = ">@один </h2> <p> Это человек. id = "Two">@Two </h2> <p> Это человек, это человек </p> <h2 id = "three">@three </h2> <p> Это человек, это человек, который </p> <H2 id = "Three">@Three </h2> <p> Это человек, это человек </p> ">@
Рекомендуется писать контент дольше, чтобы эффект был более очевидным. Здесь не удобно писать слишком много бесполезных слов.
Вы также можете написать некоторые методы JS
// Метод $ ("#myscrollspy"). On ("activate.bs.scrollspy", function (e) {alert ("hello");})3. Страница тега
Нажмите на разные теги, чтобы отобразить различный контент
Сначала напишите барную планку
<ul id = "mytab"> <!-ссылка тега соответствует идентификатору панели вкладок ниже-> <li> <a href = "#home" data-toggle = "tab"> home </a> </li> <li> <a href = "#profile" data-toggle = "tab"> Profile </a> </li> <li> <li> <a href = "#"#"#"#"#". Data-toggle = "Выпадающий"> выпадающее меню <pran> </span> </a> <ul rol = "menu"> <!-В отличие от обычных раскрывающихся меню, добавить data-toggle = "tab"-> <li> <a href = "#One" tabIndex = "-1" Taggle = "Tab"> One </a> </li> <li> <li> <a href = "##############". data-toggle = "tab"> два </a> </li> </ul> </li> </li> </ul>
Затем напишите содержимое разных тегов
<div id = "mytabcontent"> <div id = "home"> <p> home </p> <div id = "profile"> <p> Профиль </p> <div id = "one"> <p> One </p> <div id = "два"> <p> два </p>
Вы можете инициализировать отображаемую страницу вкладок с JS
Есть несколько способов выбрать страницу вкладок
$ ('#mytabs a [href = "#profile"]'). Tab ('show') // select $ ('#mytabs a: First'). Tab ('Show') // Выбрать первую страницу вкладки $ ('#mytabs a: последний'). Вкладка «Показать») // Выбрать последнюю вкладка $ ('#mytabs li: eq (2). (Потому что 0 - первый). Если это вкладка в раскрывающемся меню, номер должен быть добавлен по 1.4. По мотивам инструментов
<p> <!-Если контент заголовка пуст, отображается содержание данных-оригинального тита. Размещение-это позиция отображения, которая может быть установлена в верхней части | внизу | влево | справа-> <!-Параметры могут быть установлены в данных-**** ---> Добро пожаловать в <a data-animation = "false" id = "mytooltip" href = "#" data-toggle = "tooltip" pactry = "нижний" data-original-title = "www.jk.
Тогда вам нужно инициализировать его с помощью JS, в противном случае это не повлияет на
// Инициализировать подсказку, укажите на отображение
$ ('[data-toggle = "tooltip"]'). Tooltip ();
5. всплывающая коробка
Воспленная коробка аналогична всплеске инструментов, но она отображается более богаче, чем подсказка, а также чаще используется.
<!-data-trigger = "foucus" Нажмите на бланк, чтобы исчезнуть. Если вы не добавляете его, нажмите кнопку, чтобы исчезнуть. Если вы установите его на падение, отображается кнопка, которую вы перемещаете. Удалить и исчезнуть-> <!-Это всплывающее окно названо, а содержимое содержит содержимое-> <button Type = "button" trigger = "foucus" data-placement = "внизу" data-toggle = "popover" data-content = "content"> bobe </utturn>>
Затем инициализируйте его с помощью JS
// Инициализировать Попвер
$ (". JS-Popover"). Popover ();
6. Кнопка
Первые две статьи рассказывают о основном стиле кнопок. На этот раз он продвигается, позволяя кнопкам отображать другой текст при загрузке.
<!-Вы можете установить текст кнопки при загрузке-> <Button Type = "Кнопка" Data Loading-Text = "Loding для 3S"> Статус загрузки </button>
Затем используйте JS, чтобы связать событие Click
// Click событие кнопки привязки $ (".. JS-Loading-Btn"). On ("click", function (e) {// после нажатия, установите статус загрузки, отображая текст загрузки var btn = $ (this) .button ("Загрузка"); // Restore settime (function (e) {btn.button ("resest"), 3000), 3000), 3000), 3000), 3000), 3000).7. Укладка
Эффект укладки может сэкономить много элементов управления экраном, что очень практично
Это нажатие кнопки, чтобы открыть стек
<!-href-это идентификатор контента-> <a data-toggle = "collapsse" href = "#collapseexample"> нажмите, чтобы просмотреть </a> <div id = "collapseexample"> <div> hello </div> </div>
Это стек групп панелей
<div id = "accordion" rol = "tableist"> <viv> <div rol = "tab" id = "HeadingOne"> <!-отображается заголовок-> <h4> <!-Data-carent, если идентификатор группы панели-> <a data-toggle = "collapse" parent = "#accordf href ="#collapseone "> item1 </a> </H.! Открыть, без скрытия-> <div id = "collapseone" rol = "tabpanel"> <div> hello <br> hello <br> hello <br> </div> </div> </div> <div> <div rol = "tab" id = "headingtwo"> <h4> <a data-toggle = "collapse" parent = "#accordion" href = "#href ="#href = "##href ="##href = "#href ="#href##href##href##href##href##href##href##hreff = "> </h4> </div> <div id = "collapsetwo" role = "tabpanel"> <div> hello <br> hello <br> hello <br> </div> </div> </div> <div> <div role = "tab" id = "headingthree"> <h4> <a data-toggle = "collapse" parent = "#accordion" href = "#collapsethree"> item1 </a> </h4> </div> <div id = "collapsethree" rol = "tabpanel"> <div> hello <br> Привет <br> hello <br> </div> </div> </div> </div> </div> </div> </div>
8. вращающаяся страница
Мы часто можем видеть это на домашней странице сайта
<div id = "carousel-example-generic"> <!-Это три белых круга ниже индикатора-> <ol> <li data-target = "#carousel-example-generic" data-slide-to = "0"> </li> <li data-target = "#carousel-example-Generic" data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!--The content of the rotation page--> <div> <img src="images/4.jpg"> <!--Add text--> <div> <h3>U3D</h3> <p>New version upgrade</p> </div> </div> <div> <img src = "Images/2.jpg"> <div> <h3> u3d </h3> <p> Запуск нового продукта </p> </div> </div> <div> <img src = "Images/3.jpg"> <div> <h3> Apple </h3> <p> Apple </p> </div> </div> <! href = "#carousel-example-generic" data-slide = "prew"> <pan> </span> </a> <a href = "#carousel-example-Generic" Data-slide = "Далее"> <pan> </span> </a> </div>
Вы можете установить интервалы и автоматически запустить с JS
// Установить интервал на 2 с и автоматически карусель $ (". Carousel"). Carousel ({интервал: 2000})9. Боковая панель
Основным содержанием боковой панели является список
<!-Чтобы установить ширину, скрыть ее на экране телефона-> <div> <ul> <a href = "#"> hello </a> <a href = "#"> hello </a> <a href = "#"> hello </a> <a href = "#"> hello </a> <a href = "#"> hello </a> <A href = "##############################№" href = "#"> hello </a> <a href = "#"> hello </a> <a href = "#"> hello </a> <a href = "#"> hello </a> </ul> </div>
Написать стиль снова
<style> .affixed-element-top.affix { /*Если вы хотите быть внизу, вы можете изменить его внизу: 10px;* / top: 10px; } .Faffixed-element-top.affix-bottom {position: относительно; } </style>Добавьте немного JS
$ (". JS-Affixed-Element-Top"). Affix ({offset: {}})Это основное использование Boostrap. После освоения вы можете создать хорошую веб -страницу.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.