Запустить
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Подключение Bootstrap 3 к HTML странице</title> <!-- Bootstrap --> <link href="/examples/vendors/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container"> <h1>Bootstrap 3 - Демонстрация работы компонентов</h1> <h3 id="componentPanel" class="text-danger">Компонент panel (панель)</h3> <hr> <p id="panel1">1. Пример простой панели</p> <div class="panel panel-default"> <div class="panel-body">Пример простой панели</div> </div> <p id="panel2">2. Панель с заголовком</p> <div class="panel panel-default"> <div class="panel-heading">Панель с заголовком</div> <div class="panel-body"> Содержимое панели </div> </div> <p id="panel3">3. Панель с h3 заголовком</p> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Панель с h3 заголовком</h3> </div> <div class="panel-body"> Содержимое панели </div> </div> <p id="panel4">4. Панель с футером</p> <div class="panel panel-default"> <div class="panel-body"> Содержимое панели </div> <div class="panel-footer">Панель подвала</div> </div> <p id="panel5">5. Панели с акцентными классами</p> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">Заголовок панели</h3> </div> <div class="panel-body"> Содержимое панели </div> </div> <div class="panel panel-success"> <div class="panel-heading"> <h3 class="panel-title">Заголовок панели</h3> </div> <div class="panel-body"> Содержимое панели </div> </div> <div class="panel panel-info"> <div class="panel-heading"> <h3 class="panel-title">Заголовок панели</h3> </div> <div class="panel-body"> Содержимое панели </div> </div> <div class="panel panel-warning"> <div class="panel-heading"> <h3 class="panel-title">Заголовок панели</h3> </div> <div class="panel-body"> Содержимое панели </div> </div> <div class="panel panel-danger"> <div class="panel-heading"> <h3 class="panel-title">Заголовок панели</h3> </div> <div class="panel-body"> Содержимое панели </div> </div> <p id="panel6">6. Панель, содержащая текст и таблицу</p> <div class="panel panel-default"> <div class="panel-heading">Информация о клиентах</div> <div class="panel-body"> Следующая таблица содержит личные сведения клиентов компании. </div> <table class="table"> <thead> <tr> <th>№ п/п</th> <th>Имя</th> <th>Фамилия</th> <th>E-mail</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Роман</td> <td>Кулибин</td> <td>roman@mail.ru</td> </tr> <tr> <td>2</td> <td>Василий</td> <td>Дорков</td> <td>vasili@mail.ru</td> </tr> <tr> <td>3</td> <td>Александр</td> <td>Добженко</td> <td>alexander@mail.ru</td> </tr> </tbody> </table> </div> <p id="panel7">7. Панель, содержащая таблицу</p> <div class="panel panel-default"> <div class="panel-heading">Информация о клиентах</div> <table class="table"> <thead> <tr> <th>№ п/п</th> <th>Имя</th> <th>Фамилия</th> <th>E-mail</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Роман</td> <td>Кулибин</td> <td>roman@mail.ru</td> </tr> <tr> <td>2</td> <td>Василий</td> <td>Дорков</td> <td>vasili@mail.ru</td> </tr> <tr> <td>3</td> <td>Александр</td> <td>Добженко</td> <td>alexander@mail.ru</td> </tr> </tbody> </table> </div> <p id="panel8">8. Панель, содержащая список</p> <div class="panel panel-default"> <!-- Обычное содержимое панели --> <div class="panel-heading">Товары</div> <div class="panel-body"> Список наименований товаров, доступных в магазине. </div> <!-- Групповой список --> <div class="list-group"> <a href="#panel8" class="list-group-item">Смартфоны <span class="badge">32</span></a> <a href="#panel8" class="list-group-item">Ноутбуки <span class="badge">204</span></a> <a href="#panel8" class="list-group-item">Планшеты <span class="badge">517</span></a> <a href="#panel8" class="list-group-item">Компьютеры <span class="badge">71</span></a> </div> </div> <hr> <h3 class="text-danger">Компонент tooltip (всплывающая подсказка)</h3> <hr> <p id="tooltip1">1. Пример настройки всплывающей подсказки с помощью атрибутов data-</p> <div class="alert alert-warning"> <ul class="tooltip-examples list-inline"> <li><a href="#" data-toggle="tooltip" title="Подсказка" rel="nofollow">Ссылка с tooltip</a></li> <li><a href="#" data-toggle="tooltip" data-placement="left" title="Подсказка слева" rel="nofollow">Подсказка слева</a></li> <li><a href="http://itchief.ru/lessons/bootstrap-3/bootstrap-3-tooltips#ttexamples" data-toggle="tooltip" title="Подсказка с очень длинным текстом для демонстрации максимальной ширины tooltip." rel="nofollow">Очень длинная подсказка</a></li> <li><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Подсказка для кнопки">Кнопка</button></li> <li><button type="button" class="btn btn-warning" data-toggle="tooltip" data-placement="right" title="Подсказка справа от кнопки">Другая кнопка</button></li> </ul> </div> <p id="tooltip2">2. Пример настройки всплывающей подсказки с помощью JavaScript</p> <div class="alert alert-warning"> <p class="tooltip-options"> <a href="#" data-toggle="tooltip">Пример tooltip с параметрами</a> </p> </div> <p id="tooltip3">3. Управление отображением всплывающей подсказки с помощью методов show(), hide(), toggle() и destroy()</p> <div class="alert alert-warning"> <p class="tooltip-method"> <a href="#" data-toggle="tooltip" title="Демонстрация методов tooltip">Пример tooltip</a> </p> <div> <p>Нажмите на следующие кнопки для управления tooltip с помощью методов.</p> <input type="button" class="btn btn-primary show-tooltip" value="Show"> <input type="button" class="btn btn-warning hide-tooltip" value="Hide"> <input type="button" class="btn btn-success toggle-tooltip" value="Toogle"> <input type="button" class="btn btn-danger destroy-tooltip" value="Destroy"> </div> </div> <hr> <h3 class="text-danger">Компонент carousel (карусель)</h3> <hr> <p id="carousel1">1. Пример карусели</p> <div style="margin-top: 20px; margin-bottom: 20px;"> <div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel" style="margin-top: 20px;"> <!-- Carousel indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Carousel items --> <div class="carousel-inner"> <div class="active item" style="background: #333; text-align: center; height: 300px !important;"> <h2 style="margin: 0; color: #666; padding-top: 90px; font-size: 52px;">Слайд №1</h2> <div class="carousel-caption"> <h3>Заголовок 1 слайда</h3> <p>Описание 1 слайда...</p> </div> </div> <div class="item" style="background: #333; text-align: center; height: 300px !important;"> <h2 style="margin: 0; color: #666; padding-top: 90px; font-size: 52px;">Слайд №2</h2> <div class="carousel-caption"> <h3>Заголовок 2 слайда</h3> <p>Описание 2 слайда...</p> </div> </div> <div class="item" style="background: #333; text-align: center; height: 300px !important;"> <h2 style="margin: 0; color: #666; padding-top: 90px; font-size: 52px;">Слайд №3</h2> <div class="carousel-caption"> <h3>Заголовок 3 слайда</h3> <p>Описание 3 слайда...</p> </div> </div> </div> <!-- Carousel nav --> <a class="carousel-control left" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="carousel-control right" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </div> <p id="carousel2">2. Пример карусели, управляемой с помощью кнопок</p> <div style="margin-top: 20px; margin-bottom:20px;"> <div id="myCarousel2" class="carousel slide" data-interval="3000" data-ride="carousel" style="margin: 20px 0;"> <!-- Carousel items --> <div class="carousel-inner"> <div class="active item" style="background: #333; text-align: center; height: 300px !important;"> <h2 style="margin: 0; color: #666; padding-top: 90px; font-size: 52px;">Слайд №1</h2> <div class="carousel-caption"> <h3>Заголовок 1 слайда</h3> <p>Описание 1 слайда...</p> </div> </div> <div class="item" style="background: #333; text-align: center; height: 300px !important;"> <h2 style="margin: 0; color: #666; padding-top: 90px; font-size: 52px;">Слайд №2</h2> <div class="carousel-caption"> <h3>Заголовок 2 слайда</h3> <p>Описание 2 слайда...</p> </div> </div> <div class="item" style="background: #333; text-align: center; height: 300px !important;"> <h2 style="margin: 0; color: #666; padding-top: 90px; font-size: 52px;">Слайд №3</h2> <div class="carousel-caption"> <h3>Заголовок 3 слайда</h3> <p>Описание 3 слайда...</p> </div> </div> </div> </div> <!-- Кнопки управления --> <div style="margin-top: 20px; text-align:center;"> <input type="button" class="btn btn-info start-slide" value="Старт"> <input type="button" class="btn btn-info pause-slide" value="Пауза"> <input type="button" class="btn btn-info prev-slide" value="Предыдущий"> <input type="button" class="btn btn-info next-slide" value="Следующий"> <input type="button" class="btn btn-info slide-one" value="Слайд 1"> <input type="button" class="btn btn-info slide-two" value="Слайд 2"> <input type="button" class="btn btn-info slide-three" value="Слайд 3"> </div> </div> </div> <!-- jQuery --> <script src="/examples/vendors/jquery/jquery-3.3.1.min.js"></script> <!-- Bootstrap --> <script src="/examples/vendors/bootstrap-3.3.7/js/bootstrap.min.js"></script> <script> $(document).ready(function(){ $(".show-tooltip").click(function(){ $(".tooltip-method a").tooltip('show'); }); $(".hide-tooltip").click(function(){ $(".tooltip-method a").tooltip('hide'); }); $(".toggle-tooltip").click(function(){ $(".tooltip-method a").tooltip('toggle'); }); $(".destroy-tooltip").click(function(){ $(".tooltip-method a").tooltip('destroy'); }); }); $(document).ready(function(){ $(".tooltip-examples a").tooltip(); $(".tooltip-examples button").tooltip(); }); $(document).ready(function(){ $(".tooltip-options a").tooltip({ title : 'Текст всплывающей подсказки при отсутствии атрибута title.', placement: 'right', delay: { show: 500, hide: 100 } }); }); </script> <script> $(document).ready(function(){ // Инициализирует карусель $(".start-slide").click(function(){ $("#myCarousel2").carousel('cycle'); }); // Останавливает процесс автоматической смены слайдов карусели $(".pause-slide").click(function(){ $("#myCarousel2").carousel('pause'); }); // Осуществляет переход на предыдущий слайд $(".prev-slide").click(function(){ $("#myCarousel2").carousel('prev'); }); // Осуществляет переход на следующий слайд $(".next-slide").click(function(){ $("#myCarousel2").carousel('next'); }); // Осуществляет переход на 0 слайд карусели $(".slide-one").click(function(){ $("#myCarousel2").carousel(0); }); // Осуществляет переход на 1 слайд карусели $(".slide-two").click(function(){ $("#myCarousel2").carousel(1); }); // Осуществляет переход на 2 слайд карусели $(".slide-three").click(function(){ $("#myCarousel2").carousel(2); }); }); </script> </body> </html>