mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-29 21:52:22 +01:00
Merge branch '1.3-wip' of github.com:twitter/bootstrap into 1.3-wip
This commit is contained in:
Jacob Thornton
commit
cf23dc4f24
63
bootstrap-1.2.0.css
vendored
63
bootstrap-1.2.0.css
vendored
@ -6,7 +6,7 @@
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Designed and built with all the love in the world @twitter by @mdo and @fat.
|
||||
* Date: Fri Sep 2 21:06:46 PDT 2011
|
||||
* Date: Fri Sep 2 23:08:36 PDT 2011
|
||||
*/
|
||||
/* Reset.less
|
||||
* Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
|
||||
@ -185,17 +185,18 @@ textarea {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.container {
|
||||
.fixed-container {
|
||||
width: 940px;
|
||||
margin: 0 auto;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
zoom: 1;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.container:before, .container:after {
|
||||
.fixed-container:before, .fixed-container:after {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
.container:after {
|
||||
.fixed-container:after {
|
||||
clear: both;
|
||||
}
|
||||
.btn.danger,
|
||||
@ -396,6 +397,15 @@ body {
|
||||
width: 940px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
zoom: 1;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.container:before, .container:after {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
.container:after {
|
||||
clear: both;
|
||||
}
|
||||
.container-fluid {
|
||||
padding-left: 20px;
|
||||
@ -435,6 +445,12 @@ a:hover {
|
||||
color: #0050a3;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.pull-right {
|
||||
float: right;
|
||||
}
|
||||
.pull-left {
|
||||
float: left;
|
||||
}
|
||||
/* Typography.less
|
||||
* Headings, body text, lists, code, and more for a versatile and durable typography system
|
||||
* ---------------------------------------------------------------------------------------- */
|
||||
@ -713,12 +729,13 @@ textarea {
|
||||
height: auto;
|
||||
}
|
||||
.uneditable-input {
|
||||
background-color: #eee;
|
||||
background-color: #fff;
|
||||
display: block;
|
||||
border-color: #ccc;
|
||||
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
|
||||
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
|
||||
border-color: #eee;
|
||||
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
|
||||
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
:-moz-placeholder {
|
||||
color: #bfbfbf;
|
||||
@ -736,7 +753,7 @@ input, select, textarea {
|
||||
-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
input:focus, textarea:focus {
|
||||
input:focus, select:focus, textarea:focus {
|
||||
outline: none;
|
||||
border-color: rgba(82, 168, 236, 0.8);
|
||||
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
|
||||
@ -808,14 +825,17 @@ select.xxlarge {
|
||||
width: 530px;
|
||||
}
|
||||
textarea.xxlarge {
|
||||
overflow-y: scroll;
|
||||
overflow-y: auto;
|
||||
}
|
||||
input[readonly]:focus, textarea[readonly]:focus, input.disabled {
|
||||
background: #f5f5f5;
|
||||
input[disabled],
|
||||
select[disabled],
|
||||
textarea[disabled],
|
||||
input[readonly],
|
||||
select[readonly],
|
||||
textarea[readonly] {
|
||||
background-color: #f5f5f5;
|
||||
border-color: #ddd;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.actions {
|
||||
background: #f5f5f5;
|
||||
@ -1145,6 +1165,13 @@ table .headerSortUp.purple, table .headerSortDown.purple {
|
||||
font-weight: 200;
|
||||
line-height: 1;
|
||||
}
|
||||
.topbar p {
|
||||
margin: 0;
|
||||
line-height: 40px;
|
||||
}
|
||||
.topbar p a:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
.topbar form {
|
||||
float: left;
|
||||
margin: 5px 0 0 0;
|
||||
@ -1446,6 +1473,7 @@ a.menu:after, .dropdown-toggle:after {
|
||||
display: block;
|
||||
}
|
||||
.tabs {
|
||||
float: left;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
@ -1510,7 +1538,6 @@ a.menu:after, .dropdown-toggle:after {
|
||||
}
|
||||
.hero-unit {
|
||||
background-color: #f5f5f5;
|
||||
margin-top: 60px;
|
||||
margin-bottom: 30px;
|
||||
padding: 60px;
|
||||
-webkit-border-radius: 6px;
|
||||
|
||||
22
bootstrap-1.2.0.min.css
vendored
22
bootstrap-1.2.0.min.css
vendored
@ -22,8 +22,8 @@ textarea{overflow:auto;vertical-align:top;}
|
||||
.clearfix{zoom:1;}.clearfix:before,.clearfix:after{display:table;content:"";}
|
||||
.clearfix:after{clear:both;}
|
||||
.center-block{display:block;margin-left:auto;margin-right:auto;}
|
||||
.container{width:940px;margin:0 auto;zoom:1;margin-bottom:18px;}.container:before,.container:after{display:table;content:"";}
|
||||
.container:after{clear:both;}
|
||||
.fixed-container{width:940px;margin-left:auto;margin-right:auto;zoom:1;margin-bottom:18px;}.fixed-container:before,.fixed-container:after{display:table;content:"";}
|
||||
.fixed-container:after{clear:both;}
|
||||
.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{background-color:#c43c35;background-repeat:repeat-x;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);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);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-repeat:repeat-x;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);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);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);}
|
||||
@ -65,7 +65,8 @@ textarea{overflow:auto;vertical-align:top;}
|
||||
.row .offset-two-thirds{margin-left:660px;}
|
||||
html,body{background-color:#fff;}
|
||||
body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:18px;color:#808080;}
|
||||
.container{width:940px;margin-left:auto;margin-right:auto;}
|
||||
.container{width:940px;margin-left:auto;margin-right:auto;zoom:1;margin-bottom:18px;}.container:before,.container:after{display:table;content:"";}
|
||||
.container:after{clear:both;}
|
||||
.container-fluid{padding-left:20px;padding-right:20px;zoom:1;margin-bottom:18px;}.container-fluid:before,.container-fluid:after{display:table;content:"";}
|
||||
.container-fluid:after{clear:both;}
|
||||
.container-fluid>.sidebar{float:left;width:220px;}
|
||||
@ -73,6 +74,8 @@ body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:
|
||||
.hide{display:none;}
|
||||
.show{display:block;}
|
||||
a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a:hover{color:#0050a3;text-decoration:underline;}
|
||||
.pull-right{float:right;}
|
||||
.pull-left{float:left;}
|
||||
p{font-size:13px;font-weight:normal;line-height:18px;margin-bottom:9px;}p small{font-size:11px;color:#bfbfbf;}
|
||||
h1,h2,h3,h4,h5,h6{font-weight:bold;color:#404040;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#bfbfbf;}
|
||||
h1{margin-bottom:18px;font-size:30px;line-height:36px;}h1 small{font-size:18px;}
|
||||
@ -114,11 +117,11 @@ input[type=file]{background-color:#fff;padding:initial;border:initial;line-heigh
|
||||
input[type=button],input[type=reset],input[type=submit]{width:auto;height:auto;}
|
||||
select,input[type=file]{height:27px;line-height:27px;}
|
||||
textarea{height:auto;}
|
||||
.uneditable-input{background-color:#eee;display:block;border-color:#ccc;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.075);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.075);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.075);}
|
||||
.uneditable-input{background-color:#fff;display:block;border-color:#eee;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);cursor:not-allowed;}
|
||||
:-moz-placeholder{color:#bfbfbf;}
|
||||
::-webkit-input-placeholder{color:#bfbfbf;}
|
||||
input,select,textarea{-webkit-transition:border linear 0.2s,box-shadow linear 0.2s;-moz-transition:border linear 0.2s,box-shadow linear 0.2s;-ms-transition:border linear 0.2s,box-shadow linear 0.2s;-o-transition:border linear 0.2s,box-shadow linear 0.2s;transition:border linear 0.2s,box-shadow linear 0.2s;-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);}
|
||||
input:focus,textarea:focus{outline:none;border-color:rgba(82, 168, 236, 0.8);-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);}
|
||||
input:focus,select:focus,textarea:focus{outline:none;border-color:rgba(82, 168, 236, 0.8);-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);}
|
||||
form div.error{background:#fae5e3;padding:10px 0;margin:-10px 0 10px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}form div.error>label,form div.error span.help-inline,form div.error span.help-block{color:#9d261d;}
|
||||
form div.error input,form div.error textarea{border-color:#c87872;-webkit-box-shadow:0 0 3px rgba(171, 41, 32, 0.25);-moz-box-shadow:0 0 3px rgba(171, 41, 32, 0.25);box-shadow:0 0 3px rgba(171, 41, 32, 0.25);}form div.error input:focus,form div.error textarea:focus{border-color:#b9554d;-webkit-box-shadow:0 0 6px rgba(171, 41, 32, 0.5);-moz-box-shadow:0 0 6px rgba(171, 41, 32, 0.5);box-shadow:0 0 6px rgba(171, 41, 32, 0.5);}
|
||||
form div.error .input-prepend span.add-on,form div.error .input-append span.add-on{background:#f4c8c5;border-color:#c87872;color:#b9554d;}
|
||||
@ -128,8 +131,8 @@ form div.error .input-prepend span.add-on,form div.error .input-append span.add-
|
||||
.input-large,input.large,textarea.large,select.large{width:210px;}
|
||||
.input-xlarge,input.xlarge,textarea.xlarge,select.xlarge{width:270px;}
|
||||
.input-xxlarge,input.xxlarge,textarea.xxlarge,select.xxlarge{width:530px;}
|
||||
textarea.xxlarge{overflow-y:scroll;}
|
||||
input[readonly]:focus,textarea[readonly]:focus,input.disabled{background:#f5f5f5;border-color:#ddd;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
|
||||
textarea.xxlarge{overflow-y:auto;}
|
||||
input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f5f5f5;border-color:#ddd;cursor:not-allowed;}
|
||||
.actions{background:#f5f5f5;margin-top:18px;margin-bottom:18px;padding:17px 20px 18px 150px;border-top:1px solid #ddd;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;}.actions .secondary-action{float:right;}.actions .secondary-action a{line-height:30px;}.actions .secondary-action a:hover{text-decoration:underline;}
|
||||
.help-inline,.help-block{font-size:12px;line-height:18px;color:#bfbfbf;}
|
||||
.help-inline{padding-left:5px;*position:relative;*top:-5px;}
|
||||
@ -180,6 +183,7 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0
|
||||
.topbar{height:40px;position:fixed;top:0;left:0;right:0;z-index:10000;overflow:visible;}.topbar a{color:#bfbfbf;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);}
|
||||
.topbar a:hover,.topbar ul .active a{background-color:#333;background-color:rgba(255, 255, 255, 0.05);color:#ffffff;text-decoration:none;}
|
||||
.topbar h3{position:relative;}.topbar h3 a{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;color:#ffffff;font-size:20px;font-weight:200;line-height:1;}
|
||||
.topbar p{margin:0;line-height:40px;}.topbar p a:hover{background-color:transparent;}
|
||||
.topbar form{float:left;margin:5px 0 0 0;position:relative;filter:alpha(opacity=100);-khtml-opacity:1;-moz-opacity:1;opacity:1;}
|
||||
.topbar input{background-color:#444;background-color:rgba(255, 255, 255, 0.3);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:normal;font-weight:13px;line-height:1;padding:4px 9px;color:#fff;color:rgba(255, 255, 255, 0.75);border:1px solid #111;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}.topbar input:-moz-placeholder{color:#e6e6e6;}
|
||||
.topbar input::-webkit-input-placeholder{color:#e6e6e6;}
|
||||
@ -205,14 +209,14 @@ a.menu:after,.dropdown-toggle:after{width:0;height:0;display:inline-block;conten
|
||||
.tabs,.pills{margin:0 0 20px;padding:0;list-style:none;zoom:1;margin-bottom:18px;}.tabs:before,.pills:before,.tabs:after,.pills:after{display:table;content:"";}
|
||||
.tabs:after,.pills:after{clear:both;}
|
||||
.tabs>li,.pills>li{float:left;}.tabs>li>a,.pills>li>a{display:block;}
|
||||
.tabs{width:100%;border-bottom:1px solid #ddd;}.tabs>li{position:relative;top:1px;}.tabs>li>a{margin-right:2px;padding:0 15px;line-height:35px;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;}.tabs>li>a:hover{background-color:#eee;border-bottom:1px solid #ddd;text-decoration:none;}
|
||||
.tabs{float:left;width:100%;border-bottom:1px solid #ddd;}.tabs>li{position:relative;top:1px;}.tabs>li>a{margin-right:2px;padding:0 15px;line-height:35px;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;}.tabs>li>a:hover{background-color:#eee;border-bottom:1px solid #ddd;text-decoration:none;}
|
||||
.tabs>li.active>a{background-color:#fff;padding:0 14px;border:1px solid #ddd;border-bottom:0;color:#808080;}
|
||||
.tabs .menu-dropdown,.tabs .dropdown-menu{top:35px;border-width:1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
|
||||
.tabs a.menu:after,.tabs .dropdown-toggle:after{border-top-color:#999;margin-top:15px;margin-left:5px;}
|
||||
.tabs li.open a.menu:after,.tabs .dropdown.open .dropdown-toggle:after{border-top-color:#555;}
|
||||
.pills a{margin:5px 3px 5px 0;padding:0 15px;text-shadow:0 1px 1px #fff;line-height:30px;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}.pills a:hover{background:#0050a3;color:#fff;text-decoration:none;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);}
|
||||
.pills .active a{background:#0069d6;color:#fff;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);}
|
||||
.hero-unit{background-color:#f5f5f5;margin-top:60px;margin-bottom:30px;padding:60px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}.hero-unit h1{margin-bottom:0;font-size:60px;line-height:1;letter-spacing:-1px;}
|
||||
.hero-unit{background-color:#f5f5f5;margin-bottom:30px;padding:60px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}.hero-unit h1{margin-bottom:0;font-size:60px;line-height:1;letter-spacing:-1px;}
|
||||
.hero-unit p{font-size:18px;font-weight:200;line-height:27px;}
|
||||
footer{margin-top:17px;padding-top:17px;border-top:1px solid #eee;}
|
||||
.page-header{margin-bottom:17px;border-bottom:1px solid #ddd;-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:8px;}
|
||||
|
||||
@ -622,7 +622,7 @@
|
||||
<fieldset>
|
||||
<legend>Example form legend</legend>
|
||||
<div class="clearfix">
|
||||
<label for="xlInput">X-Large Input</label>
|
||||
<label for="xlInput">X-Large input</label>
|
||||
<div class="input">
|
||||
<input class="xlarge" id="xlInput" name="xlInput" size="30" type="text" />
|
||||
</div>
|
||||
@ -652,19 +652,25 @@
|
||||
</div>
|
||||
</div><!-- /clearfix -->
|
||||
<div class="clearfix">
|
||||
<label>Uneditable Input</label>
|
||||
<label>Uneditable input</label>
|
||||
<div class="input">
|
||||
<span class="uneditable-input">Some Value Here</span>
|
||||
<span class="uneditable-input">Some value here</span>
|
||||
</div>
|
||||
</div><!-- /clearfix -->
|
||||
<div class="clearfix">
|
||||
<label for="disabledInput">Disabled Input</label>
|
||||
<label for="disabledInput">Disabled input</label>
|
||||
<div class="input">
|
||||
<input class="xlarge disabled" id="disabledInput" name="disabledInput" size="30" type="text" placeholder="Disabled input here… carry on." disabled />
|
||||
</div>
|
||||
</div><!-- /clearfix -->
|
||||
<div class="clearfix">
|
||||
<label for="disabledInput">Disabled textarea</label>
|
||||
<div class="input">
|
||||
<textarea class="xxlarge" name="textarea" id="textarea" rows="3" disabled></textarea>
|
||||
</div>
|
||||
</div><!-- /clearfix -->
|
||||
<div class="clearfix error">
|
||||
<label for="xlInput2">X-Large Input</label>
|
||||
<label for="xlInput2">X-Large input</label>
|
||||
<div class="input">
|
||||
<input class="xlarge error" id="xlInput2" name="xlInput2" size="30" type="text" />
|
||||
<span class="help-inline">Small snippet of help text</span>
|
||||
@ -674,7 +680,7 @@
|
||||
<fieldset>
|
||||
<legend>Example form legend</legend>
|
||||
<div class="clearfix">
|
||||
<label for="prependedInput">Prepended Text</label>
|
||||
<label for="prependedInput">Prepended text</label>
|
||||
<div class="input">
|
||||
<div class="input-prepend">
|
||||
<span class="add-on">@</span>
|
||||
@ -683,7 +689,7 @@
|
||||
</div>
|
||||
</div><!-- /clearfix -->
|
||||
<div class="clearfix">
|
||||
<label for="prependedInput2">Prepended Checkbox</label>
|
||||
<label for="prependedInput2">Prepended checkbox</label>
|
||||
<div class="input">
|
||||
<div class="input-prepend">
|
||||
<label class="add-on"><input type="checkbox" name="" id="" value="" /></label>
|
||||
@ -692,7 +698,7 @@
|
||||
</div>
|
||||
</div><!-- /clearfix -->
|
||||
<div class="clearfix">
|
||||
<label for="appendedInput">Appended Checkbox</label>
|
||||
<label for="appendedInput">Appended checkbox</label>
|
||||
<div class="input">
|
||||
<div class="input-append">
|
||||
<input class="mini" id="appendedInput" name="appendedInput" size="16" type="text" />
|
||||
@ -701,7 +707,7 @@
|
||||
</div>
|
||||
</div><!-- /clearfix -->
|
||||
<div class="clearfix">
|
||||
<label for="fileInput">File Input</label>
|
||||
<label for="fileInput">File input</label>
|
||||
<div class="input">
|
||||
<input class="input-file" id="fileInput" name="fileInput" type="file" />
|
||||
</div>
|
||||
@ -710,7 +716,7 @@
|
||||
<fieldset>
|
||||
<legend>Example form legend</legend>
|
||||
<div class="clearfix">
|
||||
<label id="optionsCheckboxes">List of Options</label>
|
||||
<label id="optionsCheckboxes">List of options</label>
|
||||
<div class="input">
|
||||
<ul class="inputs-list">
|
||||
<li>
|
||||
@ -744,7 +750,7 @@
|
||||
</div>
|
||||
</div><!-- /clearfix -->
|
||||
<div class="clearfix">
|
||||
<label>Date Range</label>
|
||||
<label>Date range</label>
|
||||
<div class="input">
|
||||
<div class="inline-inputs">
|
||||
<input class="small" type="text" value="May 1, 2011" />
|
||||
@ -759,14 +765,14 @@
|
||||
<div class="clearfix">
|
||||
<label for="textarea">Textarea</label>
|
||||
<div class="input">
|
||||
<textarea class="xxlarge" id="textarea" name="textarea"></textarea>
|
||||
<textarea class="xxlarge" id="textarea2" name="textarea2" rows="3"></textarea>
|
||||
<span class="help-block">
|
||||
Block of help text to describe the field above if need be.
|
||||
</span>
|
||||
</div>
|
||||
</div><!-- /clearfix -->
|
||||
<div class="clearfix">
|
||||
<label id="optionsRadio">List of Options</label>
|
||||
<label id="optionsRadio">List of options</label>
|
||||
<div class="input">
|
||||
<ul class="inputs-list">
|
||||
<li>
|
||||
@ -785,7 +791,7 @@
|
||||
</div>
|
||||
</div><!-- /clearfix -->
|
||||
<div class="actions">
|
||||
<input type="submit" class="btn primary" value="Save Changes"> <button type="reset" class="btn">Cancel</button>
|
||||
<input type="submit" class="btn primary" value="Save changes"> <button type="reset" class="btn">Cancel</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
@ -804,7 +810,7 @@
|
||||
<fieldset>
|
||||
<legend>Example form legend</legend>
|
||||
<div class="clearfix">
|
||||
<label for="xlInput3">X-Large Input</label>
|
||||
<label for="xlInput3">X-Large input</label>
|
||||
<div class="input">
|
||||
<input class="xlarge" id="xlInput3" name="xlInput3" size="30" type="text" />
|
||||
</div>
|
||||
@ -825,14 +831,14 @@
|
||||
<fieldset>
|
||||
<legend>Example form legend</legend>
|
||||
<div class="clearfix error">
|
||||
<label for="xlInput4">X-Large Input</label>
|
||||
<label for="xlInput4">X-Large input</label>
|
||||
<div class="input">
|
||||
<input class="xlarge error" id="xlInput4" name="xlInput4" size="30" type="text" />
|
||||
<span class="help-inline">Small snippet of help text</span>
|
||||
</div>
|
||||
</div><!-- /clearfix -->
|
||||
<div class="clearfix">
|
||||
<label id="optionsCheckboxes">List of Options</label>
|
||||
<label id="optionsCheckboxes">List of options</label>
|
||||
<div class="input">
|
||||
<ul class="inputs-list">
|
||||
<li>
|
||||
@ -855,7 +861,7 @@
|
||||
</div><!-- /clearfix -->
|
||||
</fieldset>
|
||||
<div class="actions">
|
||||
<button type="submit" class="btn primary">Save Changes</button> <button type="reset" class="btn">Cancel</button>
|
||||
<button type="submit" class="btn primary">Save changes</button> <button type="reset" class="btn">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
103
examples/fluid.html
Normal file
103
examples/fluid.html
Normal file
@ -0,0 +1,103 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Bootstrap, from Twitter</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Le styles -->
|
||||
<link href="../bootstrap-1.2.0.css" rel="stylesheet">
|
||||
<style type="text/css">
|
||||
body {
|
||||
padding-top: 60px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Le fav and touch icons -->
|
||||
<link rel="shortcut icon" href="images/favicon.ico">
|
||||
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
|
||||
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
|
||||
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="topbar">
|
||||
<div class="topbar-inner">
|
||||
<div class="container-fluid">
|
||||
<h3><a href="#">Project name</a></h3>
|
||||
<ul class="nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
</ul>
|
||||
<p class="pull-right">Logged in as <a href="#">username</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="sidebar">
|
||||
<div class="well">
|
||||
<h5>Sidebar</h5>
|
||||
<ul>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
</ul>
|
||||
<h5>Sidebar</h5>
|
||||
<ul>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
</ul>
|
||||
<h5>Sidebar</h5>
|
||||
<ul>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<!-- Main hero unit for a primary marketing message or call to action -->
|
||||
<div class="hero-unit">
|
||||
<h1>Hello, world!</h1>
|
||||
<p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
|
||||
<p><a class="btn primary large">Learn more »</a></p>
|
||||
</div>
|
||||
<!-- Example row of columns -->
|
||||
<div class="row">
|
||||
<div class="span6">
|
||||
<h2>Heading</h2>
|
||||
<p>Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
|
||||
<p><a class="btn" href="#">View details »</a></p>
|
||||
</div>
|
||||
<div class="span5">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
|
||||
<p><a class="btn" href="#">View details »</a></p>
|
||||
</div>
|
||||
<div class="span5">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
|
||||
<p><a class="btn" href="#">View details »</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
<p>© Company 2011</p>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -13,6 +13,11 @@
|
||||
|
||||
<!-- Le styles -->
|
||||
<link href="../bootstrap-1.2.0.css" rel="stylesheet">
|
||||
<style type="text/css">
|
||||
body {
|
||||
padding-top: 60px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Le fav and touch icons -->
|
||||
<link rel="shortcut icon" href="images/favicon.ico">
|
||||
|
||||
@ -113,11 +113,13 @@ textarea {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// For text that needs to appear as an input but should not be an input
|
||||
.uneditable-input {
|
||||
background-color: #eee;
|
||||
background-color: #fff;
|
||||
display: block;
|
||||
border-color: #ccc;
|
||||
.box-shadow(inset 0 1px 2px rgba(0,0,0,.075));
|
||||
border-color: #eee;
|
||||
.box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
// Placeholder text gets special styles; can't be bundled together though for some reason
|
||||
@ -130,12 +132,14 @@ textarea {
|
||||
|
||||
// Focus states
|
||||
input,
|
||||
select, textarea {
|
||||
select,
|
||||
textarea {
|
||||
@transition: border linear .2s, box-shadow linear .2s;
|
||||
.transition(@transition);
|
||||
.box-shadow(inset 0 1px 3px rgba(0,0,0,.1));
|
||||
}
|
||||
input:focus,
|
||||
select:focus,
|
||||
textarea:focus {
|
||||
outline: none;
|
||||
border-color: rgba(82,168,236,.8);
|
||||
@ -175,35 +179,56 @@ form div.error {
|
||||
}
|
||||
|
||||
// Form element sizes
|
||||
.input-mini, input.mini, textarea.mini, select.mini {
|
||||
.input-mini,
|
||||
input.mini,
|
||||
textarea.mini,
|
||||
select.mini {
|
||||
width: 60px;
|
||||
}
|
||||
.input-small, input.small, textarea.small, select.small {
|
||||
.input-small,
|
||||
input.small,
|
||||
textarea.small,
|
||||
select.small {
|
||||
width: 90px;
|
||||
}
|
||||
.input-medium, input.medium, textarea.medium, select.medium {
|
||||
.input-medium,
|
||||
input.medium,
|
||||
textarea.medium,
|
||||
select.medium {
|
||||
width: 150px;
|
||||
}
|
||||
.input-large, input.large, textarea.large, select.large {
|
||||
.input-large,
|
||||
input.large,
|
||||
textarea.large,
|
||||
select.large {
|
||||
width: 210px;
|
||||
}
|
||||
.input-xlarge, input.xlarge, textarea.xlarge, select.xlarge {
|
||||
.input-xlarge,
|
||||
input.xlarge,
|
||||
textarea.xlarge,
|
||||
select.xlarge {
|
||||
width: 270px;
|
||||
}
|
||||
.input-xxlarge, input.xxlarge, textarea.xxlarge, select.xxlarge {
|
||||
.input-xxlarge,
|
||||
input.xxlarge,
|
||||
textarea.xxlarge,
|
||||
select.xxlarge {
|
||||
width: 530px;
|
||||
}
|
||||
textarea.xxlarge {
|
||||
overflow-y: scroll;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
// Turn off focus for disabled (read-only) form elements
|
||||
input[readonly]:focus,
|
||||
textarea[readonly]:focus,
|
||||
input.disabled {
|
||||
background: #f5f5f5;
|
||||
// Disabled and read-only inputs
|
||||
input[disabled],
|
||||
select[disabled],
|
||||
textarea[disabled],
|
||||
input[readonly],
|
||||
select[readonly],
|
||||
textarea[readonly] {
|
||||
background-color: #f5f5f5;
|
||||
border-color: #ddd;
|
||||
.box-shadow(none);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
// Actions (the buttons)
|
||||
|
||||
@ -46,6 +46,15 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Plain text in topbar
|
||||
p {
|
||||
margin: 0;
|
||||
line-height: 40px;
|
||||
a:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// Search Form
|
||||
form {
|
||||
float: left;
|
||||
@ -312,6 +321,7 @@ a.menu:after,
|
||||
|
||||
// Basic Tabs
|
||||
.tabs {
|
||||
float: left;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #ddd;
|
||||
> li {
|
||||
@ -385,7 +395,6 @@ a.menu:after,
|
||||
|
||||
.hero-unit {
|
||||
background-color: #f5f5f5;
|
||||
margin-top: 60px;
|
||||
margin-bottom: 30px;
|
||||
padding: 60px;
|
||||
.border-radius(6px);
|
||||
|
||||
@ -121,9 +121,10 @@
|
||||
}
|
||||
|
||||
// Grid System
|
||||
.container {
|
||||
.fixed-container {
|
||||
width: @siteWidth;
|
||||
margin: 0 auto;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
.clearfix();
|
||||
}
|
||||
.columns(@columnSpan: 1) {
|
||||
|
||||
@ -73,9 +73,7 @@ body {
|
||||
|
||||
// Container (centered, fixed-width layouts)
|
||||
.container {
|
||||
width: @siteWidth;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
.fixed-container();
|
||||
}
|
||||
|
||||
// Fluid layouts (left aligned, with sidebar, min- & max-width content)
|
||||
@ -103,6 +101,7 @@ body {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
// BASE STYLES
|
||||
// -----------
|
||||
|
||||
@ -117,3 +116,11 @@ a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
// Quick floats
|
||||
.pull-right {
|
||||
float: right;
|
||||
}
|
||||
.pull-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user