учебник по использованию начальной загрузки_учебник по загрузке
учебник по использованию начальной загрузки_учебник по загрузке

Что делает BootStrap? Какая польза?

Когда мы находимся на первой странице разработки, мы,Если каждую кнопку, стиль и обработку исходного кода совместимости браузера нужно писать с нуля,Это такая пустая трата времени。Итак, нам нуженрамка,Помогите нам реализовать страницуизосновная частьи решить некоторыеМногочисленные детали,Просто будь в этомизосуществляется на основеПерсонализированная настройкаВот и все。

Bootstrap Это так просто、Интуитивный、СильныйизРамка фронтенд-разработки,Просто учитесь и следуйте этому из стандартов,Даже если вы не изучали веб-дизайн у разработчика,Вы также можете создавать очень профессиональные и красивые страницы.,Значительно повысить эффективность работы。Красиво, как этот нижеиз Сайт основан на Bootstrap развиваться.

bootStrapКак использовать？

первый шаг、https://v3.bootcss.com/getting-started/#download Официальный сайт

Загрузите и разархивируйте

Этот бутстрап должен полагаться на существование jquery.min.js, так и должно быть.

Так что скачайте этот js вместе URL-адрес：http://www.jq22.com/jquery-info122

Шаг 2. Добавьте в проект внешние файлы.

Скопируйте CSS, шрифт, js и загруженный jquery.min.js из bootStrap в проект.

я использую миелиспе

Третий шаг, настройки страницы jsp следующие:

Обратите внимание на эти файлыизпоследовательность,если ошибаюсь,Это приведет к неправильной работе страницы.

  1. Сначала представь bootstrap.min.css （Bootstrapизстильфайл таблицы）
  2. а затем представить Напиши это самиз css Файл (style.css)
  3. Затем представьте jQuery (библиотеку JavaScript)
  4. Наконец, представьте программный файл bootstrap.min.js.
Язык кода:javascript
копировать
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!--этотlang="zh-CN"Это трансформациядляhtml5из Версия  -->
<html lang="zh-CN">
<head>
<base href="<%=basePath%>">
<title>изучатьbootstrapСлучай</title>
<!-- Это адаптируется к различным разрешениям и экранам. -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet"  href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/style.css"/>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

</head>

Третий шаг — использовать таблицу стилей начальной загрузки.

Сила начальной загрузки в том, что вам нужно всего лишь знать правила других людей, чтобы использовать функции, разработанные другими!

Небольшой пример:

Откройте таблицу стилей bootstrap.css, вы увидите следующую.btn-primary. Очевидно, что это стиль кнопки.

Напишите на странице jsp

Язык кода:javascript
копировать
<body>
<button class="btn-primary">кнопка</button>
</body>

Эффект рендеринга страницы следующий:

обновить страницу,ты увидишь синийизкнопка。Нет необходимости писать строчку CSS-кода самостоятельно.,Просто укажите элемент на странице class , вы можете напрямую отобразить заданный стиль—— Это использование Bootstrap Магия фронтенд-фреймворков.

Упражнения следующие:

Сделайте такую ​​страницу:

Прежде всего: согласно обычному макету без эффекта стиля CSS, он может отображать только следующий эффект:

Нет эффекта карусели и макет неаккуратный.

Хотя мы можем сами написать стили CSS, чтобы сделать страницу красивой, это отнимает слишком много времени.

Если вы хотите узнать о начальной загрузке!

Используйте компонент панели навигации

Панель навигации расположена в верхней части страницы и содержит ссылки на все страницы всего сайта.

