Эта статья делится кодом реализации первой страницы Bootstrap для вашей ссылки. Конкретный контент заключается в следующем
Изображение воспроизведения:
Код реализации:
<! Doctype html> <html> <head> <meta charset = "utf-8" /> <meta name = "viewport" content = "width = width device, начальная масштаба = 1" /> <!-Для обеспечения правильного масштабирования рисования и сенсорного экрана, метка Metadata ViewPort необходимо добавить в <Head>. --> <title></title> <link href="css/bootstrap.min.css" rel="stylesheet"> <script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script> <script src="js/bootstrap.min.js"></script> <style> .masthead{ Заполнение: 110px 0px 110px; маржинальный бат: 0px; } .mashhead: после {content: ''; дисплей: блок; позиция: абсолютно; Верх: 0; Справа: 0; Внизу: 0; слева: 0; Предпосылки: URL (IMG/BG1.PNG) Повторите центр центра; непрозрачность: 0,4; } .mashhead H1 {font-Weight: 700; размер шрифта: 700%; } .Active {font-size: 120%; font-weight: bold;} .masthead-a {непрозрачность: 0,5; Цвет: белый; размер шрифта: средний; } .mashhead-A: Hover {color: White; непрозрачность: 1; }. Модальный заголовок li i {непрозрачность: 0.5;} .text-align {display: inline; } .img-ls {ширина: 23%; Граница: 1PX SOLID HSL (0, 0%, 87%); Право маржи: 2%; Заполнение: 4px 0px; маржинальный дно: 6%; Мин-высот: 350px; Макс-высот: 600px; Плавание: осталось; } .img-ls img {width: 97%; Высота: Авто; } .img-ls img: Hover {coursor: pointer; } .footer {padding: 50px 50px; } .navbar-nav li{display: inline;} </style> </head> <body> <div> <!-- Define the tone, position, size and background of the internal framework --> <div> <button type="button" data-toggle="collapse" data-target=".navbar-collapse"> <span>Toggle navigation</span> <span></span> <span></span> <pan> </span> </button> <ul> <li> <a href = "#"> Bootstrap Китайский веб -сайт </a> </li> </ul> <div role = "navigation"> <ul> <li> <a href = "#"> Bootstrap2 Китайский документ </a> </li> <li> <a href = "#"> boopstrap2. href = "#"> bootstrap 4.0 Предварительный просмотр </a> </li> <li> <a href = "#"> меньше учебного пособия </a> </li> <li> <a href = "#"> jquery api </a> </li> <li> <a href = "#"> Пример веб-сайта </a> </li> <li> Позиции </a> </li> <li> <a href = "#"> о </a> </li> </div> </div> </div> <div> <div> <h1> bootstrap </h1> <h2> Краткая, интуитивная и мощная рамка развития переднего тренда делает веб-развитие проще и проще. </h2> <p> <a href = "#"> Bootstrap3 Китайские документы (v3.3.5) </a> </p> <p> <a href = "#"> Bootstrap2 Китайские документы (v2.3.2) </a> </p> </div> </div> <div> <div> <ul> <li> <li Lipstrap. </li> <li> Сообщество Bootstrap Q & A <i> | </i> </li> <li> sina weibo: @bootstrap Китайская сеть </li> </ul> </div> </div> <div> <div> <div> <h2> Bootstrap, связанные с высоким качественным проектом </h2> <p> Divemape или Divap, или развиваются на основе Bootstrap на основе Bootstrap на основе Bootstrap на основе Bootstrap на основе Bootstrap на основе Bootstrap. <img src = "img/codeguide.png"/> <h3> <a href = "javascript: void (0)"> Спецификация кодирования начальной загрузки <br/> <small> @mdo </small> </a> </h3> <p> bootstrap incoding specification: спецификации для написания гибких, Stable и High-qu-questm. </p> </div> <div> <img src = "img/jqueryapi.png"/> <h3> <a href = "javascript: void (0)"> jquery api <br/> <small> китайский руководство </small> </a> </h3> <p> 2. 2 -й китайская документация по api api api/manual переводил с последней jquery 1 -й джвери. версии. </p> </div> <div> <img src = "img/w3schools.png"/> <h3> <a href = "javascript: void (0)"> w3schools <br/> <small> Оригинальный домашний зеркал </small> </a> </h3> <p> w3school. Невозможно получить доступ к нему, а внутренняя китайская версия перевода очень устарела. Поэтому я сделал зеркальное изображение и надеюсь, что студенты с хорошим английским языком могут пойти и прочитать оригинальное руководство напрямую! </p> </div> <div> <img src = "img/expo.png"/> <h3> <a href = "javascript: void (0)"> Отличный выбор сайта <br/> Пример веб -сайта <mall> Bootstrap </small> </a> </h3> <p> Отличный сайте сайте сайте на основе сайте. </p> </div> </div> </div> <footer> <div> <img src="img/logo.png" /> <h5> <p>The Chinese version of the open source projects listed on this website is translated and compiled by members of the <a href="javascript:void(0)"><small>Bootstrap Chinese website</small></a>, and is published in accordance with <a href = "javascript: void (0)"> <small> cc на 3,0 </small> </a> Протокол. </p> </h5> </div> <div> <div> <h4> о </h4> <h4> <ul> <li> <a href = "javascript: void (0)"> <mall> о нас </small> </a> </li> <li> <a href = "javascript: void (0)"> <small> </smalling> </small> </small> </smalling> </small> </smalling> </smalling> </smalling> </smalling> </smalling> </smalling> </smalling> </lifectristing> </smalling> </lifectoring> </li> <li> </href = " <li> <a href = "javascript: void (0)"> <small> дружественные ссылки </small> </a> </li> <li> <a href = "javascript: void (0)"> <small> recruitment </small> </a> </li> </h4> </div> <hos> <h4> </h4> <h4> <li> </h4> </h4> </h4> </h4> </h4> </h4> </h4> </h4> </h4> </h4> </h4> </h4> </h4> </h4> </h4> </h4> </h4> </H. href = "javascript: void (0)"> <small> sina weibo </small> </a> </li> <li> <a href = "javascript: void (0)"> <small> электронная почта </small> </a> </li> </ul> </h4> </div> <d Div> <h4> </H4> </ul> </h4> </div> <h4> </h4> </ul> </h4> </div> </small> </h4> </ul> </h4> </div> </small> </h4> </ul> </h4> </div> </small> href = "javascript: void (0)"> <small> laravel китайский </small> </a> </li> <li> <a href = "javascript: void (0)"> <small> China </small> </a> </li> </ul> </h4> </div> <div> <h4> </H4> </h4> </h4> </h4> </h4> </h4> </h4> </h4> </h4> </h4> </h4> </h4> </h4> </h4> href = "javascript: void (0)"> <small> ucloud </small> </a> </li> <li> <a href = "javascript: void (0)"> <mall> Вы можете снимать облако </small> </a> </li> </ul> </h4> </div> </div> <H4> </ul> </h4 href = "javascript: void (0)"> <small> Пекинг ICP № 11008151 </small> </a> <small> | Пекинская сеть общественной безопасности. Безопасность сети 11010802014853 </small> </h4> </cooler> </body> </html>Я считаю, что все еще не должны быть удовлетворены. Давайте поделимся несколькими статьями с вами ниже:
«Учебные пособия по обучению Bootstrap, которые стоит поделиться и коллекционировать» «Учебные пособия по обучению Bootstrap»
Выше приведено в этой статье, я надеюсь, что это будет полезно для каждого обучения.