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

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

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

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

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

Добавлен: 23.11.2023

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

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

ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.
Министерство образования и науки Российской ФедерацииФедеральное государственное бюджетное образовательное учреждениеВысшего профессионального образованияУфимский университет науки и технологийКафедра вычислительной математики и кибернетики

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

по дисциплине«Веб-программирование»Тема«Сверстать дизайн-макет приложения с применением Twitter Bootstrap»Выполнилстудент группы МО-322Салихов А.Р.Провериладоцент кафедры ВМиКВоробьева Г. Р.Уфа 2023Краткая теория о бутстрапе:Бутстрап – свободный набор инструментов для создания сайтов и веб-приложений.Включает в себя HTML- и CSS-шаблоны оформления для типографии, веб-форм,кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса, включая js-расширения. Бутстрап использует современные наработки html и css.Описание хода работы:1.Подготовили файлы к вёрсткеВ каталоге создали:

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

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

  • папку img, в которой будут храниться изображения и иконки.
2. Подключили Bootstrap 5 через CDN3. Ход работыМакет веб-сайтаТег можно добавить иконку, отображаемую вместе с названием на вкладке в браузере.  <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ообщества



      •        


       


    Результат

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

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