Примеры bootstrap: 4835+ Шаблонов для Bootstrap | BootstrapТема

Примеры

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

Загрузите исходный код Bootstrap to snag these examples.

Фреймворк

Примеры, которые сосредоточены на реализации использования встроенных компонентов, предоставляемых Bootstrap.

Стартовый шаблон

Ничего, кроме основ: скомпилированные CSS и JavaScript.

Сетки

Несколько примеров компоновки сетки со всеми четырьмя расположениями, вложенностью и т. д.

Jumbotron

Постройте вокруг jumbotron с навигационной панелью и некоторыми основными столбцами сетки.

Узкий jumbotron

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

Навигационные панели

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

Навигацонная панель

Супер базовый шаблон, включающий навигационную панель и дополнительный контент.

Статическая верхняя навигационная панель

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

Фиксированная навигационная панель

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

Пользовательские компоненты

Совершенно новые компоненты и шаблоны, чтобы помочь людям быстро начать работу с Bootstrap и продемонстрировать лучшие практики для добавления в фреймворк.

Альбом

Простой одностраничный шаблон для фотогалереи, портфолио и т. д.

Обложка

Шаблон с одной страницей для создания простых и красивых домашних страниц.

Карусель

Настройте навигационную панель и карусель, а затем добавьте новые компоненты.

Блог

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

Dashboard

Базовая панель приборов администратора с фиксированной боковой панелью и панелью навигации.

Страница входа

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

Justified nav

Создайте персонализированную навигационную панель с выровненными ссылками. Не слишком дружелюбно к Safari.

Sticky footer

Прикрепите футер к нижней части области просмотра, когда содержимое короче ее.

Sticky footer w/ navbar

Прикрепите футер к нижней части окна просмотра с помощью фиксированной верхней навигационной панели.

Эксперименты

Примеры, ориентированные на будущие функции или технологии.

Offcanvas

Создайте настраиваемое меню навигации для использования с Bootstrap.

Комментарии

На сайте функционирует система проверки ошибок. Обнаружив неточность в тексте, выделите ее и нажмите Ctrl + Enter.

Please enable JavaScript to view the comments powered by Disqus.

Поддержать проект

Примеры. Bootstrap. Документация на русском языке · Bootstrap. Версия v4.5.3

Пользовательские компоненты

Новые компоненты и шаблоны для быстрого начала работы с Bootstrap с продемонстрацией лучших практик для добавления в фреймворк.

Альбом

Простой одностраничный шаблон для фотогалереи, портфолио и многого другого.

Прайслист

Пример страницы с ценой, созданной с помощью карт, с пользовательским верхнего и нижнего колонтитула.

Checkout

Пользовательская форма заказа, показывающая компоненты формы и функции проверки.

Продукт

Ориентированная на продукт продвигающая маркетинговая страница с обширной сеткой и изображениями.

Обложка

Одностраничный шаблон для создания простых и красивых домашних страниц.

Слайдер

Навигационная панель, карусель и новые компоненты.

Блог

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

Панель администратора

Базовая панель администратора с фиксированной боковой панелью и навигационной панелью.

Страница входа

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

Прижатый футер

Прижатый футер отображается в нижней части страницы, когда содержимое окна слишком короткое.

Прижатый футер с меню

Прижатый футер отображается в нижней части страницы, когда содержимое окна слишком короткое. Панель навигации в верхней части.

Фреймворк

Примеры, которые направлены на внедрение использования встроенных компонентов, предоставляемых Bootstrap.

Базовый шаблон

Ничего, кроме основ: скомпилированный CSS и JavaScript.

Разметка

Несколько примеров макетов сетки с различными уровнями вложенности.

Jumbotron

Макет jumbotron с навигационной панели и базовая система разметки.

Navbars

Использование компонента navbar по умолчанию и отображение способа его перемещения, размещения и расширения.

Навигационное меню

Супер базовый шаблон с навигационной панелью и дополнительным контентом.

Статическое меню

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

Фиксированное меню

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

Навигационное меню внизу

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

Эксперименты

Примеры, которые ориентированы на будущие функции или методы.

Плавающие этикетки

Красивые простые формы с плавающей надписью в форме ввода.

