mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-01 13:24:25 +01:00
Merge branch '2.0-wip' of https://github.com/twitter/bootstrap into 2.0-wip
Conflicts: bootstrap.css docs/assets/js/application.js docs/base-css.html docs/components.html docs/index.html docs/javascript.html docs/less.html docs/scaffolding.html docs/upgrading.html
This commit is contained in:
Jacob Thornton
commit
35fdbad24b
117
bootstrap.css
vendored
117
bootstrap.css
vendored
@ -6,7 +6,11 @@
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Designed and built with all the love in the world @twitter by @mdo and @fat.
|
||||
<<<<<<< HEAD
|
||||
* Date: Thu Dec 22 19:09:49 PST 2011
|
||||
=======
|
||||
* Date: Wed Dec 21 18:38:56 CST 2011
|
||||
>>>>>>> 9fb380151d477f1741b7609ade7a9e7fd5450b2c
|
||||
*/
|
||||
html, body {
|
||||
margin: 0;
|
||||
@ -919,6 +923,9 @@ textarea[readonly] {
|
||||
.inline-inputs span {
|
||||
padding: 0 2px 0 1px;
|
||||
}
|
||||
.input-prepend, .input-append {
|
||||
overflow: hidden;
|
||||
}
|
||||
.input-prepend input, .input-append input {
|
||||
-webkit-border-radius: 0 3px 3px 0;
|
||||
-moz-border-radius: 0 3px 3px 0;
|
||||
@ -1534,7 +1541,6 @@ footer {
|
||||
.alert-message.danger,
|
||||
.btn.error,
|
||||
.alert-message.error {
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
background-color: #c43c35;
|
||||
background-image: -khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));
|
||||
background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
|
||||
@ -1549,7 +1555,6 @@ footer {
|
||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.btn.success, .alert-message.success {
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
background-color: #57a957;
|
||||
background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));
|
||||
background-image: -moz-linear-gradient(top, #62c462, #57a957);
|
||||
@ -1564,7 +1569,6 @@ footer {
|
||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.btn.info, .alert-message.info {
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
background-color: #339bb9;
|
||||
background-image: -khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));
|
||||
background-image: -moz-linear-gradient(top, #5bc0de, #339bb9);
|
||||
@ -1610,7 +1614,7 @@ footer {
|
||||
transition: 0.1s linear all;
|
||||
}
|
||||
.btn:hover {
|
||||
color: #333;
|
||||
color: #404040;
|
||||
text-decoration: none;
|
||||
background-position: 0 -15px;
|
||||
}
|
||||
@ -1759,7 +1763,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
|
||||
margin-bottom: 18px;
|
||||
color: #404040;
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
background-color: #eedc94;
|
||||
background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));
|
||||
background-image: -moz-linear-gradient(top, #fceec1, #eedc94);
|
||||
@ -1802,6 +1805,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
|
||||
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
.alert-message.error, .alert-message.success, .alert-message.info {
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.alert-message.block-message {
|
||||
padding: 14px;
|
||||
background-image: none;
|
||||
@ -1905,6 +1911,104 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
|
||||
.label.notice {
|
||||
background-color: #62cffc;
|
||||
}
|
||||
.dropdown {
|
||||
position: relative;
|
||||
}
|
||||
.dropdown-toggle: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=30);
|
||||
-moz-opacity: 0.3;
|
||||
opacity: 0.3;
|
||||
content: "↓";
|
||||
}
|
||||
.dropdown:hover .dropdown-toggle:after {
|
||||
filter: alpha(opacity=100);
|
||||
-moz-opacity: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
z-index: 900;
|
||||
float: left;
|
||||
display: none;
|
||||
min-width: 160px;
|
||||
max-width: 220px;
|
||||
_width: 160px;
|
||||
padding: 6px 0;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
background-color: #ffffff;
|
||||
border-color: #999;
|
||||
border-color: rgba(0, 0, 0, 0.2);
|
||||
border-style: solid;
|
||||
border-width: 0 1px 1px;
|
||||
-webkit-border-radius: 0 0 6px 6px;
|
||||
-moz-border-radius: 0 0 6px 6px;
|
||||
border-radius: 0 0 6px 6px;
|
||||
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
-webkit-background-clip: padding-box;
|
||||
-moz-background-clip: padding-box;
|
||||
background-clip: padding-box;
|
||||
zoom: 1;
|
||||
}
|
||||
.dropdown-menu li {
|
||||
float: none;
|
||||
display: block;
|
||||
background-color: none;
|
||||
}
|
||||
.dropdown-menu .divider {
|
||||
height: 1px;
|
||||
margin: 5px 0;
|
||||
overflow: hidden;
|
||||
background-color: #eee;
|
||||
border-bottom: 1px solid #ffffff;
|
||||
}
|
||||
.topbar .dropdown-menu a, .dropdown-menu a {
|
||||
display: block;
|
||||
padding: 4px 15px;
|
||||
clear: both;
|
||||
font-weight: normal;
|
||||
line-height: 18px;
|
||||
color: #808080;
|
||||
text-shadow: 0 1px 0 #ffffff;
|
||||
}
|
||||
.topbar .dropdown-menu a:hover, .dropdown-menu a:hover {
|
||||
color: #404040;
|
||||
text-decoration: none;
|
||||
background-color: #dddddd;
|
||||
background-image: -khtml-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));
|
||||
background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
|
||||
background-image: -ms-linear-gradient(top, #eeeeee, #dddddd);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #dddddd));
|
||||
background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
|
||||
background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
|
||||
background-image: linear-gradient(top, #eeeeee, #dddddd);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0);
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
|
||||
-moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
|
||||
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
|
||||
}
|
||||
.dropdown.open .dropdown-toggle {
|
||||
color: #ffffff;
|
||||
background: #ccc;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.dropdown.open .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
.tabs, .pills {
|
||||
padding: 0;
|
||||
margin: 0 0 20px;
|
||||
@ -2539,6 +2643,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
|
||||
}
|
||||
.thumbnail {
|
||||
display: block;
|
||||
padding: 4px;
|
||||
line-height: 1;
|
||||
border: 1px solid #ddd;
|
||||
-webkit-border-radius: 4px;
|
||||
@ -2556,7 +2661,7 @@ a.thumbnail:hover {
|
||||
}
|
||||
.thumbnail > img {
|
||||
display: block;
|
||||
margin: 4px;
|
||||
max-width: 100%;
|
||||
}
|
||||
.thumbnail .caption {
|
||||
padding: 9px;
|
||||
|
||||
25
bootstrap.min.css
vendored
25
bootstrap.min.css
vendored
@ -150,7 +150,7 @@ input[disabled],select[disabled],textarea[disabled],input[readonly],select[reado
|
||||
.inline-inputs input.mini{width:60px;}
|
||||
.inline-inputs input.small{width:90px;}
|
||||
.inline-inputs span{padding:0 2px 0 1px;}
|
||||
.input-prepend input,.input-append input{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;}
|
||||
.input-prepend,.input-append{overflow:hidden;}.input-prepend input,.input-append input{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;}
|
||||
.input-prepend .add-on,.input-append .add-on{position:relative;z-index:2;float:left;display:block;width:auto;min-width:16px;height:18px;margin-right:-1px;padding:4px 4px 4px 5px;font-weight:normal;line-height:18px;color:#bfbfbf;text-align:center;text-shadow:0 1px 0 #ffffff;background-color:#f5f5f5;border:1px solid #ccc;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;}
|
||||
.input-prepend .active,.input-append .active{background-color:#a9dba9;border-color:#46a546;}
|
||||
.input-prepend .add-on{*margin-top:1px;}
|
||||
@ -212,10 +212,10 @@ tbody tr:last-child th,tbody tr:last-child td{border-bottom:0;}
|
||||
footer{padding-top:17px;margin-top:17px;border-top:1px solid #eee;}
|
||||
.page-header{margin-bottom:27px;border-bottom:1px solid #eee;-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);}.page-header h1{margin-bottom:13.5px;}
|
||||
.btn.danger,.alert-message.danger,.btn.danger:hover,.alert-message.danger:hover,.btn.error,.alert-message.error,.btn.error:hover,.alert-message.error:hover,.btn.success,.alert-message.success,.btn.success:hover,.alert-message.success:hover,.btn.info,.alert-message.info,.btn.info:hover,.alert-message.info:hover{color:#ffffff;}
|
||||
.btn.danger,.alert-message.danger,.btn.error,.alert-message.error{text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#c43c35;background-image:-khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));background-image:-moz-linear-gradient(top, #ee5f5b, #c43c35);background-image:-ms-linear-gradient(top, #ee5f5b, #c43c35);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));background-image:-webkit-linear-gradient(top, #ee5f5b, #c43c35);background-image:-o-linear-gradient(top, #ee5f5b, #c43c35);background-image:linear-gradient(top, #ee5f5b, #c43c35);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);border-color:#c43c35 #c43c35 #882a25;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
|
||||
.btn.success,.alert-message.success{text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#57a957;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);border-color:#57a957 #57a957 #3d773d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
|
||||
.btn.info,.alert-message.info{text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);border-color:#339bb9 #339bb9 #22697d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
|
||||
.btn{display:inline-block;padding:5px 14px 6px;font-size:13px;line-height:normal;color:#333;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);background-color:#e6e6e6;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-repeat:no-repeat;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);cursor:pointer;-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;-ms-transition:0.1s linear all;-o-transition:0.1s linear all;transition:0.1s linear all;}.btn:hover{color:#333;text-decoration:none;background-position:0 -15px;}
|
||||
.btn.danger,.alert-message.danger,.btn.error,.alert-message.error{background-color:#c43c35;background-image:-khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));background-image:-moz-linear-gradient(top, #ee5f5b, #c43c35);background-image:-ms-linear-gradient(top, #ee5f5b, #c43c35);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));background-image:-webkit-linear-gradient(top, #ee5f5b, #c43c35);background-image:-o-linear-gradient(top, #ee5f5b, #c43c35);background-image:linear-gradient(top, #ee5f5b, #c43c35);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);border-color:#c43c35 #c43c35 #882a25;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
|
||||
.btn.success,.alert-message.success{background-color:#57a957;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);border-color:#57a957 #57a957 #3d773d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
|
||||
.btn.info,.alert-message.info{background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);border-color:#339bb9 #339bb9 #22697d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
|
||||
.btn{display:inline-block;padding:5px 14px 6px;font-size:13px;line-height:normal;color:#333;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);background-color:#e6e6e6;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-repeat:no-repeat;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);cursor:pointer;-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;-ms-transition:0.1s linear all;-o-transition:0.1s linear all;transition:0.1s linear all;}.btn:hover{color:#404040;text-decoration:none;background-position:0 -15px;}
|
||||
.btn:focus{outline:1px dotted #666;}
|
||||
.btn.primary{color:#ffffff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#0064cd;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);border-color:#0064cd #0064cd #003f81;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
|
||||
.btn.active,.btn:active{-webkit-box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);}
|
||||
@ -234,11 +234,12 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
|
||||
.btn-group .btn:last-child{-webkit-border-top-right-radius:4px;-moz-border-radius-topright:4px;border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;-moz-border-radius-bottomright:4px;border-bottom-right-radius:4px;}
|
||||
.btn-group .btn:hover,.btn-group .btn:focus,.btn-group .btn:active{z-index:2;}
|
||||
.close{float:right;font-size:20px;font-weight:bold;line-height:13.5px;color:#000000;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-moz-opacity:0.2;opacity:0.2;}.close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-moz-opacity:0.4;opacity:0.4;}
|
||||
.alert-message{position:relative;padding:7px 15px;margin-bottom:18px;color:#404040;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#eedc94;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(top, #fceec1, #eedc94);background-image:-ms-linear-gradient(top, #fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(top, #fceec1, #eedc94);background-image:-o-linear-gradient(top, #fceec1, #eedc94);background-image:linear-gradient(top, #fceec1, #eedc94);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);border-color:#eedc94 #eedc94 #e4c652;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);border-width:1px;border-style:solid;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);}.alert-message .close{*margin-top:3px;}
|
||||
.alert-message{position:relative;padding:7px 15px;margin-bottom:18px;color:#404040;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);background-color:#eedc94;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(top, #fceec1, #eedc94);background-image:-ms-linear-gradient(top, #fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(top, #fceec1, #eedc94);background-image:-o-linear-gradient(top, #fceec1, #eedc94);background-image:linear-gradient(top, #fceec1, #eedc94);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);border-color:#eedc94 #eedc94 #e4c652;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);border-width:1px;border-style:solid;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);}.alert-message .close{*margin-top:3px;}
|
||||
.alert-message h5{line-height:18px;}
|
||||
.alert-message p{margin-bottom:0;}
|
||||
.alert-message div{margin-top:5px;margin-bottom:2px;line-height:28px;}
|
||||
.alert-message .btn{-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);}
|
||||
.alert-message.error,.alert-message.success,.alert-message.info{text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);}
|
||||
.alert-message.block-message{padding:14px;background-image:none;background-color:#fdf5d9;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);border-color:#fceec1;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}.alert-message.block-message ul,.alert-message.block-message p{margin-right:30px;}
|
||||
.alert-message.block-message ul{margin-bottom:0;}
|
||||
.alert-message.block-message li{color:#404040;}
|
||||
@ -254,6 +255,14 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
|
||||
.label.warning{background-color:#f89406;}
|
||||
.label.success{background-color:#46a546;}
|
||||
.label.notice{background-color:#62cffc;}
|
||||
.dropdown{position:relative;}
|
||||
.dropdown-toggle: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=30);-moz-opacity:0.3;opacity:0.3;content:"↓";}
|
||||
.dropdown:hover .dropdown-toggle:after{filter:alpha(opacity=100);-moz-opacity:1;opacity:1;}
|
||||
.dropdown-menu{position:absolute;top:40px;z-index:900;float:left;display:none;min-width:160px;max-width:220px;_width:160px;padding:6px 0;margin-left:0;margin-right:0;background-color:#ffffff;border-color:#999;border-color:rgba(0, 0, 0, 0.2);border-style:solid;border-width:0 1px 1px;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);-moz-box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;zoom:1;}.dropdown-menu li{float:none;display:block;background-color:none;}
|
||||
.dropdown-menu .divider{height:1px;margin:5px 0;overflow:hidden;background-color:#eee;border-bottom:1px solid #ffffff;}
|
||||
.topbar .dropdown-menu a,.dropdown-menu a{display:block;padding:4px 15px;clear:both;font-weight:normal;line-height:18px;color:#808080;text-shadow:0 1px 0 #ffffff;}.topbar .dropdown-menu a:hover,.dropdown-menu a:hover{color:#404040;text-decoration:none;background-color:#dddddd;background-image:-khtml-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));background-image:-moz-linear-gradient(top, #eeeeee, #dddddd);background-image:-ms-linear-gradient(top, #eeeeee, #dddddd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #dddddd));background-image:-webkit-linear-gradient(top, #eeeeee, #dddddd);background-image:-o-linear-gradient(top, #eeeeee, #dddddd);background-image:linear-gradient(top, #eeeeee, #dddddd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0);-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);}
|
||||
.dropdown.open .dropdown-toggle{color:#ffffff;background:#ccc;background:rgba(0, 0, 0, 0.3);}
|
||||
.dropdown.open .dropdown-menu{display:block;}
|
||||
.tabs,.pills{padding:0;margin:0 0 20px;list-style:none;zoom:1;}.tabs:before,.pills:before,.tabs:after,.pills:after{display:table;*display:inline;content:"";zoom:1;}
|
||||
.tabs:after,.pills:after{clear:both;}
|
||||
.tabs>li,.pills>li{float:left;}.tabs>li>a,.pills>li>a{display:block;}
|
||||
@ -337,9 +346,9 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
|
||||
.thumbnails{margin-left:-20px;margin-bottom:0;list-style:none;zoom:1;}.thumbnails:before,.thumbnails:after{display:table;*display:inline;content:"";zoom:1;}
|
||||
.thumbnails:after{clear:both;}
|
||||
.thumbnails>li{float:left;margin:0 0 20px 20px;}
|
||||
.thumbnail{display:block;line-height:1;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);}
|
||||
.thumbnail{display:block;padding:4px;line-height:1;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);}
|
||||
a.thumbnail:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);}
|
||||
.thumbnail>img{display:block;margin:4px;}
|
||||
.thumbnail>img{display:block;max-width:100%;}
|
||||
.thumbnail .caption{padding:9px;}
|
||||
.hidden{display:none;visibility:hidden;}
|
||||
@media (max-width: 480px){.modal{width:auto;margin:0;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;}}@media (max-width: 768px){.container{width:auto;padding:0 20px;} .row{margin-left:0;} [class*="span"]{float:none;display:block;width:auto;margin:0;} .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .nav,.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;} .nav>li{float:none;display:none;} .nav>li>a{float:none;background-color:#222;} .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar ul .active>a{background-color:transparent;} .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:"↓";} .nav>.active a:hover{background-color:rgba(255, 255, 255, 0.05);}}@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;}}
|
||||
|
||||
@ -315,7 +315,12 @@ h2 + table {
|
||||
|
||||
/* Example sites showcase */
|
||||
.example-sites img {
|
||||
width: 290px;
|
||||
max-width: 290px;
|
||||
}
|
||||
.built-with {
|
||||
margin: -18px 0 27px;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.scrollspy-example {
|
||||
@ -382,12 +387,15 @@ h2 + table {
|
||||
.example-sites {
|
||||
margin-left: 0;
|
||||
}
|
||||
.example-sites a {
|
||||
.example-sites > li {
|
||||
float: none;
|
||||
display: block;
|
||||
max-width: 300px;
|
||||
margin: 0 auto 18px;
|
||||
}
|
||||
.example-sites img {
|
||||
max-width: 270px;
|
||||
}
|
||||
|
||||
table code {
|
||||
white-space: normal;
|
||||
|
||||
@ -4,6 +4,18 @@ $(function(){
|
||||
// IT'S ALL JUST JUNK FOR OUR DOCS!
|
||||
// ++++++++++++++++++++++++++++++++++++++++++
|
||||
|
||||
// Hide the Mobile Safari address bar once loaded
|
||||
// ==============================================
|
||||
|
||||
// Set a timeout...
|
||||
setTimeout(function(){
|
||||
// Hide the address bar!
|
||||
window.scrollTo(0, 1);
|
||||
}, 0);
|
||||
|
||||
// table sort example
|
||||
// ==================
|
||||
|
||||
// make code pretty
|
||||
prettyPrint && prettyPrint()
|
||||
|
||||
@ -61,4 +73,4 @@ $(function(){
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
})
|
||||
|
||||
@ -762,6 +762,43 @@
|
||||
<h1>Forms</h1>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
|
||||
Types of forms
|
||||
default (stacked)
|
||||
horizontal (change the class)
|
||||
search
|
||||
inline
|
||||
Form elements
|
||||
form
|
||||
fieldset
|
||||
legend
|
||||
label
|
||||
input
|
||||
text (password, email, etc)
|
||||
radio
|
||||
checkbox
|
||||
textarea
|
||||
rows
|
||||
select
|
||||
single
|
||||
multiple
|
||||
size
|
||||
Custom form elements
|
||||
Input prepend and append (for @ and $)
|
||||
checkbox and radio lists
|
||||
Explaining the default Bootstrap form structure
|
||||
Bulletproofing our forms means adding a bit of extra structure and providing more classes for customization and event handling
|
||||
Form vertical and horizontal forms, we require a wrapping element.
|
||||
we suggest a fieldset
|
||||
but could be anthing so long as it uses the proper class
|
||||
Form states
|
||||
warning
|
||||
error
|
||||
success
|
||||
|
||||
-->
|
||||
|
||||
<h2>Four types of forms</h2>
|
||||
<table class="bordered-table striped-table">
|
||||
<thead>
|
||||
@ -842,7 +879,7 @@
|
||||
</div>
|
||||
<div class="span9">
|
||||
<form class="horizontal-form">
|
||||
<legend>Example form</legend>
|
||||
<legend>Example form section</legend>
|
||||
<fieldset class="control-group">
|
||||
<label class="control-label" for="input01">Text input</label>
|
||||
<div class="controls">
|
||||
@ -850,6 +887,16 @@
|
||||
<p class="help-text">Help text here. Be sure to fill this out like so, or else!</p>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="control-group">
|
||||
<label class="control-label" for="prependedInput">Prepended text</label>
|
||||
<div class="controls">
|
||||
<div class="input-prepend">
|
||||
<span class="add-on">@</span>
|
||||
<input class="input-small" id="prependedInput" name="prependedInput" size="16" type="text">
|
||||
</div>
|
||||
<span class="help-block">Here's some help text</span>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="control-group">
|
||||
<label class="control-label" for="select01">Select list</label>
|
||||
<div class="controls">
|
||||
@ -874,23 +921,44 @@
|
||||
</select>
|
||||
</div>
|
||||
</fieldset>
|
||||
<legend>Example form</legend>
|
||||
<legend>Example form section</legend>
|
||||
<fieldset class="control-group">
|
||||
<label class="control-label" for="textarea">Textarea</label>
|
||||
<div class="controls">
|
||||
<textarea class="input-xlarge" name="textarea" id="textarea" rows="3"></textarea>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="control-group">
|
||||
<label class="control-label" for="fileInput">Disabled input</label>
|
||||
<div class="controls">
|
||||
<input class="input-xlarge disabled" id="disabledInput" name="disabledInput" size="30" type="text" placeholder="Disabled input here... carry on." disabled>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="control-group">
|
||||
<label class="control-label" for="fileInput">File input</label>
|
||||
<div class="controls">
|
||||
<input class="input-file" id="fileInput" name="fileInput" type="file">
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="control-group has-error">
|
||||
<fieldset class="control-group warning">
|
||||
<label class="control-label" for="inputError">Input with warning</label>
|
||||
<div class="controls">
|
||||
<input type="text" name="inputError">
|
||||
<span class="help-inline">Something may have gone wrong</span>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="control-group error">
|
||||
<label class="control-label" for="inputError">Input with error</label>
|
||||
<div class="controls">
|
||||
<input type="text" name="inputError">
|
||||
<span class="help-inline">Please correct the error</span>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="control-group has-error">
|
||||
<label class="control-label" for="textareaError">Textarea with error</label>
|
||||
<fieldset class="control-group success">
|
||||
<label class="control-label" for="inputError">Input with success</label>
|
||||
<div class="controls">
|
||||
<textarea class="input-xlarge" rows="3"></textarea>
|
||||
<input type="text" name="inputError">
|
||||
<span class="help-inline">Woohoo!</span>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="control-group">
|
||||
@ -1110,8 +1178,7 @@
|
||||
|
||||
<!-- Le javascript -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<!-- <script src="http://code.jquery.com/jquery-1.7.min.js"></script> -->
|
||||
<script src="../js/tests/vendor/jquery.js"></script>
|
||||
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
|
||||
<script src="assets/js/google-code-prettify/prettify.js"></script>
|
||||
<script>$(function () { prettyPrint() })</script>
|
||||
<script src="assets/js/application.js"></script>
|
||||
|
||||
@ -22,6 +22,18 @@
|
||||
<link rel="apple-touch-icon" href="assets/ico/bootstrap-apple-57x57.png">
|
||||
<link rel="apple-touch-icon" sizes="72x72" href="assets/ico/bootstrap-apple-72x72.png">
|
||||
<link rel="apple-touch-icon" sizes="114x114" href="assets/ico/bootstrap-apple-114x114.png">
|
||||
|
||||
<!-- Le javascript -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
|
||||
<script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script>
|
||||
<script src="assets/js/google-code-prettify/prettify.js"></script>
|
||||
<script>$(function () { prettyPrint() })</script>
|
||||
<script src="../js/bootstrap-transitions.js"></script>
|
||||
<script src="../js/bootstrap-dropdown.js"></script>
|
||||
<script src="../js/bootstrap-twipsy.js"></script>
|
||||
<script src="../js/bootstrap-scrollspy.js"></script>
|
||||
<script src="assets/js/application.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -201,11 +213,33 @@
|
||||
|
||||
|
||||
|
||||
<!-- Navigation
|
||||
<!-- Autocomplete
|
||||
================================================== -->
|
||||
<section id="navigation">
|
||||
<section id="autocomplete">
|
||||
<div class="page-header">
|
||||
<h1>Navigation</h1>
|
||||
<h1>Autocomplete <small></small></h1>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Carousel
|
||||
================================================== -->
|
||||
<section id="carousel">
|
||||
<div class="page-header">
|
||||
<h1>Carousel <small></small></h1>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Navbar
|
||||
================================================== -->
|
||||
<section id="navbar">
|
||||
<div class="page-header">
|
||||
<h1>Navbar</h1>
|
||||
</div>
|
||||
<h2>Fixed navbar</h2>
|
||||
<div class="navbar navbar-static" >
|
||||
@ -262,11 +296,19 @@
|
||||
</div>
|
||||
<p><strong>Note:</strong> When using the navbar on any page, be sure to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code><body></code>.</p>
|
||||
|
||||
<br>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Tabs & Pills
|
||||
================================================== -->
|
||||
<section id="tabsAndPills">
|
||||
<div class="page-header">
|
||||
<h1>Tabs and pills <small></small></h1>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<h2>Tabs and pills</h2>
|
||||
<p>Create simple secondary navigation with a <code><ul></code>. Swap between tabs or pills by adding the appropriate class.</p>
|
||||
<p>Great for sub-sections of content like our account settings pages and user timelines for toggling between pages of like content. Available in tabbed or pill styles.</p>
|
||||
</div>
|
||||
@ -428,10 +470,19 @@
|
||||
</div>
|
||||
</div><!-- /row -->
|
||||
|
||||
<!-- Breadcrumbs -->
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Breadcrumbs
|
||||
================================================== -->
|
||||
<section id="breadcrumbs">
|
||||
<div class="page-header">
|
||||
<h1>Breadcrumbs <small></small></h1>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<h2>Breadcrumbs</h2>
|
||||
<p>Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation.</p>
|
||||
</div>
|
||||
<div class="span9">
|
||||
@ -464,10 +515,20 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Step nav
|
||||
================================================== -->
|
||||
<section id="stepNav">
|
||||
<div class="page-header">
|
||||
<h1>Step nav <small></small></h1>
|
||||
</div>
|
||||
|
||||
<!-- Step nav -->
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<h2>Step nav</h2>
|
||||
<p>Placeholder for now!</p>
|
||||
</div>
|
||||
<div class="span9">
|
||||
@ -486,7 +547,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Pagination
|
||||
================================================== -->
|
||||
<section id="carousel">
|
||||
<div class="page-header">
|
||||
<h1>Pagination <small></small></h1>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<h2>Pagination</h2>
|
||||
@ -644,11 +715,11 @@
|
||||
</section>
|
||||
|
||||
|
||||
<!-- Popovers
|
||||
<!-- Modals
|
||||
================================================== -->
|
||||
<section id="popovers">
|
||||
<div class="page-header">
|
||||
<h1>Popovers <small>Components for displaying content in modals, tooltips, and popovers</small></h1>
|
||||
<h1>Modals <small></small></h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
@ -676,7 +747,17 @@
|
||||
</div>
|
||||
</div><!-- /row -->
|
||||
|
||||
<!-- Tooltips -->
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Twipsies
|
||||
================================================== -->
|
||||
<section id="carousel">
|
||||
<div class="page-header">
|
||||
<h1>Twipsy tooltips <small></small></h1>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<h2>Tooltips</h2>
|
||||
@ -694,7 +775,17 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
|
||||
</div>
|
||||
</div><!-- /row -->
|
||||
|
||||
<!-- Popovers -->
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Popovers
|
||||
================================================== -->
|
||||
<section id="popovers">
|
||||
<div class="page-header">
|
||||
<h1>Popovers <small></small></h1>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<h2>Popovers</h2>
|
||||
@ -721,6 +812,8 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Footer
|
||||
================================================== -->
|
||||
<footer class="footer">
|
||||
@ -730,19 +823,5 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
|
||||
<p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
|
||||
</footer>
|
||||
</div><!-- /container -->
|
||||
|
||||
<!-- Le javascript -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<!-- <script src="http://code.jquery.com/jquery-1.7.min.js"></script> -->
|
||||
<script src="../js/tests/vendor/jquery.js"></script>
|
||||
|
||||
<script src="assets/js/google-code-prettify/prettify.js"></script>
|
||||
|
||||
<script src="../js/bootstrap-transition.js"></script>
|
||||
<script src="../js/bootstrap-twipsy.js"></script>
|
||||
<script src="../js/bootstrap-dropdown.js"></script>
|
||||
<script src="../js/bootstrap-tab.js"></script>
|
||||
|
||||
<script src="assets/js/application.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -107,39 +107,23 @@
|
||||
|
||||
<div class="marketing">
|
||||
<h1>Built with Bootstrap</h1>
|
||||
<ul class="media-grid example-sites">
|
||||
<li>
|
||||
<a href="http://kippt.com/" target="_blank">
|
||||
<p class="built-with">For even more sites built with Bootstrap, <a href="http://builtwithbootstrap.tumblr.com/" target="_blank">visit the unofficial Tumblr</a>.</p>
|
||||
<ul class="thumbnails example-sites">
|
||||
<li class="span4">
|
||||
<a class="thumbnail" href="http://kippt.com/" target="_blank">
|
||||
<img src="assets/img/example-sites/kippt.png" alt="Kippt">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://www.fleetio.com/" target="_blank">
|
||||
<li class="span4">
|
||||
<a class="thumbnail" href="http://www.fleetio.com/" target="_blank">
|
||||
<img src="assets/img/example-sites/fleetio.png" alt="Fleetio">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://www.jshint.com/" target="_blank">
|
||||
<li class="span4">
|
||||
<a class="thumbnail" href="http://www.jshint.com/" target="_blank">
|
||||
<img src="assets/img/example-sites/jshint.png" alt="JS Hint">
|
||||
</a>
|
||||
</li>
|
||||
<!--
|
||||
<li>
|
||||
<a href="http://bartop.co/" target="_blank">
|
||||
<img src="assets/img/example-sites/bartop.png" alt="Bartop.co">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://railwayjs.com/" target="_blank">
|
||||
<img src="assets/img/example-sites/railwayjs.png" alt="RailwayJS">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://www.totalwireframe.com/" target="_blank">
|
||||
<img src="assets/img/example-sites/totalwireframe.png" alt="Total Wireframe">
|
||||
</a>
|
||||
</li>
|
||||
-->
|
||||
</ul>
|
||||
|
||||
<h1>Designed for everyone, everywhere</h1>
|
||||
@ -234,5 +218,7 @@
|
||||
<!-- Le javascript -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
|
||||
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
|
||||
<script src="assets/js/application.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -102,7 +102,7 @@
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="./javascript.html#popover">bootstrap-popover.js</a></td>
|
||||
<td>The popover plugin provides a simple interface for adding popovers to your application. It extends the <a href="#twipsy">boostrap-twipsy.js</a> plugin, so be sure to grab that file as well when including popovers in your project!</td>
|
||||
<td>The popover plugin provides a simple interface for adding popovers to your application. It extends the <a href="#twipsy">bootstrap-twipsy.js</a> plugin, so be sure to grab that file as well when including popovers in your project!</td>
|
||||
</tr>
|
||||
</tr>
|
||||
<tr>
|
||||
@ -260,7 +260,7 @@ $('#myModal').on('hidden', function () {
|
||||
<a href="../js/bootstrap-dropdown.js" target="_blank" class="btn primary">Download</a>
|
||||
</div>
|
||||
<div class="span9 columns">
|
||||
<h3>Using boostrap-dropdown.js</h3>
|
||||
<h3>Using bootstrap-dropdown.js</h3>
|
||||
<pre class="prettyprint linenums">$('.dropdown-toggle').dropdown()</pre>
|
||||
<h3>Markup</h3>
|
||||
<p>To quickly add dropdown functionality to any element just add <code>data-toggle="dropdown"</code> and any valid bootstrap dropdown will automatically be activated.</p>
|
||||
@ -336,7 +336,7 @@ $('#myModal').on('hidden', function () {
|
||||
<a href="../js/bootstrap-scrollspy.js" target="_blank" class="btn primary">Download</a>
|
||||
</div>
|
||||
<div class="span9 columns">
|
||||
<h2>Using boostrap-scrollspy.js</h2>
|
||||
<h2>Using bootstrap-scrollspy.js</h2>
|
||||
<pre class="prettyprint linenums">$('#navbar').dropdown()</pre>
|
||||
<h3>Markup</h3>
|
||||
<p>To easily add scrollspy behavior to your topbar navigation, just add <code>data-spy="scroll"</code> to the element you want to spy on (most typically this would be the body).
|
||||
@ -410,7 +410,7 @@ $('#myModal').on('hidden', function () {
|
||||
<a href="../js/bootstrap-tab.js" target="_blank" class="btn primary">Download</a>
|
||||
</div>
|
||||
<div class="span9 columns">
|
||||
<h3>Using boostrap-tab.js</h3>
|
||||
<h3>Using bootstrap-tab.js</h3>
|
||||
<pre class="prettyprint linenums">$('#myTab').tab('show')</pre>
|
||||
<h3>Markup</h3>
|
||||
<p>You can activate a tab or pill navigation without writing any javascript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element.</p>
|
||||
@ -608,11 +608,11 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span3 columns">
|
||||
<p>The popover plugin provides a simple interface for adding popovers to your application. It extends the <a href="#twipsy">boostrap-twipsy.js</a> plugin, so be sure to grab that file as well when including popovers in your project!</p>
|
||||
<p>The popover plugin provides a simple interface for adding popovers to your application. It extends the <a href="#twipsy">bootstrap-twipsy.js</a> plugin, so be sure to grab that file as well when including popovers in your project!</p>
|
||||
<a href="../js/bootstrap-popover.js" target="_blank" class="btn primary">Download</a>
|
||||
</div>
|
||||
<div class="span9 columns">
|
||||
<h3>Using boostrap-popover.js</h3>
|
||||
<h3>Using bootstrap-popover.js</h3>
|
||||
<pre class="prettyprint linenums">$('#example').popover(options)</pre>
|
||||
<h3>Options</h3>
|
||||
<table class="bordered-table striped-table">
|
||||
|
||||
@ -466,8 +466,7 @@
|
||||
|
||||
<!-- Le javascript -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<!-- <script src="http://code.jquery.com/jquery-1.7.min.js"></script> -->
|
||||
<script src="../js/tests/vendor/jquery.js"></script>
|
||||
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
|
||||
<script src="assets/js/google-code-prettify/prettify.js"></script>
|
||||
<script src="assets/js/application.js"></script>
|
||||
</body>
|
||||
|
||||
@ -370,11 +370,10 @@
|
||||
|
||||
<!-- Le javascript -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<!-- <script src="http://code.jquery.com/jquery-1.7.min.js"></script> -->
|
||||
<script src="../js/tests/vendor/jquery.js"></script>
|
||||
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
|
||||
<script src="assets/js/google-code-prettify/prettify.js"></script>
|
||||
<script src="../js/bootstrap-transition.js"></script>
|
||||
<script src="../js/bootstrap-twipsy.js"></script>
|
||||
<script src="assets/js/application.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -38,7 +38,7 @@
|
||||
<li><a href="./base-css.html">Base CSS</a></li>
|
||||
<li><a href="./components.html">Components</a></li>
|
||||
<li><a href="./javascript.html">Javascript plugins</a></li>
|
||||
<li class="active"><a href="./less.html">Using LESS</a></li>
|
||||
<li><a href="./less.html">Using LESS</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@ -100,6 +100,16 @@
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<!--
|
||||
<li>
|
||||
<ul>
|
||||
<li></li>
|
||||
</ul>
|
||||
</li>
|
||||
-->
|
||||
</ul>
|
||||
|
||||
|
||||
<!-- Footer
|
||||
================================================== -->
|
||||
<footer class="footer">
|
||||
@ -109,5 +119,6 @@
|
||||
<p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
|
||||
</footer>
|
||||
</div><!-- /container -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
3
lib/bootstrap.less
vendored
3
lib/bootstrap.less
vendored
@ -27,13 +27,14 @@
|
||||
// Temp catchall for what's missing thus far
|
||||
@import "patterns.less";
|
||||
|
||||
@import "dropdowns.less";
|
||||
@import "tabs-pills.less";
|
||||
@import "breadcrumbs.less";
|
||||
@import "pagination.less";
|
||||
@import "modals.less";
|
||||
@import "twipsy.less";
|
||||
@import "popovers.less";
|
||||
@import "media-grids.less";
|
||||
@import "thumbnails.less";
|
||||
|
||||
// Responsive
|
||||
@import "responsive.less";
|
||||
94
lib/dropdowns.less
Normal file
94
lib/dropdowns.less
Normal file
@ -0,0 +1,94 @@
|
||||
// Dropdown Menus
|
||||
// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
|
||||
.dropdown {
|
||||
position: relative;
|
||||
}
|
||||
// The link that is clicked to toggle the dropdown
|
||||
.dropdown-toggle: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 @white;
|
||||
.opacity(30);
|
||||
content: "↓";
|
||||
}
|
||||
.dropdown:hover .dropdown-toggle:after {
|
||||
.opacity(100);
|
||||
}
|
||||
// The dropdown menu (ul)
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
z-index: 900;
|
||||
float: left;
|
||||
display: none; // None by default, but block on "open" of the menu
|
||||
min-width: 160px;
|
||||
max-width: 220px;
|
||||
_width: 160px;
|
||||
padding: 6px 0;
|
||||
margin-left: 0; // override default ul styles
|
||||
margin-right: 0;
|
||||
background-color: @white;
|
||||
border-color: #999;
|
||||
border-color: rgba(0,0,0,.2);
|
||||
border-style: solid;
|
||||
border-width: 0 1px 1px;
|
||||
.border-radius(0 0 6px 6px);
|
||||
.box-shadow(0 2px 4px rgba(0,0,0,.2));
|
||||
.background-clip(padding-box);
|
||||
zoom: 1; // do we need this?
|
||||
|
||||
// Unfloat any li's to make them stack
|
||||
li {
|
||||
float: none;
|
||||
display: block;
|
||||
background-color: none;
|
||||
}
|
||||
// Dividers (basically an hr) within the dropdown
|
||||
.divider {
|
||||
height: 1px;
|
||||
margin: 5px 0;
|
||||
overflow: hidden;
|
||||
background-color: #eee;
|
||||
border-bottom: 1px solid @white;
|
||||
}
|
||||
}
|
||||
|
||||
.topbar .dropdown-menu, .dropdown-menu {
|
||||
// Links within the dropdown menu
|
||||
a {
|
||||
display: block;
|
||||
padding: 4px 15px;
|
||||
clear: both;
|
||||
font-weight: normal;
|
||||
line-height: 18px;
|
||||
color: @gray;
|
||||
text-shadow: 0 1px 0 @white;
|
||||
// Hover state
|
||||
&:hover {
|
||||
color: @grayDark;
|
||||
text-decoration: none;
|
||||
#gradient > .vertical(#eeeeee, #dddddd);
|
||||
@shadow: inset 0 1px 0 rgba(0,0,0,.025), inset 0 -1px rgba(0,0,0,.025);
|
||||
.box-shadow(@shadow);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Open state for the dropdown
|
||||
.dropdown.open {
|
||||
.dropdown-toggle {
|
||||
color: @white;
|
||||
background: #ccc;
|
||||
background: rgba(0,0,0,.3);
|
||||
}
|
||||
.dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@ -325,6 +325,7 @@ textarea[readonly] {
|
||||
// Allow us to put symbols and text within the input field for a cleaner look
|
||||
.input-prepend,
|
||||
.input-append {
|
||||
overflow: hidden;
|
||||
input {
|
||||
.border-radius(0 3px 3px 0);
|
||||
}
|
||||
|
||||
@ -205,7 +205,6 @@
|
||||
|
||||
// Gradient Bar Colors for buttons and alerts
|
||||
.gradientBar(@primaryColor, @secondaryColor) {
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
||||
#gradient > .vertical(@primaryColor, @secondaryColor);
|
||||
border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
|
||||
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
|
||||
|
||||
@ -401,7 +401,7 @@ footer {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: #333;
|
||||
color: @grayDark;
|
||||
text-decoration: none;
|
||||
background-position: 0 -15px;
|
||||
}
|
||||
@ -414,6 +414,7 @@ footer {
|
||||
// Primary Button Type
|
||||
&.primary {
|
||||
color: @white;
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
||||
.gradientBar(@blue, @blueDark)
|
||||
}
|
||||
|
||||
@ -575,6 +576,12 @@ input[type=submit].btn {
|
||||
.box-shadow(0 1px 0 rgba(255,255,255,.25));
|
||||
}
|
||||
|
||||
&.error,
|
||||
&.success,
|
||||
&.info {
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
||||
}
|
||||
|
||||
&.block-message {
|
||||
padding: 14px;
|
||||
background-image: none;
|
||||
|
||||
@ -13,6 +13,7 @@
|
||||
}
|
||||
.thumbnail {
|
||||
display: block;
|
||||
padding: 4px;
|
||||
line-height: 1;
|
||||
border: 1px solid #ddd;
|
||||
.border-radius(4px);
|
||||
@ -26,7 +27,7 @@ a.thumbnail:hover {
|
||||
// Images and captions
|
||||
.thumbnail > img {
|
||||
display: block;
|
||||
margin: 4px;
|
||||
max-width: 100%;
|
||||
}
|
||||
.thumbnail .caption {
|
||||
padding: 9px;
|
||||
Loading…
Reference in New Issue
Block a user