-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathTwoColumnList.htm
143 lines (142 loc) · 7.09 KB
/
TwoColumnList.htm
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
<!--
This work by http://twitter.com/Ben_Lowe of http://www.triballabs.net is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.0 UK: England & Wales License.
http://creativecommons.org/licenses/by-nc-sa/2.0/uk/
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-responsive.css" rel="stylesheet" />
<link href="css/docs.css" rel="stylesheet" />
<link href="css/tribal-bootstrap.css" rel="stylesheet" />
<link href="css/tribal-form.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-latest.js"></script>
<script type="text/javascript" src="js/jquery.ba-resize.js"></script>
<script type="text/javascript" src="js/bootstrap-collapse.js"></script>
<script type="text/javascript" src="js/tribal-shared.js"></script>
<script type="text/javascript" src="js/tribal-form.js"></script>
<title>Multi-Column Definition Lists</title>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-21875603-1']);
_gaq.push(['_addDevId', 'i9k95']); // Google Analyticator App ID with Google
_gaq.push(['_trackPageview']);
_gaq.push(['_trackPageLoadTime']);
(function () {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body data-offset="50">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar">
</span>
</button>
<a class="brand" href="#">TribalLabs</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li><a href="Timetable.htm">Timetable</a></li>
<li class="active"><a href="TwoColumnList.htm">Multi-Column Definition List</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<header class="jumbotron subhead" id="overview">
<h1>Multi-Column Definition Lists</h1>
</header>
<p>
View the <a target="_blank" href="http://www.triballabs.net/2012/08/multi-column-bootstrap-definition-lists-using-jquery-html-css/">
blog post</a> supporting this sample code.</p>
<div class="well">
<dl class="dl-horizontal dl-multicolumn" data-colcount="3">
<dt>Name</dt>
<dd>
Ben Lowe</dd>
<dt>Gender</dt>
<dd>
Male</dd>
<dt>School</dt>
<dd>
Sheffield School</dd>
<dt>DOB</dt>
<dd>
01/01/1986</dd>
<dt>Email</dt>
<dd>
<a href="mailto:[email protected]">[email protected]</a></dd>
<dt>Phone</dt>
<dd>
<a class="visible-phone" href="tel:+441142196000">+44 114 2196000</a><a class="hidden-phone"
href="callto:+441142196000">+44 114 2196000</a></dd>
<dt>Address</dt>
<dd>
26 Main Road<br />
Sheffield<br />
S1 1AA</dd>
</dl>
</div>
<div class="row">
<div class="span8">
<div class="well">
<dl class="dl-horizontal dl-multicolumn" data-colcount="2">
<dt>Name</dt>
<dd>
Here is a much longer bit of text. Let's see if it wraps. Here is a much longer
bit of text. Let's see if it wraps. Here is a much longer bit of text. Let's see
if it wraps. Here is a much longer bit of text. Let's see if it wraps. Here is a
much longer bit of text. Let's see if it wraps. Here is a much longer bit of text.
Let's see if it wraps.</dd>
<dt>Name</dt>
<dd>
Here is a much longer bit of text. Let's see if it wraps. Here is a much longer
bit of text. Let's see if it wraps. Here is a much longer bit of text. Let's see
if it wraps. Here is a much longer bit of text. Let's see if it wraps. Here is a
much longer bit of text. Let's see if it wraps. Here is a much longer bit of text.
Let's see if it wraps.</dd>
<dt>Address with<br />
a long name</dt>
<dd>
26 Main Road<br />
Sheffield<br />
S1 1AA</dd>
</dl>
</div>
</div>
<div class="span4">
<div class="well">
<dl class="dl-horizontal">
<dt>Long text</dt>
<dd>
Here is a much longer bit of text. Let's see if it wraps. Here is a much longer
bit of text. Let's see if it wraps. Here is a much longer bit of text. Let's see
if it wraps. Here is a much longer bit of text. Let's see if it wraps. Here is a
much longer bit of text. Let's see if it wraps. Here is a much longer bit of text.
Let's see if it wraps.</dd>
<dt>Short</dt>
<dd>
Here is a short bit of text.</dd>
</dl>
</div>
</div>
</div>
<div class="well">
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/2.0/uk/deed.en_GB">
<img alt="Creative Commons Licence" style="border-width: 0" src="http://i.creativecommons.org/l/by-nc-sa/2.0/uk/88x31.png" /></a><br />
This work by <a target="_blank" href="http://twitter.com/Ben_Lowe">Ben Lowe</a>
of <a target="_blank" href="http://www.triballabs.net">Tribal Labs</a> is licensed
under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/2.0/uk/deed.en_GB">
Creative Commons Attribution-NonCommercial-ShareAlike 2.0 UK: England & Wales
License</a>.
</div>
</div>
</body>
</html>