Скользящее меню

Превратите расширяемую навигационную панель в скользящем меню.

Please enable JavaScript to view the comments powered by Disqus.

10 примеров панели управления Bootstrap (шаблоны) 2023

10 апреля 2023 г.

Поскольку вы сосредоточены на новом веб-приложении, эти замечательные примеры и шаблоны панели управления Bootstrap помогут вам в этом.

Вам повезло. Почему, спросите вы. Потому что вам не нужно проходить процесс урегулирования с надежной альтернативой.

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

Наш выбор основывался на дизайне, отзывчивости, доступных компонентах и ​​возможностях настройки.

Все приведенные ниже примеры информационных панелей наполнены функциями. Кроме того, их легко использовать и модифицировать.

CMS, CRM, SaaS, веб-сайт, аналитика, управление пользователями — ЭТО ВСЁ РАБОТАЕТ!

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

1. Adminty

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

Но с чего-то надо начинать — с Админа!

Благодаря современному и чистому дизайну все данные, которые вы планируете отслеживать, будут выглядеть великолепно. Adminty поставляется с некоторыми вариантами стилей из коробки, поэтому вам может даже не понадобиться кодировать, чтобы украсить его.

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

Загрузить предварительную версию

2. ArchitectUI

Если вам нужен универсальный шаблон панели инструментов Bootstrap, поскольку вы работаете над несколькими веб-проектами, ArchitectUI — лучшее решение для этого.

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

Вы можете легко настроить ArchitectUI в соответствии с вашими потребностями и правилами. Создание профессионального и гибкого администратора не требует много времени.

Обратите внимание: вы получаете более 250 компонентов и виджетов, которые можно смешивать и сочетать по своему усмотрению. ArchitectUI также поставляется с регулярными обновлениями и поддержкой.

Загрузить предварительную версию

3. ArchitectUI HTML (бесплатно)

Что здорово, ArchitectUI также поставляется в виде бесплатного шаблона панели инструментов Bootstrap. Если вы пока не хотите идти ва-банк, это отличное начало вашего процесса разработки.

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

Здесь также доступны некоторые варианты оформления премиум-версии. Многоцветные скины, необязательные фиксированные элементы и многое другое.

Вы даже можете связаться с автором с любыми вопросами и проблемами. (Что не очень часто встречается в бесплатных шаблонах! Salute, DP.)

Загрузить превью

4. Admindek

Admindek — это шаблон панели администратора, основанный на Bootstrap Framework, который кричит о чистоте. И это именно то, что вам нужно для создания информационной панели для любого веб-приложения.

Вам не нужно слишком много отвлекающих факторов, которые могут затруднить просмотр данных.

Админдеку это прекрасно известно. Он делает все правильно со многими предопределенными макетами, которые вы можете использовать по своему усмотрению.

Вы можете выбрать один из трех вариантов ценообразования, начиная с персональной лицензии за 69 долларов. Это зависит от того, для скольких проектов вы хотите использовать Admindek и для скольких разработчиков вы хотели бы участвовать.

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

Современные технологии, сотни элементов, простая модификация и два стиля приборной панели — все это часть пакета. Вы можете удобно просматривать Больницу даже на разных устройствах, если хотите.

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

Загрузить предварительную версию

6. Финансы

Теперь вы можете сортировать все свои финансовые данные, как чемпион, с Финансами. Этот шаблон панели инструментов Bootstrap работает по-современному.

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

Finance также имеет небольшой вес, что обеспечивает высокую скорость загрузки. И код хорошо организован, поэтому пользователи всех уровней квалификации могут получить большую пользу. Читайте: Получите максимальную отдачу от финансов.

Существует множество возможных вариантов цвета и дизайна (по умолчанию!), масштабируемые ресурсы, более 200 редактируемых компонентов — что еще вам нужно?

Быстрое создание ведущей информационной панели с помощью Finance. Тебе это понравится.

Загрузить предварительную версию

7. Kero

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

Я уверен, вы заметите различные сходства между ArchitectUI и Kero. Но это хорошо. Оба являются экстраординарными решениями, которые ускоряют ваш рабочий процесс.

