На этот раз мы рассмотрим использование компонентов JS. Эта статья будет немного длинной. Я надеюсь, что каждый может прочитать это терпеливо, и я считаю, что будет много успехов. Многие друзья из сада добавили меня к друзьям и выразили их как мой стиль письма. Это просто и ясно. Здесь еще раз спасибо за вашу поддержку. С одной стороны, моя собственная технология ограничена, и я пишу вещи относительно простыми. С другой стороны, я пишу вещи, основанные на моем собственном понимании и выражаю сложные вещи на простейшем языке. Поэтому, если что -то не так с написанием, пожалуйста, дайте мне некоторые исправления.
1. Ссылка на файл JS
Примечание: JQUERY должен быть введен перед другими файлами JS, потому что другие плагины полагаются на jQuery.
<!-<script src = "js/jquery-1.11.3.min.js"> </script> локально импортированный файл нагрузки-> <script src = "http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script>-должен ввести перед Batingstr src = "js/bootstrap.min.js"> </script>
2. Атрибуты данных
Функция: Через атрибут данных вы можете использовать любой плагин для начальной загрузки без написания кода JS. Справочные меню, упомянутые ранее, такие как Data-toggle = "выпадающий список" и другие справочные меню.
Итак, поскольку есть функция включения, как отключить функцию? Добавьте следующий код в JavaScript:
<script type = "text/javascript"> $ (document) .off ('.. Data-API'); </script>Если вы хотите отключить функции конкретного плагина, добавьте следующий код:
<script type = "text/javaScript"> // Закройте функцию плагина в поле приглашения $ (document) .off ('. alert.data-api'); </script>Все плагины JS - это в основном следующие шаги:
1: Как его использовать? --- Как написать соответствующий класс?
2: Как позвонить? --- После написания класса, как сделать класс, который он пишет вступить в силу?
3: Обработка событий, включая возникновение до начала действия и возникновения после начала действия
ПРИМЕЧАНИЕ. Все действия происходят до запуска, Bootstrap обеспечивает предотвращение, которое реализует остановку действия до его выполнения. Код заключается в следующем:
$ ('#mymodal'). on ('show.bs.modal', function (e) {if (! data) return e.preventdefault () // Предотвратить отображение модальной коробки, конечно, вы также можете переключиться на внешний вид других плагинов})Примечание. Bootstrap не принимает корректирующие меры для браузеров, которые отключают JavaScript. Поэтому нам нужно написать кусок кода, чтобы исправить себя, и я считаю, что все это знают.
<NoScript> ваш браузер не поддерживает JavaScript, пожалуйста, загрузите последний браузер </noscript>
3. Компонент модальной коробки (modal.js)
Примечание:
1: Он не поддерживается, чтобы открыть несколько модальных коробок одновременно
2: Модальная коробка должна быть расположена в детском элементе тела, чтобы избежать других компонентов, влияющих на дисплей и функцию модальной коробки.
3: Инструкции по мобильным терминалу
4: повышение доступности-атрибут роли.
5: представление может быть встроено в модальную коробку, то есть data-toggle = "modal"
Давайте посмотрим на колонку ниже. Нажмите на кнопку, и появится модальная коробка. Что касается свойств здесь, если вы прочитали предыдущую статью, я считаю, что ее нетрудно понять. Я не буду объяснять это подробно здесь. Вы можете опубликовать код, чтобы проверить его самостоятельно:
<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-совместимый" content = "ie = Edge"> <meta name = "viewport" content "и width = device-width, piront-scale = 1"> <! Другой контент * должен * следовать за ними! -> <title> </title> <link href = "css/bootstrap.css" rel = "stylesheet"> <link href = "css/bootstrap.min.css" rel = "stylesheet"> <link href = "css/style.css" rel = stylesheet "> </headle> <broad> <boto-teog =" relge-eet "> </headle> <broad> <broad>". data-target = ". BS-Example-Modal-Lg"> Большая модальная коробка всплывает </button> <div id = "myModal" tabIndex = "-1" ROLE = "Dialog" ARIA-labelledby = "mylargemodallabel"> <viv>-Большая модальная коробка <div> <div> <button-type = "data-dismiss =" modal "arabel abel" arabel "ar abel" <div> <div> <butting = "ar Data-dismiss =" ARABEL "<Div> <div> <div> <butting =" ARABEL "<Div> <div> <div> <button =" aria-hidden="true">×</span> </button> <h4>Modal title</h4> </div> <div> <p>one fine body …</p> </div> <div> <button type="button" data-dismiss="modal">close</button> <button type="button">save changes</button> </div> </div> </div></div><!-- Change the size of the Модальное поле и добавьте класс MODAL-SM-> <Button Type = "Button" Data-toggle = "Modal" Data-Target = ". BS-Example-Modal-SM"> Маленькая модальная коробка всплывает </button> <div id = "mymodal" tabindex = "-1" Роль = "Диалог"-labelledby = "divelargemodabe ="-1 " <div> <button type = "button" data-dismiss = "modal" aria-label = "close"> <span aria-hidden = "true"> × </span> </button> <h4> Модальный заголовок </h4> </div> <div> <p> Кнопка «Мод-мод» </p> </div> <div> <futtin type = ”кнопка« кнопка = кнопка ». type = "button"> Сохранить изменения </button> </div> </div> </div> </div> </div> <!-Эффекты анимации запрещены, просто удалите Fade-> <script src = "http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js" src = "js/bootstrap.min.js"> </script> <script type = "text/javascript"> $ ("#mymodal"). modal ("show"); --- Вызовет этот код, чтобы заставить плагин работать </script> </body> </html>Эффект заключается в следующем:
В сочетании с модальными коробками вы также можете добавить другие функции в содержание тела, такие как входные ящики, встроенные в форму и т. Д., И здесь нет кода.
Для событий в модальном поле добавьте следующий код в JavaScript, как показано ниже:
Скопируйте код следующим образом: <script src = "http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script> <script src = "js/bootstrap.min.js"> </script> <script type = "text/javascript" $ ("#mymodal"). Modal ("Show"); --- Вызовет этот код, чтобы подключить модальную коробку вступила в силу и отобразить $ ('#mymodal'). On ('hidden.bs.modal', function (e) {
оповещение ("111");
}) --- Это событие означает, что событие оповещения будет запускается после закрытия модальной коробки </script>
Давайте посмотрим, как модальная коробка встроена в видео. Нам нужно добавить код, автоматическое воспроизведение, остановку и другие функции. Давайте сначала посмотрим на код
<a href = "#" data-toggle = "modal" data-target = "#Videomodal" data-thevideo = "http://v.youku.com/v_show/id_xmtu2odmymduyma==.html"> Видео </a> <div Id = "VideoDal" tabIndex = "-1 ilAg" = "-1 ilAg" = "-1 ilAg" = "-1 ilAg". aria-labelledby="videoModal" aria-hidden="true"> <div> <div> <div> <button type="button" data-dismiss="modal" aria-hidden="true">×</button> <div> <iframe src=""></iframe> </div> </div> </div> </div> </div> </div><!-- <script src = "js/jquery-1.11.3.min.js"> </script> локальный файл загрузки-> <script src = "http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script> <script src = " type = "text/javascript"> // Просмотр функции AutoPlayModal () {var trigger = $ ("body"). Найти ('[data-toggle = "modal"]'); trigger.click (function () {var themodal = $ (this) .data ("target"); var videoosrc = $ (this) .attr ("data-thevideo"); var videoosrc = videoSrc+"? Autoplay = 1"; $ (themodal+'iframe'). attro (src ', videosto); button.close '). Click (function () {$ (themodal+' iframe '). attr (' src ', videoSrc);}); }); }); }); } // Вызовите функцию $ (document) .ready (function () {AutoPlayModal ();}); </script> <noscript> не поддерживайте браузер JavaScript </noScript>Эффект больше не является скриншотами, SRC выше представляет адрес Юку.
4. Компонент мониторинга прокрутки
Перечислены в панели навигации, то есть автоматически переключать вкладки в соответствии с положением прокрутки. Давайте посмотрим на код.
1: Убедитесь, что появляется стержень прокрутки.
2: обычно добавляйте DATA-SPY в тело, то есть используйте data-spy = "scroll" <body data spy = "scroll" data-target = ". Navbar" Data Offset = "70"> <div id = "myscrollspy"> <nave role = "navigation"> <div> <div id = "navbar-scroll"> <ul> <li> <li> <li> <a href = "#/########> <ul> <ul> <li> <li> <li href ="/home home home home hom <li> <a href = "#message"> Сообщение </a> </li> <li> <a href = "#о"> о </a> </li> <li> <a href = "#о"> о </a> </li> <li> <a href = "#" toggle = "Dropdown"> Droplown-Downly Menu <b> </b> </b> href = "#One"> One </a> <li> <a href = "#два"> два </a> <li> <a href = "#три"> три </a> </ul> </li> </ul> </div> </div> </nav> <! <p> 111111111111111111111111111111111h111er111er111er111er111er111er1er111н1Н1111111111111111111111111111111h111er111er111er111er111н1Н11111111111111111111111er11111111111er111er111er111er111er111er111er 11111111111111111111111111111er111er111er111er111er111er111er111er111er111er111н1Н11111111111111111111111111111Я111111111111111111111111111er11111er111er111er111er111er111er1er111er111er1er1er111er111er111er111er111er111н1Н1111111111111111111111111111111111111Ж11111er111er1er111er111er111er11111н 111111111111111111111111111er11111er111er111er111er111er111er111er111er111er111н1Н111111111111111111111111111111111111 11111111111111111111111111111er111er111er111er111er111er111er111er111er111н1н1Н111111111111111111111111111er111er111er11111er 111111111111111111111111111er11111er111er111er111er111er111er111er111er111er111н1Н111111111111111111111111111111111111 11111111111111111111111111111er111er111er111er111er111er111er111er111er111н1н1Н111111111111111111111111111er111er111er11111er <p> 1111111111111111111111111111111er111er111er111er111er111er111er111er1er111er111er111н1Н1111111111111111111111111111111111111ра 11111111111111111111111111111er111er111er111er111er111er111er111er111er111н1н1Н111111111111111111111111111er111er111er11111er 11111111111111111111111111111er111er111er111er111er111er111er111er111er111н1н1Н111111111111111111111111111er111er111er11111er 11111111111111111111111111111er111er111er111er111er111er111er111er111er111н1н1Н111111111111111111111111111er111er111er11111er id = "О"> о </h1> <p> 1111111111111111111111111111111er111er111er111er111er111er111er111er111er111er111н1Н111111111111111111111111111111 11111111111111111111111111111er111er111er111er111er111er111er111er111er111er1er111н1Н1111111111111111111111111111111111 11111111111111111111111111111er111er111er111er111er111er111er111er111er111er1er111н1Н1111111111111111111111111111111111 11111111111111111111111111111er111er111er111er111er111er111er111er111er111er1er111н1Н1111111111111111111111111111111111 <hr> <h1 id = "one"> one </h1> <p> 1111111111111111111111111111111er111er111er111er111er111er111er111er1er111н1Н11111111111111111111111111111111 .1111111111111111111111111111111111111111111111111. 11111111111111111111111111111er111er111er111er111er111er1er111er111er111er111er111н1Н11111111111111111111111er11111er 11111111111111111111111111111er111er111er111er111er111er111er111er111er1er111н1Н111111111111111111111111111111111111 11111111111111111111111111111er111er111er111er111er111er1er111er111er111er111er111н1Н11111111111111111111111er11111er </p> <h1 id = "два"> два </h1> <p> 111111111111111111111111111111111er111er111er111er111er111er111er1er111er111er111н1Н1111111111111111111111111 11111111111111111111111111111er111er111er111er111er111er111er111er111er1er111н1Н111111111111111111111111111111111111 11111111111111111111111111111er111er111er111er111er111er111er111er111er1er111н1Н111111111111111111111111111111111111 11111111111111111111111111111er111er111er111er111er111er111er111er111er1er111н1Н111111111111111111111111111111111111 111111111111111111111111111er11111er111er111er111er111er111er111er111er111er111н1Н111111111111111111111111111111111111 11111111111111111111111111111er111er111er111er111er111er111er111er111er111н1н1Н111111111111111111111111111er111er111er11111er 111111111111111111111111111er11111er111er111er111er111er111er111er111er111er111н1Н111111111111111111111111111111111111 11111111111111111111111111111er111er111er111er111er111er111er111er111er111н1н1Н111111111111111111111111111er111er111er11111er 111111111111111111111111111er11111er111er111er111er111er111er111er111er111er111н1Н111111111111111111111111111111111111 11111111111111111111111111111er111er111er111er111er111er111er111er111er111н1н1Н111111111111111111111111111er111er111er11111er 111111111111111111111111111er11111er111er111er111er111er111er111er111er111er111н1Н111111111111111111111111111111111111 11111111111111111111111111111er111er111er111er111er111er111er111er111er111н1н1Н111111111111111111111111111er111er111er11111er 111111111111111111111111111er11111er111er111er111er111er111er111er111er111er111н1Н111111111111111111111111111111111111 11111111111111111111111111111er111er111er111er111er111er111er111er111er111н1н1Н111111111111111111111111111er111er111er11111er 111111111111111111111111111er11111er111er111er111er111er111er111er111er111er111н1Н111111111111111111111111111111111111 11111111111111111111111111111er111er111er111er111er111er111er111er111er111н1н1Н111111111111111111111111111er111er111er11111er
Понять смысл отключения данных: то есть смещение сверху, когда положение прокрутки. Во -вторых, его обработка событий аналогична использованию модальных коробок и не будет объяснена.
Эффекты следующие:
5. Компонент коробки
Уведомление:
1: Используйте Data-toggle = "Tooltip"
2: Наблюдение данных представляет направление коробки с приглашением, есть четыре направления, влево, справа, внизу, вверху
3: Анализация данных-это установить эффект анимации на ложь, то есть после перемещения мыши, она меняется от исходного постепенного и выхода на мгновение, без буферизации эффекта.
<d Div> <p> <!-Easting-> Это заголовок тестирования, <a href = "#" id = "clickevent" data-toggle = "tooltip" data-placemation = "внизу" src = "js/jquery-1.11.3.min.js"> </script> локальный файл загрузки-> <script src = "http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script> <script src = " type = "text/javascript"> $ ('[data-toggle = "tooltip"]'). Tooltip (); // инициализировать $ ('#clickevent'). он отображается}) </script>6. Компонент всплывающей рамки
Уведомление:
1: всплывающее окно добавляет небольшой подвесной слой к любому элементу для хранения информации, не относящейся к мэрию.
2: Когда длина контента равен 0, всплывающее окно не будет отображаться. Используйте Data-toggle = "Popover"
3: Полагаться на плагин с приглашенным наставником и необходимо инициализировать вручную (см. Инициализацию в JavaScript)
Посмотрите на следующий код и больше нет снимков экрана:
Скопируйте код следующим образом: <!-Нажмите кнопку, чтобы всплыть, затем нажмите кнопку, чтобы скрыть->
<button Type = "button" data-toggle = "popover" data-content = "И вот какой-то удивительный контент, он очень увлекательный, верно?"
При нажатии на кнопку появляется, затем нажимайте кнопку и исчезает. Что я должен сделать, если я хочу нажать на него в пустом месте и скрыть его?
Просто добавьте Data-trigger = "Focus", чтобы скрыть фокус, триггер означает триггер.
Скопируйте код следующим образом: <!- Нажмите кнопку, чтобы всплыть, нажмите любое пустое пространство, чтобы скрыть его. Лучше всего использовать тег, конечно, вы также можете использовать кнопку->
<a tabindex = "0" id = "mypopover" rol = "кнопка" data-toggle = "popover"
Data-trigger = "FOCUS" DATA-CONTENT = "И это красивый контент"> Нажмите меня, чтобы исчезнуть </a>
7. Компонент предупреждения
Уведомление:
1: Используйте Data-Dismiss = "rewert"
2: плагин может добавить клики и исчезать в предупреждающем сообщении
3: При использовании кнопки закрытия, то есть, когда используется закрытый класс, это должен быть первый дочерний элемент оповещения, и текст не может появиться перед ним.
Давайте посмотрим на код:
<!-- Warning box--><div id="myalert"> <button type="button" data-dismiss="alert" aria-label="close"> <span aria-hidden="true">×</span> </button> <span>Welcome</span> <button type="button">Details</button></div><div id="myalert1"> <button type="button" data-dismiss="alert" aria-label = "close"> <span aria-hidden = "true"> × </span> </button> <pan> добро пожаловать </span> <button Type = "> Подробности </button> </div>
Если в JavaScript есть несколько предупреждений, и вы хотите закрыть поле для предупреждения, добавьте следующий код в JavaScript, следующим образом:
$ (" #myAlert"). Alert ('close') // Когда первая предупреждающая коробка закрыта, или когда #MyAlert заменяется #myAlert1, второе предупреждение закроет $ (' #myAlert1'). On ('закрыто.8. Кнопка компонента
Уведомление:
1: Переключите состояние кнопки (отключено или включено)-это достигается с помощью AutoCOMPLETE = "OFF"
2: Сделайте несколько кнопок в панели инструментов и т. Д.
3: Установите состояние загрузки, установив Data Moading-Text = "Загрузка ..."
<!-Кнопка-> <button type = "button" id = "mybutton" data-loading-text = "загрузка ..." autocomplete = "off"> Состояние загрузки </button> <button type = "button" data-toggle = "кнопка" aria-pressed = "false" autocomplete = "off"> Single Toggle <//input intourdiation </!-кнопка-кнопка «LabEl-tgle =" LabEl-кнопка> " type = "fackbox" autocomplete = "off" checked> home </label> <label> <input type = "fackbox" autocomplete = "off"> Сообщение </label> <babel> <input type = "fackbox" autocomplete = "off"> profile </label> </div>
Если вы хотите изменить контент после нажатия кнопки, добавьте Data-Complete-Text = "xxxx" и добавьте код JavaScript следующим образом:
Скопируйте код кода следующим образом: <!-После нажатия триггеров изменить контент-данные-текст представляет собой готовый контент->
<button type = "button" data-complete-text = "finish" autoComplete = "off"> Содержимое автоматически изменится после нажатия </button> <script> $ ('. MyBtn'). On ('click', function () {$ (this) .button ('offul') // Содержимое завершится} </script>.
Чтобы установить кнопку для состояния переключения и установить время для переключения состояния, вы можете добавить следующий код в JavaScript:
<script> $ ('#mybutton'). on ('click', function (e) {var btn = $ (this) .button ('wording'); settimeout (function (e) {btn.button ('reset'); // set Restore в исходное состояние}, 3000)}) </script>9. Складная рама в сборе
Примечание: используйте Data-toggle = "COLLAPSE", чтобы увидеть код:
<a ROLE = "Кнопка" data-toggle = "COLLAPSE" href = "#collapseExample" aria-expanded = "false" aria-controls = "collapseexample"> Ссылка с href </a> <div Id = "collapseExample"> <viv> Привет, это тест! </div> </div>
Кроме того, его можно использовать в сочетании с группами панелей, как показано ниже:
<!-Группа панели-> <div id = "mypanel" rol = "tableist"> <!-первая панель-> <div> <div rol = "tab" id = "Headingone"> <h4> <a data-toggle = "collapsse" data-parent = "#mypanel" href = "#collapseone"> home </a> </h4> </div> <sip> </div> <sip> </div> id = "collapseone" rol = "tabpanel"> <div> Привет обо мне </div> </div> </div> <!-вторая панель-> </div>
Нажав домой, чтобы управлять частью контента, он должен установить его href = "#collapseone", который является идентификатором, соответствующим контенту.
Что касается событий, аналогичных тем, которые используются ранее, эти компоненты имеют одинаковое использование времени, следующим образом
<script type = "text/javascript"> $ ('#mypanel'). On ('hidden.bs.collapse', function () {alert ("2222");}) </script>10. Компонент скольжения Carsousel
Примечание. Используйте Data-ride = "carousel", например, карусель, которую мы обычно делаем. Давайте сначала посмотрим на код диаграммы карусели, который я сделал:
<div id = "mycontainer"> --- Обратите внимание, что цель данных target <div id = "carousel1" data-ride = "carousel"> <ol>-Индикаторы представляют скользящие индикации, то есть, что одно из них к тому, что один <li Data-target = "#Carousel1" Data-to = "0"> </li>-Slide One One One <Li-tyl1-tyl1-tour-tour-tous1# data-slide-to = "1"> </li> <li data-target = "#carousel1" data-slide-to = "2"> </li> </ol> <!-Содержание рендеринга-> <div role = "listbox"> <div> <img src = "bg.jpeg"> <div> --carousel-caption несет в себе добавленное текст и т. Д. <p> Солнечное настроение, мы с вами пойдем с вами </p> </div> </div> <div> <img src = "timg.jpg"> </div> <div> <img src = "xx.jpg"> </div> </div> <!-Два тега слева и правой-> <a href = "#charounsel1" = ""? <span aria-hidden = "true"> </span> <pran> предыдущий </span> </a> <a href = "#carousel1" rol = "кнопка" data-slide = "next"> <span aria-hidden = "true"> </span> <pran> next </span> </a> </div> </div> </span> <pran> </span> </a> </div> </div>
Эффекты следующие:
Что касается скорости скольжения, вы можете напрямую добавить Data-interval = "2000", чтобы установить 2-секундное переключение переключения, но проблема с этим методом в том, что
Когда вы освежаете браузер, вы должны вручную нажать левую и правую кнопки, прежде чем вы сможете переключиться. Лучший способ - установить его в JavaScript. Как показано в следующем коде
<script type = "text/javascript"> $ (". Carousel"). Carousel ({интервал: 2000;}) </script>11. Аффиксные компоненты
ПРИМЕЧАНИЕ. Используйте позицию: Исправлена для позиционирования, используйте Data-Spy = "Affix" в сочетании с выключением данных для достижения мониторинга, и когда происходит определенное событие, оно смещено. Пожалуйста, прочтите следующий код:
<div> <!-макет системы сетки-> <viv> <ul> <li> 111111111111 </li> <li> 22222222222221 </li> <li> 3333333333333333 </li> <li> 4444444444444444444444444444444 гг. <li> 55555555555 </li> <li> 666666666666 </li> <li> 777777777777777777777777777777777777777777777777777777777777777777н7н7н7н7н7н7н7н7н 7777777777777777777777777777777777777777777777777777777777777777н7н7н7н7н7н7н7н7н7а777777 777777777777777777777777777777777777777777777777777777777777777н7н7н7н7н7н7н7н7а77777777 7777777777777777777777777777777777777777777777777777777777777777н7н7н7н7н7н7н7н7н7а777777 111111111111111111111111111er11111er111er111er111er111er111er111er111er111er111н1Н111111111111111111111111111111111111 11111111111111111111111111111er111er111er111er111er111er111er111er111er111н1н1Н111111111111111111111111111er111er111er11111er 111111111111111111111111111er11111er111er111er111er111er111er111er111er111er111н1Н111111111111111111111111111111111111 11111111111111111111111111111er111er111er111er111er111er111er111er111er111н1н1Н111111111111111111111111111er111er111er11111er 111111111111111111111111111er11111er111er111er111er111er111er111er111er111er111н1Н111111111111111111111111111111111111 11111111111111111111111111111er111er111er111er111er111er111er111er111er111н1н1Н111111111111111111111111111er111er111er11111er 111111111111111111111111111er11111er111er111er111er111er111er111er111er111er111н1Н111111111111111111111111111111111111 11111111111111111111111111111er111er111er111er111er111er111er111er111er111н1н1Н111111111111111111111111111er111er111er11111er 111111111111111111111111111er11111er111er111er111er111er111er111er111er111er111н1Н111111111111111111111111111111111111 11111111111111111111111111111er111er111er111er111er111er111er111er111er111н1н1Н111111111111111111111111111er111er111er11111er 111111111111111111111111111er11111er111er111er111er111er111er111er111er111er111н1Н111111111111111111111111111111111111 11111111111111111111111111111er111er111er111er111er111er111er111er111er111н1н1Н111111111111111111111111111er111er111er11111er <p> 1111111111111111111111111111111er111er111er111er111er111er111er111er1er111er111er111н1Н1111111111111111111111111111111111111ра 11111111111111111111111111111er111er111er111er111er111er111er111er111er111н1н1Н111111111111111111111111111er111er111er11111er 11111111111111111111111111111er111er111er111er111er111er111er111er111er111н1н1Н111111111111111111111111111er111er111er11111er 11111111111111111111111111111er111er111er111er111er111er111er111er111er111н1н1Н111111111111111111111111111er111er111er11111er 111111111111111111111111111er11111er111er111er111er111er111er111er111er111er111н1Н111111111111111111111111111111111111 11111111111111111111111111111er111er111er111er111er111er111er111er111er111н1н1Н111111111111111111111111111er111er111er11111er 111111111111111111111111111er11111er111er111er111er111er111er111er111er111er111н1Н111111111111111111111111111111111111 11111111111111111111111111111er111er111er111er111er111er111er111er111er111н1н1Н111111111111111111111111111er111er111er11111er 111111111111111111111111111er11111er111er111er111er111er111er111er111er111er111н1Н111111111111111111111111111111111111 11111111111111111111111111111er111er111er111er111er111er111er111er111er111н1н1Н111111111111111111111111111er111er111er11111er 111111111111111111111111111er11111er111er111er111er111er111er111er111er111er111н1Н111111111111111111111111111111111111 11111111111111111111111111111er111er111er111er111er111er111er111er111er111н1н1Н111111111111111111111111111er111er111er11111er 111111111111111111111111111er11111er111er111er111er111er111er111er111er111er111н1Н111111111111111111111111111111111111 11111111111111111111111111111er111er111er111er111er111er111er111er111er111н1н1Н111111111111111111111111111er111er111er11111er 111111111111111111111111111er11111er111er111er111er111er111er111er111er111er111н1Н111111111111111111111111111111111111 11111111111111111111111111111er111er111er111er111er111er111er111er111er111н1н1Н111111111111111111111111111er111er111er11111er 111111111111111111111111111er11111er111er111er111er111er111er111er111er111er111н1Н111111111111111111111111111111111111 11111111111111111111111111111er111er111er111er111er111er111er111er111er111н1н1Н111111111111111111111111111er111er111er11111er 111111111111111111111111111er11111er111er111er111er111er111er111er111er111er111н1Н111111111111111111111111111111111111 11111111111111111111111111111er111er111er111er111er111er111er111er111er111н1н1Н111111111111111111111111111er111er111er11111er 111111111111111111111111111er11111er111er111er111er111er111er111er111er111er111н1Н111111111111111111111111111111111111 11111111111111111111111111111er111er111er111er111er111er111er111er111er111н1н1Н111111111111111111111111111er111er111er11111er 111111111111111111111111111er11111er111er111er111er111er111er111er111er111er111н1Н111111111111111111111111111111111111 11111111111111111111111111111er111er111er111er111er111er111er111er111er111н1н1Н111111111111111111111111111er111er111er11111er 111111111111111111111111111er11111er111er111er111er111er111er111er111er111er111н1Н111111111111111111111111111111111111 11111111111111111111111111111er111er111er111er111er111er111er111er111er111н1н1Н111111111111111111111111111er111er111er11111er 111111111111111111111111111er11111er111er111er111er111er111er111er111er111er111н1Н111111111111111111111111111111111111 11111111111111111111111111111er111er111er111er111er111er111er111er111er111н1н1Н111111111111111111111111111er111er111er11111er 111111111111111111111111111er11111er111er111er111er111er111er111er111er111er111н1Н111111111111111111111111111111111111 11111111111111111111111111111er111er111er111er111er111er111er111er111er111н1н1Н111111111111111111111111111er111er111er11111er 111111111111111111111111111er11111er111er111er111er111er111er111er111er111er111н1Н111111111111111111111111111111111111 11111111111111111111111111111er111er111er111er111er111er111er111er111er111н1н1Н111111111111111111111111111er111er111er11111er <div> <ul> <li> 111111111111111 </li> <li> 2222222222222 </li> <li> 33333333333333333 </li> <li> 4444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444 <li> 66666666666661 </li> <li> 7777777777777777777777777777777777777777777777777777777777777777777н7н7н7н7н7н7н7н7н 7777777777777777777777777777777777777777777777777777777777777777н7н7н7н7н7н7н7н7н7а77777777 7777777777777777777777777777777777777777777777777777777777777777н7н7н7н7н7н7н7н7н7а77777777 7777777777777777777777777777777777777777777777777777777777777777н7н7н7н7н7н7н7н7н7а77777777 src = "http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script> <script src = "js/bootstrap.min.js"> </script> <script type = "text/javascript"> $ ('. }}) $ ('.. JS-Affixed-Element-Bottom'). Affix ({offset: {внизу: 200} --- Когда мышь катится внизу, Div автоматически перейдет на 200px снизу}) </script>Компонент JS почти здесь, и изучение структуры начальной загрузки почти закончилась. Следующая статья закончилась. Я планирую разработать страницу специально с начальной загрузкой, чтобы создать ее и поделиться ею с вами. Если вы также изучаете основу для начальной загрузки, пожалуйста, сообщите и учитесь!
Если вы все еще хотите учиться глубже, вы можете нажать здесь, чтобы изучить и прикрепить к вам 3 захватывающих тем:
Начальная учебник по обучению
Bootstrap Practical Rutorial
Учебное пособие по использованию плагина Bootstrap
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.