Как добавить Bootstrap.css к коду сайта

@Mashka156 · Регистрация: 22.02.2022

Студворк — интернет-сервис помощи студентам

подскажите пожалуйста у меня стоит так добавленние ссылкой Bootstrap.min.css и сам добавлен Bootstrap.css (как на первой картинке). А по заданию его надо добавить так (как в презентации как на второй картинке). Я удаляю первую ссылку с Bootstrap.min.css и всё полностью слитает из-за чего?
И ещё добавлено ссылками третья картика (хотя надо файлами) как добавь это всё просто файлами ?

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.navbar { /* Навигационная панель */
font-family:'Segoe Print', Times, serif; 
font-size: 20px;
    background-color: #708090 !important; /* устанавливает цвет фона элемента (cерый) */ 
}
 
 
.navbar-brand { /*для названия компании, продукта или имени проекта (персональный сайт) */ 
    color: #000; /* Томатный */; 
    margin-right: 1px; /* устанавливает внешний отступ справа от элемента */
    border: 0.5rem solid; /* Параметры границы */
    background: #000; /* Цвет фона */
    padding: 15px; /* Поля вокруг текста */
font-size: 50px ;
 
}
 
.navbar-brand:hover { /* псевдокласс срабатывает, когда пользователь наводит на элемент мышью, но не обязательно активирует его */
opacity: 0.33; /* устанавливает непрозрачность элемента (персональный сайт) */ 
    color: #708090; /* цвет засвета красный */
}
 
.nav-link { /* применяется к ссылкам, которые еще не посещались пользователем, и задает для них стилевое оформление*/ 
 
    border: 0.1rem solid; /* Параметры границы */
    background: #000; /* Цвет фона */
    border-radius: 20px; /*закругление границ */
    box-shadow: 10px 5px 5px white; /* добавляет тень к элементу */
color: #000; /* оранджевый */
}

@DrType · 12.10.2022, 21:42

Mashka156, приводите пожалуйста код в текстовом виде.

@Msrsis · 13.10.2022, 10:08

DrType, по первой картинке Bootstrap.min.css

HTML5
1
2
3
4
5
6
7
8
9
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Персональный сайт</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>

Вот по второй картинке

HTML5
1
2
3
4
 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>

Добавлено через 1 минуту
DrType, подскажите пожалуйста у меня стоит так добавленние ссылкой Bootstrap.min.css и сам добавлен Bootstrap.css (как на первой картинке). Я удаляю первую ссылку с Bootstrap.min.css и всё полностью слитает из-за чего?
И ещё добавлено ссылками третья картика (хотя надо файлами) как добавь это всё просто файлами ?

Добавлено через 11 минут
DrType, NTHing,как подключить файлами на своём компьютере Bootstrap.css, подключить Bootstrap.js и jQuery.?
У меня они просто подключены с помощью ссылок.
И когда удаляю строку

HTML5
1
 <link rel="stylesheet" href="css/bootstrap.css">

, то весь сайт крашится

@PavelShef · 13.10.2022, 12:39

Хмм, Вы определитесь что хотите использовать min.css или просто css - это раз, второе это библиотека, которые берет данные из сервиса bootstrap-а, т.е в любом случае работать bootstrap.css - не будет, Bootstrap.js - зачем он вам ? Если у вас уже имеется css, у вас такая каша, не поленитесь и прочитайте поэтапные шаги подключения на самом бутстрапе, и что за что отвечает, там все очень хорошо описано, что зачем и почему, удачи вам!

@Msrsis · 13.10.2022, 14:37

PavelShef, просто преподаватель сказал так подключить

@PavelShef · 13.10.2022, 14:50

Сейчас домой доеду, и чрз 20 мин скину вам вариант подключения сего добра, ожидайте

@Msrsis · 13.10.2022, 15:53

PavelShef, спасибо

@PavelShef · 13.10.2022, 16:05

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!doctype html>
<html lang="ru">
  <head>
    <!-- Обязательные метатеги -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
 
    <title>Привет мир!</title>
  </head>
  <body>
    <h1>Привет мир!</h1>
 
    <!-- Дополнительный JavaScript; выберите один из двух! -->
 
    <!-- Вариант 1: Bootstrap в связке с Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
 
    <!-- Вариант 2: Bootstrap JS отдельно от Popper
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
 
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

HTML5
1
 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

- jQuery

Добавлено через 7 минут
Msrsis, если нужно локальная то так, вы сможете скачать с домашней страницы проекта, затем проинициализировать:

HTML5
1
2
3
<head>                                                               
<script type="text/javascript" src="jquery.js"></script>
</head>

@Msrsis · 13.10.2022, 16:05

PavelShef, а вообще есть такое, чтобы css лежал сразу в папке на компьютере, а не через ссылку нв сервер?

@PavelShef · 13.10.2022, 16:08

Msrsis, так же качаете исходники, архив, выбираете нужный вам пакет и подключаете

HTML5
1
<link rel="stylesheet" href="вашпуть/bootstrap/js_или_css/нужныйпакет">

Или просто перекиньте нужный css пакет, к себе в купе с js и подключаете

@NTHing · 13.10.2022, 21:59

Сообщение от Msrsis

просто преподаватель сказал так подключить

Так, сделайте пока хотя бы так, как преподаватель сказал.
1. Переходите по ссылке
2. Скачиваете архив с файлами, распаковываете
3. Подключаете нужные файлы, только jQuery там нету, отдельно подключите
Вам же всё ясно преподаватель дал. Про jQuery у него как раз и спросите, почему нету.
А мы ищем тут чёрную кошку в чёрной комнате. ))
Хотя бы это для начала сделайте, извиняюсь за повторение.

Новые блоги и статьи Все статьи Все блоги /
Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .
Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем

@DrType 6553 / 3624 / 1075 Регистрация: 07.09.2019 Сообщений: 5,877 Записей в блоге: 1
	12.10.2022, 21:42
	Mashka156, приводите пожалуйста код в текстовом виде. 0

@PavelShef 77 / 31 / 9 Регистрация: 02.03.2021 Сообщений: 198
	13.10.2022, 12:39
	Хмм, Вы определитесь что хотите использовать min.css или просто css - это раз, второе это библиотека, которые берет данные из сервиса bootstrap-а, т.е в любом случае работать bootstrap.css - не будет, Bootstrap.js - зачем он вам ? Если у вас уже имеется css, у вас такая каша, не поленитесь и прочитайте поэтапные шаги подключения на самом бутстрапе, и что за что отвечает, там все очень хорошо описано, что зачем и почему, удачи вам! 0

@Msrsis 0 / 0 / 0 Регистрация: 09.02.2021 Сообщений: 203
	13.10.2022, 14:37
	PavelShef, просто преподаватель сказал так подключить Миниатюры 0

@PavelShef 77 / 31 / 9 Регистрация: 02.03.2021 Сообщений: 198
	13.10.2022, 14:50
	Сейчас домой доеду, и чрз 20 мин скину вам вариант подключения сего добра, ожидайте 0

@Msrsis 0 / 0 / 0 Регистрация: 09.02.2021 Сообщений: 203
	13.10.2022, 15:53
	PavelShef, спасибо 0

@Msrsis 0 / 0 / 0 Регистрация: 09.02.2021 Сообщений: 203
	13.10.2022, 16:05
	PavelShef, а вообще есть такое, чтобы css лежал сразу в папке на компьютере, а не через ссылку нв сервер? 0

Как добавить Bootstrap.css к коду сайта

Решение