как создать мобильную версию( Responsive Web Design)

[BronenosezPotemkin]

Инструкция внизу.
Я так понимаю что если я хочу использовать CDN Bootstrap то я не должна ничего Download а взять только строчки кода и воткнуть в страницу с кодом.
Правильно мыслю?

//Инструкция

• Download Bootstrap from the main site of Bootstrap - https://getbootstrap.com/ – _if you prefer this option, you can also follow the instructions from the Bootstrap website on where to store the Bootstrap files in your web server
• • _Include Bootstrap from a CDN (Content Delivery Network). You can find the URL of the CDNs at the Download page of https://getbootstrap.com/docs/4.3/getti ... /download/ (do not worry about that 4.3 – _this was the version when this lecture was written – _you just need to find the button o_r_ _t_h_e_ _l_i_n_k_ _t_o_ _D_o_w_n_l_o_a_d_ _i_n_ _t_h_e_ _m_a_i_n_ _p_a_g_e_)_.
_ _T_h_e_ _C_D_N_’s_ _c_a_n_ _b_e_ _f_o_u_n_d_ _i_f_ _y_o_u_ _s_c_r_o_l_l_ _d_o_w_n_ _t_h_e_ _D_o_w_n_l_o_a_d_ _page – _here below is the image showing the part related to the Bootstrap CDN – _note that you can use the Copy (shown in a red circle in the image here) to copy those lines and then paste in your HTML document .

Если вы хотите использовать его из cdn, то надо только поставить линк на странице на его css файл:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/boot ... ap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

Если собираетесь пользоваться его javascript контролями, то нужно ещё 3 линка (jquery.js, popper.js и bootstrap.min.js):

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@ ... per.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/boot ... rap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

[solution]

Инструкция внизу.
Я так понимаю что если я хочу использовать CDN Bootstrap то я не должна ничего Download а взять только строчки кода и воткнуть в страницу с кодом.
Правильно мыслю?

//Инструкция

• Download Bootstrap from the main site of Bootstrap - https://getbootstrap.com/ – _if you prefer this option, you can also follow the instructions from the Bootstrap website on where to store the Bootstrap files in your web server
• • _Include Bootstrap from a CDN (Content Delivery Network). You can find the URL of the CDNs at the Download page of https://getbootstrap.com/docs/4.3/getti ... /download/ (do not worry about that 4.3 – _this was the version when this lecture was written – _you just need to find the button o_r_ _t_h_e_ _l_i_n_k_ _t_o_ _D_o_w_n_l_o_a_d_ _i_n_ _t_h_e_ _m_a_i_n_ _p_a_g_e_)_.
_ _T_h_e_ _C_D_N_’s_ _c_a_n_ _b_e_ _f_o_u_n_d_ _i_f_ _y_o_u_ _s_c_r_o_l_l_ _d_o_w_n_ _t_h_e_ _D_o_w_n_l_o_a_d_ _page – _here below is the image showing the part related to the Bootstrap CDN – _note that you can use the Copy (shown in a red circle in the image here) to copy those lines and then paste in your HTML document .

Если вы хотите использовать его из cdn, то надо только поставить линк на странице на его css файл:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/boot ... ap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

Если собираетесь пользоваться его javascript контролями, то нужно ещё 3 линка (jquery.js, popper.js и bootstrap.min.js):

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@ ... per.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/boot ... rap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

Я copy - past с источника(внизу) следуя инструкции... вроде аналогично с вашей.....
But you don't have .slim.min.js"....

Так можно оставить?


//1 вариант

<title>Toys</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/boot ... ap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/boot ... rap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ ... per.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script

</head>


//2 вариант(линки только)

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/boot ... ap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/boot ... rap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ ... per.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

[BronenosezPotemkin]

Я copy - past с источника(внизу) следуя инструкции... вроде аналогично с вашей только версии разные.

Так можно оставить?

<title>Toys</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/boot ... ap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/boot ... rap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ ... per.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script

</head>

В принципе можно, это более старая версия, но у вас в задании написано: do not worry about that 4.3 – _this was the version when this lecture was written – you just need to find the button or the link to Download in the main page

[solution]

Я copy - past с источника(внизу) следуя инструкции... вроде аналогично с вашей только версии разные.

Так можно оставить?

<title>Toys</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/boot ... ap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/boot ... rap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ ... per.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script