Язык кода:javascript
копировать
<!-- навигация -->
	<nav class="navbar navbar-default">
	<div class="container-fluid">	
		<ul class="nav navbar-nav">
			<li class="active"><a href="">Менеджер общедоступных аккаунтов WeChat</a></li>
			<li><a href="">первая страница</a></li>
			<li><a href="">о</a></li>
			<li><a href="">Авторизоваться</a></li>
		</ul>
		
		</div>
	</nav>
  1. добавить nav этикетка и установка class для navbar navbar-default ,role для navigation 。
  2. Затем внутри добавьте имя класса для container-fluid из div ,используется для размещениянавигация Статьяиздругие элементы（Связь、кнопки и др.).
  3. Добавьте несколько навигационных ссылок <li> , а затем поместите первый <li> из class обозначениедля active , указывающий статус активации.

Обновите страницу и появится красивая панель навигации! Мы просто написали немного HTML-кода и не написали ни одного CSS-кода для экономии ресурсов.

В это время jsp используется для связи с товарищами из,Я не могу добиться такого эффекта.,потому чтодля<nav></nav> Это новый тег html5, а jsp, который мы используем, обычно html. Версия 4.01.

Что касается того, как конвертировать,смотретьэтотблогиметьподробныйизпредставлять：https://blog.csdn.net/qq_37591637/article/details/84027218

На этом этапе у всех возникнут вопросы. Что означает class="navbar navbar-default"?

Это означает наличие двух атрибутов одновременно: один — стиль навигационной панели, а другой — стиль навигационной панели по умолчанию;

Я не знаком со стилем CSS BootStrap и даже не знаю его названия. Что мне делать?

Это урок для новичков, просто больше практикуйтесь, и все станет лучше;

And BootStrapУчебное пособиеhttps://v3.bootcss.com/components/#nav

Реализация карусельной диаграммы

Bootstrap Поставляется с компонентом карусели—— Carousel

Язык кода:javascript
копировать
<!--карусель  -->
	<!-- Наиболее важными из них являются индикаторы из трех частей: внутренние (содержание)、carousel-control（навигация） -->
	<div class="carousel slide" id="lf" data-ride="carousel">
	<ol class="carousel-indicators">
	<!-- •data-target свойство:
	ценить lf Определение ID имя или другой идентификатор стиля,
	И определите его в счетчике карусели для каждого li начальство.
	data-slide-to свойство:
	Используется для передачи определенного кадра из индекса, например data-slide-to="2",
	Вы можете перейти непосредственно к этому указанному кадру (индекс начинается с 0),
	Также в карусели определяется счетчик каждого li начальство. -->
	<li data-target="#lf" data-slide-to="0" class="active"></li>
	<li data-target="#lf" data-slide-to="1"></li>
	<li data-target="#lf" data-slide-to="2"></li>
	<li data-target="#lf" data-slide-to="3"></li>
	</ol>
	<div class="carousel-inner" role="listbox">
	<div class="item active">
	<img src="imgs/one.jpg" />
	<div class="carousel-caption">
	<p>【зимние каникулы/Предварительная продажа весеннего фестиваля】Хоккайдо5день4Ночной бесплатный проезд（Вылет рано и обратный рейс во второй половине дня.+4Поздний ДунхэнINN Размещение в отеле Сусукино Минами в Саппоро）</p>
	</div>
	</div>
	<div class="item">
	 <img src="imgs/two.jpg" />
	 <div class="carousel-caption">
	<p>【Прогулка по Гуанси】Осака5деньбесплатный проезд（Предпочтительное время Juneyao Airlines★Иди днем ​​и возвращайся вечером★Норма бесплатного зарегистрированного багажа46KG+отдаватьWIFI+Посетите древний город+Поездка в Юниверсал Студиос+Шоппинг в Синсайбаши бесконечен）</p>
	</div>
	 </div>
	<div class="item">
	<img src="imgs/three.jpg" />
	<div class="carousel-caption">
	<p>【Весенний фестивальзимние каникулы Предпродажа】Кюсю6деньбесплатный проезд（авиабилет туда и обратно+арбузная открытка Норма обратного багажа бесплатно увеличивается до 25 кг) </p>
	</div>
	 </div>
	<div class="item">
	<img src="imgs/four.jpg" />
	<div class="carousel-caption">
	<p>【зимние каникулы/Предварительная продажа весеннего фестиваля】Осака5день4Ночной бесплатный проезд●гостиница4Тематический апарт-отель для родителей и детей Ханебисучо（Рядом Синсайбаши+40㎡космос+Продуманные удобства+2018Недавно открытый в этом году） </p>
	</div>
	 </div>


	 <a class="left carousel-control" href="#lf"  role="button" data-slide="prev">
       <span class="glyphicon glyphicon-chevron-left"></span>
       <span class="sr-only">Previous</span>
   </a>
   <a class="right carousel-control" href="#lf"  role="button" data-slide="next">
       <span class="glyphicon glyphicon-chevron-right"></span>
       <span class="sr-only">Next</span>
   </a>
  	</div>

