Уроки мастерства


Отзывчивый дизайн ленты как в Facebook


Содержание урока

В этом уроке мы будем реализовывать отзывчивую (responsive), адаптивную Facebook — подобную хронологическую ленту с помощью Twitter Bootstrap. Я собираюсь объяснить, шаг за шагом как реализовать Отзывчивость хронологической ленты, а Вам просто нужно следовать инструкции.

Создать index.html файл и добавить в него обычную HTML-разметку.

Все работы мы будем описывать в корневой папку нашего сервера. Теперь мы создадим следующие папки: CSS и JS. Затем надо скачать файлы bootstrap и jQuery и разместить их в соответствующих каталогах CSS и JS. Теперь создадим файл index.html и в него включим все эти CSS и JS файлы.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Timeline Design</title>
	<!-- Bootstrap -->
	<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,200' rel='stylesheet' type='text/css'>	
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
	<link href="css/style.css" rel="stylesheet">

	<!-- Script -->
	<script src="js/jquery.min.js"></script>
</head>
<body>

Создаем Неупорядоченный список чтобы сформировать дизайн элементов ленты:

Добавьте следующий неупорядоченный список HTML-элементов в вашем index.html.

<div class="container">
	<h2 class="title text-center" >Responsive Facebook Style Timeline Design With Twitter Bootstrap</h2>
	<ul class="timeline">
		<li class="year">2015</li>
		<li class="event">
			<h3 class="heading">Responsive PHP Quiz Script</h3>
			<span class="month"><i class="fa fa-calendar"></i> &nbsp; March 2015</span>
			
			<p>&nbsp;</p>
			<p>Demo : <a href="http://demo.smarttutorials.net/php-quiz-code/" target="_blank">PHP Quiz Script Demo</a></p>
			
			<p>Tutorial : <a href="http://www.smarttutorials.net/php-quiz-script/" target="_blank">PHP Quiz Script</a></p>
			<div class="text-center">
				<img class="img-responsive img-thumbnail" src="http://1.bp.blogspot.com/-5VF-5ZFx6fk/VRu6g9QaxjI/AAAAAAAAEB4/ipE14PIvqGQ/s1600/php-quiz-script.png">
			</div>
			<p>This version of Responsive PHP Quiz application has following new features are added. You may refer my previous versions of PHP MySQL quiz script tutorial to download php quiz script freely.</p>
			<blockquote>
				<ol>
					<li>Now users can share his/her results on Social networks (Facebook, Twitter, Google Plus, Reddit and Linkedin).</li>
					<li>The Quiz result page will contain all questions answered by the user along with correct answer.</li>
					<li>The Quiz result manage Grid has unique link to each taken Quiz result page, So user can refer his last Quiz results.</li>
					<li>The User can sort Quiz results on manage Grid using quiz taken date.</li>
				</ol>
			</blockquote>
		</li>
		<li class="event">
			<h3 class="heading">Invoice System Using jQuery PHP MySQL And Bootstrap</h3>
			<span class="month"><i class="fa fa-calendar"></i> &nbsp; March 2015 </span>
			<p>&nbsp;</p>
			<div class="embed-responsive embed-responsive-16by9">
				<iframe frameborder="0" allowfullscreen="allowfullscreen" src="https://www.youtube.com/embed/AGawieZttJ0" class="embed-responsive-item"></iframe>
			</div>
			<p>&nbsp;</p>
			<p>Demo : <a href="http://demo.smarttutorials.net/invoice-script-php/" target="_blank">PHP Invoice System Demo</a></p>
			
			<p>Tutorial : <a href="http://www.smarttutorials.net/invoice-system-using-jquery-php-mysql-bootstrap/" target="_blank">Smart Invoice System</a></p>
			
			<p>This is an awesome tool for your marketing team and they can crack the deal at client’s doorstep. Order PDF Invoice System Script today! and increase sales. It just comes at a fraction of one time price. Grab the deal today.</p>
		</li>
	</ul>
</div>

Создаем вертикальную линию для нашей ленты

Создаем файл style.css и добавляем в него следующие CSS-стили, чтобы создать вертикальную линию и выровнять её по центру нашей страницы.

.timeline{
	background-image: url("../images/line-1.png");
    background-position: center; 
    background-repeat: repeat-y;
    max-width: 960px;
    margin: 0 auto;
    position: relative;
    height: auto;
    padding: 0px;
    clear: both;
    overflow: hidden;
}

Стиль для отображения года в нашей хронологии

Теперь добавим отображение года в центре страницы и на линии хронологии. Следующий CSS-стиль выровняет Год в центре страницы.

.timeline li.year{
	clear: both;
	width: 4em;
	margin: 0 auto;
	line-height: 4em;
	background-color: #fff;
	border-radius:50%;
	text-align: center;
	margin-bottom: 25px;
	border: 1px solid #f39c12;
	
	box-shadow: 2px 2px 2px #888888;
	-moz-box-shadow: 2px 2px 2px #888888;
    -webkit-box-shadow: 2px 2px 2px #888888;
}
.timeline li.year:first-child{
	margin-top:0px;
}
.timeline li.year, .timeline li.event{
	list-style-type: none;
	z-index: 999;
}

CSS стиль для вертикального построения хронологии

Сначала назначаем ширину и цвет фона для хронологии. И присваиваем стиль для хронологии с помощью CSS псевдо-селектора (:even, :odd).

.timeline li.event{
     width: 45%;
     background-color: #fff;
	margin-bottom: 20px;
	padding: 20px;
	position: relative;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-color: #e5e6e9 #dfe0e4 #d0d1d5;
        border-image: none;
        border-style: solid;
        border-width: 1px;
}

li.event:nth-child(odd) {
    color: green;
    clear:left;
    float: left;
}
li.event:nth-child(even) {
    color: red;
    clear: right;
    float: right;
    margin-top:100px;
    margin-bottom:50px;
}

И наконец создаем линии, которые соединяет Линию хронологии с событиями. Для этого используем подходящие нам CSS-псевдо-селекторы (::after, ::before)

.timeline li.event:nth-child(odd)::after {
    background:red;
    content: "";
    height: 2px;
    position: absolute;
    right: -11.2%;
    top: 30px;
    width: 11.2%;
    
}
li.event:nth-child(even)::before{
	background:red;
    content: "";
    height: 2px;
    position: absolute;
    top: 30px;
    width: 11.2%;
    left: -11.2%;
}

Дизайн нашей хронологии

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

@media (max-width: 640px) {
	.timeline li.event{
		width: 80%;
		background-color: #fff;
		border: 1px solid #ff0000;
		margin: 20px auto;
		padding: 20px;
		position: relative;
	}
	
	li.event:nth-child(odd) {
	    color: green;
	    clear: both;
	    float: none;
	}
	li.event:nth-child(even) {
	    color: red;
	    clear: both;
	    float: none;
	}
	
	.timeline li.event:nth-child(odd)::after, li.event:nth-child(even)::before {
	    width: 0px;
	}
}



Технологии

CSS3
HTML5
jQuery

Новые комментарии



    Оставить комментарий