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

[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>

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

Код: Выделить всё

<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>

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

Код: Выделить всё

<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 . Вот, копирую с той же страницы:

Код: Выделить всё

<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 . Вот, копирую с той же страницы:

Код: Выделить всё

<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>