Добавил:

ivanov666 Опубликованный материал нарушает ваши авторские права? Сообщите нам.

Вуз:

Башкирский Государственный Аграрный Университет

Предмет:

[НЕСОРТИРОВАННОЕ]

Файл:

Использование web-технологий при создании информационных систем. Учебно-методическое пособие.pdf

Скачиваний:

Добавлен:

12.08.2026

Размер:

791 Кб

Скачать

☆

<<< < Предыдущая 1 2 3 4 5 67 / 77

ПРИЛОЖЕНИЯ

Приложение 1

Правила оформления курсовой работы

1.Требования к составу, содержанию и объему КП / КР.

1.1.Структура текстовой части КП/ КР (пояснительной записки) содержит следующие обязательные элементы:

−титульный лист;

−задание;

−содержание;

−введение;

−основная часть;

−заключение;

−библиографический список;

−приложение(я) (в том числе отчет системы «Антиплагиат» о проверке текста КП/ КР на наличие и объем заимствований).

1.1.1.Титульный лист является первой страницей КП / КР.

1.1.2.Задание на КП / КР оформляется в соответствии с разделом 6 Положения.

1.1.3.В содержании приводятся введение, заголовки глав (разделов) и подразделов основной части, заключение, библиографический список, приложения (при их наличии)

суказанием номеров страниц.

1.1.4.Во введении обосновывается актуальность КП/ КР, формируются цель изадачи

КП / КР.

1.1.5.В основной части КП / КР приводится информация, отражающая исходные данные, выбранные методы решения задач, ход работы, ее сущность и результаты.

1.1.6.В заключении отражаются основные результаты КП / КР, формулируются обобщенные выводы и предложения, указываются перспективы применения результатов на практике (при наличии).

1.1.7.Библиографический список должен содержать, как правило, не менее10 наименований. Сведения о библиографических источниках приводятся в соответствии с требованиями ГОСТ Р 7.1–2003.

Библиографический список должен включать использованную в КП / КР актуальную учебную литературу, в том числе из ЭБС и открытых источников, и содержать не менее 20 % наименований нормативной документации.

1.1.8. В приложения включаются:

−отчет системы «Антиплагиат» о результатах проверки текста КП / КР на заимствования с указанием объема (в процентах) оригинального текста;

− связанные с выполненной КП / КР материалы, которые не могут быть внесены в основную часть (нормативные и справочные материалы, таблицы, схемы, иллюстрации вспомогательного характера, тексты компьютерных программ и т.д.).

1.2.Графическая и иная части КП / КР могут быть представлены чертежами, схемами, диаграммами, макетами, компьютерными программами и т.п. Их состав уточняет руководитель КП / КР.

1.3.КП / КР должна быть надежно сшита.

2.Требования к оформлению текстовой части КП / КР.

2.1.Текст КП / КР выполняет с использованием ПЭВМ на одной стороне листа белой бумаги формата А4, шрифт черного цвета — Times New Roman, 14пт, межстрочный интервал — 1,5.

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

2.3.Текст следует формировать, соблюдая следующие размеры полей: при вертикальном расположении текста: левое — 25 мм, правое — 10 мм, верхнее и нижнее — 20 мм; при горизонтальном расположении текста:верхнее — 25 мм, правое и левое — 20, нижнее —

10 мм.

Размер абзацного отступа должен быть одинаковым по всему тексту и равным 12,5 мм.

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

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

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

2.7.Заголовки структурных элементов (ОГЛАВЛЕНИЕ, ВВЕДЕНИЕ, ЗАКЛЮЧЕНИЕ

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

2.8.Расстояние между заголовком структурного элемента и текстом должно быть равно 3 интервалам. Расстояние между заголовками раздела и подраздела — 2 интервала.

2.9.Ссылки на использованные библиографические источники должны нумероваться арабскими цифрами в порядке появления в текстовой части КП / КР и помещаться в квадратные скобки.

2.10.Приложения, если их больше одного, должны обозначаться буквами. Каждое приложение должно начинаться с новой страницы. Вверхней строке по центру указывается: Приложение А. Затем с новой строки по центру — название приложения.

При ссылке на приложение в тексте пишут: «в Приложении А».

2.11.Все иллюстрации должны иметь названия и последовательную нумерацию в пределах каждого раздела арабскими цифрами. Номер иллюстрации должен состоять из номера раздела и порядкового номера, например: Рисунок 3.2 (второй рисунок третьего раздела). Номер и название должны размещаться под иллюстрацией, например: Рисунок 2.3

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

2.12.Таблицы должны иметь названия и номер в пределах каждого раздела. Название

иномер пишутся над таблицей, например: Таблица 1.1. Номенклатура выпускаемой продукции. Если таблица имеет продолжение, то на следующей странице пишется: Продолжение таблицы 1.1. На последней странице с таблицей пишется: Окончание таблицы 1.1. Ссылки на таблицы в тексте обязательны. При необходимости шрифт и междустрочный интервал в таблицах могут быть уменьшены.

2.13.Формулы должны быть вставлены отдельной строкой. Формулы нумеруются арабскими цифрами, помещаемыми в круглых скобках справа от формулы. Нумерация формул в пределах раздела, например: 4.2 (формула вторая четвертого раздела). После формулы ставится запятая и с новой строки после слова «где» идет расшифровка каждого обозначения. Расшифровке подлежат только обозначения, встречающиеся впервые. Ссылки на формулы в тексте обязательны.

2.14.Все размерности физических величин должны даваться в системе СИ.

Приложение 2

Требования к прототипу информационной системы

В прототипе должно быть реализовано:

1)не менее трех статичных HTML-страниц;

2)меню с выпадающими элементами.

3)анимированный загрузчик;

4)модальное окно с полями авторизации;

5)адаптивность для экранов разных типов.

Приложение 3

Пример оформления HTML-прототипа информационной системы

<!DOCTYPE html>

<html>

<head>

<title>Responsive Dashboard Template</title>

<header id="topnav">

</div></a>

</li> <li class="d-none d-sm-block"> <form class="app-search">

User <i class="mdi mdi-chevron-down"></i></span></a>

<h6 class="text-overflow m-0">Welcome !</h6></div> <div class="dropdown-divider"></div>

<span>Logout</span></a></div></li></ul></div> </div>

<a href="index.html"><i class="mdi mdi-view-dashboard"></i>Dashboard</a></li> <li class="has-submenu">

<a href="#"> <i class="mdi mdi-invert-colors"></i>User Interface <div class="arrowdown"></div></a>

<ul>

<li>

<a href="ui-buttons.html">Buttons</a></li> <li>

<a href="ui-cards.html">Cards</a></li> <li>

<a href="ui-draggable-cards.html">Draggable Cards</a></li> <li>

<a href="ui-checkbox-radio.html">Checkboxs-Radios</a></li> <li>

<a href="ui-material-icons.html">Material Design Icons</a></li> <li>

<a href="ui-font-awesome-icons.html">Font Awesome</a></li></ul></li> <li>

<ul>

<li>

<a href="ui-dripicons.html">Dripicons</a></li> <li>

<a href="ui-themify-icons.html">Themify Icons</a></li> <li>

<a href="ui-modals.html">Modals</a></li> <li>

<a href="ui-notification.html">Notification</a></li> <li>

<a href="ui-range-slider.html">Range Slider</a></li> <li>

<a href="ui-components.html">Components</a></li></ul></li>

<li>

<ul>

<li>

<a href="ui-sweetalert.html">Sweet Alert</a></li> <li>

<a href="ui-widgets.html">Widgets</a></li> <li>

<a href="ui-typography.html">Typography</a></li></ul></li></ul></li> <li class="has-submenu">

<i class="mdi mdi-lifebuoy"></i>Components <div class="arrow-down"></div></a> <ul class="submenu">

<a href="#">Forms <div class="arrow-down"></div></a> <ul class="submenu">

<li>

<a href="form-elements.html">General Elements</a></li> <li>

<a href="form-advanced.html">Advanced Form</a></li> <li>

<a href="form-validation.html">Form Validation</a></li> <li>

<a href="form-wizard.html">Form Wizard</a></li> <li>

<a href="form-fileupload.html">Form Uploads</a></li> <li>

<a href="form-quilljs.html">Quilljs Editor</a></li> <li>

<a href="form-xeditable.html">X-editable</a></li></ul></li> <li class="has-submenu">

<a href="#">Tables <div class="arrow-down"></div></a> <ul class="submenu">

<li>

<a href="tables-basic.html">Basic Tables</a></li> <li>

<a href="tables-datatable.html">Data Tables</a></li> <li>

<a href="tables-responsive.html">Responsive Table</a></li> <li>

<a href="tables-editable.html">Editable Table</a></li> <li>

<a href="tables-tablesaw.html">Tablesaw Table</a></li></ul></li> <li>

<a href="calendar.html">Calendar</a></li> <li>

<a href="#"> <i class="mdi mdi-chart-donut-variant"></i>Charts <div class="arrowdown"></div></a>

<a href="charts-flot.html">Flot Charts</a></li> <li>

<a href="charts-morris.html">Morris Charts</a></li> <li>

<a href="charts-chartist.html">Chartist Charts</a></li> <li>

<a href="charts-chartjs.html">Chartjs Charts</a></li> <li>

<a href="charts-other.html">Other Charts</a></li></ul></li></ul>

</header>

<div class="wrapper">

<li class="breadcrumb-item"><a href="javascript: void(0);">Pages</a></li> <li class="breadcrumb-item active">Taskboard</li></ol></div>

<h4 class="page-title">Taskboard</h4></div></div></div>

<a href="javascript:void(0);" class="dropdown-item">Action</a>

<a href="javascript:void(0);" class="dropdown-item">Another action</a>

<a href="javascript:void(0);" class="dropdown-item">Something else</a>

<a href="javascript:void(0);" class="dropdown-item">Separated link</a></div></div> <h4 class="header-title mt-0 mb-3 text-primary">Upcoming</h4>

<span class="badge badge-danger float-right">Urgent</span>

<h5 class="mt-0"><a href="" class="text-dark">Improve animation loader</a></h5> <ul class="list-inline">

<h5 class="mt-0"><a href="" class="text-dark">Write a release note for Admin v1.5</a></h5>

<img src="assets/images/users/user-3.jpg" alt="img"

class="avatar-sm rounded-circle"></a></li>

<h5 class="mt-0"><a href="" class="text-dark">Invite user to a project</a></h5> <ul class="list-inline">

<span class="badge badge-danger float-right">Urgent</span>

<h5 class="mt-0"><a href="" class="text-dark">Code HTML email template for welcome email</a></h5>

<a href="#custom-modal" class="btn btn-primary waves-effect waves-light" data-animation="fadein" data-plugin="custommodal" data-overlaySpeed="200" data-

overlayColor="#36404a">

<a href="javascript:void(0);" class="dropdown-item">Action</a>

<a href="javascript:void(0);" class="dropdown-item">Another action</a>

<a href="javascript:void(0);" class="dropdown-item">Something else</a>

<a href="javascript:void(0);" class="dropdown-item">Separated link</a></div></div> <h4 class="header-title mt-0 mb-3 text-warning">In Progress</h4>

<span class="badge badge-danger float-right">Urgent</span>

<h5 class="mt-0"><a href="" class="text-dark">File Uploads on cards</a></h5> <ul class="list-inline">

<h5 class="mt-0"><a href="" class="text-dark">Enable analytics tracking</a></h4> <ul class="list-inline">

<h5 class="mt-0"><a href="" class="text-dark">Improve animation loader</a></h5> <ul class="list-inline">

<a href="#custom-modal" class="btn btn-primary waves-effect waves-light" data-animation="fadein" data-plugin="custommodal" data-overlaySpeed="200" data-

overlayColor="#36404a">

<a href="javascript:void(0);" class="dropdown-item">Action</a>

<a href="javascript:void(0);" class="dropdown-item">Another action</a>

<a href="javascript:void(0);" class="dropdown-item">Something else</a>

<a href="javascript:void(0);" class="dropdown-item">Separated link</a></div></div> <h4 class="header-title mt-0 mb-3 text-success">Complete</h4>

<span class="badge badge-danger float-right">Urgent</span>

<h5 class="mt-0"><a href="" class="text-dark">Improve animation loader</a></h5> <ul class="list-inline">

<h5><a href="" class="text-dark">Write a release note for Admin v1.5</a></h5> <ul class="list-inline">

<h5 class="mt-0"><a href="" class="text-dark">Invite user to a project</a></h5> <ul class="list-inline">

<span class="badge badge-danger float-right">Urgent</span>

<h5 class="mt-0"><a href="" class="text-dark">Code HTML email template for welcome email</a></h5>

<a href="#custom-modal" class="btn btn-primary waves-effect waves-light" data-animation="fadein" data-plugin="custommodal" data-overlaySpeed="200" data-

overlayColor="#36404a">

<button type="button" class="close" onclick="Custombox.modal.close();"> <span>×</span><span class="sr-only">Close</span></button>

<label for="assign">Assign to</label>

<label for="priority">Priority</label>

<label for="Sdate">Start Date</label>

<button type="button" class="btn btn-danger waves-effect waveslight">Cancel</button></form></div></div>

Приложение 4

Пример оформления CSS для прототипа информационной системы

@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700"); html {

position: relative; min-height: 100%; } body { padding-bottom: 60px; overflow-x: hidden; }

@media (min-width: 1200px) {

.container-fluid { max-width: 90%; } }

.wrapper {

padding: 130px 12px 0 12px; } #topnav {

background: #ffffff; position: fixed; left: 0;

right: 0; z-index: 1001; padding: 0 12px;

-webkit-box-shadow: 0 0 35px 0 rgba(154, 161, 171, 0.15); box-shadow: 0 0 35px 0 rgba(154, 161, 171, 0.15); }

#topnav .arrow-down { display: inline-block; } #topnav .arrow-down:after { border-color: initial; border-style: solid; border-width: 0 0 1px 1px; content: "";

height: .4em; display: inline-block; right: 5px;

top: 50%; margin-left: 5px;

-webkit-transform: rotate(-45deg) translateY(-50%); transform: rotate(-45deg) translateY(-50%);

-webkit-transform-origin: top; transform-origin: top;

-webkit-transition: all .3s ease-out; transition: all .3s ease-out;

width: .4em; } #topnav .navbar-toggle { border: 0;

position: relative; padding: 0; margin: 0;

cursor: pointer; }

#topnav .navbar-toggle .lines { width: 25px;

display: block; position: relative;

margin: 15px 20px 0 20px; padding-top: 13px; height: 44px;

-webkit-transition: all .5s ease; transition: all .5s ease; } #topnav .navbar-toggle span { height: 2px;

width: 100%; background-color: #adb5bd; display: block; margin-bottom: 5px;

transition: -webkit-transform .5s ease; -webkit-transition: -webkit-transform .5s ease; transition: transform .5s ease;

transition: transform .5s ease, -webkit-transform .5s ease; } #topnav .navbar-toggle.open span {

position: absolute; }

#topnav .navbar-toggle.open span:first-child { top: 18px;

-webkit-transform: rotate(45deg); transform: rotate(45deg); }

#topnav .navbar-toggle.open span:nth-child(2) { visibility: hidden; }

#topnav .navbar-toggle.open span:last-child { width: 100%;

top: 18px;

-webkit-transform: rotate(-45deg); transform: rotate(-45deg); }

#topnav .has-submenu.active > a { color: #71b6f9; }

#topnav .has-submenu.active .submenu li.active > a { color: #71b6f9; }

#topnav .topbar-menu { margin-top: 70px; }

.navigation-menu { list-style: none; margin: 0; padding: 0; }

.navigation-menu > li { float: left;

position: relative; }

.navigation-menu > li > a { display: block;

color: #6c757d;

font-size: 15px;

font-family: "Karla", sans-serif; -webkit-transition: all .5s ease; transition: all .5s ease; line-height: 20px;

padding: 20px; position: relative; }

.navigation-menu > li > a i { font-size: 15px; margin-right: 8px; }

.navigation-menu > li > a:hover, .navigation-menu > li > a:focus { background-color: transparent; }

Responsive Menu */

@media (min-width: 992px) {

.navigation-menu > li > a:hover, .navigation-menu > li > a:focus, .navigation-menu > li > a:active {

color: #71b6f9; }

.navigation-menu > li:hover a { color: #71b6f9; }

.navigation-menu > li:first-of-type > a { padding-left: 0; }

.navigation-menu > li.last-elements .submenu { left: auto;

right: 0; }

.navigation-menu > li.last-elements .submenu > li.has-submenu .submenu { left: auto;

right: 100%; margin-left: 0; margin-right: 10px; }

.navigation-menu > li > ul > li.has-submenu:active > a, .navigation-menu > li > ul > li.has-submenu:hover > a {

color: #71b6f9; }

.navigation-menu > li .submenu { position: absolute;

top: 100%; left: 0; z-index: 1000;

padding: 10px 0; list-style: none; min-width: 200px; text-align: left; visibility: hidden; opacity: 0; margin-top: 10px; border-radius: 4px;

-webkit-transition: all .2s ease; transition: all .2s ease;

background-color: #fff;

-webkit-box-shadow: rgba(50, 58, 70, 0.15) 0px 0px 40px 0px; box-shadow: rgba(50, 58, 70, 0.15) 0px 0px 40px 0px; }

.navigation-menu > li .submenu:before { left: 16px;

top: -10px; content: ""; display: block; position: absolute;

background-color: transparent; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 12px solid #fff; z-index: 9999; }

.navigation-menu > li .submenu li { position: relative; }

.navigation-menu > li .submenu li ul { list-style: none;

padding-left: 0; margin: 0; }

.navigation-menu > li .submenu li a { display: block;

padding: 9px 25px; clear: both; white-space: nowrap; color: #6c757d; }

.navigation-menu > li .submenu li a:hover { color: #71b6f9; }

.navigation-menu > li .submenu li.has-submenu > a .arrow-down:after { right: 20px !important;

-webkit-transform: rotate(-135deg) translateY(-50%) !important; transform: rotate(-135deg) translateY(-50%) !important;

position: absolute; }

.navigation-menu > li .submenu li .submenu { left: 100%;

top: 0; margin-left: 20px; margin-top: -1px; }

.navigation-menu > li .submenu li .submenu:before { left: -20px;

top: 10px;

border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-right: 12px solid #fff; }

.navigation-menu > li .submenu.megamenu { white-space: nowrap;

width: auto; }

.navigation-menu > li .submenu.megamenu > li { overflow: hidden;

width: 200px; display: inline-block; vertical-align: top; }

.navbar-toggle {

display: none !important; } #navigation {

display: block !important; } } @media (min-width: 768px) {

.navigation-menu > li.has-submenu:hover > .submenu { visibility: visible;

opacity: 1; margin-top: 0; }

.navigation-menu > li.has-submenu:hover > .submenu > li.has-submenu:hover >

.submenu {

visibility: visible; opacity: 1; margin-left: 10px; margin-right: 0; }

.navigation-menu > li.has-submenu.last-elements > .submenu:before { right: 11px;

left: auto; } }

@media (max-width: 991px) {

.wrapper { padding-top: 70px; }

#topnav .navigation-menu { float: none;

max-height: 400px; text-align: left; }

#topnav .navigation-menu > li { display: block;

float: none; }

#topnav .navigation-menu > li > a { color: #323a46;

padding: 15px; }

#topnav .navigation-menu > li > a i { display: inline-block; margin-right: 10px; margin-bottom: 0;

vertical-align: inherit; }

#topnav .navigation-menu > li > a:after { position: absolute;

right: 15px; }

#topnav .navigation-menu > li .submenu { display: none;

list-style: none; padding-left: 20px; margin: 0; }

#topnav .navigation-menu > li .submenu li a { display: block;

position: relative; padding: 7px 20px; color: #323a46; }

#topnav .navigation-menu > li .submenu li a:hover { color: #71b6f9; }

#topnav .navigation-menu > li .submenu.open { display: block; }

#topnav .navigation-menu > li .submenu .submenu { display: none;

list-style: none; }

#topnav .navigation-menu > li .submenu .submenu.open { display: block; }

#topnav .navigation-menu > li .submenu.megamenu > li > ul { list-style: none;

padding-left: 0; }

#topnav .navigation-menu > li.has-submenu.open > a { color: #71b6f9; }

#topnav .has-submenu.active a { color: #71b6f9; }

#topnav .has-submenu.active .submenu li.active > a { color: #71b6f9; }

#topnav .arrow-down:after { right: 15px;

position: absolute; } #topnav .navbar-header { float: left; } #navigation {

position: absolute; top: 70px;

left: 0; width: 100%; display: none; height: auto;

padding-bottom: 0; overflow: auto;

-webkit-box-shadow: 0 0 35px 0 rgba(154, 161, 171, 0.15); box-shadow: 0 0 35px 0 rgba(154, 161, 171, 0.15);

background-color: #fff; } #navigation.open { display: block; overflow-y: auto; } }

@media (max-height: 375px) {

.navigation-menu {

max-height: 240px !important; } }

.menubar-dark #topnav { background: #435966;

-webkit-box-shadow: 0 0 35px 0 rgba(154, 161, 171, 0.15); box-shadow: 0 0 35px 0 rgba(154, 161, 171, 0.15); }

.menubar-dark #topnav .navbar-custom {

background-color: #fff; }

.menubar-dark #topnav .navbar-custom .topnav-menu .nav-link { color: #6c757d; }

.menubar-dark #topnav .navbar-custom .app-search .form-control { background-color: #f1f5f7;

color: #adb5bd; }

.menubar-dark #topnav .navbar-custom .app-search .btn { background-color: #f1f5f7;

color: #adb5bd; }

.menubar-dark #topnav .has-submenu.active > a { color: #71b6f9; }

.menubar-dark #topnav .has-submenu.active .submenu li.active > a { color: #71b6f9; }

.menubar-dark .navigation-menu > li > a { color: rgba(255, 255, 255, 0.7); } @media (min-width: 992px) {

.center-menu #topnav .navigation-menu { text-align: center; }

.center-menu #topnav .navigation-menu > li { display: inline-block;

float: none; }

.center-menu #topnav .navigation-menu > li > a { padding: 20px; }

.center-menu #topnav .navigation-menu > li > a i { display: block;

margin: 0 0 5px 0; float: none; text-align: center; }

.center-menu #topnav .navigation-menu > li > a .arrow-down { display: none;

margin: 0 0 5px 0; }

.center-menu .wrapper { padding: 150px 12px 0 12px; } }

@media (min-width: 992px) {

.drop-menu-dark #topnav .has-submenu.active .submenu li.active > a { color: #fff; }

.drop-menu-dark .navigation-menu > li .submenu { background-color: #516c7c; }

.drop-menu-dark .navigation-menu > li .submenu:before { border-bottom: 12px solid #516c7c; }

.drop-menu-dark .navigation-menu > li .submenu li a { color: #adb5bd; }

.drop-menu-dark .navigation-menu > li .submenu li a:hover { color: #fff; }

.drop-menu-dark .navigation-menu > li .submenu li .submenu:before { border-right: 12px solid #516c7c; }

.drop-menu-dark .navigation-menu > li > ul > li.has-submenu:active > a, .drop-menu- dark .navigation-menu > li > ul > li.has-submenu:hover > a {

color: #fff; } }

@media (min-width: 992px) {

.unsticky-header #topnav, .unsticky-header .navbar-custom { position: absolute; } }

.boxed-layout .container-fluid { max-width: 1200px; }

.navbar-custom { background-color: #435966;

-webkit-box-shadow: 0 0 35px 0 rgba(154, 161, 171, 0.15); box-shadow: 0 0 35px 0 rgba(154, 161, 171, 0.15);

position: fixed; left: 0;

right: 0; height: 70px; z-index: 100;

padding: 0 12px; /* Search */ }

.navbar-custom .topnav-menu > li { float: left; }

.navbar-custom .topnav-menu .nav-link { padding: 0 15px;

color: #ced4da; min-width: 32px; display: block; line-height: 70px; text-align: center; max-height: 70px; }

.navbar-custom .dropdown.show .nav-link { background-color: rgba(255, 255, 255, 0.05); }

.navbar-custom .dropdown-menu { border-radius: 0 0 0.25rem 0.25rem; }

.navbar-custom .app-search { overflow: hidden;

height: 70px; display: table; max-width: 180px; margin-right: 20px; }

.navbar-custom .app-search .app-search-box { display: table-cell;

vertical-align: middle; }

.navbar-custom .app-search .app-search-box input::-webkit-input-placeholder { font-size: 0.8125rem;

color: #adb5bd; }

.navbar-custom .app-search .form-control { border: none;

height: 38px; padding-left: 20px; padding-right: 0; color: #fff;

background-color: rgba(255, 255, 255, 0.07);

border-color: rgba(255, 255, 255, 0.07);

-webkit-box-shadow: none; box-shadow: none;

border-radius: 30px 0 0 30px; }

.navbar-custom .app-search .input-group-append { margin-left: 0;

z-index: 4; }

.navbar-custom .app-search .btn { background-color: rgba(255, 255, 255, 0.07); border-color: transparent;

color: rgba(255, 255, 255, 0.7); border-radius: 0 30px 30px 0; -webkit-box-shadow: none !important;

box-shadow: none !important; }

.navbar-custom .button-menu-mobile { border: none;

color: #fff;

display: inline-block; height: 70px; line-height: 70px; width: 60px;

background-color: transparent; font-size: 24px;

cursor: pointer; }

.navbar-custom .button-menu-mobile.disable-btn { display: none; }

@media (max-width: 767.98px) { body {

padding-bottom: 80px; }

.pro-user-name { display: none; }

.navbar-custom { padding: 0 0 0 12px; }

.logo-box { padding-right: 0; }

.logo-box .logo-lg { display: none !important; }

.logo-box .logo-sm {

display: block !important; } } /* Notification */

.noti-scroll { max-height: 230px; }

.notification-list { margin-left: 0; }

.notification-list .noti-title { background-color: #fff; padding: 15px 20px; }

.notification-list .noti-icon { font-size: 21px;

vertical-align: middle; }

.notification-list .noti-icon-badge { display: inline-block;

position: absolute; top: 16px;

right: 10px; }

.notification-list .notify-item { padding: 12px 20px; }

.notification-list .notify-item .notify-icon { float: left;

height: 36px; width: 36px; font-size: 18px; line-height: 36px; text-align: center; margin-right: 10px; border-radius: 50%; color: #fff; }

.notification-list .notify-item .notify-details { margin-bottom: 5px;

overflow: hidden; margin-left: 45px; text-overflow: ellipsis; white-space: nowrap; color: #343a40; }

.notification-list .notify-item .notify-details b { font-weight: 500; }

.notification-list .notify-item .notify-details small { display: block; }

.notification-list .notify-item .notify-details span { display: block;

overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }

.notification-list .notify-item .user-msg { margin-left: 45px;

white-space: normal; line-height: 16px; }

.notification-list .profile-dropdown .notify-item { padding: 7px 20px; }

.profile-dropdown { width: 170px; }

.profile-dropdown i { vertical-align: middle; margin-right: 5px; }

.nav-user {

padding: 0 12px !important; }

.nav-user img {

height: 32px; width: 32px; }

.topbar-dark .navbar-custom { background-color: #435966 !important; /* Search */ }

.topbar-dark .navbar-custom .topnav-menu .nav-link { color: rgba(255, 255, 255, 0.6); }

.topbar-dark .navbar-custom .dropdown.show .nav-link { background-color: rgba(255, 255, 255, 0.05); }

.topbar-dark .navbar-custom .app-search input::-webkit-input-placeholder { color: #adb5bd !important; }

.topbar-dark .navbar-custom .app-search .form-control { color: #fff;

background-color: rgba(255, 255, 255, 0.07); border: none; }

.topbar-dark .navbar-custom .app-search .btn { color: #adb5bd;

background-color: rgba(255, 255, 255, 0.07); }

.dropdown-megamenu { left: 5% !important; right: 5% !important; }

.page-title-box .page-title { font-size: 1.25rem; margin: 0;

line-height: 75px; color: #323a46; }

.page-title-box .page-title-right { float: right;

margin-top: 22px; }

.page-title-box .breadcrumb { padding-top: 5px; }

@media (max-width: 767.98px) {

.page-title-box .page-title { display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; line-height: 70px; }

.page-title-box .breadcrumb { display: none; } }

@media (max-width: 640px) {

.page-title-box .page-title-right { display: none; } }

@media (max-width: 419px) {

.page-title-box .breadcrumb { display: none; } }

Приложение 5

Пример оформления JavaScript для прототипа информационной системы

!function ($) {

"use strict";

var Components = function () { }; //initializing tooltip

Components.prototype.initTooltipPlugin = function () { $.fn.tooltip && $('[data-toggle="tooltip"]').tooltip()

//initializing popover Components.prototype.initPopoverPlugin = function () {

$.fn.popover && $('[data-toggle="popover"]').popover()

//initializing Slimscroll Components.prototype.initSlimScrollPlugin = function () {

$.fn.slimScroll && $(".slimscroll").slimScroll({ height: 'auto',

position: 'right', size: "8px", touchScrollStep: 20, color: '#9ea5ab'

});

//initializing form validation Components.prototype.initFormValidation = function () {

$(".needs-validation").on('submit', function (event) { $(this).addClass('was-validated');

if ($(this)[0].checkValidity() === false) { event.preventDefault(); event.stopPropagation();

return false;

}

return true; });

//initializing custom modal Components.prototype.initCustomModalPlugin = function() {

$('[data-plugin="custommodal"]').on('click', function(e) { e.preventDefault();

var modal = new Custombox.modal({ content: {

target: $(this).attr("href"),

effect: $(this).attr("data-animation")

}, overlay: {

color: $(this).attr("data-overlayColor")

}

});

// Open modal.open();

});

//initilizing

Components.prototype.init = function () { var $this = this; this.initTooltipPlugin(), this.initPopoverPlugin(), this.initSlimScrollPlugin(), this.initFormValidation(), this.initCustomModalPlugin(), this.initCounterUp(), this.initPeityCharts(),

this.initKnob();

this.initTippyTooltips();

$.Components = new Components, $.Components.Constructor = Components }(window.jQuery),

function($) { "use strict"; /**

Portlet Widget */

var Portlet = function() { this.$body = $("body"), this.$portletIdentifier = ".card",

this.$portletCloser = '.card a[data-toggle="remove"]', this.$portletRefresher = '.card a[data-toggle="reload"]'

};

//on init

Portlet.prototype.init = function() {

//Panel closest var $this = this;

$(document).on("click",this.$portletCloser, function (ev) { ev.preventDefault();

var $portlet = $(this).closest($this.$portletIdentifier); var $portlet_parent = $portlet.parent();

$portlet.remove();

if ($portlet_parent.children().length == 0) { $portlet_parent.remove();

}

});

//Panel Reload

$(document).on("click",this.$portletRefresher, function (ev) { ev.preventDefault();

var $portlet = $(this).closest($this.$portletIdentifier);

// This is just a simulation, nothing is going to be reloaded

$portlet.append('<div class="card-disabled"><div class="ca-portletsd- loader"></div></div>');

var $pd = $portlet.find('.card-disabled'); setTimeout(function () {

$pd.fadeOut('fast', function () { $pd.remove();

});

}, 500 + 300 * (Math.random() * 5)); });

$.Portlet = new Portlet, $.Portlet.Constructor = Portlet }(window.jQuery),

function ($) { 'use strict';

var App = function () { this.$body = $('body'), this.$window = $(window)

};

/**

Resets the scroll */

App.prototype._resetSidebarScroll = function () { // sidebar - scroll container $('.slimscroll-menu').slimscroll({

height: 'auto', position: 'right', size: "8px", color: '#9ea5ab', wheelStep: 5,

touchScrollStep: 20 });

// Topbar - main menu $('.navbar-toggle').on('click', function (event) {

$(this).toggleClass('open'); $('#navigation').slideToggle(400);

}); $('.navigation-menu>li').slice(-2).addClass('last-elements');

$('.navigation-menu li.has-submenu a[href="#"]').on('click', function (e) { if ($(window).width() < 992) {

e.preventDefault(); $(this).parent('li').toggleClass('open').find('.submenu:first').toggleClass('open');

}

});

// Preloader

$(window).on('load', function () { $('#status').fadeOut(); $('#preloader').delay(350).fadeOut('slow');

});

}

<<< < Предыдущая 1 2 3 4 5 67 / 77

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]