Как отцентровать кнопку css
Перейти к содержимому

Как отцентровать кнопку css

  • автор:

Как отцентровать кнопку css

Бутстрап — это бесплатный фреймворк с набором готовых CSS стилей, HTML и JS примеров кода, для быстрой и красивой верстки адаптивных дизайнов под мобильные устройства и десктоп устройства.

Все это собрано в одну компактную библиотеку и используются разработчиками и компаниями, занимающимися разработкой дизайнов красивых сайтов и мобильных приложений.

Как подключить (Quick start)

Для того чтобы использовать bootstrap на сайте, он должен быть правильно внедрен в html-код сайта. Для этого файл CSS bootstrap 5 должен быть помещен в head> /head> части вашего проекта.

Javascript файл можно подключить как между тегами head так и внутри body . Мы рассмотрим примеры подключения дальше.

Где взять файлы для подключения

Можно использовать любой из следующих трех вариантов.:

  1. Загрузите исходные файлы со страницы загрузок.
  2. Используйте менеджер пакетов для получения полного пакета.
  3. Используйте бесплатную CDN от jsDelivr. На их серверах содержаться уже готовые файлы, пригодные для использования на сайте.

CDN-ссылки

Используйте данный ссылки для получения скомпилированных и минимизированных файлов.

Версия: 5.2.1

Подключение CSS файла стилей

Самый быстрый способ подключения — это использовать CDN. Он позволяет стартовать быстро, без использования шагов сборки файлов.

Прежде чем начать, создайте файл index.html в корне вашего проекта с примерно таким содержимым.

Копировать

     Bootstrap 5 демонстрационная страница  

Привет мир!

Это будет базовый макет html страницы демо-сайта. Запустите этот файл в браузере.

Обратим ваше внимание, что в шаблоне присутствует тег meta name=»viewport»> необходимый для правильного реагирования на мобильных устройствах.

Чтобы подключить css стили к вашему сайту, необходимо подключить файл таблицы стилей через тег link> в head> части вашей html страницы. В примере мы будем использовать подключение файлов с CDN.

Копировать

     Bootstrap 5 демонстрационная страница    

Привет мир!

Для того, чтобы стили bootstrap 5 были основными, необходимо подключать файл css перед всеми другими стилями. Это исключит возможность замены совпадающих имен из других файлов и позволить правильно отобразить стили фреймворка.

Запустите еще раз файл index.html в своем браузере. Вы сможете заметить, что стиль текста поменялся. Это применились css правила подключенного вами файла bootstrap.min.css .

Подключение JS скриптов

Так как многие компоненты bootstrap используют для своей работы JavaScript, то для них требуются собственные плагины JavaScript и Popper. Посмотрите варианты подключения скриптов описанных ниже и подключите выбранный вариант в конце вашей страницы, прямо перед закрывающимся тегом /body> .

Пакетное подключение (Bundle)

Необходимые плагины и зависимости Bootstrap JavaScript могут быть подключены с помощью одного из двух пакетов: bootstrap.bundle.js и bootstrap.bundle.min.js , которые содержат всплывающие подсказки и Поппер для отображения модальных окон. О том, что входит в Bootstrap, смотрите в разделе «Содержание».

Измените содержимое файла index.html на:

Копировать

     Bootstrap 5 демонстрационная страница   

Привет мир!

Закрыть

Мы добавили в пример подключение bootstrap.bundle.min.js файла из CDN и добавили код компонента «Модальное окно» для демонстрации работы js bootstrap.

Если вы не планируете использовать Dropdown, Modal или всплывающие подсказки, вы можете сэкономить несколько килобайт, не включая Popper.

Для этого подключите файл JS: bootstrap.min.js вместо bootstrap.bundle.min.js .

Ручное подключение скриптов

Если вы решите подключать скрипты отдельно, не используя файл bundle .

Сначала подключите скрипт Popper (если вы используете всплывающие подсказки или всплывающие окна), а затем плагины JavaScript bootstrap.min.js .

Копировать

     Bootstrap 5 демонстрационная страница   

Привет мир!

Тут какой то код .

Если вы не хотите использовать CDN, то вы можете скачать файлы к себе в проект и подключить их напрямую со своего сайта. Создайте папку /bootstrap в корне проекта и поместите туда файлы bootstrap.min.css и bootstrap.bundle.min.js