Kero использует Gulp и Bootstrap 4, что гарантирует быструю загрузку и фантастический пользовательский опыт. Вы можете присоединиться к форуму сообщества для получения дополнительной помощи, связаться со службой поддержки или просмотреть обширную документацию.

Керо гарантирует вашу победу.

Загрузить превью

8. Fiori

Хотя Kero имеет горизонтальную и вертикальную раскладку, Fiori специализируется на первой. Этот пример панели инструментов Bootstrap является многоцелевым, поскольку вы можете использовать его для множества веб-проектов, над которыми работаете.

Но есть одна загвоздка. Если вы работаете над несколькими приложениями, вы должны выбрать как минимум среднюю лицензию/цену за 149 долларов.

Это также дает вам один год бесплатной поддержки и обновлений. Вы также можете с комфортом работать над личными и коммерческими проектами и позволить другим разработчикам присоединиться, чтобы вместе делать великие дела.

Горизонтальные админки и дашборды — проверьте!

Загрузить предварительную версию

9. Управление пользователями

В наши дни вы можете сэкономить массу времени и работать с правильными инструментами. Управление пользователями и полный обзор веб-проектов становится проще простого благодаря управлению пользователями.

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

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

Download Preview

10. Sales

Sales — это шаблон Bootstrap, который находится в том же пространстве, что и Finance. Но если вам нужно больше вариантов дизайна, этот наверняка вызовет у вас интерес.

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

Во-вторых, вы получаете несколько информационных панелей и другие практичные макеты страниц. Каждый из них также на 100 % настраивается в соответствии с вашими потребностями.

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

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

Продажи отлично подходят для начинающих и отлично подходят для профессионалов. Каждый может использовать это в своих интересах.

Загрузить предварительную версию

Примеры Bootstrap — arch 6.1.0

Этот код установки требуется для запуска в ноутбуке IPython

 %matplotlib встроенный
импортировать matplotlib.pyplot как plt
импорт морской
seaborn.set_style ("темная сетка")
plt. rc("цифра", figsize=(16, 6))
plt.rc("savefig", dpi=90)
plt.rc("шрифт", family="без засечек")
plt.rc("шрифт", размер=14)
 

Коэффициент Шарпа

Коэффициент Шарпа является важным показателем доходности на единицу риска. В примере показано, как оценить дисперсию коэффициента Шарпа и как построить доверительные интервалы для коэффициента Шарпа, используя длинный ряд данных об акциях США.

 импортировать arch.data.frenchdata
импортировать numpy как np
импортировать панд как pd
ff = arch.data.frenchdata.load()
 

Набор данных содержит факторы Фамы-Френча, включая избыточную рыночную доходность.

 избыточный_рынок = ff.iloc[:, 0]
печать (ff.describe())
 

            Мкт-РФ СМБ ХМЛ РФ
количество 1109.000000 1109.000000 1109.000000 1109.000000
среднее 0,659946 0,206555 0,368864 0,274220
стандарт 5,327524 3,191132 3,482352 0,253377
мин -29.130000 -16,870000 -13,280000 -0,060000
25% -1,970000 -1,560000 -1,320000 0,030000
50% 1,020000 0,070000 0,140000 0,230000
75% 3,610000 1,730000 1,740000 0,430000
макс.   38,850000 36,700000 35,460000 1,350000
 

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

 по определению Sharpe_ratio(x):
    мю, сигма = 12 * x.mean(), np.sqrt (12 * x.var())
    значения = np.array ([мю, сигма, мю / сигма]). сжать ()
    индекс = ["мю", "сигма", "SR"]
    вернуть pd.Series (значения, индекс = индекс)
 

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

90 150 параметров = sharpe_ratio (excess_market) параметры

мю 7.919351
сигма 18.455084
СР 0,429115
тип: float64
 

Воспроизводимость

Все загрузчики принимают аргумент ключевого слова seed , который может содержать NumPy Generator или RandomState или

int . При использовании int аргумент передается np.random.default_rng для создания основного генератора. Это позволяет использовать одни и те же псевдослучайные значения в нескольких прогонах.

Предупреждение

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

