Меню
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP КАК СДЕЛАТЬ ПРОГРАММЫ SW3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS КИБЕРБЕЗОПАСНОСТЬ НАУКА О ДАННЫХ
     ❯   

CSS Учебник


CSS Продвинутый


CSS Отзывчивый


CSS Grid


CSS SASS


CSS Примеры


CSS Справочники



Адаптивный веб-дизайн - фреймворк



Существует множество существующих CSS - фреймворков, которые предлагают адаптивный дизайн.

Они бесплатны и просты в использовании.


Фреймворк - SW3.CSS

Отличный способ создать адаптивный дизайн-использовать адаптивная таблица стилей, например SW3.CSS

SW3.CSS позволяет легко разрабатывать сайты, которые выглядят красиво в любом размере; компьютер, ноутбук, планшет, или телефон:

SW3.CSS Демо

Измените размер страницы, чтобы увидеть отзывчивость!

Лондон

Лондон является столицей Англии.

Это самый густонаселенный город в Соединенном Королевстве, с пригородами свыше 13 миллионов жителей.

Париж

Париж - столица Франции.

В Париже находится один из крупнейших центров населения в Европе, с более чем 12 миллионов жителей.

Токио

Токио - столица Японии.

Это центр большого Токио и самый густонаселенный мегаполис в мире.

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/sw3css/4/sw3.css">
<body>

<div class="sw3-container sw3-green">
  <h1>Schoolsw3 Demo</h1>
  <p>Измените размер страницы, чтобы увидеть отзывчивость!</p>
</div>

<div class="sw3-row-padding">
  <div class="sw3-third">
    <h2>Лондон</h2>
    <p>Лондон является столицей Англии.</p>
    <p>Это самый густонаселенный город в Соединенном Королевстве,
   с пригородами свыше 13 миллионов жителей.</p>
  </div>

  <div class="sw3-third">
    <h2>Париж</h2>
    <p>Париж - столица Франции.</p>
    <p>В Париже находится один из крупнейших центров населения в Европе,
    с более чем 12 миллионов жителей.</p>
  </div>

  <div class="sw3-third">
    <h2>Токио</h2>
    <p>Токио - столица Японии.</p>
    <p>Это центр большого Токио
    и самый густонаселенный мегаполис в мире.</p>
  </div>
</div>

</body>
</html>
Попробуйте сами »

Чтобы узнать больше о SW3.CSS, читайте наш SW3.CSS Учебник.



Фреймворк - Bootstrap

Другой популярный фреймворк - Bootstrap, он использует HTML, CSS и jQuery для создания адаптивных веб страниц.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Пример Боотстрап</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div class="jumbotron">
    <h1>Мой Боотстрап</h1>
  </div>
  <div class="row">
    <div class="col-sm-4">
      ...
    </div>
    <div class="col-sm-4">
      ...
    </div>
    <div class="col-sm-4">
    ...
    </div>
  </div>
</div>

</body>
</html>
Попробуйте сами »

Чтобы узнать больше о Боотстрап, читайте наш Учебник Bootstrap.



×

Связаться с отделом продаж

Если вы хотите использовать услуги schoolsw3 как образовательное учреждение, команда или предприятие, отправьте нам электронное письмо:
sales@schoolsw3.com

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, отправьте нам электронное письмо:
help@schoolsw3.com

Schoolsw3 оптимизирован для обучения и подготовки. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно проверяются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего контента.
При использовании Schoolsw3 вы соглашаетесь прочитать и принять наши условия использования,
политику использования файлов cookie и конфиденциальности.

Авторское право 1999- принадлежит Refsnes Data. Все права защищены. Schoolsw3 работает на SW3.CSS.