github/bootstrap
1
1
Fork 0
mirror of https://github.com/jasny/bootstrap.git synced 2026-04-24 03:00:49 -04:00
Code Issues Packages Projects Releases Wiki Activity

Added responsive tables

Browse Source
This commit is contained in:
Arnold Daniels
2012-12-14 16:27:26 +01:00
parent f997a9ada7
commit eaad32b34f
12 changed files with 83 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
docs/assets/css/bootstrap-responsive.css vendored
View File

@@ -1152,6 +1152,31 @@
}
}
@media (max-width: 767px) {
.table-responsive tr {
display: block;
padding: 8px;
}
.table-bordered.table-responsive tr {
border: 1px solid #DDD;
border-top: 0;
border-right: 0;
}
.table-responsive td,
.table-responsive th {
display: block;
padding: 0;
font-weight: normal;
border: none;
}
.table-responsive th {
font-style: italic;
}
.table-responsive .responsive-highlight {
font-weight: bold;
}
}
@media (max-width: 480px) {
.form-horizontal .controls,
.form-horizontal .well .controls,

4
docs/assets/css/docs.css
View File

@@ -304,6 +304,9 @@ only screen and ( -o-min-device-pixel-ratio: 2/1) {
font-size: 16px;
line-height: 1.5;
}
.changes ul {
text-align: left;
}
.changes .row {
margin-bottom: 9px;
}
@@ -457,7 +460,6 @@ only screen and ( -o-min-device-pixel-ratio: 2/1) {
#customupload {
display: block;
margin-top: 20px;
width: 232px;
text-align: center;
}

8
docs/build/index.js vendored
View File

@@ -3,9 +3,13 @@ var hogan = require('hogan.js')
, fs = require('fs')
, prod = process.argv[2] == 'production'
, title = 'Jasny Bootstrap'
, version = '2.2.1-j3'
var layout, pages
var info, version, layout, pages
// get version
info = fs.readFileSync(__dirname + '/../../package.json', 'utf-8')
info = JSON.parse(info)
version = info.version
// compile layout template
layout = fs.readFileSync(__dirname + '/../templates/layout.mustache', 'utf-8')

3
docs/components.html
View File

@@ -2183,7 +2183,8 @@
...
</div>
</pre>
<a name="page-alerts"></a>
<h3>Page alerts</h3>
<p>Know those nice little alerts after you save your profile? With <code>.page-alert</code> the alert will be shown on top op your page.</p>
<div id="page-alert-container" class="bs-docs-example">

10
docs/index.html
View File

@@ -91,7 +91,7 @@
<a href="./extend.html" >Extend</a>
</li>
<li>
Version 2.2.1-j3
Version 2.2.2-j3
</li>
</ul>
</div>
@@ -148,20 +148,20 @@
</div>
<div class="row">
<div class="span3">
<h3><a href="./base-css.html#iconic-icons">Iconic icons</a></h3>
<h3><a href="./base-css.html#iconic">Iconic icons</a></h3>
<p>The iconic font set adds 170 new icons to Bootstrap. These icons can be used with buttons, menus, links, etc.</p>
<p>Because these icons are a font, they can be styled just like text.</p>
</div>
<div class="span3">
<h3><a href="./components.html#alerts">Page alerts</a></h3>
<h3><a href="./components.html#page-alerts">Page alerts</a></h3>
<p>Know those nice little alerts after you save your profile? With .page-alert the alert will be shown on top op your page.</p>
</div>
<div class="span3">
<h3><a href="./scaffolding.html#layouts">Semi-fluid layout</a></h3>
<h3><a href="./scaffolding.html#semi-fluid-layout">Semi-fluid layout</a></h3>
<p>Get the best of both worlds with a semi-fluid layout. It acts as a fixed layout for big screens. For smaller screens, it behaves like a fluid layout.</p>
</div>
<div class="span3">
<h3><a href="./scaffolding.html#responsive">Desktop rows</a></h3>
<h3><a href="./scaffolding.html#row-desktop">Desktop rows</a></h3>
<p>By default columns of a row are show next to each other for tablets and desktops and not for phones. A desktop row displays acts like a row for desktops only and not for tablets or phones.</p>
</div>
</div>

2
docs/scaffolding.html
View File

@@ -386,6 +386,7 @@
&lt;/div&gt;
</pre>
<a name="semi-fluid-layout"></a>
<h2>Semi-fluid layout</h2>
<p>Get the best of both worlds with <code>&lt;div class="container-semifluid"&gt;</code>. It acts as a fixed layout for big screens. For smaller screens, it behaves like a fluid layout.</p>
<div class="semifluid-layouts">
@@ -562,6 +563,7 @@
</ul>
<!-- Desktop row -->
<a name="row-desktop"></a>
<h2>Desktop rows</h2>
<p>By default columns of a <code>.row</code> are show next to each other, however for phones the columns are show underneath each other. By adding the class <code>.row-desktop</code> to a row,
it will display the columns underneath each other for tablets as well.</p>

3
docs/templates/pages/components.mustache vendored
View File

@@ -2112,7 +2112,8 @@
...
&lt;/div&gt;
</pre>
<a name="page-alerts"></a>
<h3>{{_i}}Page alerts{{/i}}</h3>
<p>{{_i}}Know those nice little alerts after you save your profile? With <code>.page-alert</code> the alert will be shown on top op your page.{{/i}}</p>
<div id="page-alert-container" class="bs-docs-example">

8
docs/templates/pages/index.mustache vendored
View File

@@ -77,20 +77,20 @@
</div>
<div class="row">
<div class="span3">
<h3><a href="./base-css.html#iconic-icons">{{_i}}Iconic icons{{/i}}</a></h3>
<h3><a href="./base-css.html#iconic">{{_i}}Iconic icons{{/i}}</a></h3>
<p>{{_i}}The iconic font set adds 170 new icons to Bootstrap. These icons can be used with buttons, menus, links, etc.{{/i}}</p>
<p>{{_i}}Because these icons are a font, they can be styled just like text.{{/i}}</p>
</div>
<div class="span3">
<h3><a href="./components.html#alerts">{{_i}}Page alerts{{/i}}</a></h3>
<h3><a href="./components.html#page-alerts">{{_i}}Page alerts{{/i}}</a></h3>
<p>{{_i}}Know those nice little alerts after you save your profile? With .page-alert the alert will be shown on top op your page.{{/i}}</p>
</div>
<div class="span3">
<h3><a href="./scaffolding.html#layouts">{{_i}}Semi-fluid layout{{/i}}</a></h3>
<h3><a href="./scaffolding.html#semi-fluid-layout">{{_i}}Semi-fluid layout{{/i}}</a></h3>
<p>{{_i}}Get the best of both worlds with a semi-fluid layout. It acts as a fixed layout for big screens. For smaller screens, it behaves like a fluid layout.{{/i}}</p>
</div>
<div class="span3">
<h3><a href="./scaffolding.html#responsive">{{_i}}Desktop rows{{/i}}</a></h3>
<h3><a href="./scaffolding.html#row-desktop">{{_i}}Desktop rows{{/i}}</a></h3>
<p>{{_i}}By default columns of a row are show next to each other for tablets and desktops and not for phones. A desktop row displays acts like a row for desktops only and not for tablets or phones.{{/i}}</p>
</div>
</div>

2
docs/templates/pages/scaffolding.mustache vendored
View File

@@ -315,6 +315,7 @@
&lt;/div&gt;
</pre>
<a name="semi-fluid-layout"></a>
<h2>{{_i}}Semi-fluid layout{{/i}}</h2>
<p>{{_i}}Get the best of both worlds with <code>&lt;div class="container-semifluid"&gt;</code>. It acts as a fixed layout for big screens. For smaller screens, it behaves like a fluid layout.{{/i}}</p>
<div class="semifluid-layouts">
@@ -495,6 +496,7 @@
</ul>
<!-- Desktop row -->
<a name="row-desktop"></a>
<h2>{{_i}}Desktop rows{{/i}}</h2>
<p>{{_i}}By default columns of a <code>.row</code> are show next to each other, however for phones the columns are show underneath each other. By adding the class <code>.row-desktop</code> to a row,
it will display the columns underneath each other for tablets as well.{{/i}}</p>