Пристегните сапоги,
и давайте начнем с Bootstrap.
Уверен, твои пальцы зудятся, чтобы обнять Bootstrap.
Итак, первый шаг, перейдите к
инструкциям по упражнению, которые следуют этому видео
на странице курса Bootstrap на Coursera.
А затем в инструкции
вы увидите ссылку на этот файл Bootstrap4-starter.zip.
Загрузите zip-файл на свой компьютер.
Кроме того, пошаговые инструкции, проиллюстрированные в этом видео,
также будут приведены в инструкциях по упражнению, которые следуют этому видео.
Там у вас будет доступ к любому фрагменту кода, который вам нужен для этого упражнения.
Это было бы справедливо и в отношении всех учений в будущем.
Итак, если вам нужно завладеть фрагментами кода,
вот где вы их найдете.
После того, как вы скачаете zip-файл,
переместите этот zip-файл в удобное место на вашем компьютере.
Итак, здесь я переместил его в папку с именем Coursera на моем компьютере,
а затем у меня есть zip-файл с таким длинным именем.
Просто разархивируйте файл.
После того, как вы распакуете файл,
вы найдете папку с именем Bootstrap4, созданную на вашем компьютере.
Внутри папки Bootstrap4,
вы увидите другую папку с именем Mistration, там.
Перейдите в папку Mistration, и вы увидите там два файла,
index.html и файл package.json.
Теперь откройте окно команд или
терминал, а затем перейдите в эту папку в окне команд или терминале.
В командной строке введите npm install.
Обратите внимание, что у меня уже есть файл package.json.
Таким образом, файл package.json настроен так, чтобы
зависимость разработки lite-сервера была установлена, если я введу npm install.
Таким образом, как только вы введете npm install,
вы увидите, что сервер lite-будет установлен в вашей папке node_modules каждый.
Как только это будет завершено,
откройте эту папку в своем любимом редакторе.
После того, как папка открыта в редакторе,
создайте файл.gitignore, а
затем поместите node_modules в файл gitignore и сохраните.
Таким образом, это должно гарантировать, что при выполнении gitcommit
папка node_modules не будет зафиксирована.
После этого пришло время пойти и получить Bootstrap для использования в нашем проекте.
Прежде чем мы получим Bootstrap
, давайте сделаем фиксацию текущего состояния файла.
Итак, сделайте git init и инициализируйте свой репозиторий git.
Затем вы можете проверить статус git,
и вы увидите, что эти файлы должны быть зафиксированы,
добавьте все файлы,
gitcommit -m «Начальная настройка».
Таким образом, это отправная точка вашей папки в данный момент.
Таким образом, с этим ваша отправная точка вашего веб-проекта теперь была привержена git.
Теперь вы можете настроить этот git для синхронизации с онлайн-репозиторием,
как мы говорили в упражнениях git.
Таким образом, вы можете настроить репозиторий либо на Bitbucket, либо на Github, а затем
синхронизировать этот проект с этим репозиторием git.
Наш следующий шаг - пойти и получить Bootstrap.
Для этого добавьте тип приглашения npm install bootstrap @4 .0.0, а также —save,
и пусть Bootstrap будет установлен.
После установки Bootstrap
мы понимаем, что нам также нужно установить его одноранговый узел,
который является jQuery, а также Popper.js.
Итак, давайте продолжим и установим как jQuery, так и Popper.js в эту папку проекта.
Итак, чтобы сделать это, добавьте тип приглашения npm install
jquery @3 .3.1
и Popper.js @1 .12.9 —save.
Теперь, всякий раз, когда я устанавливаю любой из пакетов
npm, я явно указываю версию пакета, который вы должны установить.
Причина этого в том, что я хочу убедиться, что по мере прохождения этого упражнения
все шаги будут работать правильно.
Поэтому я указываю точную версию модулей npm, которые будут установлены.
Итак, здесь мы устанавливаем jQuery версии 3.3.1 и Popper.js версии 1.12.9.
Впоследствии, также, я уточню точные версии модулей, которые будут установлены.
Так что давайте продолжим и установим их.
И как только они будут установлены,
мы можем перейти к следующему шагу.
Возвращаясь к нашей папке проекта,
вы увидите, что если вы заходите в node_modules,
вы увидите там папку с именем Bootstrap.
И внутри папки с именем Bootstrap
вы найдете папку с именем dist.
Итак, внутри папки dist
вы найдете две подпапки с именами CSS и js.
Если вы войдете в папку CSS,
вы найдете здесь целую кучу предварительно скомпилированных файлов CSS.
Тот, который представляет интерес для нас в начале, - это Bootstrap min.css.
Это файл, который мы собираемся включить в наш
файл index.html, чтобы использовать Bootstrap в нашем проекте.
Аналогичным образом, перейдя в папку js,
вы увидите, что есть файл Bootstrap min.js.
Мы собираемся включить это также в наш index.htm.
Так что это будет следующий шаг, который вы увидите, как я делаю.
Прежде чем перейти к следующему шагу,
давайте запустим наш lite-сервер, чтобы мы могли видеть изменения, которые мы вносим в
index.html немедленно отражаются на нашей веб-странице в режиме реального времени.
Итак, давайте запустим lite-серверы.
Итак, введите тип приглашения npm start,
а затем это должно запустить ваш сервер lite-сервера.
Теперь вы можете увидеть на экране
мой редактор слева и текущую версию страницы index.html справа.
Итак, как вы можете видеть,
я уже настроил страницу index.html с некоторым контентом.
Эта веб-страница выглядит как типичная веб-страница профессора информатики.
Давайте теперь откроем страницу index.html в нашем редакторе.
И затем в головной части страницы index.html,
прямо перед заголовком,
я собираюсь вставить немного кода.
Этот фрагмент кода дается вам в инструкциях.
Таким образом, вы можете просто скопировать и вставить этот фрагмент кода,
и я расскажу вам о том, что пытается сделать этот фрагмент кода.
Вы заметите, что у меня есть три мета-тэга.
Первый говорит, что charset = «utf-8".
Таким образом, это Unicode, который будет использоваться.
Вторая строка, в которой говорится meta name = «viewport»,
я собираюсь вернуться и объяснить эту конкретную строку
вам в следующем уроке, когда мы посмотрим на отзывчивый веб-дизайн.
Теперь позвольте мне обратить ваше внимание на эту конкретную строку, в которой
говорится ссылка rel = «stylesheet», а затем href.
Обратите внимание, что я указываю href как «node_modules/bootstrap/dist/css/bootstrap.min.css».
Итак, я указываю, что файл bootstrap.min.css,
который содержит классы CSS, соответствующие Bootstrap, которые мы
загрузили с помощью NPM в нашу папку node_modules,
я собираюсь включить это в главу моей страницы index.html.
Поэтому вам нужно включить классы CSS, предоставляемые Bootstrap.
Вам также нужно включить классы JavaScript, предоставляемые Bootstrap,
что мы собираемся сделать внизу этой страницы.
Перейдя к нижней части этой страницы, обратите внимание,
непосредственно перед закрывающим тегом тела,
я собираюсь вставить в код, чтобы включить все скрипты там.
Поэтому, чтобы сделать это,
я просто вставляю в три строки для сценария, чтобы включить jQuery,
Popper.js, а также Bootstrap min.js.
И обратите внимание на порядок, в который я включил это.
Таким образом, Bootstrap находится внизу.
Затем, поскольку Bootstrap зависит как от jQuery, так и от Popper в этом порядке,
поэтому я сначала введу jQuery.
И затем, после этого, мы вводим Popper, а затем, наконец,
Bootstrap min.js в нижней части файла index.html.
Теперь это включено в нижней части страницы.
Потому что, когда вы загружаете страницу с веб-сервера,
вы хотите, чтобы классы CSS были загружены немедленно, так что,
когда страница начинает рендеринг, когда
JavaScript извлекается, JavaScript должен выполнить, чтобы внести изменения
на вашу страницу с кодом JavaScript,
и что займет немного времени.
Таким образом, вы не хотите, чтобы пользователь ожидал
загрузки всей страницы, прежде чем они увидят что-то в окне своего браузера.
Вот почему мы обычно загружаем классы JavaScript в
конце нашей html-страницы непосредственно перед body tech.
После внесения этих изменений,
сохраним файл.
Теперь, причина, по которой я показываю
файл index.html в моем редакторе, а также в браузере рядом с ним, в
тот момент, когда вы сохраняете изменения, которые вы сделали в файле index.html,
обратите внимание, как рендеринг браузера этого файла
немедленно обновляется и смотрите Bootstrap уже в действии на на странице.
Прямо сейчас вы увидите, что ваша страница использует Times New Roman для отображения всего контента.
Как только я сохраняю веб-страницу,
вы заметили, что шрифты, используемые на вашей веб-странице, изменились.
Теперь ваша веб-страница настроена на использование классов Bootstrap,
и она использует типографию Bootstraps по умолчанию для отображения всего содержимого.
По умолчанию Bootstrap использует Helvetica Neue для шрифта.
Вы можете изменить шрифт по умолчанию для bootstrap и т. Д.,
Но это будет выходить за рамки нашего обсуждения прямо сейчас.
Таким образом, как только вы настроите свою страницу index.html и сохраните ее,
вы сразу увидите Bootstrap вступает в действие на нашей веб-странице.
Так вот как я буду продолжать иллюстрировать,
поскольку мы добавляем различные бутстрапы, классы CSS
и компоненты на нашу веб-страницу,
как рендеринг его в нашем браузере будет продолжать меняться.
Теперь, очевидно, рендеринг страницы в нашем браузере все еще ужасен.
Это лучше, чем типичная веб-страница профессоров информатики,
но определенно не читается.
Теперь нам нужно привести в действие различные классы CSS и
компоненты JavaScript, которые
предоставляет наш веб-интерфейс Bootstrap, чтобы создать нашу веб-страницу.
Поэтому мы будем делать это шаг за шагом, когда мы проходим через это упражнение.
Это может быть удобное время для вас, чтобы сделать git
фиксацию изменений, которые вы сделали, чтобы в конце этого упражнения
ваше состояние папки проекта будет сохранено в вашем репозитории git.
Переходя в мою папку Mistration на другой вкладке моего окна терминала,
если я введу статус git,
теперь я вижу, что мой файл index.html и пакет JSON-файла были изменены.
Так что я собираюсь сделать фиксацию.
Итак, теперь мой статус
папки в конце этого упражнения был зафиксирован в моем репозитории git.
Вы можете синхронизировать это с вашим онлайн-репозиторием, чтобы
состояние вашего проекта было сохранено на этом этапе.
С этим мы завершаем наше первое упражнение Bootstrap.
Теперь вы видели, как мы можем настроить Bootstrap для использования в нашем веб-проекте. По мере того ,
как мы переходим к следующим несколько упражнений,
мы собираемся сотрудников Bootstrap классы для разработки наших веб-страниц.