Сетка Materialize очень похожа на сетку Бутстрап.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<link rel="stylesheet" href="css/style.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
Документация по сетке: https://materializecss.com/grid
.container занимает 70% окна и позволяет центрировать страницу
-->
<div class="container">
<div class="row">
<!--
Class Prefix .s - <= 600px .m - > 600px .l - > 992px .xl -> 1200px
-->
<!-- создадим 12 колонок. s1 - small 1 -->
<div class="col s1">1</div>
<div class="col s1">2</div>
<div class="col s1">3</div>
<div class="col s1">4</div>
<div class="col s1">5</div>
<div class="col s1">6</div>
<div class="col s1">7</div>
<div class="col s1">8</div>
<div class="col s1">9</div>
<div class="col s1">10</div>
<div class="col s1">11</div>
<div class="col s1">12</div>
</div>
</div>
<!-- Сместим колонку 12 вправо -->
<div class="container">
<div class="row">
<div class="col s1">1</div>
<div class="col s1 offset-s10">12</div>
</div>
</div>
<!-- Адаптивность 1. -->
<div class="container">
<div class="row">
<div class="col s12 m6 xl3 ">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, cum, porro, rem, quos voluptas quasi possimus fugit eum impedit cumque qui rerum nostrum laborum consequatur dolorum recusandae harum. Quasi, iusto, enim recusandae veritatis quae nobis consequuntur accusantium dolor sint eligendi veniam vitae ad explicabo vero dolorem eum commodi delectus! Quos, quisquam, fuga, veniam debitis corrupti natus soluta nobis distinctio fugit eos repudiandae amet velit unde non nihil placeat autem. Eum, accusantium, reiciendis nulla vel in natus reprehenderit ducimus consequuntur recusandae dignissimos fugit doloribus expedita asperiores illo ipsa architecto quidem amet inventore aut quasi similique est corporis temporibus maiores nihil laborum.</p>
</div>
</div>
</div>
<!-- Адаптивность 2. -->
<div class="container">
<div class="row">
<div class="col xl3 center-align">
<img src="img/logo.png" id="mypic" alt="">
<h4>Lorem ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, numquam, error, nobis quod minima doloribus laudantium ratione delectus officia maxime iusto esse neque deleniti fugiat.</p>
</div>
<div class="col xl3 center-align">
<img src="img/logo.png" id="mypic" alt="">
<h4>Lorem ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, numquam, error, nobis quod minima doloribus laudantium ratione delectus officia maxime iusto esse neque deleniti fugiat.</p>
</div>
<div class="col xl3 center-align">
<img src="img/logo.png" id="mypic" alt="">
<h4>Lorem ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, numquam, error, nobis quod minima doloribus laudantium ratione delectus officia maxime iusto esse neque deleniti fugiat.</p>
</div>
<div class="col xl3 center-align">
<img src="img/logo.png" id="mypic" alt="">
<h4>Lorem ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, numquam, error, nobis quod minima doloribus laudantium ratione delectus officia maxime iusto esse neque deleniti fugiat.</p>
</div>
</div>
</div>
<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>
style.css
body {
height: 1000px;
}
#mypic {
width: 100px;
height: 80px;
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<link rel="stylesheet" href="css/style.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
Документация по сетке: https://materializecss.com/grid
.container занимает 70% окна и позволяет центрировать страницу
-->
<div class="container">
<div class="row">
<!--
Class Prefix .s - <= 600px .m - > 600px .l - > 992px .xl -> 1200px
-->
<!-- создадим 12 колонок. s1 - small 1 -->
<div class="col s1">1</div>
<div class="col s1">2</div>
<div class="col s1">3</div>
<div class="col s1">4</div>
<div class="col s1">5</div>
<div class="col s1">6</div>
<div class="col s1">7</div>
<div class="col s1">8</div>
<div class="col s1">9</div>
<div class="col s1">10</div>
<div class="col s1">11</div>
<div class="col s1">12</div>
</div>
</div>
<!-- Сместим колонку 12 вправо -->
<div class="container">
<div class="row">
<div class="col s1">1</div>
<div class="col s1 offset-s10">12</div>
</div>
</div>
<!-- Адаптивность 1. -->
<div class="container">
<div class="row">
<div class="col s12 m6 xl3 ">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, cum, porro, rem, quos voluptas quasi possimus fugit eum impedit cumque qui rerum nostrum laborum consequatur dolorum recusandae harum. Quasi, iusto, enim recusandae veritatis quae nobis consequuntur accusantium dolor sint eligendi veniam vitae ad explicabo vero dolorem eum commodi delectus! Quos, quisquam, fuga, veniam debitis corrupti natus soluta nobis distinctio fugit eos repudiandae amet velit unde non nihil placeat autem. Eum, accusantium, reiciendis nulla vel in natus reprehenderit ducimus consequuntur recusandae dignissimos fugit doloribus expedita asperiores illo ipsa architecto quidem amet inventore aut quasi similique est corporis temporibus maiores nihil laborum.</p>
</div>
</div>
</div>
<!-- Адаптивность 2. -->
<div class="container">
<div class="row">
<div class="col xl3 center-align">
<img src="img/logo.png" id="mypic" alt="">
<h4>Lorem ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, numquam, error, nobis quod minima doloribus laudantium ratione delectus officia maxime iusto esse neque deleniti fugiat.</p>
</div>
<div class="col xl3 center-align">
<img src="img/logo.png" id="mypic" alt="">
<h4>Lorem ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, numquam, error, nobis quod minima doloribus laudantium ratione delectus officia maxime iusto esse neque deleniti fugiat.</p>
</div>
<div class="col xl3 center-align">
<img src="img/logo.png" id="mypic" alt="">
<h4>Lorem ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, numquam, error, nobis quod minima doloribus laudantium ratione delectus officia maxime iusto esse neque deleniti fugiat.</p>
</div>
<div class="col xl3 center-align">
<img src="img/logo.png" id="mypic" alt="">
<h4>Lorem ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, numquam, error, nobis quod minima doloribus laudantium ratione delectus officia maxime iusto esse neque deleniti fugiat.</p>
</div>
</div>
</div>
<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>
style.css
body {
height: 1000px;
}
#mypic {
width: 100px;
height: 80px;
}
Комментариев нет:
Отправить комментарий