</head>

В принципе можно, это более старая версия, но у вас в задании написано: do not worry about that 4.3 – _this was the version when this lecture was written – you just need to find the button or the link to Download in the main page

I don't like outdated version
I put code as below(just copy link from source mentioned in the lecture)

Is it fine?

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/boot ... ap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/boot ... rap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ ... per.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

[BronenosezPotemkin]

I don't like outdated version
I put code as below(just copy link from source mentioned in the lecture)

Is it fine?

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/boot ... ap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/boot ... rap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ ... per.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

looks good to me

[solution]

I don't like outdated version
I put code as below(just copy link from source mentioned in the lecture)

Is it fine?

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/boot ... ap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/boot ... rap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ ... per.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

looks good to me

Also need to create several pages. One of them is a contact page(see instruction below)
Are there any patterns similar this page exist to take a look?

//instruction
a Contact Us page - you will show the email address, telephone, address, URL to the facebook page (a fake one, of course) of the company and you will also provide a small form (name, email, comment area, and a submit button) so the company can collect some information from the user (do not worry about preparing the program to send the email and making it work…I just want to make sure that you are able to build a form that is mobile ready using the new HTML 5 input elements and other tags to make your form accessible)

[BronenosezPotemkin]

Also need to create several pages. One of them is a contact page(see instruction below)
Are there any patterns similar this page exist to take a look?

//instruction
a Contact Us page - you will show the email address, telephone, address, URL to the facebook page (a fake one, of course) of the company and you will also provide a small form (name, email, comment area, and a submit button) so the company can collect some information from the user (do not worry about preparing the program to send the email and making it work…I just want to make sure that you are able to build a form that is mobile ready using the new HTML 5 input elements and other tags to make your form accessible)

Ну вот, например, быстрым гугельем нашлось. Там, правда, ещё дополнительная библиотека используется, но базовые классы бутстраповские.
https://mdbootstrap.com/docs/jquery/forms/contact/

[solution]

Also need to create several pages. One of them is a contact page(see instruction below)
Are there any patterns similar this page exist to take a look?

//instruction
a Contact Us page - you will show the email address, telephone, address, URL to the facebook page (a fake one, of course) of the company and you will also provide a small form (name, email, comment area, and a submit button) so the company can collect some information from the user (do not worry about preparing the program to send the email and making it work…I just want to make sure that you are able to build a form that is mobile ready using the new HTML 5 input elements and other tags to make your form accessible)

Ну вот, например, быстрым гугельем нашлось. Там, правда, ещё дополнительная библиотека используется, но базовые классы бутстраповские.
https://mdbootstrap.com/docs/jquery/forms/contact/

I can see html form and different classes. But there is no css....

Where those and other classes are located(see below)?

// classes form html.file
section class="mb-4"
div class="row"

Cam I use for bootstrap with CDN similar as below?

https://www.tutorialrepublic.com/codela ... login-form

[BronenosezPotemkin]

I can see html form and different classes. But there is no css....

Where those and other classes are located(see below)?

// classes form html.file
section class="mb-4"
div class="row"

Cam I use for bootstrap with CDN similar as below?

https://www.tutorialrepublic.com/codela ... login-form

row - это класс бутстрапа, css которого вы уже импортировали на страницу.
section class="mb-4" - это вам не надо, это класс другой библиотеки.

Вам нужен внешний container или container-fluid:

Code: Select all

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

Изучите прежде всего bootstrap grid system:
https://getbootstrap.com/docs/4.5/layout/grid/

[solution]

I can see html form and different classes. But there is no css....

Where those and other classes are located(see below)?

// classes form html.file
section class="mb-4"
div class="row"

Cam I use for bootstrap with CDN similar as below?

https://www.tutorialrepublic.com/codela ... login-form

row - это класс бутстрапа, css которого вы уже импортировали на страницу.
section class="mb-4" - это вам не надо, это класс другой библиотеки.

Вам нужен внешний container или container-fluid:

Code: Select all

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

Изучите прежде всего bootstrap grid system:
https://getbootstrap.com/docs/4.5/layout/grid/

В примере учителя показано больше линков чем вы написали: 7 вместо 4.
Может быть что учителя линки(см внизу):

1. дублируются и надо избавится от пару из них

2. использовать все линки - хуже не будет....

3. Убрать ненужные линки(какие?) тк это может это занизит скорость сайта или вызвать другой негативный эффект?

