Некорректная работа bootstrap
366
04 января 2017, 01:17
Подскажите, почему некоторые классы bootstrap отображают элементы не так как надо?
К примеру, вот простая страница: http://paste.ubuntu.com/23725639/
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery-3.1.1.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<meta charset="utf-8">
<title>yep</title>
</head>
<body>
<p>
<button class="btn btn-large btn-primary" type="button">Большая кнопка</button>
<button class="btn btn-large" type="button">Большая кнопка</button>
</p>
<p>
<button class="btn btn-primary" type="button">Кнопка по умолчанию</button>
<button class="btn" type="button">Кнопка по умолчанию</button>
</p>
<p>
<button class="btn btn-small btn-primary" type="button">Маленькая кнопка</button>
<button class="btn btn-small" type="button">Маленькая кнопка</button>
</p>
<p>
<button class="btn btn-mini btn-primary" type="button">Мини-кнопка</button>
<button class="btn btn-mini" type="button">Мини-кнопка</button>
</p>
</body>
</html>
Вот результат:
А ожидается такая картина:
Хотя с путями все в порядке, по-моему.
Answer 1
1) Bootstrap 2.3.2
Вы взяли код от второго Бутстрапа, а подключили третий. Со стилями от версии 2.3.2 выглядит как надо:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
<p>
<button class="btn btn-large btn-primary" type="button">Большая кнопка</button>
<button class="btn btn-large" type="button">Большая кнопка</button>
</p>
<p>
<button class="btn btn-primary" type="button">Кнопка по умолчанию</button>
<button class="btn" type="button">Кнопка по умолчанию</button>
</p>
<p>
<button class="btn btn-small btn-primary" type="button">Маленькая кнопка</button>
<button class="btn btn-small" type="button">Маленькая кнопка</button>
</p>
<p>
<button class="btn btn-mini btn-primary" type="button">Мини-кнопка</button>
<button class="btn btn-mini" type="button">Мини-кнопка</button>
</p>2) Bootstrap 3.3.7
Чтобы заработало с третьим Бутстрапом, поменяйте три вещи:
- Как советует soledar10, задайте размер кнопок классами
.btn-lg,.btn-smи.btn-xs. - Как советует Byulent, подключите тему по умолчанию, чтобы на кнопках появились объём и тени.
- И добавьте серым кнопкам класс
.btn-default.
Получится:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css">
<p>
<button class="btn btn-primary btn-lg" type="button">Большая кнопка</button>
<button class="btn btn-default btn-lg" type="button">Большая кнопка</button>
</p>
<p>
<button class="btn btn-primary" type="button">Кнопка по умолчанию</button>
<button class="btn btn-default" type="button">Кнопка по умолчанию</button>
</p>
<p>
<button class="btn btn-primary btn-sm" type="button">Маленькая кнопка</button>
<button class="btn btn-default btn-sm" type="button">Маленькая кнопка</button>
</p>
<p>
<button class="btn btn-primary btn-xs" type="button">Мини-кнопка</button>
<button class="btn btn-default btn-xs" type="button">Мини-кнопка</button>
</p>Answer 2
Попробуйте подключить bootstrap-theme.css (bootstrap-theme.min.css).
Да, и лучше использовать либо только полные файлы, либо только минифицированные.
Answer 3
Необходимо использовать классы с приставкой -lg, -sm, -xs
Bootstrap buttons-sizes
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<p>
<button class="btn btn-lg btn-primary" type="button">Большая кнопка</button>
<button class="btn btn-lg" type="button">Большая кнопка</button>
</p>
<p>
<button class="btn btn-primary" type="button">Кнопка по умолчанию</button>
<button class="btn" type="button">Кнопка по умолчанию</button>
</p>
<p>
<button class="btn btn-sm btn-primary" type="button">Маленькая кнопка</button>
<button class="btn btn-sm" type="button">Маленькая кнопка</button>
</p>
<p>
<button class="btn btn-xs btn-primary" type="button">Мини-кнопка</button>
<button class="btn btn-xs" type="button">Мини-кнопка</button>
</p>-
22:40
-
08:34
-
15:01
-
17:01
-
11:24
-
10:16
-
17:54
-
22:01
-
13:03
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47663 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30533 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23691 visits
- Как через css изменить цвет png изображения? 10363 visits
- Blob video url download 9972 visits
- Php curl запрос через прокси с авторизацией 9226 visits
- Работа с captcha vk api 8109 visits
READ ALSO
© "hostciti.net" 27.12.2024 | 05:53