Начальная загрузка инициализируется с любыми специфическими параметрами начальной загрузки и данными, которые будут использоваться в начальной загрузке. Здесь 12 — это средняя длина окна в стационарной начальной загрузке, а следующий ввод — это данные для начальной загрузки.

 из arch.bootstrap import StationaryBootstrap
# Инициализировать энтропией с random.org
энтропия = [877788388, 418255226, 989657335, 69307515]
семя = np.random.default_rng (энтропия)
bs = StationaryBootstrap(12, extra_market, seed=seed)
результаты = bs.  apply (sharp_ratio, 2500)
SR = pd.DataFrame (результаты [:, -1:], столбцы = ["SR"])
рис = SR.hist (ячейки = 40)
 

 cov = bs.cov (коэффициент резкости, 1000)
cov = pd.DataFrame(cov, index=params.index, столбцы=params.index)
печать (ков)
se = pd.Series(np.sqrt(np.diag(cov)), index=params.index)
se.name = "Стандартные ошибки"
печать("\n")
печать (с)
 

             мю сигма СР
мю 3,837196 -0,638431 0,224722
сигма -0,638431 3,019569 -0,105762
СР 0,224722 -0,105762 0,014915
мю 1.958876
сигма 1.737691
СР 0,122126
Название: Std Errors, dtype: float64
 

 ci = bs.conf_int(sharp_ratio, 1000, метод="базовый")
ci = pd.DataFrame(ci, index=["Нижний", "Верхний"], columns=params.index)
печать (ки)
 

              мю сигма СР
Нижний 4,367662 14,780547 0,166759
Верхний 11,958503 21,735752 0,659350
 

Альтернативные доверительные интервалы могут быть рассчитаны с использованием различных методов. Параметр reuse=True позволяет использовать предыдущие результаты начальной загрузки при построении доверительных интервалов с использованием альтернативных методов.

 ci = bs.conf_int(sharpe_ratio, 1000, method="percentile", reuse=True)
ci = pd.DataFrame(ci, index=["Нижний", "Верхний"], columns=params.index)
печать (ки)
 

              мю сигма СР
Нижний 3,880198 15,174416 0,198880
Верхний 11,471040 22,129620 0,691471
 

Оценка оптимальной длины блока

Функцию оптимальный_блок_длины можно использовать для оценки оптимальных длин блоков для стационарного и кругового бутстрепов. Здесь мы используем квадрат рыночной доходности, поскольку коэффициент Шарпа зависит от среднего значения и дисперсии, а автокорреляция в квадратах сильнее, чем в доходностях.

 из arch.bootstrap импорта optimal_block_length
opt = оптимальная_длина_блока (избыток_рынка**2)
печать (опция)
 

        стационарный круговой
Мкт-РФ 47.766787 54.679322
 

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

 # Переинициализировать с той же энтропией
rs = np.random.default_rng (энтропия)
bs = StationaryBootstrap(opt.loc["Mkt-RF", "стационарный"], избыточный_рынок, seed=seed)
результаты = bs.apply (sharp_ratio, 2500)
SR = pd.DataFrame (результаты [:, -1:], столбцы = ["SR"])
рис = SR.hist (ячейки = 40)
 

Во втором примере используется модель Probit из statsmodels. Демонстрационные данные представляют собой данные о поступлении в университеты, которые содержат двоичную переменную для поступления, балл GRE, балл GPA и рейтинг квартиля. Эти данные загружаются из Интернета и импортируются с помощью pandas.

 импортировать arch.data.binary
двоичный файл = arch.data.binary.load()
двоичный = двоичный.dropna()
печать (двоичный.описать())
 

            признать gre gpa ранг
количество 400.000000 400.000000 400.000000 400.00000
среднее 0,317500 587,700000 3,389900 2.48500
стандарт 0,466087 115,516536 0,380567 0,94446
мин 0,000000 220,000000 2,260000 1,00000
25% 0,000000 520,000000 3,130000 2,00000
50% 0,000000 580,000000 3,395000 2,00000
75% 1. 000000 660.000000 3.670000 3.00000
макс. 1,000000 800,000000 4,000000 4,00000
 

Установка непосредственно на модель