// учителя линки
<head>
<title>Bootstrap Example 1</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/boot ... ap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ ... per.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/boot ... rap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!--
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstra ... ap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/j ... "></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstra ... "></script> -->
</head>

[BronenosezPotemkin]

...

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

[solution]

...

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

В общем я не буду с ней спорить. Она показала страницу как начать - я использую эти линки(внизу).
Должна я что то убрать/изменить или как есть нормально для следующих страниц?

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/boot ... ap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/boot ... rap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ ... per.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script

[BronenosezPotemkin]

...

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

В общем я не буду с ней спорить. Она показала страницу как начать - я использую эти линки(внизу).
Должна я что то убрать/изменить или как есть нормально для следующих страниц?

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/boot ... ap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/boot ... rap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ ... per.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script

Ну я бы поменяла бы порядок javascript линков - bootstrap.js после jquery + popper.

[solution]

...

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

В общем я не буду с ней спорить. Она показала страницу как начать - я использую эти линки(внизу).
Должна я что то убрать/изменить или как есть нормально для следующих страниц?

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/boot ... ap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/boot ... rap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ ... per.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script

Ну я бы поменяла бы порядок javascript линков - bootstrap.js после jquery + popper.

А почему?
Ведь от перемены мест слагаемых - сумма не меняется.

Т.е должно быть(см внизу):

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/boot ... ap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ ... per.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/boot ... rap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

[BronenosezPotemkin]

А почему?
Ведь от перемены мест слагаемых - сумма не меняется.

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

[solution]

А почему?
Ведь от перемены мест слагаемых - сумма не меняется.

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

Исходя из этого stylesheet - первым загружается?
И если поместить его в конце линков то будет пустая страница или не влияет?

[BronenosezPotemkin]

Исходя из этого stylesheet - первым загружается?
И если поместить его в конце линков то будет пустая страница или не влияет?

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

[solution]

Исходя из этого stylesheet - первым загружается?
И если поместить его в конце линков то будет пустая страница или не влияет?

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

The part of the form as below.
How to make comments area wider(in bold)?
thanks


<body>
<h3>Test Form</h3>
<form class="form-hotizontal" action="index.php" method="post"></form>
<div class="form-group"><label class="col-sm-2 control-label" for="fullname">Name</label>
<div class="col-sm-10"><input id="name" class="form-control" name="name" type="text" value="" placeholder="Name in Full" /></div>
<div class="form-group"><label class="col-sm-2 control-label" for="email">Email</label>
<div class="col-sm-10"><input id="email" class="form-control" name="email" type="text" value="" placeholder="E-Mail" /></div>
<div class="form-group"><label class="col-sm-2 control-label" for="comments">Comments</label>
<div class="col-sm-10"><input id="comments" class="form-control" name="name" type="text" value="" placeholder="Comments" /></div>
</div>
<div class="form-group">
<div class="col-sm-10"><button class="btn btn-primary" type="submit">Submit</button></div>
</div>
</div>
</div>
</body>

[BronenosezPotemkin]

The part of the form as below.
How to make comments area wider(in bold)?
thanks


<body>
<h3>Test Form</h3>
<form class="form-hotizontal" action="index.php" method="post"></form>
<div class="form-group"><label class="col-sm-2 control-label" for="fullname">Name</label>
<div class="col-sm-10"><input id="name" class="form-control" name="name" type="text" value="" placeholder="Name in Full" /></div>
<div class="form-group"><label class="col-sm-2 control-label" for="email">Email</label>
<div class="col-sm-10"><input id="email" class="form-control" name="email" type="text" value="" placeholder="E-Mail" /></div>
<div class="form-group"><label class="col-sm-2 control-label" for="comments">Comments</label>
<div class="col-sm-10"><input id="comments" class="form-control" name="name" type="text" value="" placeholder="Comments" /></div>
</div>
<div class="form-group">
<div class="col-sm-10"><button class="btn btn-primary" type="submit">Submit</button></div>
</div>
</div>
</div>
</body>

wider? ну поставьте максимальный класс col-sm-12 - на всю страницу. Может, вы увеличить по высоте имеете в виду? Тогда вам надо использовать textarea .

[solution]

The part of the form as below.
How to make comments area wider(in bold)?
thanks