Теперь подключение будет выглядеть так:

Копировать

     Bootstrap 5 демонстрационная страница   

Привет мир!

Тут какой то код .
Компоненты бутстрап

Некоторые компоненты, требуют обязательного подключения собственного javascript и Poper. Ознакомьтесь со списком ниже, чтобы быть уверенным в правильности подключения.

Важные глобальные переменные

Bootstrap 5 использует некоторые важные глобальные стили и настройки, которые необходимо учитывать при его использовании.

Большинство из них посвящено кроссбраузерной нормализации стилей. Давайте посмотрим.

Тип документа HTML5 doctype

Для правильного отображения стилей и нормальной работы javaScript, bootstrap требует указания типа документа HTML5. Установите тип документа !doctype html> .

Копировать

Метатег адаптивности

Так как стратегия бутстрап изначально была как: Сначала делаем код под мобильные устройства, а уже потом масштабируем необходимое с помощью медиа-запросов CSS, то необходимо добавить метатег адаптивности окна.

Для этого в head> часть вашего html документа необходимо вставить метатег: meta name=»viewport» content=»width=device-width, initial-scale=1″>

Копировать

Свойство Box-sizing

Для упрощения настройки размеров в CSS используется глобальное box-sizing значение с content-box на border-box .

Это гарантирует, что padding не влияет на ширину конечного вычисляемого элемента, но может вызвать проблемы с некоторыми программами сторонних производителей, такими как Google Maps и система пользовательского поиска Google.

В случаях, когда вам необходимо переопределить это свойство, используйте примерно такой код:

Копировать

.selector

В приведенном выше примере, вложенные элементы, включая сгенерированный контент с помощью ::before и ::after , будут наследовать указанные box-sizing для .selector .

Настройка стилей по умолчанию (Reboot)

Для одинакового отображения элементов html в разных браузерах, бутстрап 5 использует CSS Reboot стили, обеспечивая полный сброс стилей элементов и приведения их к единому стилю в разных браузерах.

Как сделать кнопку «показать еще»?

В исходном коде список всех фильмов. При нажатии на кнопку «показать еще» появляются по 4 фильма. Это важно, потому что надо не подгружать страницы, а именно разбить длинный список контента.

Ответил: hent4ib

у webrambo был скрипт
http://webrambo.ru/101-ajax-podgruzka-novostey-dle.html

2 комментария

Похожие вопросы

Как организовать список серий на сайте в выпадающем списке

13.10.2011 Romario Общие вопросы по вёрстке, Модули, Хаки

Реализация всплывающих подсказок с выводом контента в dle

01.10.2012 Prowockator Общие вопросы по вёрстке

Вкладка при нажатии на кнопку

21.12.2012 jarrro Общие вопросы по вёрстке, Шаблоны (TPL), Стили (CSS)

При нажатии на кнопку «добавить комментарий» страница поднимается вверх

29.01.2014 serg91100 Общие вопросы по вёрстке, Хаки, Ламерские вопросы

Как сделать кнопку добавить отзыв?

10.09.2014 skinny Общие вопросы, Общие вопросы по вёрстке, Стили (CSS)

Как добавить два изображения по бокам от «контента» сайта?

01.12.2015 fops88 Общие вопросы по вёрстке

Как сверстать шаблон вывода контента, 2 блока по бокам и один между ними?

15.10.2016 baseroad Общие вопросы по вёрстке, Шаблоны (TPL)

Как сделать, чтобы при выборе «область А» из доп. полей, подгружался другой список при доб. новости?

04.03.2017 lissp Общие вопросы, Общие вопросы по вёрстке, Шаблоны (TPL)

Как сделать поочередное появление полей при добавлении новости?

14.03.2017 Stasiq Общие вопросы по вёрстке

Как выполнять одновременно 2 действия при нажатии на кнопку?

17.03.2018 Railway_Academy Общие вопросы по вёрстке
Последние события
rewenas | Как сделать вывод статистики общего коли . 19

Фото rewenas

rewenas
Как сделать вывод статистики общего количества пользователей по каждому значению доп. поля?
Сегодня, 14:20