Первым шагом является построение регрессора и массивов зависимых переменных. Затем, используя эти массивы, можно оценить модель, вызвав подходит

 импортировать statsmodels.api как sm
эндог = двоичный [["допустить"]]
exog = двоичный[["gre", "gpa"]]
const = pd.Series (np.ones (exog.shape [0]), index = endog.index)
const.name = "Константа"
exog = pd.DataFrame([const, exog.gre, exog.gpa]).T
# Оценить модель
mod = sm.Probit(эндог, экзог)
подгонка = мод. подгонка (дисп = 0)
параметры = подходят.параметры
печать (параметры)
 

Константа -3,003536
Гре 0.001643
гПа 0,454575
тип: float64
 

Функция-оболочка

Большинство моделей в statsmodels реализованы как классы, требуют явного вызова соответствует и возвращает класс, содержащий оценки параметров и другие величины. Эти классы нельзя напрямую использовать с методами начальной загрузки. Однако можно написать простую оболочку, которая принимает данные как единственные входные данные и возвращает параметры, оцененные с использованием модели Statsmodel.

 def probit_wrap (эндог, экзог):
    вернуть sm.Probit(эндог, экзог).фит(дисп=0).парамс
 

Вызов этой функции должен возвращать те же значения параметров.

 probit_wrap (эндог, экзог)
 

Константа -3,003536
Гре 0.001643
гПа 0,454575
тип: float64
 

Оболочку можно использовать непосредственно для оценки ковариации параметра или для построения доверительных интервалов.

 из arch.bootstrap импорт IIDBootstrap
bs = IIDBootstrap(endog=endog, exog=exog)
cov = bs.cov(probit_wrap, 1000)
cov = pd.DataFrame(cov, index=exog.columns, columns=exog.columns)
печать (ков)
 

          Const gre gpa
Константа 0,397473 -6,641971e-05 -0,102525
gre -0,000066 4,467596е-07 -0,000058
гПа -0,102525 -5,815162e-05 0,039859
 

 se = pd.Series(np.sqrt(np.diag(cov)), index=exog. columns)
печать (с)
print("Т-статистика")
печать (параметры/se)
 

Константа 0,630455
Гре 0.000668
гпа 0,199647
тип: float64
Т-статистика
Константа -4,764077
гре 2.457413
ГПа 2.276894
тип: float64
 

 ci = bs.conf_int(probit_wrap, 1000, метод="базовый")
ci = pd.DataFrame(ci, index=["Нижний", "Верхний"], columns=exog.columns)
печать (ки)
 

          Const gre gpa
Нижний -4,214157 0,000360 0,005706
Верхний -1,622607 0,002906 0,871725
 

Ускорение процесса

Начальные значения могут быть предоставлены для в соответствии с , что может сэкономить время на поиск начальных значений. Поскольку оценки параметров начальной загрузки должны быть близки к оценкам исходной выборки, оценочные параметры полной выборки являются разумными начальными значениями. Их можно передать с помощью словаря extra_kwargs в модифицированную оболочку, которая примет аргумент ключевого слова, содержащий начальные значения.

 def probit_wrap_start_params (endog, exog, start_params = None):
    вернуть sm. Probit(эндог, экзог).фит(нач_парамс=нач_парамс, дисп=0).парамс
 

 bs.reset() # Сброс в исходное состояние для сравнения
ков = бс.ков(
    probit_wrap_start_params, 1000, extra_kwargs={"start_params": params.values}
)
cov = pd.DataFrame(cov, index=exog.columns, columns=exog.columns)
печать (ков)
 

          Const gre gpa
Константа 0,397473 -6,641971e-05 -0,102525
gre -0,000066 4,467596e-07 -0,000058
гПа -0,102525 -5,815162e-05 0,039859
 

Начальная загрузка образцов разной длины

Независимые выборки разной длины часто встречаются в экспериментальных условиях, например, при A/B-тестировании веб-сайта. IIDBootstrap допускает произвольную зависимость в индексе наблюдения и поэтому не может естественным образом применяться к этим наборам данных. IndependentSamplesBootstrap позволяет производить выборку наборов данных с переменными разной длины, используя независимость значений для отдельной начальной загрузки каждого компонента.