<body>
<h3>Test Form</h3>
<form class="form-hotizontal" action="index.php" method="post"></form>
<div class="form-group"><label class="col-sm-2 control-label" for="fullname">Name</label>
<div class="col-sm-10"><input id="name" class="form-control" name="name" type="text" value="" placeholder="Name in Full" /></div>
<div class="form-group"><label class="col-sm-2 control-label" for="email">Email</label>
<div class="col-sm-10"><input id="email" class="form-control" name="email" type="text" value="" placeholder="E-Mail" /></div>
<div class="form-group"><label class="col-sm-2 control-label" for="comments">Comments</label>
<div class="col-sm-10"><input id="comments" class="form-control" name="name" type="text" value="" placeholder="Comments" /></div>
</div>
<div class="form-group">
<div class="col-sm-10"><button class="btn btn-primary" type="submit">Submit</button></div>
</div>
</div>
</div>
</body>

wider? ну поставьте максимальный класс col-sm-12 - на всю страницу. Может, вы увеличить по высоте имеете в виду? Тогда вам надо использовать textarea .

yes: по высоте.
if i use the code as below where can I put textarea id="w3review?

Should it probably be in css... but can I put something in bootstrap.css or I could not change anything in bootstrap.css?

//code to add for textarea
<textarea id="w3review" name="w3review" rows="4" cols="50">
At w3schools.com you will learn how to make a website. They offer free tutorials in all web development technologies.
</textarea>

[BronenosezPotemkin]

yes: по высоте.
if i use the code as below where can I put textarea id="w3review?

Should it probably be in css... but can I put something in bootstrap.css or I could not change anything in bootstrap.css?

//code to add for textarea
<textarea id="w3review" name="w3review" rows="4" cols="50">
At w3schools.com you will learn how to make a website. They offer free tutorials in all web development technologies.
</textarea>

Вам нужно пользоваться классами бутстрапа:

Code: Select all

<textarea class="form-control" id="exampleFormControlTextarea1" rows="4"></textarea>

И разуется, это надо писать в html file , а не в css .

Почему вы смотрите на сайт w3schools, а не на документацию бутстрап, там есть все объяснения и базовые примеры:
https://getbootstrap.com/docs/4.0/components/forms/

[solution]

yes: по высоте.
if i use the code as below where can I put textarea id="w3review?

Should it probably be in css... but can I put something in bootstrap.css or I could not change anything in bootstrap.css?

//code to add for textarea
<textarea id="w3review" name="w3review" rows="4" cols="50">
At w3schools.com you will learn how to make a website. They offer free tutorials in all web development technologies.
</textarea>

Вам нужно пользоваться классами бутстрапа:

Code: Select all

<textarea class="form-control" id="exampleFormControlTextarea1" rows="4"></textarea>

И разуется, это надо писать в html file , а не в css .

Почему вы смотрите на сайт w3schools, а не на документацию бутстрап, там есть все объяснения и базовые примеры:
https://getbootstrap.com/docs/4.0/components/forms/

I could not find <textarea> under form on link that you showed.

Where is this textarea?

I put(see below) but text area is not formatted....

How to make a high and a width that I want?

<!doctype html>
<html>
<head>
<title>Contact us</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstr ... ap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/j ... "></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstr ... "></script>
</head>

<body>
<h3>Test Form </h3>
<form class="form-hotizontal" role="form" method="post" action="index.php"/>
<div class="form-group">
<label for ="fullname" class="col-sm-2 control-label">Name</label>
<div class ="col-sm-10">
<input type="text" class="form-control" id="name" name="fullname" placeholder="Name in Full" value="" />
</div>

<div class="form-group">
<label for ="telephone" class="col-sm-2 control-label">Telephone</label>
<div class ="col-sm-10">
<input type="text" class="form-control" id="telephone" name="telephone" placeholder="Telephone" value="" />
</div>

<div class="form-group">
<label for ="email" class="col-sm-2 control-label">Email</label>
<div class ="col-sm-10">
<input type="text" class="form-control" id="email" name="email" placeholder="E-Mail" value="" />
</div>

<div class="form-group">
<label for ="name" class="col-sm-2 control-label">ID Number</label>
<div class ="col-sm-10">
<input type="text" class="form-control" id="idnumber" name="idnumber" placeholder="ID Number" value="" />
</div>

<textarea class="form-control" id="exampleFormControlTextarea1" rows="4"></textarea>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</body>
</html>