Визуализации следующие:

Пример создания изображения с закругленными углами

Очки знаний:

макет сетки

Подумайте об этом: если вы пишете CSS самостоятельно, как вы собираетесь добиться эффекта равного расположения? Например, следующее обрабатывается установкой фиксированной ширины/процента:

Язык кода:javascript
копировать
.item { float:left, width: 300px; /*или width: 33%*/ }
  • 1

Что делать, если в строке требуется отобразить 4, 6 или более чисел? Этот расчет слишком негибкий (100/6 равно 16,6666666...).

На самом деле нас не волнует, сколько пикселей/процентов составляет ширина каждой копии.,Нас волнует только то, сможем ли мы автоматически разделить его на равные части., Bootstrap измакет системы сеткито естьдляосуществленныйАвтоматически рассчитывать ширину каждой частиИ родилсяиз。

Сетку можно понять для ворот безопасности,этоизобщая длинаМожно растянуть,можно сократить,ноОбщее количество интервалов не изменяется из,и все интервалыизШирина такая же。

Похож ли этот процесс масштабирования на то, как мы расширяем и сужаем браузер? Bootstrap изсеткаопределено для каждой страницыизширина被平均划分для 12 равные части,Независимо от того, вся ширина страницы Будь то 1000 пикселей или 500 пикселей, ширина каждой копии (1/12) будет рассчитана автоматически.

Предоставив макет сетки внутренние из обозначения элемента class для col-md-количество копий ,приди и расскажиэтоизширинаСколько из этих 12 вы занимаете?。

Например, в следующем исхододе,иметь3 div из class для col-md-4（Пока игнорируйте тот, что посередине. -md- Что такое,Количество фокусов хорошее),Посчитай4 + 4 + 4 Точно ли оно равно 12？

Язык кода:javascript
копировать
<!-- Случай -->
	<div class="container">
	  <div class="row">
       <div class="col-md-4">
          <img alt="" src="imgs/a.jpg" class="img-circle img-size">
           <p>день Хонзоденьтур！</p>
       </div>
	
		 <div class="col-md-4">
          <img alt="" src="imgs/b.jpg" class="img-circle img-size">
           <p>Таиланд триденьтур！</p>
       </div>
	
		 <div class="col-md-4">
          <img alt="" src="imgs/c.jpg" class="img-circle img-size">
           <p>Мьянма Семьденьтур！</p>
       </div>
	</div>
	</div>

Визуализации следующие:

Мой пакет ресурсов содержит полный исходный код;

https://download.csdn.net/download/qq_37591637/10782314

Если вы считаете, что это может вам помочь, вы можете вознаградить меня за мою умственную работу. Ваша награда — это мотивация моего творчества.

Заявление об авторских правах: Содержание этой статьи добровольно предоставлено пользователями Интернета.,Мнения, выраженные в данной статье, принадлежат исключительно автору. Этот сайт предоставляет только услуги по хранению информации.,нет собственности,Никакая соответствующая юридическая ответственность не предполагается. Если на этом сайте есть какое-либо подозрение на нарушение авторских прав/незаконный контент,, Пожалуйста, отправьте электронное письмо на Сообщите, после проверки этот сайт будет немедленно удален.

