mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-05 16:42:29 +03:00
update docs to include separate responsive css, update docs to highlight proper file name, updated makefile to build responsive separately
This commit is contained in:
Mark Otto
Vendored
+245
@@ -0,0 +1,245 @@
|
||||
.hidden {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.navbar .nav {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 180px;
|
||||
padding-top: 40px;
|
||||
list-style: none;
|
||||
}
|
||||
.navbar .nav, .navbar .nav > li:last-child a {
|
||||
-webkit-border-radius: 0 0 4px 0;
|
||||
-moz-border-radius: 0 0 4px 0;
|
||||
border-radius: 0 0 4px 0;
|
||||
}
|
||||
.navbar .nav > li {
|
||||
float: none;
|
||||
display: none;
|
||||
}
|
||||
.navbar .nav > li > a {
|
||||
float: none;
|
||||
background-color: #222;
|
||||
}
|
||||
.navbar .nav > .active {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.navbar .nav > .active > a {
|
||||
background-color: transparent;
|
||||
}
|
||||
.navbar .nav > .active > a:hover {
|
||||
background-color: #333;
|
||||
}
|
||||
.navbar .nav > .active > a:after {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-top: 8px;
|
||||
margin-left: 6px;
|
||||
text-indent: -99999px;
|
||||
vertical-align: top;
|
||||
border-left: 4px solid transparent;
|
||||
border-right: 4px solid transparent;
|
||||
border-top: 4px solid #ffffff;
|
||||
filter: alpha(opacity=100);
|
||||
-moz-opacity: 1;
|
||||
opacity: 1;
|
||||
content: "↓";
|
||||
}
|
||||
.navbar .nav:hover > li {
|
||||
display: block;
|
||||
}
|
||||
.navbar .nav:hover > li > a:hover {
|
||||
background-color: #333;
|
||||
}
|
||||
.form-horizontal .control-group > label {
|
||||
float: none;
|
||||
width: auto;
|
||||
padding-top: 0;
|
||||
text-align: left;
|
||||
}
|
||||
.form-horizontal .controls {
|
||||
margin-left: 0;
|
||||
}
|
||||
.form-horizontal .control-list {
|
||||
padding-top: 0;
|
||||
}
|
||||
.form-horizontal .form-actions {
|
||||
padding-left: 0;
|
||||
}
|
||||
.modal {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
.modal.fade.in {
|
||||
top: auto;
|
||||
}
|
||||
.modal-header .close {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.navbar-fixed {
|
||||
position: absolute;
|
||||
}
|
||||
.navbar-fixed .nav {
|
||||
float: none;
|
||||
}
|
||||
.container {
|
||||
width: auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.row {
|
||||
margin-left: 0;
|
||||
}
|
||||
.row > [class*="span"] {
|
||||
float: none;
|
||||
display: block;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) and (max-width: 940px) {
|
||||
.container {
|
||||
width: 748px;
|
||||
}
|
||||
.span1 {
|
||||
width: 44px;
|
||||
}
|
||||
.span2 {
|
||||
width: 108px;
|
||||
}
|
||||
.span3 {
|
||||
width: 172px;
|
||||
}
|
||||
.span4 {
|
||||
width: 236px;
|
||||
}
|
||||
.span5 {
|
||||
width: 300px;
|
||||
}
|
||||
.span6 {
|
||||
width: 364px;
|
||||
}
|
||||
.span7 {
|
||||
width: 428px;
|
||||
}
|
||||
.span8 {
|
||||
width: 492px;
|
||||
}
|
||||
.span9 {
|
||||
width: 556px;
|
||||
}
|
||||
.span10 {
|
||||
width: 620px;
|
||||
}
|
||||
.span11 {
|
||||
width: 684px;
|
||||
}
|
||||
.span12 {
|
||||
width: 748px;
|
||||
}
|
||||
.offset1 {
|
||||
margin-left: 64px;
|
||||
}
|
||||
.offset2 {
|
||||
margin-left: 128px;
|
||||
}
|
||||
.offset3 {
|
||||
margin-left: 192px;
|
||||
}
|
||||
.offset4 {
|
||||
margin-left: 256px;
|
||||
}
|
||||
.offset5 {
|
||||
margin-left: 320px;
|
||||
}
|
||||
.offset6 {
|
||||
margin-left: 384px;
|
||||
}
|
||||
.offset7 {
|
||||
margin-left: 448px;
|
||||
}
|
||||
.offset8 {
|
||||
margin-left: 512px;
|
||||
}
|
||||
.offset9 {
|
||||
margin-left: 576px;
|
||||
}
|
||||
.offset10 {
|
||||
margin-left: 640px;
|
||||
}
|
||||
.offset11 {
|
||||
margin-left: 704px;
|
||||
}
|
||||
.offset12 {
|
||||
margin-left: 768px;
|
||||
}
|
||||
}
|
||||
/*
|
||||
@media (min-width: 1210px) {
|
||||
|
||||
// Reset grid variables
|
||||
@gridColumns: 12;
|
||||
@gridColumnWidth: 70px;
|
||||
@gridGutterWidth: 30px;
|
||||
@siteWidth: 1170px;
|
||||
|
||||
// Bring grid mixins to recalculate widths
|
||||
.columns(@columnSpan: 1) {
|
||||
width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
|
||||
}
|
||||
.offset(@columnOffset: 1) {
|
||||
margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @gridGutterWidth;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: @siteWidth;
|
||||
}
|
||||
.row {
|
||||
margin-left: @gridGutterWidth * -1;
|
||||
}
|
||||
[class*="span"] {
|
||||
margin-left: @gridGutterWidth;
|
||||
}
|
||||
|
||||
// Default columns
|
||||
.span1 { .columns(1); }
|
||||
.span2 { .columns(2); }
|
||||
.span3 { .columns(3); }
|
||||
.span4 { .columns(4); }
|
||||
.span5 { .columns(5); }
|
||||
.span6 { .columns(6); }
|
||||
.span7 { .columns(7); }
|
||||
.span8 { .columns(8); }
|
||||
.span9 { .columns(9); }
|
||||
.span10 { .columns(10); }
|
||||
.span11 { .columns(11); }
|
||||
.span12 { .columns(12); }
|
||||
|
||||
// Offset column options
|
||||
.offset1 { .offset(1); }
|
||||
.offset2 { .offset(2); }
|
||||
.offset3 { .offset(3); }
|
||||
.offset4 { .offset(4); }
|
||||
.offset5 { .offset(5); }
|
||||
.offset6 { .offset(6); }
|
||||
.offset7 { .offset(7); }
|
||||
.offset8 { .offset(8); }
|
||||
.offset9 { .offset(9); }
|
||||
.offset10 { .offset(10); }
|
||||
.offset11 { .offset(11); }
|
||||
.offset12 { .offset(12); }
|
||||
|
||||
}
|
||||
*/
|
||||
Reference in New Issue
Block a user