1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
|
<!DOCTYPE html>
<html lang="en">
<head>
<title>...</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.3.1/holder.min.js"></script>
</head>
<body>
<div class="container-fluid">
<header class="row">
<div class="col-md-12">
<div class="page-header">
<h1>...</h1>
</div>
</div>
</header>
<div class="row">
<nav class="col-md-2">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Filtre :</h3>
</div>
<div class="list-group">
<a href="#" class="list-group-item">Authors</a>
<a href="#" class="list-group-item">Tags</a>
<a href="#" class="list-group-item">....</a>
</div>
</div>
</nav>
<section class="col-md-10">
<!-- For each book -->
<div class="col-md-4">
<div class="well well-sm">
<div class="row">
<div class="col-xs-3 col-md-3 text-center">
<a class="showTootlips" href="" target="_blank" title="Show all descriptions" data-toggle="tooltip" data-placement="bottom" >
<img src="holder.js/300x200" alt="Book cover " class="img-responsive" />
</a>
</div>
<div class="col-xs-9 col-md-9 section-box">
<h3>title</h3>
</h3>
<p class="visible-md visible-lg clearfix">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis imperdiet tortor vitae tincidunt posuere. Aliquam aliquet augue sed libero tempus, eu suscipit nunc sodales. Ut eget nunc justo. Aenean urna massa, elementum ac gravida egestas, luctus sed eros. Suspendisse eu posuere tellus. Phasellus magna velit, congue et mollis id, faucibus non est. Donec sit amet tristique elit, eu posuere arcu. Nunc non accumsan purus, sit amet sodales turpis. Curabitur sit amet quam ut orci auctor vestibulum. Nullam ornare, tortor sit amet semper blandit, lacus felis accumsan sem, in semper leo enim at mi. Maecenas ut mi libero. Vivamus facilisis neque eget ante dictum mollis. Phasellus feugiat mi vel nisi molestie luctus. Donec eget tempor magna. Nunc molestie dapibus hendrerit.
Aenean quis blandit turpis. Duis nec lorem interdum, aliquam magna in, semper massa. Quisque vel pellentesque leo, vitae tempor erat. Donec feugiat feugiat justo, in porta ligula feugiat sed. Pellentesque auctor nibh ac felis faucibus dapibus. Duis luctus pulvinar lacinia. Aliquam a accumsan lorem. Donec in vehicula nulla. Donec a fringilla quam. Suspendisse quis tristique justo. Praesent eget eros pretium nulla egestas luctus. Mauris in risus vel nunc laoreet venenatis quis in orci. Donec adipiscing libero lectus.
</p>
<hr />
<div class="row rating-desc visible-md visible-lg">
<div class='col-md-4 showTootlips' title='rating' data-toggle='tooltip' data-placement='top'>
<span class="fa fa-star"><span class="fa fa-star">
</div>
<div class="col-md-offset-4 col-md-4">
<span class="fa fa-language"></span> Fr
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Book -->
<!-- For each book -->
<div class="col-md-4">
<div class="well well-sm">
<div class="row">
<div class="col-xs-3 col-md-3 text-center">
<a class="showTootlips" href="" target="_blank" title="Show all descriptions" data-toggle="tooltip" data-placement="bottom" >
<img src="holder.js/300x200" alt="Book cover " class="img-responsive" />
</a>
</div>
<div class="col-xs-9 col-md-9 section-box">
<h3>title</h3>
</h3>
<p class="visible-md visible-lg clearfix">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis imperdiet tortor vitae tincidunt posuere. Aliquam aliquet augue sed libero tempus, eu suscipit nunc sodales. Ut eget nunc justo. Aenean urna massa, elementum ac gravida egestas, luctus sed eros. Suspendisse eu posuere tellus. Phasellus magna velit, congue et mollis id, faucibus non est. Donec sit amet tristique elit, eu posuere arcu. Nunc non accumsan purus, sit amet sodales turpis. Curabitur sit amet quam ut orci auctor vestibulum. Nullam ornare, tortor sit amet semper blandit, lacus felis accumsan sem, in semper leo enim at mi. Maecenas ut mi libero. Vivamus facilisis neque eget ante dictum mollis. Phasellus feugiat mi vel nisi molestie luctus. Donec eget tempor magna. Nunc molestie dapibus hendrerit.
Aenean quis blandit turpis. Duis nec lorem interdum, aliquam magna in, semper massa. Quisque vel pellentesque leo, vitae tempor erat. Donec feugiat feugiat justo, in porta ligula feugiat sed. Pellentesque auctor nibh ac felis faucibus dapibus. Duis luctus pulvinar lacinia. Aliquam a accumsan lorem. Donec in vehicula nulla. Donec a fringilla quam. Suspendisse quis tristique justo. Praesent eget eros pretium nulla egestas luctus. Mauris in risus vel nunc laoreet venenatis quis in orci. Donec adipiscing libero lectus.
</p>
<hr />
<div class="row rating-desc visible-md visible-lg">
<div class='col-md-4 showTootlips' title='rating' data-toggle='tooltip' data-placement='top'>
<span class="fa fa-star"><span class="fa fa-star">
</div>
<div class="col-md-offset-4 col-md-4">
<span class="fa fa-language"></span> Fr
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Book -->
<!-- For each book -->
<div class="col-md-4">
<div class="well well-sm">
<div class="row">
<div class="col-xs-3 col-md-3 text-center">
<a class="showTootlips" href="" target="_blank" title="Show all descriptions" data-toggle="tooltip" data-placement="bottom" >
<img src="holder.js/300x200" alt="Book cover " class="img-responsive" />
</a>
</div>
<div class="col-xs-9 col-md-9 section-box">
<h3>title</h3>
</h3>
<p class="visible-md visible-lg clearfix">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis imperdiet tortor vitae tincidunt posuere. Aliquam aliquet augue sed libero tempus, eu suscipit nunc sodales. Ut eget nunc justo. Aenean urna massa, elementum ac gravida egestas, luctus sed eros. Suspendisse eu posuere tellus. Phasellus magna velit, congue et mollis id, faucibus non est. Donec sit amet tristique elit, eu posuere arcu. Nunc non accumsan
</p>
<hr />
<div class="row rating-desc visible-md visible-lg">
<div class='col-md-4 showTootlips' title='rating' data-toggle='tooltip' data-placement='top'>
<span class="fa fa-star"><span class="fa fa-star">
</div>
<div class="col-md-offset-4 col-md-4">
<span class="fa fa-language"></span> Fr
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Book -->
<!-- For each book -->
<div class="col-md-4">
<div class="well well-sm">
<div class="row">
<div class="col-xs-3 col-md-3 text-center">
<a class="showTootlips" href="" target="_blank" title="Show all descriptions" data-toggle="tooltip" data-placement="bottom" >
<img src="holder.js/300x200" alt="Book cover " class="img-responsive" />
</a>
</div>
<div class="col-xs-9 col-md-9 section-box">
<h3>title</h3>
</h3>
<p class="visible-md visible-lg clearfix">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis imperdiet tortor vitae tincidunt posuere. Aliquam aliquet augue sed libero tempus, eu suscipit nunc sodales. Ut eget nunc justo. Aenean urna massa, elementum ac gravida egestas, luctus sed eros. Suspendisse eu posuere tellus. Phasellus magna velit, congue et mollis id, faucibus non est. Donec sit amet tristique elit, eu posuere arcu. Nunc non accumsan purus, sit amet sodales turpis. Curabitur sit amet quam ut orci auctor vestibulum. Nullam ornare, tortor sit amet semper blandit, lacus felis accumsan sem, in semper leo enim at mi. Maecenas ut mi libero. Vivamus facilisis neque eget ante dictum mollis. Phasellus feugiat mi vel nisi molestie luctus. Donec eget tempor magna. Nunc molestie dapibus hendrerit.
Aenean quis blandit turpis. Duis nec lorem interdum, aliquam magna in, semper massa. Quisque vel pellentesque leo, vitae tempor erat. Donec feugiat feugiat justo, in porta ligula feugiat sed. Pellentesque auctor nibh ac felis faucibus dapibus. Duis luctus pulvinar lacinia. Aliquam a accumsan lorem. Donec in vehicula nulla. Donec a fringilla quam. Suspendisse quis tristique justo. Praesent eget eros pretium nulla egestas luctus. Mauris in risus vel nunc laoreet venenatis quis in orci. Donec adipiscing libero lectus.
</p>
<hr />
<div class="row rating-desc visible-md visible-lg">
<div class='col-md-4 showTootlips' title='rating' data-toggle='tooltip' data-placement='top'>
<span class="fa fa-star"><span class="fa fa-star">
</div>
<div class="col-md-offset-4 col-md-4">
<span class="fa fa-language"></span> Fr
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Book -->
</section>
</div>
</body>
</html> |
[Boostrap] Grille non fixe
Répondre avec citation
Partager