Издатель: Full stack программист и руководитель стека, укажите источник для перепечатки: https://javaforall.cn/184227.html Исходная ссылка: https://javaforall.cn

boy illustration
Неразрушающее увеличение изображений одним щелчком мыши, чтобы сделать их более четкими артефактами искусственного интеллекта, включая руководства по установке и использованию.
boy illustration
Копикодер: этот инструмент отлично работает с Cursor, Bolt и V0! Предоставьте более качественные подсказки для разработки интерфейса (создание навигационного веб-сайта с использованием искусственного интеллекта).
boy illustration
Новый бесплатный RooCline превосходит Cline v3.1? ! Быстрее, умнее и лучше вилка Cline! (Независимое программирование AI, порог 0)
boy illustration
Разработав более 10 проектов с помощью Cursor, я собрал 10 примеров и 60 подсказок.
boy illustration
Я потратил 72 часа на изучение курсорных агентов, и вот неоспоримые факты, которыми я должен поделиться!
boy illustration
Идеальная интеграция Cursor и DeepSeek API
boy illustration
DeepSeek V3 снижает затраты на обучение больших моделей
boy illustration
Артефакт, увеличивающий количество очков: на основе улучшения характеристик препятствия малым целям Yolov8 (SEAM, MultiSEAM).
boy illustration
DeepSeek V3 раскручивался уже три дня. Сегодня я попробовал самопровозглашенную модель «ChatGPT».
boy illustration
Open Devin — инженер-программист искусственного интеллекта с открытым исходным кодом, который меньше программирует и больше создает.
boy illustration
Эксклюзивное оригинальное улучшение YOLOv8: собственная разработка SPPF | SPPF сочетается с воспринимаемой большой сверткой ядра UniRepLK, а свертка с большим ядром + без расширения улучшает восприимчивое поле
boy illustration
Популярное и подробное объяснение DeepSeek-V3: от его появления до преимуществ и сравнения с GPT-4o.
boy illustration
9 основных словесных инструкций по доработке академических работ с помощью ChatGPT, эффективных и практичных, которые стоит собрать
boy illustration
Вызовите deepseek в vscode для реализации программирования с помощью искусственного интеллекта.
boy illustration
Познакомьтесь с принципами сверточных нейронных сетей (CNN) в одной статье (суперподробно)
boy illustration
50,3 тыс. звезд! Immich: автономное решение для резервного копирования фотографий и видео, которое экономит деньги и избавляет от беспокойства.
boy illustration
Cloud Native｜Практика: установка Dashbaord для K8s, графика неплохая
boy illustration
Краткий обзор статьи — использование синтетических данных при обучении больших моделей и оптимизации производительности
boy illustration
MiniPerplx: новая поисковая система искусственного интеллекта с открытым исходным кодом, спонсируемая xAI и Vercel.
boy illustration
Конструкция сервиса Synology Drive сочетает проникновение в интрасеть и синхронизацию папок заметок Obsidian в облаке.
boy illustration
Центр конфигурации————Накос
boy illustration
Начинаем с нуля при разработке в облаке Copilot: начать разработку с минимальным использованием кода стало проще
boy illustration
[Серия Docker] Docker создает мультиплатформенные образы: практика архитектуры Arm64
boy illustration
Обновление новых возможностей coze | Я использовал coze для создания апплета помощника по исправлению домашних заданий по математике
boy illustration
Советы по развертыванию Nginx: практическое создание статических веб-сайтов на облачных серверах
boy illustration
Feiniu fnos использует Docker для развертывания личного блокнота Notepad
boy illustration
Сверточная нейронная сеть VGG реализует классификацию изображений Cifar10 — практический опыт Pytorch
boy illustration
Начало работы с EdgeonePages — новым недорогим решением для хостинга веб-сайтов
boy illustration
[Зона легкого облачного игрового сервера] Управление игровыми архивами
boy illustration
Развертывание SpringCloud-проекта на базе Docker и Docker-Compose
©