[BronenosezPotemkin]

I could not find <textarea> under form on link that you showed.

Where is this textarea?

I put(see below) but text area is not formatted....

How to make a high and a width that I want?

Textarea там есть, нужно поскролить посмотрите под Form controls

Textarea отформатирован, так как вы написали. Хотите красивее, надо добавить ещё html . Вот, копирую с той же страницы:

Code: Select all

<div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>

Высота textarea задается количеством rows, а ширина внешним контейнером, добавьте, например, col-sm-10 на внешний div как в ваших других примерах. Я, конечно, могу написать страницу полностью, но тогда в чем смысл. Почитайте всё-таки документацию.

[solution]

Textarea там есть, нужно поскролить посмотрите под Form controls

Textarea отформатирован, так как вы написали. Хотите красивее, надо добавить ещё html . Вот, копирую с той же страницы:

Code: Select all

<div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>

Высота textarea задается количеством rows, а ширина внешним контейнером, добавьте, например, col-sm-10 на внешний div как в ваших других примерах. Я, конечно, могу написать страницу полностью, но тогда в чем смысл. Почитайте всё-таки документацию.

The validatror shows error when I put http of the page pointing to label class (below)...

https://validator.w3.org

//errors
1. Error: The value of the for attribute of the label element must be the ID of a non-hidden form control.
From line 14, column 25; to line 14, column 77
rm-group"><label class="col-sm-2 control-label" for="fullname">Name</

2. Error: The value of the for attribute of the label element must be the ID of a non-hidden form control.
From line 18, column 25; to line 18, column 77
rm-group"><label class="col-sm-2 control-label" for="comments">Commen

How to dix this error?
Thanks.


//code

<!doctype html>
<html>
<head>
<title>Contact us</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstr ... ap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/j ... "></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstr ... "></script>
</head>

<body>
<h3>Form</h3>
<form class="form-hotizontal" action="index.php" method="post"></form>
<div class="form-group"><label class="col-sm-2 control-label" for="fullname">Name</label>
<div class="col-sm-10"><input id="name" class="form-control" name="fullname" type="text" value="" placeholder="Name in Full" /></div>
<div class="form-group"><label class="col-sm-2 control-label" for="email">Email</label>
<div class="col-sm-10"><input id="email" class="form-control" name="email" type="text" value="" placeholder="E-Mail" /></div>
<div class="form-group"><label class="col-sm-2 control-label" for="comments">Comments</label> <textarea id="exampleFormControlTextarea1" class="form-control" rows="5" placeholder="Comments"></textarea></div>
<button class="btn btn-primary" type="submit">Submit</button></div>
</div>
</body>
</html>

[BronenosezPotemkin]

The validatror shows error when I put http of the page pointing to label class (below)...

https://validator.w3.org

//errors
1. Error: The value of the for attribute of the label element must be the ID of a non-hidden form control.
From line 14, column 25; to line 14, column 77
rm-group"><label class="col-sm-2 control-label" for="fullname">Name</

2. Error: The value of the for attribute of the label element must be the ID of a non-hidden form control.
From line 18, column 25; to line 18, column 77
rm-group"><label class="col-sm-2 control-label" for="comments">Commen

<h3>Form</h3>
<form class="form-hotizontal" action="index.php" method="post"></form>
<div class="form-group"><label class="col-sm-2 control-label" for="fullname">Name</label>
<div class="col-sm-10"><input id="name" class="form-control" name="fullname" type="text" value="" placeholder="Name in Full" /></div>
<div class="form-group"><label class="col-sm-2 control-label" for="email">Email</label>
<div class="col-sm-10"><input id="email" class="form-control" name="email" type="text" value="" placeholder="E-Mail" /></div>
<div class="form-group"><label class="col-sm-2 control-label" for="comments">Comments</label> <textarea id="exampleFormControlTextarea1" class="form-control" rows="5" placeholder="Comments"></textarea></div>
<button class="btn btn-primary" type="submit">Submit</button></div>
</div>
</body>
</html>

Вам надо сделать так, чтобы for заголовка совпадал с id контроля, к которому относится:
<div class="form-group"><label class="col-sm-2 control-label" for="fullname">Name</label>
<div class="col-sm-10"><input id="fullname" class="form-control" name="fullname" type="text" value="" placeholder="Name in Full" /></div>