Хорошо, получили массив $resultArray[] с элементами типа:
(RU, 127), (СN, 69), (US, 215), .
Как мне их выводить в HTML-код страницы stats.tpl

Как их выводить в stats.tpl я тебе написал выше. Но тебе это не подходит. Или я не пойму, тебе на каждую страну нужен отдельный тег? Я так понял ты хочешь потом с помощью скрипта сделать диаграмму. Но насколько я знаю в скрипт ты не сможешь вставить эти теги, там нужны как раз переменные. К сожалению в js я пока не силен

Bootstrap не использую.

Это ваше право. Я просто написал это для примера, мне так проще, так как я его использую. Удобная штука.

lutskboy | Как в Fullstory-Metatags by Sander не иг . 1

Фото lutskboy

lutskboy
Как в Fullstory-Metatags by Sander не игнорировать description?
Сегодня, 13:29
description не прописывай в fullstory.tpl
Sinoid | Как сделать вывод статистики общего коли . 19

Фото Sinoid

Sinoid
Как сделать вывод статистики общего количества пользователей по каждому значению доп. поля?
Вчера, 20:33

    в каждый
    пару ключ+значение массива $resultArray[] ? Если примерно как ниже, то не знаю, будут ли такие пары без ошибок влезать в html:

      +

      >
      ?>

        А если через массив тегов [ = $resultArray[zz] ], то вроде бы проще, но как в html перебирать весь массив тегов, если из html нет доступа к размеру такого массива (который меняется динамически), а в js-скрипте DLE-теги не работают?
        3. Напиши пжл весь country.php ещё раз со всеми изменениями и с кэшированием.

      rewenas | Как сделать вывод статистики общего коли . 19

      Фото rewenas

      rewenas
      Как сделать вывод статистики общего количества пользователей по каждому значению доп. поля?
      Вчера, 18:01

      Сразу хочу сказать я в этом деле самоучка. Так что могу что то не так понимать и реализовывать
      rewenas | Как сделать вывод статистики общего коли . 19

      Фото rewenas

      rewenas
      Как сделать вывод статистики общего количества пользователей по каждому значению доп. поля?
      Вчера, 17:59

      1 Если тебе нужно вывести из $iso_countries массива только ключи то:

       $keys = array_keys($iso_countries); 

      2 В смысле переопределять? Его никто даже не трогал. Или я тебя просто не понимаю. Я всего лишь думал что инпутом у тебя пользователи выбирают страну :в следствие чего у тебя в столбец land таблицы dle_users заноситься двухбуквенный код стран.

      Ещё сделал выбор страны проживания, который заносится скриптом в стандартный DLE-тег в виде кода 249 стран списка ISO 3166-1 alpha-2

      Поэтому этим кодом:

       if (isset($iso_countries[$country])) { $country_name = $iso_countries[$country]; $tpl->set('{land>', $country_name); > else { $tpl->set('{land>', 'Код страны не найден'); > 

      Заменил этот двухбуквенный код на название страны
      3 Тогда тебе нужно:

       $result = $db->query("SELECT land, COUNT(*) AS user_count FROM " . USERPREFIX . "_users WHERE land != '' GROUP BY land"); $resultArray = array(); while ($row = $result->fetch_assoc()) { $country = $row['land']; $user_count = $row['user_count']; $country_counts[$country] = $user_count; > foreach ($country_counts as $country => $user_count) { $resultArray[] = array( 'Страна' => $country, 'Количество пользователей' => $user_count ); > 

      Результат запроса сохраняется в переменной $result. Далее создается пустой массив для хранения данных $resultArray = array(); И далее внутри цикла foreach в этот массив записывается каждый элемент массива $country_counts в виде массива с ключами страна и количество пользователей. Наверное это то что тебе как раз надо

      Sinoid | Как сделать вывод статистики общего коли . 19

      Фото Sinoid

      Sinoid
      Как сделать вывод статистики общего количества пользователей по каждому значению доп. поля?
      Вчера, 16:53

      rewenas, Спасибо. Но:
      1. $iso_countries будет содержать только коды. Названия стран потом будет выводить скрипт.
      2. нельзя переопределять. Он мне нужен сам по себе как доп. поле каждого юзера. Туда заносится выбор страны юзером и оттуда отображается страна и флаг рядом с аватаром юзера в его комментах и в профиле.
      3. На выходе из PHP мне нужен только сортированный (или нет) массив ненулевых количеств юзеров по каждой стране. Далее этот массив будет обрабатываться скриптом через библиотеку Chart.js , чтобы выводить диаграмму по всем странам. Bootstrap не использую. Про графическое представление списка на странице статов можешь не думать. Лучше сделай комментарии в коде PHP или здесь, что там происходит хотя бы в основной логике алгоритма.

      rewenas | Как сделать вывод статистики общего коли . 19

      Фото rewenas

      rewenas
      Как сделать вывод статистики общего количества пользователей по каждому значению доп. поля?
      Вчера, 16:21

      1 Создать в engine/data/ конфигурационный файл country-configuration.php с массивом ключей, представляющими коды стран и их значения.

        "Андорра", 'AE' => "Объединенные Арабские Эмираты", 'AF' => "Афганистан", // Здесь надо добавить все оставшиеся 245 стран из нужных 249. Их очень много и добавлять очень долго, я не стал 'ZW' => "Зимбабве", ); ?> 

      2 Создать через систему плагинов или просто так в engine/modules/ файл с названием country.php

        include_once ENGINE_DIR . "/data/country-configuration.php"; $tpl->load_template('users-country.tpl'); $tpl->result['users-country'] = dle_cache( "users-country_", $tpl->result['users-country'], true); if (!$tpl->result['users-country']) { $result = $db->query("SELECT land, COUNT(*) AS user_count FROM " . USERPREFIX . "_users WHERE land != '' GROUP BY land"); $country_counts = array(); while( $row = $db->get_row($result) ) { $country = $row['land']; $user_count = $row['user_count']; if (isset($iso_countries[$country])) { $country_name = $iso_countries[$country]; $tpl->set('{land>', $country_name); > else { $tpl->set('{land>', 'Код страны не найден'); > $tpl->set('{user-count>', $user_count); $tpl->compile('users-country'); > $tpl->clear(); create_cache( "users-country_", $tpl->result['users-country'], true ); > echo $tpl->result['users-country']; ?> 

      3 В папке вашего шаблона создать новый users-country.tpl файл. ( Стили в нем написаны просто для примера, их необходимо перенести в свой CSS файл вашего шаблона. Можно их изменять или добавлять новые, делая оформление на ваш вкус и цвет.)

         

      4 В шаблоне stats.tpl вставить строку подключения {include file=»/engine/modules/country.php»>

      rewenas | Как сделать вывод статистики общего коли . 19

      Фото rewenas

      rewenas
      Как сделать вывод статистики общего количества пользователей по каждому значению доп. поля?
      Вчера, 01:51

      Не знаю насколько конечно это правильно, но я вижу это в голове у себе немного по другому. Завтра постараюсь реализовать

      Sinoid | Как сделать вывод статистики общего коли . 19

      Фото Sinoid

      Sinoid
      Как сделать вывод статистики общего количества пользователей по каждому значению доп. поля?
      Вчера, 01:11

      rewenas, Понятно, что в статистику нет смысла выводить страны, которые никто не выбрал. Но ожидаю, что за несколько месяцев работы моего глобального научного сайта наберутся юзеры из около 60-80 стран. Всё равно много переменных выводить нужно. Допустим, внутри PHP считаем и формируем теги только тех стран zz, где > 0, заносим их в массив, сортируем по убыванию, а на страницу статистики выдаём список рейтинга из пар zz: . Как это всё реализовать в PHP?

      rewenas | Как сделать вывод статистики общего коли . 19

      Фото rewenas

      rewenas
      Как сделать вывод статистики общего количества пользователей по каждому значению доп. поля?
      Вчера, 00:32

      Можно например вывести только те страны что пользователи отметили у себя и посчитать в них суммарное количество пользователей. Причем сделать это отдельно подключаемым шаблоном, который отдельной строкой можно подключить в шаблоне статистики.

      • Sign In with Apple для DLE 14 2
      • Модуль парсер ссылки с донора и з… 0
      • Модификация аватарок DLE 16.1 27
      • Модуль — Парсер статей и интеграц… 0
      • Добавить поддержку для … 4
      • Как обрезать название статьи 1
      • Скрипт автозаполнения полей 3
      • Парсер/граббер или конвертация БД 1
      • Добавление дополнительного функци… 1
      • Реализовать адекватную загрузку а… 4
      • Запоминание открытой вкладки и со… 0
      • Авторизация пользователей через Т… 0
      • GeoIP — показ информации в зависи… 0
      • Push-уведомление через OneSignal.… 0
      • Giphy for comments (TinyMCE) 4
      • Множественные опросы — модуль Mul… 0
      • Расширенные закладки 0
      • Расширение возможностей аккаунта … 0
      • ChatGPT Driver 2
      • Country Filter 0

      Не могу отцентровать кнопку

      В общем, проблема. Никак не могу отцентровать кнопку. Она как будто прилипла к левому краю. Пытался отцентровать её в style.css при помощи:

      text-align: center; vertical-align: middle;

      Это не помогло. Потом оказалось, что тегом управляет bootstrap.min.css. Я полез туда, кнопку взял в div-класс и указал параметры:

      1 2 3 4
      .button a{ text-align: center; vertical-align: middle; }

      И это тоже не помогло. В исходном коде видно, что больше никакой файл стилей не держит кнопку слева. Но при этом кнопку можно отцентровать при помощи тега . Однако, это не профессиональный подход. При этом всём, остальные теги поддаются манипуляциям и сдвигаются при установке для них параметра text-align: center;

      Я что-то делаю не так?

      94731 / 64177 / 26122
      Регистрация: 12.04.2006
      Сообщений: 116,782
      Ответы с готовыми решениями:

      отцентровать сайт
      Подскажите, что делать! Я выравниваю сайт по центру окна браузера (width: 900px, margin: 0 auto), .

      Отцентровать ссылки
      <nav <ul <li><a href="#">Главная</a></li> .

      отцентровать сайт
      нужно отцентровать сайт для планшетника. не знаю в чем проблема. на компе все по-центру, а там в.

      Отцентровать background
      есть слайдер. В дивах лежит backgeound Не получается отцентровать картинку по центру, всегда режет.

      Отцентровать текст внутри кнопки

      доброго времени суток, товарищи, подскажите пожалуйста как решить проблему, дано: кнопка с неким текстом (по каким то соображениям внутри текст не центруется автоматически)
      надо: отцентровать этот самый текст
      при помощи padding-top можно добиться эффекта, но может быть есть какая-то возможность отцентровать автоматически его?
      line-height и vertical-align не хотят работать (display не задан) (кнопка работает как dropdown)

      1 2 3 4 5 6 7 8 9 10 11 12
      .passengers_button{ border-radius: 4px; background-color: #D9D9D9; border: none; box-sizing: border-box; height: 100%; width: 100%; font-size: .8rem; color: #6C6A6A; font-weight: 500; padding-top: 7px; }

      94731 / 64177 / 26122
      Регистрация: 12.04.2006
      Сообщений: 116,782
      Ответы с готовыми решениями:

      Отцентровать текст в круглой кнопке
      Здравствуйте! Возникла ужаснейшая проблема решение для которой придумать не могу уже очень долго.

      Отцентровать текст по середине изображения (GraphABC)
      Всем привет! Снова появился вопрос: как отцентровать текст по выводимому изображению?

      Отцентровать label на форме с учетом того, что текст может быть разным
      Подскажите, как сделать что бы текст объекта label выводился посередине формы (то есть от центра.

      Эксперт HTML/CSS

      2240 / 1628 / 641
      Регистрация: 07.08.2016
      Сообщений: 3,928

      FreeYourMind, было бы неплохо увидеть еще и html, что-бы понять каким элементом сделана кнопка. Ну и вообще, на будущее, предоставляйте код который воспроизводит проблему, а не просто кусочек.

      147 / 147 / 104
      Регистрация: 13.11.2016
      Сообщений: 557

      AlexZaw, проблема в стилизации кнопки, не думаю что прочий код страницы имеет отношение к позиционированию текста в кнопке, по этому и скинул стилизацию кнопки..

      1 2 3 4 5
      button class="passengers_button dropdown-toggle" href="#" role="button" id="dropdownMenuLink"data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> i class="fa fa-user">i> label id="travelers">label> Ceļotājs button>

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *