Файл: Лабораторная работа 2 по дисциплине Вебпрограммирование Тема Сверстать дизайнмакет приложения с применением Twitter Bootstrap Выполнил студент группы мо322.docx

Скачать файл
Заказать решение

ВУЗ: Не указан

Категория: Не указан

Дисциплина: Не указана

Добавлен: 23.11.2023

Просмотров: 29

Скачиваний: 5

ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.

Министерство образования и науки Российской Федерации

Федеральное государственное бюджетное образовательное учреждение

Высшего профессионального образования

Уфимский университет науки и технологий

Кафедра вычислительной математики и кибернетики

  1. Лабораторная работа №2


по дисциплине

«Веб-программирование»

Тема

«Сверстать дизайн-макет приложения с применением Twitter Bootstrap»

Выполнил

студент группы МО-322

Салихов А.Р.
Проверила

доцент кафедры ВМиК

Воробьева Г. Р.

Уфа 2023


Краткая теория о бутстрапе:

Бутстрап – свободный набор инструментов для создания сайтов и веб-приложений.

Включает в себя HTML- и CSS-шаблоны оформления для типографии, веб-форм,

кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса, включая js-

расширения. Бутстрап использует современные наработки html и css.
Описание хода работы:
1.Подготовили файлы к вёрстке
В каталоге создали:

  • новый файл – index.html;

  • папку css, в которой будет храниться файл style.css;

  • папку img, в которой будут храниться изображения и иконки.

2. Подключили Bootstrap 5 через CDN

3. Ход работы

Макет веб-сайта




Тег можно добавить иконку, отображаемую вместе с названием на вкладке в браузере.

 

<body >…body>

В данном теге хранится содержание веб-страницы (контента), отображаемого в браузере.

Шапка страницы

Первым, что необходимо сделать, является шапка страницы. Для этого существует тег
…
.

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


 


           

       


Класс nav представляет собой панель навигации, nav-link – кнопка с ссылкой, link-dark – цвет ссылки.

   


               


    •            


    •            


    •            


  •                

    Баннеры

    Для написания блока баннеров следует воспользоваться готовым компонентом Bootstrap - Сarousel

       

    Товар

       


           

    Хиты



         


         


           


               

               


                   

    Сухие корма для кошек KiteKat"
    1,5 кг



                   
    1781


                   

               


           


         


         


           


               

               


                   

    Сухие корма для кошек Whiskas"
    1,5 кг



                   
    1188


                   

               


       

           


         


         


           


               

               


                   

    Сухие корма для кошек Farmina ND"
    1,5 кг



                   
    1154


                   

               


         

           


         


    Style.css для сайта

    .block-title {

        padding-top: 20px;

    }

    .card-hits {

        width: 15rem;

        padding: 3px 3px;

    }

    .button7 {

        font-weight: 700;

        color: white;

        text-decoration: none;

        padding: .8em 1em calc(.8em + 3px);

        border-radius: 3px;

        background: #4A54B5;

        box-shadow: 0 -3px rgb(53,167,110) inset;

        transition: 0.2s;

        margin: 3px 4px;

        height: 54px;

      }

      .button7:hover { background: rgb(53, 167, 110); }

      .button7:active {

        background: rgb(33,147,90);

        box-shadow: 0 3px rgb(33,147,90) inset;

      }

    .basta {

    background-color: #3B8681;
    }

    footer{

    background-color: #3B8681;
    }

    .container-md

    {

     

      font-weight: 700;

        color: white;

        text-decoration: none;

    }

    #gg{

    margin-bottom: 20px;

    }

    .f1

    {

    color: white;

    }

    .f2

    {

    color: #21EB66;
    }

    .f1,.f2{

    padding: 2px 50px ;

    margin: 10px 10px;

    }

    .im

    {

    margin-right: 40px;

    height: 4rem;

    width: 4rem;

    }

    Подвал страницы
    Подвал страницы имеет сходство с «шапкой», однако подвал делится несколько частей.

    div class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4" backgroundcolor="#FFF">

           


           


                 

    • Интернет_магазин
      ВозможностиРазработчикам



      •            

    • Поддержка
      База_знанийФорум



      •            

    • Cообщества



      •        


       


    Результат

    В результате верстки по макету получается следующая веб-страница:

Смотрите также файлы