mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-18 10:52:19 +01:00
Merge branch '2.0-wip' of github.com:twitter/bootstrap into 2.0-wip
This commit is contained in:
Jacob Thornton
commit
5ab84f942d
684
bootstrap.css
vendored
684
bootstrap.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: Tue Oct 4 01:15:08 PDT 2011
|
||||
* Date: Mon Oct 17 23:44:56 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).
|
||||
@ -205,29 +205,38 @@ body {
|
||||
.container:after {
|
||||
clear: both;
|
||||
}
|
||||
.container-fluid {
|
||||
.fluid-container {
|
||||
position: relative;
|
||||
min-width: 940px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
zoom: 1;
|
||||
}
|
||||
.container-fluid:before, .container-fluid:after {
|
||||
.fluid-container:before, .fluid-container:after {
|
||||
display: table;
|
||||
content: "";
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
}
|
||||
.container-fluid:after {
|
||||
.fluid-container:after {
|
||||
clear: both;
|
||||
}
|
||||
.container-fluid > .sidebar {
|
||||
float: left;
|
||||
.fluid-sidebar-left, .fluid-sidebar-right {
|
||||
width: 220px;
|
||||
}
|
||||
.container-fluid > .content {
|
||||
.fluid-sidebar-left {
|
||||
float: left;
|
||||
}
|
||||
.fluid-sidebar-right {
|
||||
float: right;
|
||||
}
|
||||
.fluid-content {
|
||||
margin-left: 240px;
|
||||
}
|
||||
.fluid-container.reverse .fluid-content {
|
||||
margin-left: 0;
|
||||
margin-right: 240px;
|
||||
}
|
||||
a {
|
||||
color: #0069d6;
|
||||
text-decoration: none;
|
||||
@ -251,8 +260,8 @@ a:hover {
|
||||
display: block;
|
||||
}
|
||||
.row {
|
||||
zoom: 1;
|
||||
margin-left: -20px;
|
||||
zoom: 1;
|
||||
}
|
||||
.row:before, .row:after {
|
||||
display: table;
|
||||
@ -269,125 +278,74 @@ a:hover {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.span1 {
|
||||
width: 40px;
|
||||
width: 60px;
|
||||
}
|
||||
.span2 {
|
||||
width: 100px;
|
||||
width: 140px;
|
||||
}
|
||||
.span3 {
|
||||
width: 160px;
|
||||
}
|
||||
.span4 {
|
||||
width: 220px;
|
||||
}
|
||||
.span5 {
|
||||
width: 280px;
|
||||
}
|
||||
.span6 {
|
||||
width: 340px;
|
||||
}
|
||||
.span7 {
|
||||
width: 400px;
|
||||
}
|
||||
.span8 {
|
||||
width: 460px;
|
||||
}
|
||||
.span9 {
|
||||
width: 520px;
|
||||
}
|
||||
.span10 {
|
||||
width: 580px;
|
||||
}
|
||||
.span11 {
|
||||
width: 640px;
|
||||
}
|
||||
.span12 {
|
||||
width: 700px;
|
||||
}
|
||||
.span13 {
|
||||
width: 760px;
|
||||
}
|
||||
.span14 {
|
||||
width: 820px;
|
||||
}
|
||||
.span15 {
|
||||
width: 880px;
|
||||
}
|
||||
.span16 {
|
||||
width: 940px;
|
||||
}
|
||||
.span17 {
|
||||
width: 1000px;
|
||||
}
|
||||
.span18 {
|
||||
width: 1060px;
|
||||
}
|
||||
.span19 {
|
||||
width: 1120px;
|
||||
}
|
||||
.span20 {
|
||||
width: 1180px;
|
||||
}
|
||||
.span21 {
|
||||
width: 1240px;
|
||||
}
|
||||
.span22 {
|
||||
width: 1300px;
|
||||
}
|
||||
.span23 {
|
||||
width: 1360px;
|
||||
}
|
||||
.span24 {
|
||||
width: 1420px;
|
||||
}
|
||||
.offset1 {
|
||||
margin-left: 80px;
|
||||
}
|
||||
.offset2 {
|
||||
margin-left: 140px;
|
||||
}
|
||||
.offset3 {
|
||||
margin-left: 200px;
|
||||
}
|
||||
.offset4 {
|
||||
margin-left: 260px;
|
||||
}
|
||||
.offset5 {
|
||||
margin-left: 320px;
|
||||
}
|
||||
.offset6 {
|
||||
margin-left: 380px;
|
||||
}
|
||||
.offset7 {
|
||||
margin-left: 440px;
|
||||
}
|
||||
.offset8 {
|
||||
margin-left: 500px;
|
||||
}
|
||||
.offset9 {
|
||||
margin-left: 560px;
|
||||
}
|
||||
.offset10 {
|
||||
margin-left: 620px;
|
||||
}
|
||||
.offset11 {
|
||||
margin-left: 680px;
|
||||
}
|
||||
.offset12 {
|
||||
margin-left: 740px;
|
||||
}
|
||||
.span-one-third {
|
||||
.span4 {
|
||||
width: 300px;
|
||||
}
|
||||
.span-two-thirds {
|
||||
.span5 {
|
||||
width: 380px;
|
||||
}
|
||||
.span6 {
|
||||
width: 460px;
|
||||
}
|
||||
.span7 {
|
||||
width: 540px;
|
||||
}
|
||||
.span8 {
|
||||
width: 620px;
|
||||
}
|
||||
.offset-one-third {
|
||||
.span9 {
|
||||
width: 700px;
|
||||
}
|
||||
.span10 {
|
||||
width: 780px;
|
||||
}
|
||||
.span11 {
|
||||
width: 860px;
|
||||
}
|
||||
.span12 {
|
||||
width: 940px;
|
||||
}
|
||||
.offset1 {
|
||||
margin-left: 100px;
|
||||
}
|
||||
.offset2 {
|
||||
margin-left: 180px;
|
||||
}
|
||||
.offset3 {
|
||||
margin-left: 260px;
|
||||
}
|
||||
.offset4 {
|
||||
margin-left: 340px;
|
||||
}
|
||||
.offset-two-thirds {
|
||||
.offset5 {
|
||||
margin-left: 420px;
|
||||
}
|
||||
.offset6 {
|
||||
margin-left: 500px;
|
||||
}
|
||||
.offset7 {
|
||||
margin-left: 580px;
|
||||
}
|
||||
.offset8 {
|
||||
margin-left: 660px;
|
||||
}
|
||||
.offset9 {
|
||||
margin-left: 740px;
|
||||
}
|
||||
.offset10 {
|
||||
margin-left: 820px;
|
||||
}
|
||||
.offset11 {
|
||||
margin-left: 900px;
|
||||
}
|
||||
/* Typography.less
|
||||
* Headings, body text, lists, code, and more for a versatile and durable typography system
|
||||
* ---------------------------------------------------------------------------------------- */
|
||||
@ -409,6 +367,7 @@ h5,
|
||||
h6 {
|
||||
font-weight: bold;
|
||||
color: #404040;
|
||||
text-rendering: optimizelegibility;
|
||||
}
|
||||
h1 small,
|
||||
h2 small,
|
||||
@ -419,7 +378,6 @@ h6 small {
|
||||
color: #bfbfbf;
|
||||
}
|
||||
h1 {
|
||||
margin-bottom: 18px;
|
||||
font-size: 30px;
|
||||
line-height: 36px;
|
||||
}
|
||||
@ -431,10 +389,10 @@ h2 {
|
||||
line-height: 36px;
|
||||
}
|
||||
h2 small {
|
||||
font-size: 14px;
|
||||
font-size: 18px;
|
||||
}
|
||||
h3 {
|
||||
line-height: 36px;
|
||||
line-height: 27px;
|
||||
font-size: 18px;
|
||||
}
|
||||
h3 small {
|
||||
@ -458,7 +416,7 @@ h6 {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
ul, ol {
|
||||
margin: 0 0 18px 25px;
|
||||
margin: 0 0 9px 25px;
|
||||
}
|
||||
ul ul,
|
||||
ul ol,
|
||||
@ -474,7 +432,7 @@ ol {
|
||||
}
|
||||
li {
|
||||
line-height: 18px;
|
||||
color: #808080;
|
||||
color: #404040;
|
||||
}
|
||||
ul.unstyled {
|
||||
list-style: none;
|
||||
@ -509,6 +467,12 @@ em {
|
||||
.muted {
|
||||
color: #bfbfbf;
|
||||
}
|
||||
abbr {
|
||||
font-size: 90%;
|
||||
text-transform: uppercase;
|
||||
border-bottom: 1px dotted #ddd;
|
||||
cursor: help;
|
||||
}
|
||||
blockquote {
|
||||
margin-bottom: 18px;
|
||||
border-left: 5px solid #eee;
|
||||
@ -593,9 +557,6 @@ label {
|
||||
margin-bottom: 5px;
|
||||
color: #404040;
|
||||
}
|
||||
input[type=checkbox], input[type=radio] {
|
||||
cursor: pointer;
|
||||
}
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
@ -623,9 +584,11 @@ input[type=checkbox], input[type=radio] {
|
||||
|
||||
line-height: normal;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
input[type=file] {
|
||||
background-color: #ffffff;
|
||||
background-color: initial;
|
||||
padding: initial;
|
||||
border: initial;
|
||||
line-height: initial;
|
||||
@ -695,97 +658,97 @@ input[type=file]:focus, input[type=checkbox]:focus, select:focus {
|
||||
input.span1, textarea.span1, select.span1 {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
width: 30px;
|
||||
width: 50px;
|
||||
margin-left: 0;
|
||||
}
|
||||
input.span2, textarea.span2, select.span2 {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
width: 90px;
|
||||
width: 150px;
|
||||
margin-left: 0;
|
||||
}
|
||||
input.span3, textarea.span3, select.span3 {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
width: 150px;
|
||||
width: 250px;
|
||||
margin-left: 0;
|
||||
}
|
||||
input.span4, textarea.span4, select.span4 {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
width: 210px;
|
||||
width: 350px;
|
||||
margin-left: 0;
|
||||
}
|
||||
input.span5, textarea.span5, select.span5 {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
width: 270px;
|
||||
width: 450px;
|
||||
margin-left: 0;
|
||||
}
|
||||
input.span6, textarea.span6, select.span6 {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
width: 330px;
|
||||
width: 550px;
|
||||
margin-left: 0;
|
||||
}
|
||||
input.span7, textarea.span7, select.span7 {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
width: 390px;
|
||||
width: 650px;
|
||||
margin-left: 0;
|
||||
}
|
||||
input.span8, textarea.span8, select.span8 {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
width: 450px;
|
||||
width: 750px;
|
||||
margin-left: 0;
|
||||
}
|
||||
input.span9, textarea.span9, select.span9 {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
width: 510px;
|
||||
width: 850px;
|
||||
margin-left: 0;
|
||||
}
|
||||
input.span10, textarea.span10, select.span10 {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
width: 570px;
|
||||
width: 950px;
|
||||
margin-left: 0;
|
||||
}
|
||||
input.span11, textarea.span11, select.span11 {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
width: 630px;
|
||||
width: 1050px;
|
||||
margin-left: 0;
|
||||
}
|
||||
input.span12, textarea.span12, select.span12 {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
width: 690px;
|
||||
width: 1150px;
|
||||
margin-left: 0;
|
||||
}
|
||||
input.span13, textarea.span13, select.span13 {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
width: 750px;
|
||||
width: 1250px;
|
||||
margin-left: 0;
|
||||
}
|
||||
input.span14, textarea.span14, select.span14 {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
width: 810px;
|
||||
width: 1350px;
|
||||
margin-left: 0;
|
||||
}
|
||||
input.span15, textarea.span15, select.span15 {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
width: 870px;
|
||||
width: 1450px;
|
||||
margin-left: 0;
|
||||
}
|
||||
input.span16, textarea.span16, select.span16 {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
width: 930px;
|
||||
width: 1550px;
|
||||
margin-left: 0;
|
||||
}
|
||||
input[disabled],
|
||||
@ -1105,102 +1068,12 @@ table .headerSortUp.purple, table .headerSortDown.purple {
|
||||
/* Patterns.less
|
||||
* Repeatable UI elements outside the base styles provided from the scaffolding
|
||||
* ---------------------------------------------------------------------------- */
|
||||
.topbar {
|
||||
.navbar {
|
||||
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 .brand a:hover, .topbar ul .active > a {
|
||||
background-color: #333;
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.topbar .brand {
|
||||
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;
|
||||
color: #ffffff;
|
||||
}
|
||||
.topbar form {
|
||||
float: left;
|
||||
margin: 5px 0 0 0;
|
||||
position: relative;
|
||||
filter: alpha(opacity=100);
|
||||
-khtml-opacity: 1;
|
||||
-moz-opacity: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
.topbar form.pull-right {
|
||||
float: right;
|
||||
}
|
||||
.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: #ffffff;
|
||||
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;
|
||||
}
|
||||
.topbar input:hover {
|
||||
background-color: #bfbfbf;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
color: #ffffff;
|
||||
}
|
||||
.topbar input:focus, .topbar input.focused {
|
||||
outline: 0;
|
||||
background-color: #ffffff;
|
||||
color: #404040;
|
||||
text-shadow: 0 1px 0 #ffffff;
|
||||
border: 0;
|
||||
padding: 5px 10px;
|
||||
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
|
||||
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.topbar-inner {
|
||||
background-color: #222;
|
||||
.navbar-inner {
|
||||
background-color: #222222;
|
||||
background-color: #222222;
|
||||
background-image: -khtml-gradient(linear, left top, left bottom, from(#333333), to(#222222));
|
||||
background-image: -moz-linear-gradient(top, #333333, #222222);
|
||||
@ -1215,6 +1088,99 @@ table .headerSortUp.purple, table .headerSortDown.purple {
|
||||
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.navbar a {
|
||||
color: #bfbfbf;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.navbar .brand a:hover, .navbar ul .active > a {
|
||||
background-color: #333333;
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.navbar .brand {
|
||||
float: left;
|
||||
display: block;
|
||||
padding: 8px 20px 12px;
|
||||
margin-left: -20px;
|
||||
color: #ffffff;
|
||||
font-size: 20px;
|
||||
font-weight: 200;
|
||||
line-height: 1;
|
||||
}
|
||||
.navbar p {
|
||||
margin: 0;
|
||||
line-height: 40px;
|
||||
}
|
||||
.navbar p a:hover {
|
||||
background-color: transparent;
|
||||
color: #ffffff;
|
||||
}
|
||||
.navbar-search {
|
||||
position: relative;
|
||||
margin-top: 6px;
|
||||
margin-bottom: 0;
|
||||
float: left;
|
||||
}
|
||||
.navbar-search .search-query {
|
||||
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: #ffffff;
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
border: 1px solid #111;
|
||||
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15);
|
||||
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15);
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15);
|
||||
-webkit-transition: none;
|
||||
-moz-transition: none;
|
||||
-ms-transition: none;
|
||||
-o-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
.navbar-search .search-query:-moz-placeholder {
|
||||
color: #e6e6e6;
|
||||
}
|
||||
.navbar-search .search-query::-webkit-input-placeholder {
|
||||
color: #e6e6e6;
|
||||
}
|
||||
.navbar-search .search-query:hover {
|
||||
background-color: #bfbfbf;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
color: #ffffff;
|
||||
}
|
||||
.navbar-search .search-query:focus, .navbar-search .search-query.focused {
|
||||
outline: 0;
|
||||
background-color: #ffffff;
|
||||
color: #404040;
|
||||
text-shadow: 0 1px 0 #ffffff;
|
||||
border: 0;
|
||||
padding: 5px 10px;
|
||||
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
|
||||
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.navbar-static {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.navbar-static .navbar-inner {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.navbar-fixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10000;
|
||||
}
|
||||
.nav {
|
||||
display: block;
|
||||
float: left;
|
||||
@ -1416,13 +1382,13 @@ table .headerSortUp.purple, table .headerSortDown.purple {
|
||||
display: block;
|
||||
}
|
||||
.tabs {
|
||||
float: left;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #ddd;
|
||||
border-color: #ddd;
|
||||
border-style: solid;
|
||||
border-width: 0 0 1px;
|
||||
}
|
||||
.tabs > li {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
.tabs > li > a {
|
||||
padding: 0 15px;
|
||||
@ -1438,54 +1404,94 @@ table .headerSortUp.purple, table .headerSortDown.purple {
|
||||
background-color: #eee;
|
||||
border-color: #eee #eee #ddd;
|
||||
}
|
||||
.tabs > li.active > a {
|
||||
.tabs .active > a, .tabs .active > a:hover {
|
||||
color: #808080;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #ddd;
|
||||
border-bottom-color: transparent;
|
||||
cursor: default;
|
||||
}
|
||||
.tabs .dropdown-menu {
|
||||
.tabbable {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.tabbable .tabs {
|
||||
margin-bottom: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
.tabbable .tab-content {
|
||||
padding: 19px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
.tabbable.tabs-bottom .tabs > li {
|
||||
margin-top: -1px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.tabbable.tabs-bottom .tabs > li > a {
|
||||
-webkit-border-radius: 0 0 4px 4px;
|
||||
-moz-border-radius: 0 0 4px 4px;
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
.tabbable.tabs-bottom .tabs > li > a:hover {
|
||||
border-bottom-color: transparent;
|
||||
border-top-color: #ddd;
|
||||
}
|
||||
.tabbable.tabs-bottom .tabs > .active > a, .tabbable.tabs-bottom .tabs > .active > a:hover {
|
||||
border-color: transparent #ddd #ddd #ddd;
|
||||
}
|
||||
.tabbable.tabs-left .tabs {
|
||||
float: left;
|
||||
}
|
||||
.tabbable.tabs-left .tabs > li {
|
||||
float: none;
|
||||
}
|
||||
.tabbable.tabs-right .tabs {
|
||||
float: right;
|
||||
}
|
||||
.tabbable.tabs-right .tabs > li {
|
||||
float: none;
|
||||
}
|
||||
.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 .dropdown-toggle:after {
|
||||
.tabs a.menu:after, .tabs .dropdown-toggle:after {
|
||||
border-top-color: #999;
|
||||
margin-top: 15px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.tabs .open.dropdown .dropdown-toggle {
|
||||
.tabs li.open.menu .menu, .tabs .open.dropdown .dropdown-toggle {
|
||||
border-color: #999;
|
||||
}
|
||||
.tabs .dropdown.open .dropdown-toggle:after {
|
||||
.tabs li.open a.menu:after, .tabs .dropdown.open .dropdown-toggle:after {
|
||||
border-top-color: #555;
|
||||
}
|
||||
.tab-content {
|
||||
clear: both;
|
||||
}
|
||||
.pills a {
|
||||
margin: 5px 3px 5px 0;
|
||||
padding: 0 15px;
|
||||
text-shadow: 0 1px 1px #ffffff;
|
||||
line-height: 30px;
|
||||
text-shadow: 0 1px 1px #ffffff;
|
||||
-webkit-border-radius: 15px;
|
||||
-moz-border-radius: 15px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
.pills a:hover {
|
||||
background: #00438a;
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
|
||||
background-color: #00438a;
|
||||
}
|
||||
.pills .active a {
|
||||
background: #0069d6;
|
||||
color: #ffffff;
|
||||
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
|
||||
background-color: #0069d6;
|
||||
}
|
||||
.tab-content > *, .pill-content > * {
|
||||
.pills-vertical > li {
|
||||
float: none;
|
||||
}
|
||||
.tab-content > .tab-pane, .pill-content > .pill-pane {
|
||||
display: none;
|
||||
}
|
||||
.tab-content > .active, .pill-content > .active {
|
||||
@ -1548,14 +1554,14 @@ footer {
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
.page-header {
|
||||
margin-bottom: 17px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
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: 8px;
|
||||
margin-bottom: 13.5px;
|
||||
}
|
||||
.btn.danger,
|
||||
.alert-message.danger,
|
||||
@ -2254,3 +2260,183 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
|
||||
-moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
|
||||
box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
|
||||
}
|
||||
/* Responsive.less
|
||||
* For phone and tablet devices
|
||||
* ------------------------------------------------------------- */
|
||||
@media (max-width: 480px) {
|
||||
.container {
|
||||
width: auto;
|
||||
padding: 0 10px;
|
||||
}
|
||||
[class*="span"] {
|
||||
float: none;
|
||||
display: block;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
.modal {
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@media (min-width: 480px) and (max-width: 768px) {
|
||||
.container {
|
||||
width: auto;
|
||||
padding: 0 10px;
|
||||
}
|
||||
[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;
|
||||
}
|
||||
}
|
||||
/*
|
||||
// LARGE DESKTOP & UP
|
||||
// ------------------
|
||||
|
||||
@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;
|
||||
}
|
||||
[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); }
|
||||
|
||||
}
|
||||
*/
|
||||
182
bootstrap.min.css
vendored
182
bootstrap.min.css
vendored
@ -24,71 +24,57 @@ html,body{background-color:#ffffff;}
|
||||
body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;line-height:18px;color:#404040;}
|
||||
.container{width:940px;margin-left:auto;margin-right:auto;zoom:1;}.container:before,.container:after{display:table;content:"";zoom:1;*display:inline;}
|
||||
.container:after{clear:both;}
|
||||
.container-fluid{position:relative;min-width:940px;padding-left:20px;padding-right:20px;zoom:1;}.container-fluid:before,.container-fluid:after{display:table;content:"";zoom:1;*display:inline;}
|
||||
.container-fluid:after{clear:both;}
|
||||
.container-fluid>.sidebar{float:left;width:220px;}
|
||||
.container-fluid>.content{margin-left:240px;}
|
||||
.fluid-container{position:relative;min-width:940px;padding-left:20px;padding-right:20px;zoom:1;}.fluid-container:before,.fluid-container:after{display:table;content:"";zoom:1;*display:inline;}
|
||||
.fluid-container:after{clear:both;}
|
||||
.fluid-sidebar-left,.fluid-sidebar-right{width:220px;}
|
||||
.fluid-sidebar-left{float:left;}
|
||||
.fluid-sidebar-right{float:right;}
|
||||
.fluid-content{margin-left:240px;}
|
||||
.fluid-container.reverse .fluid-content{margin-left:0;margin-right:240px;}
|
||||
a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a:hover{color:#00438a;text-decoration:underline;}
|
||||
.pull-right{float:right;}
|
||||
.pull-left{float:left;}
|
||||
.hide{display:none;}
|
||||
.show{display:block;}
|
||||
.row{zoom:1;margin-left:-20px;}.row:before,.row:after{display:table;content:"";zoom:1;*display:inline;}
|
||||
.row{margin-left:-20px;zoom:1;}.row:before,.row:after{display:table;content:"";zoom:1;*display:inline;}
|
||||
.row:after{clear:both;}
|
||||
[class*="span"]{display:inline;float:left;margin-left:20px;}
|
||||
.span1{width:40px;}
|
||||
.span2{width:100px;}
|
||||
.span3{width:160px;}
|
||||
.span4{width:220px;}
|
||||
.span5{width:280px;}
|
||||
.span6{width:340px;}
|
||||
.span7{width:400px;}
|
||||
.span8{width:460px;}
|
||||
.span9{width:520px;}
|
||||
.span10{width:580px;}
|
||||
.span11{width:640px;}
|
||||
.span12{width:700px;}
|
||||
.span13{width:760px;}
|
||||
.span14{width:820px;}
|
||||
.span15{width:880px;}
|
||||
.span16{width:940px;}
|
||||
.span17{width:1000px;}
|
||||
.span18{width:1060px;}
|
||||
.span19{width:1120px;}
|
||||
.span20{width:1180px;}
|
||||
.span21{width:1240px;}
|
||||
.span22{width:1300px;}
|
||||
.span23{width:1360px;}
|
||||
.span24{width:1420px;}
|
||||
.offset1{margin-left:80px;}
|
||||
.offset2{margin-left:140px;}
|
||||
.offset3{margin-left:200px;}
|
||||
.offset4{margin-left:260px;}
|
||||
.offset5{margin-left:320px;}
|
||||
.offset6{margin-left:380px;}
|
||||
.offset7{margin-left:440px;}
|
||||
.offset8{margin-left:500px;}
|
||||
.offset9{margin-left:560px;}
|
||||
.offset10{margin-left:620px;}
|
||||
.offset11{margin-left:680px;}
|
||||
.offset12{margin-left:740px;}
|
||||
.span-one-third{width:300px;}
|
||||
.span-two-thirds{width:620px;}
|
||||
.offset-one-third{margin-left:340px;}
|
||||
.offset-two-thirds{margin-left:660px;}
|
||||
.span1{width:60px;}
|
||||
.span2{width:140px;}
|
||||
.span3{width:220px;}
|
||||
.span4{width:300px;}
|
||||
.span5{width:380px;}
|
||||
.span6{width:460px;}
|
||||
.span7{width:540px;}
|
||||
.span8{width:620px;}
|
||||
.span9{width:700px;}
|
||||
.span10{width:780px;}
|
||||
.span11{width:860px;}
|
||||
.span12{width:940px;}
|
||||
.offset1{margin-left:100px;}
|
||||
.offset2{margin-left:180px;}
|
||||
.offset3{margin-left:260px;}
|
||||
.offset4{margin-left:340px;}
|
||||
.offset5{margin-left:420px;}
|
||||
.offset6{margin-left:500px;}
|
||||
.offset7{margin-left:580px;}
|
||||
.offset8{margin-left:660px;}
|
||||
.offset9{margin-left:740px;}
|
||||
.offset10{margin-left:820px;}
|
||||
.offset11{margin-left:900px;}
|
||||
p{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;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;}
|
||||
h2{font-size:24px;line-height:36px;}h2 small{font-size:14px;}
|
||||
h3{line-height:36px;font-size:18px;}h3 small{font-size:14px;}
|
||||
h1,h2,h3,h4,h5,h6{font-weight:bold;color:#404040;text-rendering:optimizelegibility;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#bfbfbf;}
|
||||
h1{font-size:30px;line-height:36px;}h1 small{font-size:18px;}
|
||||
h2{font-size:24px;line-height:36px;}h2 small{font-size:18px;}
|
||||
h3{line-height:27px;font-size:18px;}h3 small{font-size:14px;}
|
||||
h4{font-size:16px;line-height:36px;}h4 small{font-size:12px;}
|
||||
h5{font-size:14px;line-height:18px;}
|
||||
h6{font-size:13px;line-height:18px;color:#bfbfbf;text-transform:uppercase;}
|
||||
ul,ol{margin:0 0 18px 25px;}
|
||||
ul,ol{margin:0 0 9px 25px;}
|
||||
ul ul,ul ol,ol ol,ol ul{margin-bottom:0;}
|
||||
ul{list-style:disc;}
|
||||
ol{list-style:decimal;}
|
||||
li{line-height:18px;color:#808080;}
|
||||
li{line-height:18px;color:#404040;}
|
||||
ul.unstyled{list-style:none;margin-left:0;}
|
||||
dl{margin-bottom:18px;}dl dt,dl dd{line-height:18px;}
|
||||
dl dt{font-weight:bold;}
|
||||
@ -97,6 +83,7 @@ hr{margin:20px 0 19px;border:0;border-bottom:1px solid #eee;}
|
||||
strong{font-style:inherit;font-weight:bold;}
|
||||
em{font-style:italic;font-weight:inherit;line-height:inherit;}
|
||||
.muted{color:#bfbfbf;}
|
||||
abbr{font-size:90%;text-transform:uppercase;border-bottom:1px dotted #ddd;cursor:help;}
|
||||
blockquote{margin-bottom:18px;border-left:5px solid #eee;padding-left:15px;}blockquote p{font-size:14px;font-weight:300;line-height:18px;margin-bottom:0;}
|
||||
blockquote small{display:block;font-size:12px;font-weight:300;line-height:18px;color:#bfbfbf;}blockquote small:before{content:'\2014 \00A0';}
|
||||
address{display:block;line-height:18px;margin-bottom:18px;}
|
||||
@ -107,10 +94,9 @@ form{margin-bottom:18px;}
|
||||
legend{display:block;width:100%;margin-bottom:27px;font-size:19.5px;line-height:36px;color:#404040;border-bottom:1px solid #eee;}
|
||||
label,input,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:18px;}
|
||||
label{display:block;margin-bottom:5px;color:#404040;}
|
||||
input[type=checkbox],input[type=radio]{cursor:pointer;}
|
||||
input,textarea,select,.uneditable-input{display:inline-block;width:210px;height:18px;padding:4px;font-size:13px;line-height:18px;color:#808080;border:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
|
||||
input[type=checkbox],input[type=radio]{width:auto;height:auto;padding:0;margin:3px 0;*margin-top:0;line-height:normal;border:none;}
|
||||
input[type=file]{background-color:#ffffff;padding:initial;border:initial;line-height:initial;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
|
||||
input[type=checkbox],input[type=radio]{width:auto;height:auto;padding:0;margin:3px 0;*margin-top:0;line-height:normal;border:none;cursor:pointer;}
|
||||
input[type=file]{background-color:#ffffff;background-color:initial;padding:initial;border:initial;line-height:initial;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
|
||||
input[type=button],input[type=reset],input[type=submit]{width:auto;height:auto;}
|
||||
select,input[type=file]{height:27px;line-height:27px;*margin-top:4px;}
|
||||
select[multiple]{background-color:#ffffff;height:inherit;}
|
||||
@ -124,22 +110,22 @@ input[type=file]:focus,input[type=checkbox]:focus,select:focus{-webkit-box-shado
|
||||
.input-large{width:210px;}
|
||||
.input-xlarge{width:270px;}
|
||||
.input-xxlarge{width:530px;}
|
||||
input.span1,textarea.span1,select.span1{display:inline-block;float:none;width:30px;margin-left:0;}
|
||||
input.span2,textarea.span2,select.span2{display:inline-block;float:none;width:90px;margin-left:0;}
|
||||
input.span3,textarea.span3,select.span3{display:inline-block;float:none;width:150px;margin-left:0;}
|
||||
input.span4,textarea.span4,select.span4{display:inline-block;float:none;width:210px;margin-left:0;}
|
||||
input.span5,textarea.span5,select.span5{display:inline-block;float:none;width:270px;margin-left:0;}
|
||||
input.span6,textarea.span6,select.span6{display:inline-block;float:none;width:330px;margin-left:0;}
|
||||
input.span7,textarea.span7,select.span7{display:inline-block;float:none;width:390px;margin-left:0;}
|
||||
input.span8,textarea.span8,select.span8{display:inline-block;float:none;width:450px;margin-left:0;}
|
||||
input.span9,textarea.span9,select.span9{display:inline-block;float:none;width:510px;margin-left:0;}
|
||||
input.span10,textarea.span10,select.span10{display:inline-block;float:none;width:570px;margin-left:0;}
|
||||
input.span11,textarea.span11,select.span11{display:inline-block;float:none;width:630px;margin-left:0;}
|
||||
input.span12,textarea.span12,select.span12{display:inline-block;float:none;width:690px;margin-left:0;}
|
||||
input.span13,textarea.span13,select.span13{display:inline-block;float:none;width:750px;margin-left:0;}
|
||||
input.span14,textarea.span14,select.span14{display:inline-block;float:none;width:810px;margin-left:0;}
|
||||
input.span15,textarea.span15,select.span15{display:inline-block;float:none;width:870px;margin-left:0;}
|
||||
input.span16,textarea.span16,select.span16{display:inline-block;float:none;width:930px;margin-left:0;}
|
||||
input.span1,textarea.span1,select.span1{display:inline-block;float:none;width:50px;margin-left:0;}
|
||||
input.span2,textarea.span2,select.span2{display:inline-block;float:none;width:150px;margin-left:0;}
|
||||
input.span3,textarea.span3,select.span3{display:inline-block;float:none;width:250px;margin-left:0;}
|
||||
input.span4,textarea.span4,select.span4{display:inline-block;float:none;width:350px;margin-left:0;}
|
||||
input.span5,textarea.span5,select.span5{display:inline-block;float:none;width:450px;margin-left:0;}
|
||||
input.span6,textarea.span6,select.span6{display:inline-block;float:none;width:550px;margin-left:0;}
|
||||
input.span7,textarea.span7,select.span7{display:inline-block;float:none;width:650px;margin-left:0;}
|
||||
input.span8,textarea.span8,select.span8{display:inline-block;float:none;width:750px;margin-left:0;}
|
||||
input.span9,textarea.span9,select.span9{display:inline-block;float:none;width:850px;margin-left:0;}
|
||||
input.span10,textarea.span10,select.span10{display:inline-block;float:none;width:950px;margin-left:0;}
|
||||
input.span11,textarea.span11,select.span11{display:inline-block;float:none;width:1050px;margin-left:0;}
|
||||
input.span12,textarea.span12,select.span12{display:inline-block;float:none;width:1150px;margin-left:0;}
|
||||
input.span13,textarea.span13,select.span13{display:inline-block;float:none;width:1250px;margin-left:0;}
|
||||
input.span14,textarea.span14,select.span14{display:inline-block;float:none;width:1350px;margin-left:0;}
|
||||
input.span15,textarea.span15,select.span15{display:inline-block;float:none;width:1450px;margin-left:0;}
|
||||
input.span16,textarea.span16,select.span16{display:inline-block;float:none;width:1550px;margin-left:0;}
|
||||
input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f5f5f5;border-color:#ddd;cursor:not-allowed;}
|
||||
.has-error{background:#f8dcda;padding:9px 0;margin:-10px 0 10px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.has-error>label,.has-error span.help-inline,.has-error span.help-block{color:#9d261d;}
|
||||
.has-error input,.has-error textarea,.has-error select{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);}.has-error input:focus,.has-error textarea:focus,.has-error select: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);}
|
||||
@ -196,17 +182,19 @@ table .orange{color:#f89406;border-bottom-color:#f89406;}
|
||||
table .headerSortUp.orange,table .headerSortDown.orange{background-color:#fee9cc;}
|
||||
table .purple{color:#7a43b6;border-bottom-color:#7a43b6;}
|
||||
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 .brand a:hover,.topbar ul .active>a{background-color:#333;background-color:rgba(255, 255, 255, 0.05);color:#ffffff;text-decoration:none;}
|
||||
.topbar .brand{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;color:#ffffff;}
|
||||
.topbar form{float:left;margin:5px 0 0 0;position:relative;filter:alpha(opacity=100);-khtml-opacity:1;-moz-opacity:1;opacity:1;}
|
||||
.topbar form.pull-right{float:right;}
|
||||
.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:#ffffff;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;}
|
||||
.topbar input:hover{background-color:#bfbfbf;background-color:rgba(255, 255, 255, 0.5);color:#ffffff;}
|
||||
.topbar input:focus,.topbar input.focused{outline:0;background-color:#ffffff;color:#404040;text-shadow:0 1px 0 #ffffff;border:0;padding:5px 10px;-webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);-moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);box-shadow:0 0 3px rgba(0, 0, 0, 0.15);}
|
||||
.topbar-inner{background-color:#222;background-color:#222222;background-image:-khtml-gradient(linear, left top, left bottom, from(#333333), to(#222222));background-image:-moz-linear-gradient(top, #333333, #222222);background-image:-ms-linear-gradient(top, #333333, #222222);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #222222));background-image:-webkit-linear-gradient(top, #333333, #222222);background-image:-o-linear-gradient(top, #333333, #222222);background-image:linear-gradient(top, #333333, #222222);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);}
|
||||
.navbar{height:40px;overflow:visible;}
|
||||
.navbar-inner{background-color:#222222;background-color:#222222;background-image:-khtml-gradient(linear, left top, left bottom, from(#333333), to(#222222));background-image:-moz-linear-gradient(top, #333333, #222222);background-image:-ms-linear-gradient(top, #333333, #222222);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #222222));background-image:-webkit-linear-gradient(top, #333333, #222222);background-image:-o-linear-gradient(top, #333333, #222222);background-image:linear-gradient(top, #333333, #222222);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);}
|
||||
.navbar a{color:#bfbfbf;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);}
|
||||
.navbar .brand a:hover,.navbar ul .active>a{background-color:#333333;background-color:rgba(255, 255, 255, 0.05);color:#ffffff;text-decoration:none;}
|
||||
.navbar .brand{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;color:#ffffff;font-size:20px;font-weight:200;line-height:1;}
|
||||
.navbar p{margin:0;line-height:40px;}.navbar p a:hover{background-color:transparent;color:#ffffff;}
|
||||
.navbar-search{position:relative;margin-top:6px;margin-bottom:0;float:left;}.navbar-search .search-query{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:#ffffff;color:rgba(255, 255, 255, 0.75);border:1px solid #111;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}.navbar-search .search-query:-moz-placeholder{color:#e6e6e6;}
|
||||
.navbar-search .search-query::-webkit-input-placeholder{color:#e6e6e6;}
|
||||
.navbar-search .search-query:hover{background-color:#bfbfbf;background-color:rgba(255, 255, 255, 0.5);color:#ffffff;}
|
||||
.navbar-search .search-query:focus,.navbar-search .search-query.focused{outline:0;background-color:#ffffff;color:#404040;text-shadow:0 1px 0 #ffffff;border:0;padding:5px 10px;-webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);-moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);box-shadow:0 0 3px rgba(0, 0, 0, 0.15);}
|
||||
.navbar-static{margin-bottom:18px;}
|
||||
.navbar-static .navbar-inner{padding-left:20px;padding-right:20px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
|
||||
.navbar-fixed{position:fixed;top:0;left:0;right:0;z-index:10000;}
|
||||
.nav{display:block;float:left;margin:0 10px 0 0;position:relative;left:0;}.nav>li{display:block;float:left;}
|
||||
.nav a{display:block;float:none;padding:10px 10px 11px;line-height:19px;text-decoration:none;}.nav a:hover{color:#ffffff;text-decoration:none;}
|
||||
.nav .active>a{background-color:#222;background-color:rgba(0, 0, 0, 0.5);}
|
||||
@ -228,16 +216,25 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0
|
||||
.tabs,.pills{margin:0 0 20px;padding:0;list-style:none;zoom:1;}.tabs:before,.pills:before,.tabs:after,.pills:after{display:table;content:"";zoom:1;*display:inline;}
|
||||
.tabs:after,.pills:after{clear:both;}
|
||||
.tabs>li,.pills>li{float:left;}.tabs>li>a,.pills>li>a{display:block;}
|
||||
.tabs{float:left;width:100%;border-bottom:1px solid #ddd;}.tabs>li{position:relative;top:1px;}.tabs>li>a{padding:0 15px;margin-right:2px;line-height:36px;border:1px solid transparent;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;}.tabs>li>a:hover{text-decoration:none;background-color:#eee;border-color:#eee #eee #ddd;}
|
||||
.tabs>li.active>a{color:#808080;background-color:#ffffff;border:1px solid #ddd;border-bottom-color:transparent;}
|
||||
.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 .dropdown-toggle:after{border-top-color:#999;margin-top:15px;margin-left:5px;}
|
||||
.tabs .open.dropdown .dropdown-toggle{border-color:#999;}
|
||||
.tabs .dropdown.open .dropdown-toggle:after{border-top-color:#555;}
|
||||
.tab-content{clear:both;}
|
||||
.pills a{margin:5px 3px 5px 0;padding:0 15px;text-shadow:0 1px 1px #ffffff;line-height:30px;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}.pills a:hover{background:#00438a;color:#ffffff;text-decoration:none;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);}
|
||||
.pills .active a{background:#0069d6;color:#ffffff;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);}
|
||||
.tab-content>*,.pill-content>*{display:none;}
|
||||
.tabs{border-color:#ddd;border-style:solid;border-width:0 0 1px;}.tabs>li{position:relative;margin-bottom:-1px;}.tabs>li>a{padding:0 15px;margin-right:2px;line-height:36px;border:1px solid transparent;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;}.tabs>li>a:hover{text-decoration:none;background-color:#eee;border-color:#eee #eee #ddd;}
|
||||
.tabs .active>a,.tabs .active>a:hover{color:#808080;background-color:#ffffff;border:1px solid #ddd;border-bottom-color:transparent;cursor:default;}
|
||||
.tabbable{margin-bottom:18px;}.tabbable .tabs{margin-bottom:0;border-bottom:0;}
|
||||
.tabbable .tab-content{padding:19px;border:1px solid #ddd;}
|
||||
.tabbable.tabs-bottom .tabs>li{margin-top:-1px;margin-bottom:0;}
|
||||
.tabbable.tabs-bottom .tabs>li>a{-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px;}.tabbable.tabs-bottom .tabs>li>a:hover{border-bottom-color:transparent;border-top-color:#ddd;}
|
||||
.tabbable.tabs-bottom .tabs>.active>a,.tabbable.tabs-bottom .tabs>.active>a:hover{border-color:transparent #ddd #ddd #ddd;}
|
||||
.tabbable.tabs-left .tabs{float:left;}
|
||||
.tabbable.tabs-left .tabs>li{float:none;}
|
||||
.tabbable.tabs-right .tabs{float:right;}
|
||||
.tabbable.tabs-right .tabs>li{float:none;}
|
||||
.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.menu .menu,.tabs .open.dropdown .dropdown-toggle{border-color:#999;}
|
||||
.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;line-height:30px;text-shadow:0 1px 1px #ffffff;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}.pills a:hover{color:#ffffff;text-decoration:none;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);background-color:#00438a;}
|
||||
.pills .active a{color:#ffffff;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);background-color:#0069d6;}
|
||||
.pills-vertical>li{float:none;}
|
||||
.tab-content>.tab-pane,.pill-content>.pill-pane{display:none;}
|
||||
.tab-content>.active,.pill-content>.active{display:block;}
|
||||
.breadcrumb{margin:0 0 18px;padding:7px 14px;background-color:#f5f5f5;background-image:-khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5));background-image:-moz-linear-gradient(top, #ffffff, #f5f5f5);background-image:-ms-linear-gradient(top, #ffffff, #f5f5f5);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f5f5f5));background-image:-webkit-linear-gradient(top, #ffffff, #f5f5f5);background-image:-o-linear-gradient(top, #ffffff, #f5f5f5);background-image:linear-gradient(top, #ffffff, #f5f5f5);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);border:1px solid #ddd;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;}.breadcrumb li{display:inline;text-shadow:0 1px 0 #ffffff;}
|
||||
.breadcrumb .divider{padding:0 5px;color:#bfbfbf;}
|
||||
@ -245,7 +242,7 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0
|
||||
.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;}
|
||||
.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{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);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-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);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);}
|
||||
@ -324,3 +321,4 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
|
||||
.media-grid li{display:inline;}
|
||||
.media-grid a{float:left;padding:4px;margin:0 0 20px 20px;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);}.media-grid a img{display:block;}
|
||||
.media-grid a: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);}
|
||||
@media (max-width: 480px){.container{width:auto;padding:0 10px;} [class*="span"]{float:none;display:block;width:auto;margin:0;} .modal{width:auto;margin:0;} .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;}}@media (min-width: 480px) and (max-width: 768px){.container{width:auto;padding:0 10px;} [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;}}
|
||||
|
||||
@ -8,183 +8,161 @@
|
||||
/* Body and structure
|
||||
-------------------------------------------------- */
|
||||
body {
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
padding-top: 90px;
|
||||
background-color: #fff;
|
||||
background-image: url(../img/grid-18px-masked.png);
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
section {
|
||||
padding-top: 60px;
|
||||
}
|
||||
section > .row {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* Tweak topbar brand link to be super sleek
|
||||
-------------------------------------------------- */
|
||||
body > .navbar-fixed .brand {
|
||||
float: right;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,.1);
|
||||
}
|
||||
body > .navbar-fixed .brand:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Jumbotrons
|
||||
-------------------------------------------------- */
|
||||
.jumbotron {
|
||||
min-width: 940px;
|
||||
padding-top: 40px;
|
||||
}
|
||||
.jumbotron .inner {
|
||||
background: transparent url(../img/grid-18px.png) top center;
|
||||
padding: 45px 0;
|
||||
-webkit-box-shadow: inset 0 10px 30px rgba(0,0,0,.3);
|
||||
-moz-box-shadow: inset 0 10px 30px rgba(0,0,0,.3);
|
||||
/* box-shadow: inset 0 10px 30px rgba(0,0,0,.3);
|
||||
*/}
|
||||
.jumbotron h1,
|
||||
.jumbotron p {
|
||||
margin-bottom: 9px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
text-shadow: 0 1px 1px rgba(0,0,0,.3);
|
||||
position: relative;
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
}
|
||||
.jumbotron h1 {
|
||||
font-size: 54px;
|
||||
margin-right: 40%;
|
||||
margin-bottom: 10px;
|
||||
font-size: 90px;
|
||||
letter-spacing: -1px;
|
||||
line-height: 1;
|
||||
text-shadow: 0 1px 2px rgba(0,0,0,.5);
|
||||
}
|
||||
.jumbotron p {
|
||||
margin-right: 32%;
|
||||
margin-bottom: 20px;
|
||||
font-size: 25px;
|
||||
font-weight: 300;
|
||||
line-height: 36px;
|
||||
}
|
||||
.jumbotron .lead {
|
||||
.jumbotron .btn {
|
||||
font-size: 20px;
|
||||
line-height: 27px;
|
||||
padding: 14px 24px;
|
||||
margin-right: 5px;
|
||||
-webkit-border-radius: 6px;
|
||||
-moz-border-radius: 6px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.jumbotron p a {
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
.jumbotron .download-info {
|
||||
font-size: 16px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* Benefits list in masthead */
|
||||
.benefits {
|
||||
width: 250px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.benefits ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
}
|
||||
.benefits li {
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
line-height: 35px;
|
||||
color: #555;
|
||||
}
|
||||
.benefits li + li {
|
||||
border-top: 1px solid #f5f5f5;
|
||||
}
|
||||
.benefits h4 {
|
||||
color: #555;
|
||||
}
|
||||
.benefits span {
|
||||
position: relative;
|
||||
top: -2px;
|
||||
padding-right: 5px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
|
||||
/* Specific jumbotrons
|
||||
------------------------- */
|
||||
/* main docs page */
|
||||
.masthead {
|
||||
background-color: #049cd9;
|
||||
background-repeat: no-repeat;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#004D9F), to(#049cd9));
|
||||
background-image: -webkit-linear-gradient(#004D9F, #049cd9);
|
||||
background-image: -moz-linear-gradient(#004D9F, #049cd9);
|
||||
background-image: -o-linear-gradient(top, #004D9F, #049cd9);
|
||||
background-image: -khtml-gradient(linear, left top, left bottom, from(#004D9F), to(#049cd9));
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#004D9F', endColorstr='#049cd9', GradientType=0); /* IE8 and down */
|
||||
}
|
||||
/* supporting docs pages */
|
||||
.subhead {
|
||||
background-color: #767d80;
|
||||
background-repeat: no-repeat;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#565d60), to(#767d80));
|
||||
background-image: -webkit-linear-gradient(#565d60, #767d80);
|
||||
background-image: -moz-linear-gradient(#565d60, #767d80);
|
||||
background-image: -o-linear-gradient(top, #565d60, #767d80);
|
||||
background-image: -khtml-gradient(linear, left top, left bottom, from(#565d60), to(#767d80));
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#565d60', endColorstr='#767d80', GradientType=0); /* IE8 and down */
|
||||
}
|
||||
.subhead .inner {
|
||||
padding: 36px 0 27px;
|
||||
padding-bottom: 18px;
|
||||
border-bottom: 3px solid #eee;
|
||||
}
|
||||
.subhead h1,
|
||||
.subhead p {
|
||||
text-align: left;
|
||||
margin-right: 0;
|
||||
}
|
||||
.subhead h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
.subhead p a {
|
||||
|
||||
|
||||
/* Quick links
|
||||
-------------------------------------------------- */
|
||||
.quick-links {
|
||||
padding: 5px 20px;
|
||||
margin: 60px 0;
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
background-color: #eee;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,.03);
|
||||
-moz-box-shadow: inset 0 1px 0 rgba(0,0,0,.03);
|
||||
box-shadow: inset 0 1px 0 rgba(0,0,0,.03);
|
||||
}
|
||||
.quick-links li {
|
||||
display: inline;
|
||||
margin: 0 5px;
|
||||
line-height: 30px;
|
||||
}
|
||||
.quick-links .divider {
|
||||
color: #999;
|
||||
}
|
||||
.quick-links strong {
|
||||
font-weight: normal;
|
||||
color: #999;
|
||||
}
|
||||
.quick-links .tweet-btn,
|
||||
.quick-links .follow-btn {
|
||||
position: relative;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
|
||||
/* Footer
|
||||
-------------------------------------------------- */
|
||||
.footer {
|
||||
background-color: #eee;
|
||||
min-width: 940px;
|
||||
padding: 30px 0;
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
-webkit-box-shadow: inset 0 5px 15px rgba(0,0,0,.025);
|
||||
-moz-box-shadow: inset 0 5px 15px rgba(0,0,0,.025);
|
||||
/* box-shadow: inset 0 5px 15px rgba(0,0,0,.025);
|
||||
*/}
|
||||
}
|
||||
.footer p {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
|
||||
/* Quickstart section for getting le code
|
||||
-------------------------------------------------- */
|
||||
.quickstart {
|
||||
background-color: #f5f5f5;
|
||||
background-repeat: repeat-x;
|
||||
background-image: -khtml-gradient(linear, left top, left bottom, from(#f9f9f9), to(#f5f5f5));
|
||||
background-image: -moz-linear-gradient(#f9f9f9, #f5f5f5);
|
||||
background-image: -ms-linear-gradient(#f9f9f9, #f5f5f5);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f9f9f9), color-stop(100%, #f5f5f5));
|
||||
background-image: -webkit-linear-gradient(#f9f9f9, #f5f5f5);
|
||||
background-image: -o-linear-gradient(#f9f9f9, #f5f5f5);
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#f5f5f5', GradientType=0)";
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#f5f5f5', GradientType=0);
|
||||
background-image: linear-gradient(#f9f9f9, #f5f5f5);
|
||||
border-top: 1px solid #fff;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.quickstart .container {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.quickstart .row {
|
||||
margin: 0 -20px;
|
||||
-webkit-box-shadow: 1px 0 0 #f9f9f9;
|
||||
-moz-box-shadow: 1px 0 0 #f9f9f9;
|
||||
box-shadow: 1px 0 0 #f9f9f9;
|
||||
}
|
||||
.quickstart [class*="span"] {
|
||||
width: 285px;
|
||||
height: 117px;
|
||||
margin-left: 0;
|
||||
padding: 17px 20px 26px;
|
||||
border-left: 1px solid #eee;
|
||||
-webkit-box-shadow: inset 1px 0 0 #f9f9f9;
|
||||
-moz-box-shadow: inset 1px 0 0 #f9f9f9;
|
||||
box-shadow: inset 1px 0 0 #f9f9f9;
|
||||
}
|
||||
.quickstart [class*="span"]:last-child {
|
||||
border-right: 1px solid #eee;
|
||||
width: 286px;
|
||||
}
|
||||
.quickstart h6,
|
||||
.quickstart p {
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
margin-bottom: 9px;
|
||||
color: #333;
|
||||
}
|
||||
.quickstart .current-version,
|
||||
.quickstart .current-version a {
|
||||
color: #999;
|
||||
}
|
||||
.quickstart h6 {
|
||||
color: #999;
|
||||
}
|
||||
.quickstart textarea {
|
||||
display: block;
|
||||
width: 275px;
|
||||
height: auto;
|
||||
margin: 0 0 9px;
|
||||
line-height: 21px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
/* Special grid styles
|
||||
-------------------------------------------------- */
|
||||
.show-grid {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.show-grid [class*="span"] {
|
||||
background: #eee;
|
||||
background-color: #eee;
|
||||
text-align: center;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
@ -228,7 +206,7 @@ section > .row {
|
||||
.mini-layout .mini-layout-body {
|
||||
background-color: #dceaf4;
|
||||
margin: 0 auto;
|
||||
width: 240px;
|
||||
width: 70%;
|
||||
height: 240px;
|
||||
}
|
||||
.mini-layout.fluid .mini-layout-sidebar,
|
||||
@ -238,11 +216,11 @@ section > .row {
|
||||
}
|
||||
.mini-layout.fluid .mini-layout-sidebar {
|
||||
background-color: #bbd8e9;
|
||||
width: 90px;
|
||||
width: 20%;
|
||||
height: 240px;
|
||||
}
|
||||
.mini-layout.fluid .mini-layout-body {
|
||||
width: 300px;
|
||||
width: 60%;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
@ -323,3 +301,64 @@ pre.prettyprint {
|
||||
.well form {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
.browser-support {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* Make tables spaced out a bit more */
|
||||
h2 + table {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
/* Responsive Docs
|
||||
-------------------------------------------------- */
|
||||
@media (max-width: 480px) {
|
||||
|
||||
body > .navbar-fixed .nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.large-bird {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.jumbotron h1 {
|
||||
font-size: 36px;
|
||||
margin-right: 0;
|
||||
}
|
||||
.jumbotron p {
|
||||
margin-right: 0;
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
}
|
||||
.jumbotron .benefits {
|
||||
position: relative;
|
||||
width: auto;
|
||||
margin: 36px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 900px) {
|
||||
.footer,
|
||||
.jumbotron {
|
||||
min-width: 748px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.supported-devices {
|
||||
margin-bottom: 9px;
|
||||
color: #777;
|
||||
}
|
||||
.supported-devices strong {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
}
|
||||
.supported-devices small {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
||||
BIN
docs/assets/img/grid-18px-masked.png
Normal file
BIN
docs/assets/img/grid-18px-masked.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
docs/assets/img/responsive-illustrations.png
Normal file
BIN
docs/assets/img/responsive-illustrations.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
1548
docs/index.html
1548
docs/index.html
@ -16,16 +16,6 @@
|
||||
<link href="assets/css/docs.css" rel="stylesheet">
|
||||
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
|
||||
|
||||
<!-- Le javascript -->
|
||||
<script src="http://code.jquery.com/jquery-1.5.2.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-dropdown.js"></script>
|
||||
<script src="../js/bootstrap-twipsy.js"></script>
|
||||
<script src="../js/bootstrap-scrollspy.js"></script>
|
||||
<script src="assets/js/application.js"></script>
|
||||
|
||||
<!-- Le fav and touch icons -->
|
||||
<link rel="shortcut icon" type="image/x-icon" href="assets/ico/favicon.ico">
|
||||
<link rel="apple-touch-icon" href="assets/ico/bootstrap-apple-57x57.png">
|
||||
@ -35,85 +25,118 @@
|
||||
|
||||
<body>
|
||||
|
||||
<!-- Topbar
|
||||
<!-- Navbar
|
||||
================================================== -->
|
||||
<div class="topbar" data-scrollspy="scrollspy">
|
||||
<div class="topbar-inner">
|
||||
<div class="navbar navbar-fixed" data-scrollspy="scrollspy">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="brand" href="#">Bootstrap</a>
|
||||
<a class="brand" href="./index.html">Bootstrap</a>
|
||||
<ul class="nav">
|
||||
<li class="active"><a href="#overview">Overview</a></li>
|
||||
<li><a href="#about">About</a></li>
|
||||
|
||||
<li class="dropdown" data-dropdown="dropdown">
|
||||
<a href="#" class="dropdown-toggle">Scaffolding</a>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-dropdown="true">Scaffolding</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#grid-system">Grid</a></li>
|
||||
<li><a href="#layouts">Layouts</a></li>
|
||||
<li><a href="#responsive">Resposive</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="dropdown" data-dropdown="dropdown">
|
||||
<a href="#" class="dropdown-toggle">CSS</a>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-dropdown="true">CSS</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#typography">Type</a></li>
|
||||
<li><a href="#tables">Tables</a></li>
|
||||
<li><a href="#forms">Forms</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="dropdown" data-dropdown="dropdown">
|
||||
<a href="#" class="dropdown-toggle">Patterns</a>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-dropdown="true">Patterns</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#media">Media</a></li>
|
||||
<li><a href="#navigation">Navigation</a></li>
|
||||
<li><a href="#media">Media</a></li>
|
||||
<li><a href="#alerts">Alerts</a></li>
|
||||
<li><a href="#popovers">Popovers</a></li>
|
||||
<li><a href="#autocomplete">Autocomplete</a></li>
|
||||
<li><a href="#accordion">Accordion</a></li>
|
||||
<li><a href="#datepicker">Datepicker</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
<li><a href="#javascript">Javascript</a></li>
|
||||
<li><a href="#less">Less</a></li>
|
||||
<li><a href="#less">Using Less</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Masthead (blueprinty thing)
|
||||
================================================== -->
|
||||
<header class="jumbotron masthead" id="overview">
|
||||
<div class="inner">
|
||||
<h1>Bootstrap, from Twitter</h1>
|
||||
<p class="lead">
|
||||
Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites.<br />
|
||||
It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.<br />
|
||||
</p>
|
||||
<p><strong>Nerd alert:</strong> Bootstrap is <a href="#less" title="Read about using Bootstrap with Less">built with Less</a> and was designed to work out of the gate with modern browsers in mind.</p>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container">
|
||||
|
||||
<!-- Quickstart options
|
||||
================================================== -->
|
||||
<div class="quickstart">
|
||||
<div class="container">
|
||||
<div id="overview">
|
||||
<!-- Masthead (blueprinty thing)
|
||||
================================================== -->
|
||||
<header class="jumbotron masthead">
|
||||
<div class="inner">
|
||||
<h1>Bootstrap,<br> from Twitter</h1>
|
||||
<p class="lead">Bootstrap is a responsive frontend toolkit from Twitter designed to kickstart web development, complete with core HTML, CSS, and JS for grids, type, forms, navigation, and many more components.</p>
|
||||
<p class="download-info">
|
||||
<a href="#" class="btn primary btn-large">Download on GitHub</a>
|
||||
Currently v2.0.0
|
||||
</p>
|
||||
<div class="benefits">
|
||||
<h4>Feature highlights</h4>
|
||||
<ul>
|
||||
<li><span>×</span> Built on LESS</li>
|
||||
<li><span>×</span> Complete styleguide docs</li>
|
||||
<li><span>×</span> Fully responsive design</li>
|
||||
<li><span>×</span> Small footprint (7kb gzipped)</li>
|
||||
<li><span>×</span> Support for IE7 and up</li>
|
||||
<li><span>×</span> Custom jQuery plugins</li>
|
||||
<li><span>×</span> Dozens of components</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<ul class="quick-links">
|
||||
<li><strong>Quick links</strong></li>
|
||||
<li><a href="https://github.com/twitter/bootstrap/">GitHub</a></li>
|
||||
<li><a href="https://github.com/twitter/bootstrap/issues?state=open">Issues</a></li>
|
||||
<li><a href="https://github.com/twitter/bootstrap/wiki/Roadmap">Roadmap</a></li>
|
||||
<li><a href="https://github.com/twitter/bootstrap/wiki/Changelog">Changelog</a></li>
|
||||
<li class="divider">·</li>
|
||||
<li><strong>Authors</strong></li>
|
||||
<li><a href="http://twitter.com/mdo">@mdo</a></li>
|
||||
<li><a href="http://twitter.com/fat">@fat</a></li>
|
||||
<li class="divider">·</li>
|
||||
<li class="follow-btn">
|
||||
<a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-width="145px" data-link-color="#0069D6" data-show-count="false">Follow @twbootstrap</a><script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
|
||||
</li>
|
||||
<li class="tweet-btn">
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://twitter.github.com/bootstrap/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Twitter Bootstrap">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<!-- Quickstart options
|
||||
================================================== -->
|
||||
<div class="quickstart" style="display: none;">
|
||||
<div class="row">
|
||||
<div class="span5">
|
||||
<div class="span4">
|
||||
<h6>Hotlink the CSS</h6>
|
||||
<p>For the quickest and easiest start, just copy this snippet into your webpage.</p>
|
||||
<form>
|
||||
<textarea class="copy-code" rows="1"><link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.min.css"></textarea>
|
||||
</form>
|
||||
</div>
|
||||
<div class="span5">
|
||||
<div class="span4">
|
||||
<h6>Use it with Less</h6>
|
||||
<p>A fan of using Less? No problem, just clone the repo and add these lines:</p>
|
||||
<form>
|
||||
<textarea class="copy-code" rows="2"><link rel="stylesheet/less" href="/path/to/bootstrap.less">
|
||||
<script src="/path/to/less.js"></script></textarea>
|
||||
<script src="/path/to/less.js"></script></textarea>
|
||||
</form>
|
||||
</div>
|
||||
<div class="span5">
|
||||
<div class="span4">
|
||||
<h6>Fork on GitHub</h6>
|
||||
<p>Download, fork, pull, file issues, and more with the official Bootstrap repo on Github.</p>
|
||||
<p><a target="_blank" href="https://github.com/twitter/bootstrap" class="btn primary">Bootstrap on GitHub »</a></p>
|
||||
@ -121,51 +144,40 @@
|
||||
</div>
|
||||
</div><!-- /row -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<!-- About Bootstrap
|
||||
================================================== -->
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<h2>Built for and by nerds</h2>
|
||||
<p>Engineers at Twitter have historically used almost any library they were familiar with to meet front-end requirements. Bootstrap began as an answer to the challenges that presented. With the help of many awesome folks, Bootstrap has grown significantly.</p>
|
||||
<p>Read more on <a href="https://dev.twitter.com/blog/bootstrap-twitter">dev.twitter.com ›</a></p>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h2>Cross-everything</h2>
|
||||
<p>Bootstrap is tested and supported in major modern browsers like Chrome, Safari, Internet Explorer, and Firefox.</p>
|
||||
<img class="browser-support" src="assets/img/browsers.png" alt="Tested and supported in Chrome, Safari, Internet Explorer, and Firefox">
|
||||
<ul>
|
||||
<li>Latest Safari</li>
|
||||
<li>Latest Google Chrome</li>
|
||||
<li>Firefox 4+</li>
|
||||
<li>Internet Explorer 7+</li>
|
||||
<li>Opera 11</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h2>What's included</h2>
|
||||
<p>Bootstrap comes complete with compiled CSS, uncompiled, and example templates.</p>
|
||||
<ul>
|
||||
<li><span class="label">New in 1.3</span> <a href="./javascript.html">Javascript plugins</a></li>
|
||||
<li>All original .less files</li>
|
||||
<li>Fully <a href="../bootstrap.css">compiled</a> and <a href="../bootstrap.min.css">minified</a> CSS</li>
|
||||
<li>Complete styleguide documentation</li>
|
||||
<li>Three example pages with different layouts</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- /row -->
|
||||
|
||||
|
||||
|
||||
<!-- About Bootstrap
|
||||
================================================== -->
|
||||
<section id="about">
|
||||
<div class="page-header">
|
||||
<h1>About Bootstrap <small>Brief history, browser support, and more</small></h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span-one-third">
|
||||
<h3>History</h3>
|
||||
<p>Engineers at Twitter have historically used almost any library they were familiar with to meet front-end requirements. Bootstrap began as an answer to the challenges that presented. With the help of many awesome folks, Bootstrap has grown significantly.</p>
|
||||
<p>Read more on <a href="https://dev.twitter.com/blog/bootstrap-twitter">dev.twitter.com ›</a></p>
|
||||
</div>
|
||||
<div class="span-one-third">
|
||||
<h3>Browser support</h3>
|
||||
<p>Bootstrap is tested and supported in major modern browsers like Chrome, Safari, Internet Explorer, and Firefox.</p>
|
||||
<img src="assets/img/browsers.png" alt="Tested and supported in Chrome, Safari, Internet Explorer, and Firefox">
|
||||
<ul>
|
||||
<li>Latest Safari</li>
|
||||
<li>Latest Google Chrome</li>
|
||||
<li>Firefox 4+</li>
|
||||
<li>Internet Explorer 7+</li>
|
||||
<li>Opera 11</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="span-one-third">
|
||||
<h3>What's included</h3>
|
||||
<p>Bootstrap comes complete with compiled CSS, uncompiled, and example templates.</p>
|
||||
<ul>
|
||||
<li><span class="label">New in 1.3</span> <a href="./javascript.html">Javascript plugins</a></li>
|
||||
<li>All original .less files</li>
|
||||
<li>Fully <a href="../bootstrap.css">compiled</a> and <a href="../bootstrap.min.css">minified</a> CSS</li>
|
||||
<li>Complete styleguide documentation</li>
|
||||
<li>Three example pages with different layouts</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- /row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h3>Quick-start examples</h3>
|
||||
<p>Need some quick templates? Check out these basic examples we've put together:</p>
|
||||
<ul class="media-grid">
|
||||
@ -179,161 +191,109 @@
|
||||
<a href="../examples/container-app.html"><img src="assets/img/example-diagram-03.png" alt="Simple hanging container for apps"></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- /row -->
|
||||
</section>
|
||||
|
||||
</div><!-- /#overview -->
|
||||
|
||||
|
||||
<!-- Grid system
|
||||
================================================== -->
|
||||
<section id="grid-system">
|
||||
<div class="page-header">
|
||||
<h1>Grid system <small>Rock the standard 940px or roll your own</small></h1>
|
||||
<h1>Grid system <small>12 columns with a responsive twist</small></h1>
|
||||
</div>
|
||||
|
||||
<h2>Default 940px grid</h2>
|
||||
<div class="row show-grid">
|
||||
<div class="span1">1</div>
|
||||
<div class="span1">1</div>
|
||||
<div class="span1">1</div>
|
||||
<div class="span1">1</div>
|
||||
<div class="span1">1</div>
|
||||
<div class="span1">1</div>
|
||||
<div class="span1">1</div>
|
||||
<div class="span1">1</div>
|
||||
<div class="span1">1</div>
|
||||
<div class="span1">1</div>
|
||||
<div class="span1">1</div>
|
||||
<div class="span1">1</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="span4">4</div>
|
||||
<div class="span4">4</div>
|
||||
<div class="span4">4</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="span4">4</div>
|
||||
<div class="span8">8</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="span6">6</div>
|
||||
<div class="span6">6</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="span12">12</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<h2>Default grid</h2>
|
||||
<p>The default grid system provided as part of Bootstrap is a 940px wide 16-column grid. It’s a flavor of the popular 960 grid system, but without the additional margin/padding on the left and right sides.</p>
|
||||
<p>The default grid system provided as part of Bootstrap is a <strong>940px-wide, 12-column grid</strong>.</p>
|
||||
<p>It also has three responsive variations for various devices and resolutions: phone, tablet, and large widescreen desktops.</p>
|
||||
</div>
|
||||
<div class="span12">
|
||||
<h3>Example grid markup</h3>
|
||||
<p>As shown here, a basic layout can be created with two "columns," each spanning a number of the 16 foundational columns we defined as part of our grid system. See the examples below for more variations.</p>
|
||||
<div class="span4">
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="row">
|
||||
<div class="span6">
|
||||
...
|
||||
</div>
|
||||
<div class="span10">
|
||||
...
|
||||
</div>
|
||||
<div class="span4">...</div>
|
||||
<div class="span8">...</div>
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<p>As shown here, a basic layout can be created with two "columns," each spanning a number of the 12 foundational columns we defined as part of our grid system.</p>
|
||||
</div>
|
||||
</div><!-- /row -->
|
||||
<div class="row show-grid" title="16 column layout">
|
||||
<div class="span1">1</div>
|
||||
<div class="span1">1</div>
|
||||
<div class="span1">1</div>
|
||||
<div class="span1">1</div>
|
||||
<div class="span1">1</div>
|
||||
<div class="span1">1</div>
|
||||
<div class="span1">1</div>
|
||||
<div class="span1">1</div>
|
||||
<div class="span1">1</div>
|
||||
<div class="span1">1</div>
|
||||
<div class="span1">1</div>
|
||||
<div class="span1">1</div>
|
||||
<div class="span1">1</div>
|
||||
<div class="span1">1</div>
|
||||
<div class="span1">1</div>
|
||||
<div class="span1">1</div>
|
||||
</div><!-- /row -->
|
||||
<div class="row show-grid" title="8 column layout">
|
||||
<div class="span2">2</div>
|
||||
<div class="span2">2</div>
|
||||
<div class="span2">2</div>
|
||||
<div class="span2">2</div>
|
||||
<div class="span2">2</div>
|
||||
<div class="span2">2</div>
|
||||
<div class="span2">2</div>
|
||||
<div class="span2">2</div>
|
||||
</div><!-- /row -->
|
||||
<div class="row show-grid" title="Example uncommon layout">
|
||||
<div class="span3">3</div>
|
||||
<div class="span3">3</div>
|
||||
<div class="span3">3</div>
|
||||
<div class="span3">3</div>
|
||||
<div class="span3">3</div>
|
||||
<div class="span1 column">1</div>
|
||||
</div><!-- /row -->
|
||||
<div class="row show-grid" title="Four column layout">
|
||||
<div class="span4">4</div>
|
||||
<div class="span4">4</div>
|
||||
<div class="span4">4</div>
|
||||
<div class="span4">4</div>
|
||||
</div><!-- /row -->
|
||||
<div class="row show-grid" title="Default three column layout">
|
||||
<div class="span-one-third">1/3</div>
|
||||
<div class="span-one-third">1/3</div>
|
||||
<div class="span-one-third">1/3</div>
|
||||
</div><!-- /row -->
|
||||
<div class="row show-grid" title="One-third and two-thirds layout">
|
||||
<div class="span-one-third">1/3</div>
|
||||
<div class="span-two-thirds">2/3</div>
|
||||
</div><!-- /row -->
|
||||
<div class="row show-grid" title="Irregular three column layout">
|
||||
<div class="span4">4</div>
|
||||
<div class="span6">6</div>
|
||||
<div class="span6">6</div>
|
||||
</div><!-- /row -->
|
||||
<div class="row show-grid" title="Half and half">
|
||||
<div class="span8">8</div>
|
||||
<div class="span8">8</div>
|
||||
</div><!-- /row -->
|
||||
<div class="row show-grid" title="Example uncommon two-column layout">
|
||||
<div class="span5">5</div>
|
||||
<div class="span11">11</div>
|
||||
</div><!-- /row -->
|
||||
<div class="row show-grid" title="Unnecessary single column layout">
|
||||
<div class="span16">16</div>
|
||||
</div><!-- /row -->
|
||||
|
||||
<br>
|
||||
|
||||
<h2>Offsetting columns</h2>
|
||||
<div class="row show-grid">
|
||||
<div class="span4">4</div>
|
||||
<div class="span4 offset4">4 offset 4</div>
|
||||
</div><!-- /row -->
|
||||
<div class="row show-grid">
|
||||
<div class="span3 offset3">3 offset 3</div>
|
||||
<div class="span3 offset3">3 offset 3</div>
|
||||
</div><!-- /row -->
|
||||
<div class="row show-grid">
|
||||
<div class="span8 offset4">8 offset 4</div>
|
||||
</div><!-- /row -->
|
||||
<div class="row show-grid">
|
||||
<div class="span-one-third offset-two-thirds">1/3 offset 2/3s</div>
|
||||
</div><!-- /row -->
|
||||
<div class="row show-grid">
|
||||
<div class="span4 offset4">4 offset 4</div>
|
||||
<div class="span4 offset4">4 offset 4</div>
|
||||
</div><!-- /row -->
|
||||
<div class="row show-grid">
|
||||
<div class="span5 offset3">5 offset 3</div>
|
||||
<div class="span5 offset3">5 offset 3</div>
|
||||
</div><!-- /row -->
|
||||
<div class="row show-grid">
|
||||
<div class="span10 offset6">10 offset 6</div>
|
||||
</div><!-- /row -->
|
||||
|
||||
<br>
|
||||
|
||||
<h2>Nesting columns</h2>
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<h2>Nesting columns</h2>
|
||||
<p>Nest your content if you must by creating a <code>.row</code> within an existing column.</p>
|
||||
</div>
|
||||
<div class="span12">
|
||||
<h4>Example of nested columns</h4>
|
||||
<div class="span6">
|
||||
<p>With the static (non-fluid) grid system in Bootstrap, nesting is easy. To nest your content, just add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column.</p>
|
||||
<h4>Example</h4>
|
||||
<div class="row show-grid">
|
||||
<div class="span12">
|
||||
<div class="span6">
|
||||
Level 1 of column
|
||||
<div class="row show-grid">
|
||||
<div class="span6">
|
||||
<div class="span3">
|
||||
Level 2
|
||||
</div>
|
||||
<div class="span6">
|
||||
<div class="span3">
|
||||
Level 2
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span6">
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
Level 1 of column
|
||||
<div class="row">
|
||||
<div class="span6">
|
||||
Level 2
|
||||
</div>
|
||||
<div class="span6">
|
||||
Level 2
|
||||
</div>
|
||||
<div class="span6">Level 2</div>
|
||||
<div class="span6">Level 2</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -341,56 +301,53 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<h2>Grid customization</h2>
|
||||
<table class="zebra-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Variable</th>
|
||||
<th>Default value</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>@gridColumns</code></td>
|
||||
<td>16</td>
|
||||
<td>The number of columns within the grid</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@gridColumnWidth</code></td>
|
||||
<td>40px</td>
|
||||
<td>The width of each column within the grid</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@gridGutterWidth</code></td>
|
||||
<td>20px</td>
|
||||
<td>The negative space between each column</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@siteWidth</code></td>
|
||||
<td><em>Computed sum of all columns and gutters</em></td>
|
||||
<td>We use some basic match to count the number of columns and gutters and set the width of the <code>.fixed-container()</code> mixin.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<h2>Roll your own grid</h2>
|
||||
<p>Built into Bootstrap are a handful of variables for customizing the default 940px grid system. With a bit of customization, you can modify the size of columns, their gutters, and the container they reside in.</p>
|
||||
<h3>Variables in LESS</h3>
|
||||
<p>Built into Bootstrap are a handful of variables for customizing the default 940px grid system, documented above. All variables for the grid are stored in mixins.less.</p>
|
||||
</div>
|
||||
<div class="span12">
|
||||
<h3>Inside the grid</h3>
|
||||
<p>The variables needed to modify the grid system currently all reside in <code>preboot.less</code>.</p>
|
||||
<table class="zebra-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Variable</th>
|
||||
<th>Default value</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>@gridColumns</code></td>
|
||||
<td>16</td>
|
||||
<td>The number of columns within the grid</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@gridColumnWidth</code></td>
|
||||
<td>40px</td>
|
||||
<td>The width of each column within the grid</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@gridGutterWidth</code></td>
|
||||
<td>20px</td>
|
||||
<td>The negative space between each column</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@siteWidth</code></td>
|
||||
<td><em>Computed sum of all columns and gutters</em></td>
|
||||
<td>We use some basic match to count the number of columns and gutters and set the width of the <code>.fixed-container()</code> mixin.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3>Now to customize</h3>
|
||||
<p>Modifying the grid means changing the three <code>@grid-*</code> variables and recompiling the Less files.</p>
|
||||
<p>Bootstrap comes equipped to handle a grid system with up to 24 columns; the default is just 16. Here's how your grid variables would look customized to a 24-column grid.</p>
|
||||
<pre class="prettyprint linenums">@gridColumns: 24;
|
||||
@gridColumnWidth: 20px;
|
||||
@gridGutterWidth: 20px;</pre>
|
||||
<p>Once recompiled, you'll be set!</p>
|
||||
<div class="span4">
|
||||
<h3>How to customize</h3>
|
||||
<p>Modifying the grid means changing the three <code>@grid*</code> variables and recompiling Bootstrap. Change the grids in the preboot.less file and use one of the <a href="#compiling">four ways documented to recompile</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h3>Staying responsive</h3>
|
||||
<p>Customization of the grid only works at the default level, the 940px grid. To maintain the responsive aspects of Bootstrap, you'll also have to customize the grids in responsive.less.</p>
|
||||
</div>
|
||||
</div><!-- /row -->
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
@ -403,7 +360,7 @@
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="span8">
|
||||
<div class="span6">
|
||||
<h2>Fixed layout</h2>
|
||||
<p>The default and simple 940px-wide, centered layout for just about any website or page provided by a single <code><div.container></code>.</p>
|
||||
<div class="mini-layout">
|
||||
@ -417,7 +374,7 @@
|
||||
</body>
|
||||
</pre>
|
||||
</div><!-- /col -->
|
||||
<div class="span8">
|
||||
<div class="span6">
|
||||
<h2>Fluid layout</h2>
|
||||
<p>An alternative, flexible fluid page structure with min- and max-widths and a left-hand sidebar. Great for apps and docs.</p>
|
||||
<div class="mini-layout fluid">
|
||||
@ -442,6 +399,86 @@
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Responsive design
|
||||
================================================== -->
|
||||
<section id="responsive">
|
||||
<div class="page-header">
|
||||
<h1>Responsive design <small>Media queries for various devices and resolutions</small></h1>
|
||||
</div>
|
||||
<!-- Supported devices -->
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<img src="assets/img/responsive-illustrations.png" alt="Responsive devices">
|
||||
</div>
|
||||
<div class="span8">
|
||||
<h2>Supported devices</h2>
|
||||
<table class="supported-devices">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<strong>Under 480px</strong>
|
||||
<small>Smartphones</small>
|
||||
</td>
|
||||
<td>
|
||||
<strong>480px to 768px</strong>
|
||||
<small>Portrait tablet</small>
|
||||
</td>
|
||||
<td>
|
||||
<strong>768px to 940px</strong>
|
||||
<small>Landscape tablet</small>
|
||||
</td>
|
||||
<td>
|
||||
<strong>940px and up</strong>
|
||||
<small>Default</small>
|
||||
</td>
|
||||
<td>
|
||||
<strong>1170px and up</strong>
|
||||
<small>Large screens</small>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>With these media queries, Bootstrap provides developers with the core tools necessary to develop responsively on the web for the world's most common devices and resolutions.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<!-- Media query code -->
|
||||
<h2>Using the media queries</h2>
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<p>Bootstrap doesn't automatically include these media queries, but understanding and adding them is very easy and requires minimal setup. You have a few options for including the responsive features of Bootstrap:</p>
|
||||
<ol>
|
||||
<li>Use the compiled responsive version, bootstrap.reponsive.css</li>
|
||||
<li>Add @import "responsive.less" and recompile Bootstrap</li>
|
||||
<li>Compile responsive.less as a separate file and include that</li>
|
||||
</ol>
|
||||
<p><strong>Why not just include it?</strong> Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.</p>
|
||||
</div>
|
||||
<div class="span8">
|
||||
<pre class="prettyprint linenums">
|
||||
// Landscape phones and down
|
||||
@media (max-width: 480px) { ... }
|
||||
|
||||
// Landscape phone to portrait tablet
|
||||
@media (min-width: 480px) and (max-width: 768px) { ... }
|
||||
|
||||
// Portrait tablet to landscape and desktop
|
||||
@media (min-width: 768px) and (max-width: 940px) { ... }
|
||||
|
||||
// Large desktop
|
||||
@media (min-width: 1210px) { .. }
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Typography
|
||||
================================================== -->
|
||||
<section id="typography">
|
||||
@ -449,90 +486,130 @@
|
||||
<h1>Typography <small>Headings, paragraphs, lists, and other inline type elements</small></h1>
|
||||
</div>
|
||||
|
||||
<h2>Headings & body copy</h2>
|
||||
|
||||
<!-- Headings & Paragraph Copy -->
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<h2>Headings & copy</h2>
|
||||
<p>A standard typographic hierarchy for structuring your webpages.</p>
|
||||
<p>The entire typographic grid is based on two Less variables in our preboot.less file: <code>@basefont</code> and <code>@baseline</code>. The first is the base font-size used throughout and the second is the base line-height.</p>
|
||||
<h3>Typographic scale</h3>
|
||||
<p>The entire typographic grid is based on two Less variables in our preboot.less file: <code>@baseFontSize</code> and <code>@baseLineHeight</code>. The first is the base font-size used throughout and the second is the base line-height.</p>
|
||||
<p>We use those variables, and some math, to create the margins, paddings, and line-heights of all our type and more.</p>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h1>h1. Heading 1</h1>
|
||||
<h2>h2. Heading 2</h2>
|
||||
<h3>h3. Heading 3</h3>
|
||||
<h4>h4. Heading 4</h4>
|
||||
<h5>h5. Heading 5</h5>
|
||||
<h6>h6. Heading 6</h6>
|
||||
</div>
|
||||
<div class="span8">
|
||||
<h3>Example paragraph</h3>
|
||||
<h3>Example body text</h3>
|
||||
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
||||
<h1>Example heading <small>Has sub-heading…</small></h1>
|
||||
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.</p>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<div class="well">
|
||||
<h1>h1. Heading 1</h1>
|
||||
<h2>h2. Heading 2</h2>
|
||||
<h3>h3. Heading 3</h3>
|
||||
<h4>h4. Heading 4</h4>
|
||||
<h5>h5. Heading 5</h5>
|
||||
<h6>h6. Heading 6</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Misc Elements -->
|
||||
<h2>Emphasis, address, and abbreviation</h2>
|
||||
<table class="zebra-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Element</th>
|
||||
<th>Description</th>
|
||||
<th>Usage</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<code><strong></code>
|
||||
</td>
|
||||
<td>
|
||||
For emphasizing a snippet of text with <strong>important</strong>
|
||||
</td>
|
||||
<td>
|
||||
<span class="muted">None</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code><em></code>
|
||||
</td>
|
||||
<td>
|
||||
For emphasizing a snippet of text with <em>stress</em>
|
||||
</td>
|
||||
<td>
|
||||
<span class="muted">None</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code><abbr></code>
|
||||
</td>
|
||||
<td>
|
||||
Wraps abbreviations and acronyms to show the expanded version on hover
|
||||
</td>
|
||||
<td>
|
||||
Include optional <code>title</code> for expanded text
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code><address></code>
|
||||
</td>
|
||||
<td>
|
||||
For contact information for its nearest ancestor or the entire body of work
|
||||
</td>
|
||||
<td>
|
||||
Preserve formatting by ending all lines with <code><br></code>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<h2>Misc. elements</h2>
|
||||
<p>Using emphasis, addresses, & abbreviations</p>
|
||||
<p>
|
||||
<code><strong></code>
|
||||
<code><em></code>
|
||||
<code><address></code>
|
||||
<code><abbr></code>
|
||||
</p>
|
||||
</div>
|
||||
<div class="span12">
|
||||
<h3>When to use</h3>
|
||||
<p>Emphasis tags (<code><strong></code> and <code><em></code>) should be used to indicate additional importance or emphasis of a word or phrase relative to its surrounding copy. Use <code><strong></code> for importance and <code><em></code> for <em>stress</em> emphasis.</p>
|
||||
<h3>Emphasis in a paragraph</h3>
|
||||
<h3>Using emphasis</h3>
|
||||
<p><a href="#">Fusce dapibus</a>, <strong>tellus ac cursus commodo</strong>, <em>tortor mauris condimentum nibh</em>, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
<p><strong>Note:</strong> It's still okay to use <code><b></code> and <code><i></code> tags in HTML5 and they don't have to be styled bold and italic, respectively (although if there is a more semantic element, use it). <code><b></code> is meant to highlight words or phrases without conveying additional importance, while <code><i></code> is mostly for voice, technical terms, etc.</p>
|
||||
<h3>Addresses</h3>
|
||||
<p>The <code><address></code> element is used for contact information for its nearest ancestor, or the entire body of work. Here are two examples of how it could be used:</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<address>
|
||||
<strong>Twitter, Inc.</strong><br />
|
||||
795 Folsom Ave, Suite 600<br />
|
||||
San Francisco, CA 94107<br />
|
||||
<abbr title="Phone">P:</abbr> (123) 456-7890
|
||||
</address>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<address>
|
||||
<strong>Full Name</strong><br />
|
||||
<a mailto="">first.last@gmail.com</a>
|
||||
</address>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p><strong>Note:</strong> Each line in an <code><address></code> must end with a line-break (<code><br /></code>) or be wrapped in a block-level tag (e.g., <code><p></code>) to properly structure the content.</p>
|
||||
<h3>Abbreviations</h3>
|
||||
<p>For abbreviations and acronyms, use the <code><abbr></code> tag (<code><acronym></code> is deprecated in <abbr title="HyperText Markup Langugage 5">HTML5</abbr>). Put the shorthand form within the tag and set a title for the complete name.</p>
|
||||
<p><strong>Note:</strong> Feel free to use <code><b></code> and <code><i></code> in HTML5, but their usage has changed a bit. <code><b></code> is meant to highlight words or phrases without conveying additional importance while <code><i></code> is mostly for voice, technical terms, etc.</p>
|
||||
</div>
|
||||
</div><!-- /row -->
|
||||
<div class="span4">
|
||||
<h3>Example addresses</h3>
|
||||
<p>Here are two examples of how the <code><address></code> tag can be used:</p>
|
||||
<address>
|
||||
<strong>Twitter, Inc.</strong><br>
|
||||
795 Folsom Ave, Suite 600<br>
|
||||
San Francisco, CA 94107<br>
|
||||
<abbr title="Phone">P:</abbr> (123) 456-7890
|
||||
</address>
|
||||
<address>
|
||||
<strong>Full Name</strong><br>
|
||||
<a mailto="#">first.last@gmail.com</a>
|
||||
</address>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h3>Example abbreviations</h3>
|
||||
<p>Abbreviations are styled with uppercase text and a light dotted bottom border. They also have a help cursor on hover so users have extra indication something will be shown on hover.</p>
|
||||
<p><abbr title="HyperText Markup Language">HTML</abbr> is the best thing since sliced bread.</p>
|
||||
<p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Blockquotes -->
|
||||
<h2>Blockquotes</h2>
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<h2>Blockquotes</h2>
|
||||
<p>
|
||||
<code><blockquote></code>
|
||||
<code><p></code>
|
||||
<code><small></code>
|
||||
</p>
|
||||
</div>
|
||||
<div class="span12">
|
||||
<h3>How to quote</h3>
|
||||
<div class="span5">
|
||||
<p>To include a blockquote, wrap <code><blockquote></code> around <code><p></code> and <code><small></code> tags. Use the <code><small></code> element to cite your source and you'll get an em dash <code>&mdash;</code> before it.</p>
|
||||
<blockquote>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
|
||||
<small>Dr. Julius Hibbert</small>
|
||||
</blockquote>
|
||||
</div>
|
||||
<div class="span7">
|
||||
<pre class="prettyprint linenums">
|
||||
<blockquote>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
|
||||
@ -540,11 +617,12 @@
|
||||
</blockquote>
|
||||
</pre>
|
||||
</div>
|
||||
</div><!-- /row -->
|
||||
</div>
|
||||
|
||||
<!-- Lists -->
|
||||
<h2>Lists</h2>
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<div class="span3">
|
||||
<h4>Unordered <code><ul></code></h4>
|
||||
<ul>
|
||||
<li>Lorem ipsum dolor sit amet</li>
|
||||
@ -564,7 +642,7 @@
|
||||
<li>Eget porttitor lorem</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<div class="span3">
|
||||
<h4>Unstyled <code><ul.unstyled></code></h4>
|
||||
<ul class="unstyled">
|
||||
<li>Lorem ipsum dolor sit amet</li>
|
||||
@ -584,7 +662,7 @@
|
||||
<li>Eget porttitor lorem</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<div class="span3">
|
||||
<h4>Ordered <code><ol></code></h4>
|
||||
<ol>
|
||||
<li>Lorem ipsum dolor sit amet</li>
|
||||
@ -597,8 +675,8 @@
|
||||
<li>Eget porttitor lorem</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h4>Description <code>dl</code></h4>
|
||||
<div class="span3">
|
||||
<h4>Description <code><dl></code></h4>
|
||||
<dl>
|
||||
<dt>Description lists</dt>
|
||||
<dd>A description list is perfect for defining terms.</dd>
|
||||
@ -613,120 +691,100 @@
|
||||
|
||||
|
||||
<!-- Code -->
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<h2>Code</h2>
|
||||
<p>
|
||||
<code><code></code>
|
||||
<code><pre></code>
|
||||
</p>
|
||||
<p>Pimp your code in style with two simple tags. For even more awesomeness through javascript, drop in Google's code prettify library and you're set.</p>
|
||||
</div>
|
||||
<div class="span12">
|
||||
<h3>Presenting code</h3>
|
||||
<p>Code, blocks of or just snippets inline, can be displayed with style just by wrapping in the right tag. For blocks of code spanning multiple lines, use the <code><pre></code> element. For inline code, use the <code><code></code> element.</p>
|
||||
<table class="zebra-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 190px;">Element</th>
|
||||
<th>Result</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code><code></code></td>
|
||||
<td>In a line of text like this, your wrapped code will look like this <code>>html<</code> element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><pre></code></td>
|
||||
<td>
|
||||
|
||||
<h2>Code <small>Inline and block</small></h2>
|
||||
<table class="zebra-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 190px;">Element</th>
|
||||
<th>Result</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code><code></code></td>
|
||||
<td>In a line of text like this, your wrapped code will look like this <code><html></code> element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><pre></code></td>
|
||||
<td>
|
||||
<pre><div>
|
||||
<h1>Heading</h1>
|
||||
<p>Something right here...</p>
|
||||
</div></pre>
|
||||
<p><strong>Note:</strong> Be sure to keep code within <code>pre</code> tags as close to the left as possible; it will render all tabs.</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><pre class="prettyprint"></code></td>
|
||||
<td>
|
||||
<p>Using the google-code-prettify library, you're blocks of code get a slightly different visual style and automatic syntax highlighting.</p>
|
||||
<p><strong>Note:</strong> Be sure to keep code within <code>pre</code> tags as close to the left as possible; it will render all tabs.</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><pre class="prettyprint"></code></td>
|
||||
<td>
|
||||
<p>Using the google-code-prettify library, you're blocks of code get a slightly different visual style and automatic syntax highlighting. You can also add an additional class to add line numbers.</p>
|
||||
<pre class="prettyprint"><div>
|
||||
<h1>Heading</h1>
|
||||
<p>Something right here...</p>
|
||||
</div></pre>
|
||||
<p><a href="http://code.google.com/p/google-code-prettify/">Download google-code-prettify</a> and view the readme for <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html">how to use</a>.</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div><!-- /row -->
|
||||
<pre class="prettyprint linenums"><div>
|
||||
<h1>Heading</h1>
|
||||
<p>Something right here...</p>
|
||||
</div></pre>
|
||||
<p><a href="http://code.google.com/p/google-code-prettify/">Download google-code-prettify</a> and view the readme for <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html">how to use</a>.</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Labels -->
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<h2>Inline labels</h2>
|
||||
<p>
|
||||
<code><span class="label"></code>
|
||||
</p>
|
||||
<p>Call attention to or flag any phrase in your body text.</p>
|
||||
</div>
|
||||
<div class="span12">
|
||||
<h3>Label anything</h3>
|
||||
<p>Ever needed one of those fancy <span class="label success">New!</span> or <span class="label important">Important</span> flags when writing code? Well, now you have them. Here's what's included by default:</p>
|
||||
<table class="zebra-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 50%;">Label</th>
|
||||
<th>Result</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<code><span class="label">Default</span></code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="label">Default</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code><span class="label success">New</span></code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="label success">New</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code><span class="label warning">Warning</span></code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="label warning">Warning</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code><span class="label important">Important</span></code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="label important">Important</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code><span class="label notice">Notice</span></code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="label notice">Notice</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div><!-- /row -->
|
||||
<h2>Inline labels <small>for special attention</small></h2>
|
||||
<table class="zebra-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 190px;">Labels</th>
|
||||
<th>Markup</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="label">Default</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="label">Default</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="label success">New</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="label success">New</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="label warning">Warning</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="label warning">Warning</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="label important">Important</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="label important">Important</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="label notice">Notice</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="label notice">Notice</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</section>
|
||||
|
||||
@ -738,130 +796,204 @@
|
||||
<div class="page-header">
|
||||
<h1>Tables <small>For, you guessed it, tabular data</small></h1>
|
||||
</div>
|
||||
<!-- Table structure -->
|
||||
|
||||
<h2>Table markup</h2>
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<h2>Building tables</h2>
|
||||
<p>
|
||||
<code><table></code>
|
||||
<code><thead></code>
|
||||
<code><tbody></code>
|
||||
<code><tr></code>
|
||||
<code><th></code>
|
||||
<code><td></code>
|
||||
<code><colspan></code>
|
||||
<code><caption></code>
|
||||
</p>
|
||||
<p>Tables are great—for a lot of things. Great tables, however, need a bit of markup love to be useful, scalable, and readable (at the code level). Here are a few tips to help.</p>
|
||||
<p>Always wrap your column headers in a <code><thead></code> such that hierarchy is <code><thead></code> > <code><tr></code> > <code><th></code>.</p>
|
||||
<p>Similar to the column headers, all your table’s body content should be wrapped in a <code><tbody></code> so your hierarchy is <code><tbody></code> > <code><tr></code> > <code><td></code>.</p>
|
||||
</div>
|
||||
<div class="span12">
|
||||
<h3>Example: Default table styles</h3>
|
||||
<p>All tables will be automatically styled with only the essential borders to ensure readability and maintain structure. No need to add extra classes or attributes.</p>
|
||||
<table>
|
||||
<div class="span8">
|
||||
<table class="zebra-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Language</th>
|
||||
<th>Tag</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Some</td>
|
||||
<td>One</td>
|
||||
<td>English</td>
|
||||
<td>
|
||||
<code><table></code>
|
||||
</td>
|
||||
<td>
|
||||
Wrapping element for displaying data in a tabular format
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Joe</td>
|
||||
<td>Sixpack</td>
|
||||
<td>English</td>
|
||||
<td>
|
||||
<code><thead></code>
|
||||
</td>
|
||||
<td>
|
||||
Container element for table header rows (<code><tr></code>) to label table columns
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Stu</td>
|
||||
<td>Dent</td>
|
||||
<td>Code</td>
|
||||
<td>
|
||||
<code><tbody></code>
|
||||
</td>
|
||||
<td>
|
||||
Container element for table rows (<code><tr></code>) in the body of the table
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code><tr></code>
|
||||
</td>
|
||||
<td>
|
||||
Container element for a set of table cells (<code><td></code> or <code><th></code>) that appears on a single row
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code><td></code>
|
||||
</td>
|
||||
<td>
|
||||
Default table cell
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code><th></code>
|
||||
</td>
|
||||
<td>
|
||||
Special table cell for column (or row, depending on scope and placement) labels<br>
|
||||
Must be used within a <code><thead></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code><caption></code>
|
||||
</td>
|
||||
<td>
|
||||
Description or summary of what the table holds, especially useful for screen readers
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<pre class="prettyprint linenums">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>...</th>
|
||||
<th>...</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>...</td>
|
||||
<td>...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Example tables</h2>
|
||||
<h3>1. Default table styles</h3>
|
||||
<p>All tables will be automatically styled with only the essential borders to ensure readability and maintain structure. No need to add extra classes or attributes.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Language</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Some</td>
|
||||
<td>One</td>
|
||||
<td>English</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Joe</td>
|
||||
<td>Sixpack</td>
|
||||
<td>English</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Stu</td>
|
||||
<td>Dent</td>
|
||||
<td>Code</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<pre class="prettyprint linenums">
|
||||
<table>
|
||||
...
|
||||
</table></pre>
|
||||
<h3>Example: Zebra-striped</h3>
|
||||
<p>Get a little fancy with your tables by adding zebra-striping—just add the <code>.zebra-striped</code> class.</p>
|
||||
<table class="zebra-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Language</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Some</td>
|
||||
<td>One</td>
|
||||
<td>English</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Joe</td>
|
||||
<td>Sixpack</td>
|
||||
<td>English</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Stu</td>
|
||||
<td>Dent</td>
|
||||
<td>Code</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p><strong>Note:</strong> Zebra-striping is a progressive enhancement not available for older browsers like IE8 and below.</p>
|
||||
<h3>2. Zebra-striped</h3>
|
||||
<p>Get a little fancy with your tables by adding zebra-striping—just add the <code>.zebra-striped</code> class.</p>
|
||||
<table class="zebra-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Language</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Some</td>
|
||||
<td>One</td>
|
||||
<td>English</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Joe</td>
|
||||
<td>Sixpack</td>
|
||||
<td>English</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Stu</td>
|
||||
<td>Dent</td>
|
||||
<td>Code</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p><strong>Note:</strong> Zebra-striping is a progressive enhancement not available for older browsers like IE8 and below.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<table class="zebra-striped">
|
||||
...
|
||||
</table></pre>
|
||||
<h3>Example: Zebra-striped w/ TableSorter.js</h3>
|
||||
<p>Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via <a href="http://jquery.com">jQuery</a> and the <a href="http://tablesorter.com/docs/">Tablesorter</a> plugin. <strong>Click any column’s header to change the sort.</strong></p>
|
||||
<table class="zebra-striped" id="sortTableExample">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th class="yellow">First Name</th>
|
||||
<th class="blue">Last Name</th>
|
||||
<th class="green">Language</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Your</td>
|
||||
<td>One</td>
|
||||
<td>English</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Joe</td>
|
||||
<td>Sixpack</td>
|
||||
<td>English</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Stu</td>
|
||||
<td>Dent</td>
|
||||
<td>Code</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3>3. Zebra-striped w/ TableSorter.js</h3>
|
||||
<p>Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via <a href="http://jquery.com">jQuery</a> and the <a href="http://tablesorter.com/docs/">Tablesorter</a> plugin. <strong>Click any column’s header to change the sort.</strong></p>
|
||||
<table class="zebra-striped" id="sortTableExample">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th class="yellow">First Name</th>
|
||||
<th class="blue">Last Name</th>
|
||||
<th class="green">Language</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Your</td>
|
||||
<td>One</td>
|
||||
<td>English</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Joe</td>
|
||||
<td>Sixpack</td>
|
||||
<td>English</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Stu</td>
|
||||
<td>Dent</td>
|
||||
<td>Code</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<pre class="prettyprint linenums">
|
||||
<script src="js/jquery/jquery.tablesorter.min.js"></script>
|
||||
<script >
|
||||
@ -872,8 +1004,7 @@
|
||||
<table class="zebra-striped">
|
||||
...
|
||||
</table></pre>
|
||||
</div>
|
||||
</div><!-- /row -->
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
@ -885,7 +1016,7 @@
|
||||
<h1>Forms</h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span-one-third">
|
||||
<div class="span4">
|
||||
<h3>Four types of forms</h3>
|
||||
<p>With 2.0, we now have four types of forms to choose from:</p>
|
||||
<ul>
|
||||
@ -895,15 +1026,15 @@
|
||||
<li>Vertical form for stacked labels and inputs</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="span-one-third">
|
||||
<div class="span4">
|
||||
<h3></h3>
|
||||
</div>
|
||||
</div><!-- /row -->
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<div class="span3">
|
||||
<h2>Search form</h2>
|
||||
</div>
|
||||
<div class="span12">
|
||||
<div class="span9">
|
||||
<div class="well">
|
||||
<form class="form-search">
|
||||
<input type="text" class="search-query">
|
||||
@ -913,10 +1044,10 @@
|
||||
</div>
|
||||
</div><!-- /row -->
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<div class="span3">
|
||||
<h2>Inline form</h2>
|
||||
</div>
|
||||
<div class="span12">
|
||||
<div class="span9">
|
||||
<div class="well">
|
||||
<form class="form-inline">
|
||||
<h4>Some directional text</h4>
|
||||
@ -930,10 +1061,10 @@
|
||||
</div>
|
||||
</div><!-- /row -->
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<div class="span3">
|
||||
<h2>Horizontal form</h2>
|
||||
</div>
|
||||
<div class="span12">
|
||||
<div class="span9">
|
||||
<form class="form-horizontal">
|
||||
<legend>Example form</legend>
|
||||
<fieldset class="control-group">
|
||||
@ -971,7 +1102,7 @@
|
||||
<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" />
|
||||
<input class="input-file" id="fileInput" name="fileInput" type="file">
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="control-group has-error">
|
||||
@ -983,7 +1114,7 @@
|
||||
<fieldset class="control-group has-error">
|
||||
<label class="control-label" for="textareaError">Textarea with error</label>
|
||||
<div class="controls">
|
||||
<textarea class="input-xxlarge" rows="3"></textarea>
|
||||
<textarea class="input-xlarge" rows="3"></textarea>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="control-group">
|
||||
@ -1015,11 +1146,11 @@
|
||||
<div class="controls">
|
||||
<div class="control-list">
|
||||
<label>
|
||||
<input type="radio" checked name="optionsRadios" value="option1" />
|
||||
<input type="radio" checked name="optionsRadios" value="option1">
|
||||
<span>Option one is this and that—be sure to include why it’s great</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="optionsRadios" value="option2" />
|
||||
<input type="radio" name="optionsRadios" value="option2">
|
||||
<span>Option two can is something else and selecting it will deselect options 1</span>
|
||||
</label>
|
||||
</div>
|
||||
@ -1034,10 +1165,10 @@
|
||||
</div>
|
||||
</div><!-- /row -->
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<div class="span3">
|
||||
<h2>Vertical form</h2>
|
||||
</div>
|
||||
<div class="span12">
|
||||
<div class="span9">
|
||||
<form class="form-vertical">
|
||||
<legend>Example form</legend>
|
||||
<fieldset class="control-group">
|
||||
@ -1078,12 +1209,12 @@
|
||||
</div><!-- /row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<div class="span3">
|
||||
<h2>Buttons</h2>
|
||||
<p>As a convention, buttons are used for actions while links are used for objects. For instance, "Download" could be a button and "recent activity" could be a link.</p>
|
||||
<p>All buttons default to a light gray style, but a number of functional classes can be applied for different color styles. These classes include a blue <code>.primary</code> class, a light-blue <code>.info</code> class, a green <code>.success</code> class, and a red <code>.danger</code> class.</p>
|
||||
</div>
|
||||
<div class="span12">
|
||||
<div class="span9">
|
||||
<h3>Example buttons</h3>
|
||||
<p>Button styles can be applied to anything with the <code>.btn</code> applied. Typically you’ll want to apply these to only <code><a></code>, <code><button></code>, and select <code><input></code> elements. Here’s how it looks:</p>
|
||||
<div class="well" style="padding: 14px 19px;">
|
||||
@ -1114,10 +1245,10 @@
|
||||
</div><!-- /row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<div class="span3">
|
||||
<h2>Button groups</h2>
|
||||
</div>
|
||||
<div class="span12">
|
||||
<div class="span9">
|
||||
<h3>Example</h3>
|
||||
<div class="well">
|
||||
<div class="btn-group">
|
||||
@ -1163,11 +1294,11 @@
|
||||
</div>
|
||||
<!-- Table structure -->
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<div class="span3">
|
||||
<h2>Media grid</h2>
|
||||
<p>Display thumbnails of varying sizes on pages with a low HTML footprint and minimal styles.</p>
|
||||
</div>
|
||||
<div class="span12">
|
||||
<div class="span9">
|
||||
<h3>Example thumbnails</h3>
|
||||
<p>Thumbnails in the <code>.media-grid</code> can be any size, but they work best when mapped directly to the built-in Bootstrap grid system. Image widths like 90, 210, and 330 combine with a few pixels of padding to equal the <code>.span2</code>, <code>.span4</code>, and <code>.span6</code> column sizes.</p>
|
||||
<h4>Large</h4>
|
||||
@ -1257,72 +1388,71 @@
|
||||
<div class="page-header">
|
||||
<h1>Navigation</h1>
|
||||
</div>
|
||||
<h2>Fixed topbar</h2>
|
||||
<div class="topbar-wrapper" style="z-index: 5;">
|
||||
<div class="topbar" data-dropdown="dropdown" >
|
||||
<div class="topbar-inner">
|
||||
<div class="container">
|
||||
<a class="brand" href="#">Project Name</a>
|
||||
<ul class="nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle">Dropdown</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Secondary link</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Another link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="pull-left" action="">
|
||||
<input type="text" placeholder="Search" />
|
||||
</form>
|
||||
<ul class="nav secondary-nav">
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle">Dropdown</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Secondary link</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Another link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- /topbar-inner -->
|
||||
</div><!-- /topbar -->
|
||||
</div><!-- /topbar-wrapper -->
|
||||
|
||||
<div class="row">
|
||||
<div class="span5">
|
||||
<h4>What is it</h4>
|
||||
<p>Our topbar is a fixed bar that houses a website’s logo or name, primary navigation, and search form.</p>
|
||||
</div>
|
||||
<div class="span5">
|
||||
<h4>Customizable</h4>
|
||||
<p>All elements within, and the entire topbar as well, are optional. You can choose to include a logo/name, nav, search, and a secondary nav—or any combination of that.</p>
|
||||
</div>
|
||||
<div class="span6">
|
||||
<h4>Dropdowns included</h4>
|
||||
<p>As part of the main navigation, we’ve included the ability for you to add dropdowns to your nav. Check out the secondary nav above (right aligned) to see how it’s done. Dropdowns <code>li</code> tags also support <code>.active</code> for showing current page selection.</p>
|
||||
</div>
|
||||
</div>
|
||||
<p><strong>Note:</strong> When using the topbar 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 />
|
||||
<h2>Fixed navbar</h2>
|
||||
<div class="navbar navbar-static" data-dropdown="dropdown">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="brand" href="#">Project Name</a>
|
||||
<ul class="nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle">Dropdown</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Secondary link</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Another link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-search navbar-search pull-left" action="">
|
||||
<input type="text" class="search-query span2" placeholder="Search">
|
||||
</form>
|
||||
<ul class="nav secondary-nav">
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle">Dropdown</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Secondary link</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Another link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- /navbar-inner -->
|
||||
</div><!-- /navbar -->
|
||||
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<h4>What is it</h4>
|
||||
<p>Our navbar is a fixed bar that houses a website’s logo or name, primary navigation, and search form.</p>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h4>Customizable</h4>
|
||||
<p>All elements within, and the entire navbar as well, are optional. You can choose to include a logo/name, nav, search, and a secondary nav—or any combination of that.</p>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h4>Dropdowns included</h4>
|
||||
<p>As part of the main navigation, we’ve included the ability for you to add dropdowns to your nav. Check out the secondary nav above (right aligned) to see how it’s done. Dropdowns <code><li></code> tags also support <code>.active</code> for showing current page selection.</p>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<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>
|
||||
<p><a class="btn js-btn" href="./javascript.html#tabs">Get the javascript »</a></p>
|
||||
</div>
|
||||
<div class="span12">
|
||||
<div class="span9">
|
||||
<h3>Basic tabs example</h3>
|
||||
<p>Tabs can be used as regular navigation (loading external pages in the same tab) or as tabbable content areas for swapping out panes of content. We have a <a href="./javascript.html#tabs">tabs plugin</a> that can be used to integrate the latter.</p>
|
||||
<ul class="tabs">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Profile</a></li>
|
||||
@ -1348,6 +1478,141 @@
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</pre>
|
||||
<h3>Alternate tabs</h3>
|
||||
<p>You can also use tabs that are stacked on either side of an element, or on the bottom.</p>
|
||||
<div class="row">
|
||||
<div class="span2">
|
||||
<div class="clearfix">
|
||||
<ul class="tabs tabs-left">
|
||||
<li class="active"><a href="#">Active link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Linky link</a></li>
|
||||
<li><a href="#">What up link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span2">
|
||||
<div class="clearfix">
|
||||
<ul class="tabs tabs-right">
|
||||
<li class="active"><a href="#">Active link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Linky link</a></li>
|
||||
<li><a href="#">What up link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span5">
|
||||
<div class="clearfix">
|
||||
<ul class="tabs tabs-bottom">
|
||||
<li class="active"><a href="#">Active link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Linky link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Tabbable tabs</h3>
|
||||
<p>As mentioned above, you can bring your tabs to life with a simple plugin. Here we have integrated all four variations of the tabs—default (top), right, bottom, left—with example tab areas.</p>
|
||||
|
||||
<div class="tabbable">
|
||||
<ul class="tabs" data-tabs="tabs">
|
||||
<li class="active"><a href="#1">Section 1</a></li>
|
||||
<li><a href="#2">Section 2</a></li>
|
||||
<li><a href="#3">Section 3</a></li>
|
||||
<li><a href="#4">Section 4</a></li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active" id="1">
|
||||
<p>Oh hai #1!</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="2">
|
||||
<p>Oh hai #2!</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="3">
|
||||
<p>Oh hai #3!</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="4">
|
||||
<p>Oh hai #4!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<div class="tabbable tabs-left">
|
||||
<ul class="tabs" data-tabs="tabs">
|
||||
<li class="active"><a href="#1">Section 1</a></li>
|
||||
<li><a href="#2">Section 2</a></li>
|
||||
<li><a href="#3">Section 3</a></li>
|
||||
</ul>
|
||||
<div class="tab-content" id="myTabContent2">
|
||||
<div class="tab-pane active" id="1">
|
||||
<h4>Section 1</h4>
|
||||
<p>Oh hai!</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="2">
|
||||
<h4>Section 2</h4>
|
||||
<p>Oh hai!</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="3">
|
||||
<h4>Section 3</h4>
|
||||
<p>Oh hai!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span5">
|
||||
<div class="tabbable tabs-right">
|
||||
<ul class="tabs" data-tabs="tabs">
|
||||
<li class="active"><a href="#1">Section 1</a></li>
|
||||
<li><a href="#2">Section 2</a></li>
|
||||
<li><a href="#3">Section 3</a></li>
|
||||
</ul>
|
||||
<div class="tab-content" id="myTabContent3">
|
||||
<div class="tab-pane active" id="1">
|
||||
<h4>Section 1</h4>
|
||||
<p>Oh hai!</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="2">
|
||||
<h4>Section 2</h4>
|
||||
<p>Oh hai!</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="3">
|
||||
<h4>Section 3</h4>
|
||||
<p>Oh hai!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tabbable tabs-bottom">
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active" id="1">
|
||||
<p>Oh hai #1!</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="2">
|
||||
<p>Oh hai #2!</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="3">
|
||||
<p>Oh hai #3!</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="4">
|
||||
<p>Oh hai #4!</p>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="tabs" data-tabs="tabs">
|
||||
<li class="active"><a href="#1">Section 1</a></li>
|
||||
<li><a href="#2">Section 2</a></li>
|
||||
<li><a href="#3">Section 3</a></li>
|
||||
<li><a href="#4">Section 4</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<p>In addition to tabs, we have pills! Though a bit more limited in functionality, they share much of the same markup.</p>
|
||||
<hr>
|
||||
<h3>Basic pills example</h3>
|
||||
<ul class="pills">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Profile</a></li>
|
||||
@ -1364,16 +1629,25 @@
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</pre>
|
||||
<h3>Vertical pill nav</h3>
|
||||
<p>With a pill-style nav, you can also stack the list items to have a simple sidebar. We don't offer left or right aligned versions here because that's easy enough to customize based on your own needs</p>
|
||||
<ul class="pills pills-vertical span4">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Profile</a></li>
|
||||
<li><a href="#">Messages</a></li>
|
||||
<li><a href="#">Settings</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- /row -->
|
||||
|
||||
<!-- Breadcrumbs -->
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<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="span12">
|
||||
<div class="span9">
|
||||
<ul class="breadcrumb">
|
||||
<li class="active">Home</li>
|
||||
</ul>
|
||||
@ -1405,11 +1679,11 @@
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<div class="span3">
|
||||
<h2>Pagination</h2>
|
||||
<p>Ultra simplistic and minimally styled pagination inspired by Rdio. The large block is hard to miss, easily scalable, and provides large click areas.</p>
|
||||
</div>
|
||||
<div class="span12">
|
||||
<div class="span9">
|
||||
<div class="pagination">
|
||||
<ul>
|
||||
<li class="prev disabled"><a href="#">← Previous</a></li>
|
||||
@ -1479,13 +1753,13 @@
|
||||
</div>
|
||||
<!-- Basic alert messages -->
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<div class="span3">
|
||||
<h2>Basic alerts</h2>
|
||||
<p><code>.alert-message</code></p>
|
||||
<p>One-line messages for highlighting the failure, possible failure, or success of an action. Particularly useful for forms.</p>
|
||||
<p><a class="btn js-btn" href="./javascript.html#alerts">Get the javascript »</a></p>
|
||||
</div>
|
||||
<div class="span12">
|
||||
<div class="span9">
|
||||
<div class="alert-message warning">
|
||||
<a class="close" href="#">×</a>
|
||||
<p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p>
|
||||
@ -1514,13 +1788,13 @@
|
||||
</div><!-- /row -->
|
||||
<!-- Block messages -->
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<div class="span3">
|
||||
<h2>Block messages</h2>
|
||||
<p><code>.alert-message.block-message</code></p>
|
||||
<p>For messages that require a bit of explanation, we have paragraph style alerts. These are perfect for bubbling up longer error messages, warning a user of a pending action, or just presenting information for more emphasis on the page.</p>
|
||||
<p><a class="btn js-btn" href="./javascript.html#alerts">Get the javascript »</a></p>
|
||||
</div>
|
||||
<div class="span12">
|
||||
<div class="span9">
|
||||
<div class="alert-message block-message warning">
|
||||
<a class="close" href="#">×</a>
|
||||
<p><strong>Holy guacamole! This is a warning!</strong> Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
|
||||
@ -1577,12 +1851,12 @@
|
||||
<h1>Popovers <small>Components for displaying content in modals, tooltips, and popovers</small></h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<div class="span3">
|
||||
<h2>Modals</h2>
|
||||
<p>Modals—dialogs or lightboxes—are great for contextual actions in situations where it’s important that the background context be maintained.</p>
|
||||
<p><a class="btn js-btn" href="./javascript.html#modal">Get the javascript »</a></p>
|
||||
</div>
|
||||
<div class="span12">
|
||||
<div class="span9">
|
||||
<div class="well" style="background-color: #888; border: none; padding: 40px;">
|
||||
<!-- Modal -->
|
||||
<div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1">
|
||||
@ -1604,12 +1878,12 @@
|
||||
|
||||
<!-- Tooltips -->
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<div class="span3">
|
||||
<h2>Tooltips</h2>
|
||||
<p>Twipsies are super useful for aiding a confused user and pointing them in the right direction.</p>
|
||||
<p><a class="btn js-btn" href="./javascript.html#twipsy">Get the javascript »</a></p>
|
||||
</div>
|
||||
<div class="span12">
|
||||
<div class="span9">
|
||||
<div class="twipsies well">
|
||||
<div style="position: relative">
|
||||
<p class="muted" style="margin-bottom: 0">
|
||||
@ -1622,12 +1896,12 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
|
||||
|
||||
<!-- Popovers -->
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<div class="span3">
|
||||
<h2>Popovers</h2>
|
||||
<p>Use popovers to provide subtextual information to a page without affecting layout.</p>
|
||||
<p><a class="btn js-btn" href="./javascript.html#popover">Get the javascript »</a></p>
|
||||
</div>
|
||||
<div class="span12">
|
||||
<div class="span9">
|
||||
<div class="well popover-well">
|
||||
<div class="popover-wrapper">
|
||||
<div class="popover left">
|
||||
@ -1655,12 +1929,12 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
|
||||
<h1>Using javascript with Bootstrap <small>An index of plugins to get you started</small></h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<div class="span3">
|
||||
<h2>Getting started</h2>
|
||||
<p>Integrating javascript with the Bootstrap library is super easy. Below we go over the basics and provide you with some awesome plugins to get you started!</p>
|
||||
<p><a class="btn primary" href="./javascript.html">View javascript docs »</a></p>
|
||||
</div>
|
||||
<div class="span12">
|
||||
<div class="span9">
|
||||
<h3>What's included</h3>
|
||||
<p>Bring some of Bootstrap's primary components to life with new custom plugins that work with <a href="http://jquery.com/" target="_blank">jQuery</a> and <a href="http://ender.no.de" target="_blank">Ender</a>. We encourage you to extend and modify them to fit your specific development needs.</p>
|
||||
<table class="zebra-striped">
|
||||
@ -1681,11 +1955,11 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="./javascript.html#dropdowns">bootstrap-dropdown.js</a></td>
|
||||
<td>This plugin is for adding dropdown interaction to the bootstrap topbar or tabbed navigations.</td>
|
||||
<td>This plugin is for adding dropdown interaction to the bootstrap navbar or tabbed navigations.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="./javascript.html#scrollspy">bootstrap-scrollspy.js</a></td>
|
||||
<td>The ScrollSpy plugin is for adding an auto updating nav based on scroll position to the bootstrap topbar.</td>
|
||||
<td>The ScrollSpy plugin is for adding an auto updating nav based on scroll position to the bootstrap navbar.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="./javascript.html#tabs">bootstrap-tabs.js</a></td>
|
||||
@ -1716,11 +1990,11 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
|
||||
<h1>Using Bootstrap with Less <small>Supercharge your CSS with variables, mixins, and functions</small></h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<div class="span3">
|
||||
<p>Bootstrap was built with <a href="http://markdotto.com/bootstrap/">Preboot</a>, an open-source pack of mixins and variables to be used in conjunction with <a href="http://lesscss.org" target="_blank">Less</a>, a CSS preprocessor for faster and easier web development.</p>
|
||||
<p>Check out how we used Preboot in Bootstrap and how you can make use of it should you choose to run Less on your next project.</p>
|
||||
</div>
|
||||
<div class="span12">
|
||||
<div class="span9">
|
||||
<h2>How to use it</h2>
|
||||
<p>Use this option to make full use of Bootstrap’s Less variables, mixins, and nesting in CSS via javascript in your browser.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
@ -1819,7 +2093,7 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
|
||||
}
|
||||
</pre>
|
||||
|
||||
<h2>Compiling Less</h2>
|
||||
<h2 id="compiling">Compiling Less</h2>
|
||||
<p>After modifying the <code>.less</code> files in /lib/, you'll need to recompile them in order to regenerate the bootstrap-*.*.*.css and bootstrap-*.*.*.min.css files. If you're submitting a pull request to GitHub, you must always recompile.</p>
|
||||
<h3>Ways to compile</h3>
|
||||
<table class="zebra-striped">
|
||||
@ -1871,17 +2145,27 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
|
||||
|
||||
</section>
|
||||
|
||||
</div><!-- /container -->
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<footer class="footer">
|
||||
<p class="pull-right"><a href="#">Back to top</a></p>
|
||||
<p>
|
||||
Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.<br />
|
||||
Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.<br>
|
||||
Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</footer>
|
||||
|
||||
</div><!-- /container -->
|
||||
|
||||
|
||||
<!-- Le javascript -->
|
||||
<script src="http://code.jquery.com/jquery-1.5.2.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-dropdown.js"></script>
|
||||
<script src="../js/bootstrap-twipsy.js"></script>
|
||||
<script src="../js/bootstrap-scrollspy.js"></script>
|
||||
<script src="assets/js/application.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -11,18 +11,6 @@
|
||||
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Le javascript -->
|
||||
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
|
||||
<script src="assets/js/google-code-prettify/prettify.js"></script>
|
||||
<script>$(function () { prettyPrint() })</script>
|
||||
<script src="../js/bootstrap-modal.js"></script>
|
||||
<script src="../js/bootstrap-alerts.js"></script>
|
||||
<script src="../js/bootstrap-twipsy.js"></script>
|
||||
<script src="../js/bootstrap-popover.js"></script>
|
||||
<script src="../js/bootstrap-dropdown.js"></script>
|
||||
<script src="../js/bootstrap-scrollspy.js"></script>
|
||||
<script src="../js/bootstrap-tabs.js"></script>
|
||||
|
||||
<!-- Le styles -->
|
||||
<link href="../bootstrap.css" rel="stylesheet">
|
||||
<link href="assets/css/docs.css" rel="stylesheet">
|
||||
@ -37,12 +25,12 @@
|
||||
|
||||
<body id="bootstrap-js">
|
||||
|
||||
<!-- Topbar
|
||||
<!-- Navbar
|
||||
================================================== -->
|
||||
<div class="topbar" data-scrollspy="scrollspy">
|
||||
<div class="topbar-inner">
|
||||
<div class="navbar navbar-fixed" data-scrollspy="scrollspy">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="brand" href="#">Bootstrap JS</a>
|
||||
<a class="brand" href="./index.html">Bootstrap</a>
|
||||
<ul class="nav">
|
||||
<li><a href="#overview">Overview</a></li>
|
||||
<li><a href="#modal">Modals</a></li>
|
||||
@ -57,21 +45,14 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<!-- Masthead (blueprinty thing)
|
||||
================================================== -->
|
||||
<header class="jumbotron subhead" id="overview">
|
||||
<div class="inner">
|
||||
<div class="container">
|
||||
<h1>Javascript for Bootstrap</h1>
|
||||
<p class="lead">
|
||||
Bring Bootstrap's components to life with new, custom plugins that work with <a href="http://jquery.com/" target="_blank">jQuery</a> and <a href="http://ender.no.de" target="_blank">Ender</a>.
|
||||
</p>
|
||||
<p><a href="./index.html">← Back to Bootstrap home</a></p>
|
||||
</div><!-- /container -->
|
||||
</div>
|
||||
<h1>Javascript for Bootstrap</h1>
|
||||
<p class="lead">Bring Bootstrap's components to life with custom plugins for <a href="http://jquery.com/" target="_blank">jQuery</a> and <a href="http://ender.no.de" target="_blank">Ender</a>.</p>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<!-- Modal
|
||||
================================================== -->
|
||||
@ -81,11 +62,11 @@
|
||||
<h1>Modals <small>bootstrap-modal.js</small></h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span4 columns">
|
||||
<div class="span3 columns">
|
||||
<p>Our Modal plugin is a super slim take on the traditional modal js plugin, taking special care to include only the bare functionality that we require here at twitter.</p>
|
||||
<a href="../js/bootstrap-modal.js" target="_blank" class="btn primary">Download</a>
|
||||
</div>
|
||||
<div class="span12 columns">
|
||||
<div class="span9 columns">
|
||||
<h3>Using bootstrap-modal</h3>
|
||||
<pre class="prettyprint linenums">$('#my-modal').modal(options)</pre>
|
||||
<h3>Options</h3>
|
||||
@ -207,13 +188,13 @@ $('#my-modal').bind('hidden', function () {
|
||||
<h1>Dropdown <small>bootstrap-dropdown.js</small></h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span4 columns">
|
||||
<p>This plugin is for adding dropdown interaction to the bootstrap topbar or tabbed navigations.</p>
|
||||
<div class="span3 columns">
|
||||
<p>This plugin is for adding dropdown interaction to the Bootstrap navbar or tabbed navigations.</p>
|
||||
<a href="../js/bootstrap-dropdown.js" target="_blank" class="btn primary">Download</a>
|
||||
</div>
|
||||
<div class="span12 columns">
|
||||
<div class="span9 columns">
|
||||
<h3>Using boostrap-dropdown.js</h3>
|
||||
<pre class="prettyprint linenums">$('#topbar').dropdown()</pre>
|
||||
<pre class="prettyprint linenums">$('#navbar').dropdown()</pre>
|
||||
<h3>Markup</h3>
|
||||
<p>To quickly add dropdown functionality to any nav element, use the <code>data-dropdown</code> attribute. Any valid bootstrap dropdown will automatically be activated.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
@ -232,42 +213,40 @@ $('#my-modal').bind('hidden', function () {
|
||||
<h3>Methods</h3>
|
||||
<h4>$().dropdown()</h4>
|
||||
<p>
|
||||
A programatic api for activating menus for a given topbar or tabbed navigation.
|
||||
A programatic api for activating menus for a given navbar or tabbed navigation.
|
||||
</p>
|
||||
<h3>Demo</h3>
|
||||
<div class="topbar-wrapper">
|
||||
<div id="topbar-example" class="topbar">
|
||||
<div class="topbar-inner">
|
||||
<div class="container">
|
||||
<a class="brand" href="#">Project Name</a>
|
||||
<ul class="nav">
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
</ul>
|
||||
<form action="">
|
||||
<input type="text" placeholder="Search" />
|
||||
</form>
|
||||
<ul class="nav secondary-nav">
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-dropdown="true">Dropdown 1</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Secondary link</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Another link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-dropdown="true">Dropdown 2</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Secondary link</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Another link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="navbar-example" class="navbar navbar-static">
|
||||
<div class="navbar-inner">
|
||||
<div class="container" style="width: auto;">
|
||||
<a class="brand" href="#">Project Name</a>
|
||||
<ul class="nav">
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
</ul>
|
||||
<form class="form-search navbar-search pull-left" action="">
|
||||
<input type="text" class="search-query span2" placeholder="Search">
|
||||
</form>
|
||||
<ul class="nav secondary-nav">
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-dropdown="true">Dropdown 1</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Secondary link</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Another link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-dropdown="true">Dropdown 2</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Secondary link</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Another link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -283,29 +262,29 @@ $('#my-modal').bind('hidden', function () {
|
||||
<h1>ScrollSpy <small>bootstrap-scrollspy.js</small></h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span4 columns">
|
||||
<p>This plugin is for adding the scrollspy (auto updating nav) interaction to the bootstrap topbar.</p>
|
||||
<div class="span3 columns">
|
||||
<p>This plugin is for adding the scrollspy (auto updating nav) interaction to the bootstrap navbar.</p>
|
||||
<a href="../js/bootstrap-scrollspy.js" target="_blank" class="btn primary">Download</a>
|
||||
</div>
|
||||
<div class="span12 columns">
|
||||
<div class="span9 columns">
|
||||
<h2>Using boostrap-scrollspy.js</h2>
|
||||
<pre class="prettyprint linenums">$('#topbar').dropdown()</pre>
|
||||
<pre class="prettyprint linenums">$('#navbar').dropdown()</pre>
|
||||
<h3>Markup</h3>
|
||||
<p>To easily add scrollspy behavior to your nav, just add the <code>data-scrollspy</code> attribute to the <code>.topbar</code>.
|
||||
<pre class="prettyprint linenums"><div class="topbar" data-scrollspy="scrollspy" >...</div></pre>
|
||||
<p>To easily add scrollspy behavior to your nav, just add the <code>data-scrollspy</code> attribute to the <code>.navbar</code>.
|
||||
<pre class="prettyprint linenums"><div class="navbar" data-scrollspy="scrollspy" >...</div></pre>
|
||||
<h3>Methods</h3>
|
||||
<h4>$().scrollspy()</h4>
|
||||
<p>
|
||||
Auto activates navigation buttons by users scroll position.
|
||||
</p>
|
||||
<pre class="prettyprint linenums">$('body > .topbar').scrollSpy()</pre>
|
||||
<p><span class="label notice">Notice</span> Topbar anchor tags must have resolvable id targets. For example, a <code><a href="#home">home</a></code> must correspond to something in the dom like <code><div id="home"></div></code>.
|
||||
<pre class="prettyprint linenums">$('body > .navbar').scrollSpy()</pre>
|
||||
<p><span class="label notice">Notice</span> Navbar anchor tags must have resolvable id targets. For example, a <code><a href="#home">home</a></code> must correspond to something in the dom like <code><div id="home"></div></code>.
|
||||
</p>
|
||||
<h4>.scrollspy('refresh')</h4>
|
||||
<p>The scrollspy caches nav buttons and section coordinates for performance. If you need to update this cache (likely if you have dynamic content) just call this refresh method. If you used the data attribute to define your scrollspy, just call refresh on the body.</p>
|
||||
<pre class="prettyprint linenums">$('body').scrollspy('refresh')</pre>
|
||||
<h3>Demo</h3>
|
||||
<p>Checkout the the topbar navigation on this page.</p>
|
||||
<p>Checkout the the navbar navigation on this page.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -318,11 +297,11 @@ $('#my-modal').bind('hidden', function () {
|
||||
<h1>Tabs <small>bootstrap-tabs.js</small></h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span4 columns">
|
||||
<div class="span3 columns">
|
||||
<p>This plugin adds quick, dynamic tab and pill functionality.</p>
|
||||
<a href="../js/bootstrap-tabs.js" target="_blank" class="btn primary">Download</a>
|
||||
</div>
|
||||
<div class="span12 columns">
|
||||
<div class="span9 columns">
|
||||
<h3>Using boostrap-tabs.js</h3>
|
||||
<pre class="prettyprint linenums">$('.tabs').tabs()</pre>
|
||||
<h3>Markup</h3>
|
||||
@ -355,24 +334,26 @@ $('#my-modal').bind('hidden', function () {
|
||||
</script></pre>
|
||||
</p>
|
||||
<h3>Demo</h3>
|
||||
<ul class="tabs" data-tabs="tabs" >
|
||||
<li class="active"><a href="#home">Home</a></li>
|
||||
<li><a href="#profile">Profile</a></li>
|
||||
<li><a href="#messages">Messages</a></li>
|
||||
<li><a href="#settings">Settings</a></li>
|
||||
</ul>
|
||||
<div id="my-tab-content" class="tab-content">
|
||||
<div class="active" id="home">
|
||||
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
|
||||
</div>
|
||||
<div id="profile">
|
||||
<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
|
||||
</div>
|
||||
<div id="messages">
|
||||
<p>Banksy do proident, brooklyn photo booth delectus sunt artisan sed organic exercitation eiusmod four loko. Quis tattooed iphone esse aliqua. Master cleanse vero fixie mcsweeney's. Ethical portland aute, irony food truck pitchfork lomo eu anim. Aesthetic blog DIY, ethical beard leggings tofu consequat whatever cardigan nostrud. Helvetica you probably haven't heard of them carles, marfa veniam occaecat lomo before they sold out in shoreditch scenester sustainable thundercats. Consectetur tofu craft beer, mollit brunch fap echo park pitchfork mustache dolor.</p>
|
||||
</div>
|
||||
<div id="settings">
|
||||
<p>Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seitan squid ad wolf bicycle rights blog. Et aute readymade farm-to-table carles 8-bit, nesciunt nulla etsy adipisicing organic ea. Master cleanse mollit high life, next level Austin nesciunt american apparel twee mustache adipisicing reprehenderit hoodie portland irony. Aliqua tofu quinoa +1 commodo eiusmod. High life williamsburg cupidatat twee homo leggings. Four loko vinyl DIY consectetur nisi, marfa retro keffiyeh vegan. Fanny pack viral retro consectetur gentrify fap.</p>
|
||||
<div class="tabbable">
|
||||
<ul class="tabs" data-tabs="tabs">
|
||||
<li class="active"><a href="#home">Home</a></li>
|
||||
<li><a href="#profile">Profile</a></li>
|
||||
<li><a href="#messages">Messages</a></li>
|
||||
<li><a href="#settings">Settings</a></li>
|
||||
</ul>
|
||||
<div class="tab-content" id="myTabContent">
|
||||
<div class="tab-pane active" id="home">
|
||||
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="profile">
|
||||
<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="messages">
|
||||
<p>Banksy do proident, brooklyn photo booth delectus sunt artisan sed organic exercitation eiusmod four loko. Quis tattooed iphone esse aliqua. Master cleanse vero fixie mcsweeney's. Ethical portland aute, irony food truck pitchfork lomo eu anim. Aesthetic blog DIY, ethical beard leggings tofu consequat whatever cardigan nostrud. Helvetica you probably haven't heard of them carles, marfa veniam occaecat lomo before they sold out in shoreditch scenester sustainable thundercats. Consectetur tofu craft beer, mollit brunch fap echo park pitchfork mustache dolor.</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="settings">
|
||||
<p>Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seitan squid ad wolf bicycle rights blog. Et aute readymade farm-to-table carles 8-bit, nesciunt nulla etsy adipisicing organic ea. Master cleanse mollit high life, next level Austin nesciunt american apparel twee mustache adipisicing reprehenderit hoodie portland irony. Aliqua tofu quinoa +1 commodo eiusmod. High life williamsburg cupidatat twee homo leggings. Four loko vinyl DIY consectetur nisi, marfa retro keffiyeh vegan. Fanny pack viral retro consectetur gentrify fap.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -387,11 +368,11 @@ $('#my-modal').bind('hidden', function () {
|
||||
<h1>Twipsy <small>bootstrap-twipsy.js</small></h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span4 columns">
|
||||
<div class="span3 columns">
|
||||
<p>Based on the excellent jQuery.tipsy plugin written by Jason Frame; twipsy is an updated version, which doesn't rely on images, uses css3 for animations, and data-attributes for title storage!</p>
|
||||
<a href="../js/bootstrap-twipsy.js" target="_blank" class="btn primary">Download</a>
|
||||
</div>
|
||||
<div class="span12 columns">
|
||||
<div class="span9 columns">
|
||||
<h3>Using bootstrap-twipsy.js</h3>
|
||||
<pre class="prettyprint linenums">$('#example').twipsy(options)</pre>
|
||||
<h3>Options</h3>
|
||||
@ -504,11 +485,11 @@ $('#my-modal').bind('hidden', function () {
|
||||
<h1>Popovers <small>bootstrap-popover.js</small></h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span4 columns">
|
||||
<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>
|
||||
<a href="../js/bootstrap-popover.js" target="_blank" class="btn primary">Download</a>
|
||||
</div>
|
||||
<div class="span12 columns">
|
||||
<div class="span9 columns">
|
||||
<h3>Using boostrap-popover.js</h3>
|
||||
<pre class="prettyprint linenums">$('#example').popover(options)</pre>
|
||||
<h3>Options</h3>
|
||||
@ -625,11 +606,11 @@ $('#my-modal').bind('hidden', function () {
|
||||
<h1>Alerts <small>bootstrap-alerts.js</small></h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span4 columns">
|
||||
<div class="span3 columns">
|
||||
<p>The alert plugin is a super tiny class for adding close functionality to alerts.</p>
|
||||
<a href="../js/bootstrap-alerts.js" target="_blank" class="btn primary">Download</a>
|
||||
</div>
|
||||
<div class="span12 columns">
|
||||
<div class="span9 columns">
|
||||
<h3>Using bootstrap-alerts.js</h3>
|
||||
<pre class="prettyprint linenums">$(".alert-message").alert()</pre>
|
||||
<h3>Markup</h3>
|
||||
@ -657,17 +638,28 @@ $('#my-modal').bind('hidden', function () {
|
||||
</section>
|
||||
|
||||
|
||||
</div><!-- /container -->
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<footer class="footer">
|
||||
<p class="pull-right"><a href="#">Back to top</a></p>
|
||||
<p>
|
||||
Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.<br />
|
||||
Licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</footer>
|
||||
|
||||
</div><!-- /container -->
|
||||
|
||||
|
||||
<!-- Le javascript -->
|
||||
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
|
||||
<script src="assets/js/google-code-prettify/prettify.js"></script>
|
||||
<script>$(function () { prettyPrint() })</script>
|
||||
<script src="../js/bootstrap-modal.js"></script>
|
||||
<script src="../js/bootstrap-alerts.js"></script>
|
||||
<script src="../js/bootstrap-twipsy.js"></script>
|
||||
<script src="../js/bootstrap-popover.js"></script>
|
||||
<script src="../js/bootstrap-dropdown.js"></script>
|
||||
<script src="../js/bootstrap-scrollspy.js"></script>
|
||||
<script src="../js/bootstrap-tabs.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -75,8 +75,8 @@
|
||||
|
||||
<body>
|
||||
|
||||
<div class="topbar">
|
||||
<div class="fill">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="brand" href="#">Project name</a>
|
||||
<ul class="nav">
|
||||
@ -84,7 +84,7 @@
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
</ul>
|
||||
<form action="" class="pull-right">
|
||||
<form action="" class="form-search navbar-form pull-right">
|
||||
<input class="input-small" type="text" placeholder="Username">
|
||||
<input class="input-small" type="password" placeholder="Password">
|
||||
<button class="btn" type="submit">Sign in</button>
|
||||
|
||||
126
examples/fluid-reverse.html
Normal file
126
examples/fluid-reverse.html
Normal file
@ -0,0 +1,126 @@
|
||||
<!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.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="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="fluid-container">
|
||||
<a class="brand" href="#">Project name</a>
|
||||
<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="fluid-container reverse">
|
||||
<div class="fluid-sidebar-right">
|
||||
<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="fluid-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>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- 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>
|
||||
@ -28,9 +28,9 @@
|
||||
|
||||
<body>
|
||||
|
||||
<div class="topbar">
|
||||
<div class="topbar-inner">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="fluid-container">
|
||||
<a class="brand" href="#">Project name</a>
|
||||
<ul class="nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
@ -42,8 +42,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="sidebar">
|
||||
<div class="fluid-container">
|
||||
<div class="fluid-sidebar-left">
|
||||
<div class="well">
|
||||
<h5>Sidebar</h5>
|
||||
<ul>
|
||||
@ -68,7 +68,7 @@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="fluid-content">
|
||||
<!-- Main hero unit for a primary marketing message or call to action -->
|
||||
<div class="hero-unit">
|
||||
<h1>Hello, world!</h1>
|
||||
|
||||
@ -28,8 +28,8 @@
|
||||
|
||||
<body>
|
||||
|
||||
<div class="topbar">
|
||||
<div class="fill">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="brand" href="#">Project name</a>
|
||||
<ul class="nav">
|
||||
|
||||
5
lib/bootstrap.less
vendored
5
lib/bootstrap.less
vendored
@ -23,4 +23,7 @@
|
||||
@import "type.less";
|
||||
@import "forms.less";
|
||||
@import "tables.less";
|
||||
@import "patterns.less";
|
||||
@import "patterns.less";
|
||||
|
||||
// Responsive
|
||||
@import "responsive.less";
|
||||
@ -37,12 +37,6 @@ label {
|
||||
color: @grayDark;
|
||||
}
|
||||
|
||||
// Checkboxs and radio buttons
|
||||
input[type=checkbox],
|
||||
input[type=radio] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Inputs, Textareas, Selects
|
||||
input,
|
||||
textarea,
|
||||
@ -69,11 +63,13 @@ input[type=radio] {
|
||||
*margin-top: 0; /* IE6-7 */
|
||||
line-height: normal;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Reset the file input to browser defaults
|
||||
input[type=file] {
|
||||
background-color: @white;
|
||||
background-color: initial;
|
||||
padding: initial;
|
||||
border: initial;
|
||||
line-height: initial;
|
||||
@ -323,11 +319,11 @@ textarea[readonly] {
|
||||
display: block;
|
||||
width: auto;
|
||||
min-width: 16px;
|
||||
height: 18px;
|
||||
height: @baseLineHeight;
|
||||
padding: 4px 4px 4px 5px;
|
||||
margin-right: -1px;
|
||||
font-weight: normal;
|
||||
line-height: 18px;
|
||||
line-height: @baseLineHeight;
|
||||
color: @grayLight;
|
||||
text-align: center;
|
||||
text-shadow: 0 1px 0 @white;
|
||||
|
||||
@ -71,20 +71,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Font face generator
|
||||
.font-face(@fontFamily, @fileName, @style, @weight) {
|
||||
@font-face {
|
||||
font-family: @fontFamily;
|
||||
font-style: @style;
|
||||
font-weight: @weight;
|
||||
src: url('@{fileName}.eot');
|
||||
src: url('@{fileName}.eot?#iefix') format('embedded-opentype'),
|
||||
url('@{fileName}.woff') format('woff'),
|
||||
url('@{fileName}.ttf') format('truetype'),
|
||||
url('@{fileName}.svg#@{fontFamily}') format('svg');
|
||||
}
|
||||
}
|
||||
|
||||
// Grid System
|
||||
.fixed-container() {
|
||||
width: @siteWidth;
|
||||
@ -92,12 +78,13 @@
|
||||
margin-right: auto;
|
||||
.clearfix();
|
||||
}
|
||||
.columns(@columnSpan: 1) {
|
||||
width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
|
||||
.columns(@columns: 1) {
|
||||
width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
|
||||
}
|
||||
.offset(@columnOffset: 1) {
|
||||
margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @extraSpace;
|
||||
.offset(@columns: 1) {
|
||||
margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
|
||||
}
|
||||
|
||||
// Necessary grid styles for every column to make them appear next to each other horizontally
|
||||
.gridColumn() {
|
||||
display: inline;
|
||||
|
||||
@ -3,34 +3,41 @@
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// TOPBAR
|
||||
// ------
|
||||
// NAVBAR (FIXED AND STATIC)
|
||||
// -------------------------
|
||||
|
||||
// Topbar for Branding and Nav
|
||||
.topbar {
|
||||
height: 40px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10000;
|
||||
// Navbar variables
|
||||
@navBarHeight: 40px;
|
||||
@navBarBgStart: #333;
|
||||
@navBarBgEnd: #222;
|
||||
|
||||
// Common styles
|
||||
.navbar {
|
||||
height: @navBarHeight;
|
||||
overflow: visible;
|
||||
|
||||
// Links get text shadow
|
||||
}
|
||||
// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
|
||||
.navbar-inner {
|
||||
background-color: @navBarBgEnd;
|
||||
#gradient > .vertical(@navBarBgStart, @navBarBgEnd);
|
||||
@shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
|
||||
.box-shadow(@shadow);
|
||||
}
|
||||
// Text and links
|
||||
.navbar {
|
||||
// Links get text-shadow
|
||||
a {
|
||||
color: @grayLight;
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
||||
}
|
||||
|
||||
// Hover and active states
|
||||
.brand a:hover,
|
||||
ul .active > a {
|
||||
background-color: #333;
|
||||
background-color: @navBarBgStart;
|
||||
background-color: rgba(255,255,255,.05);
|
||||
color: @white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// Website or project name
|
||||
.brand {
|
||||
float: left;
|
||||
@ -42,7 +49,6 @@
|
||||
font-weight: 200;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
// Plain text in topbar
|
||||
p {
|
||||
margin: 0;
|
||||
@ -52,19 +58,15 @@
|
||||
color: @white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Search Form
|
||||
form {
|
||||
float: left;
|
||||
margin: 5px 0 0 0;
|
||||
position: relative;
|
||||
.opacity(100);
|
||||
}
|
||||
// Todo: remove from v2.0 when ready, added for legacy
|
||||
form.pull-right {
|
||||
float: right;
|
||||
}
|
||||
input {
|
||||
// Navbar search
|
||||
.navbar-search {
|
||||
position: relative;
|
||||
margin-top: 6px;
|
||||
margin-bottom: 0;
|
||||
float: left;
|
||||
.search-query {
|
||||
background-color: #444;
|
||||
background-color: rgba(255,255,255,.3);
|
||||
#font > .sans-serif(13px, normal, 1);
|
||||
@ -72,8 +74,7 @@
|
||||
color: @white;
|
||||
color: rgba(255,255,255,.75);
|
||||
border: 1px solid #111;
|
||||
.border-radius(4px);
|
||||
@shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25);
|
||||
@shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15);
|
||||
.box-shadow(@shadow);
|
||||
.transition(none);
|
||||
|
||||
@ -104,19 +105,32 @@
|
||||
}
|
||||
}
|
||||
|
||||
// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
|
||||
.topbar-inner {
|
||||
background-color: #222;
|
||||
#gradient > .vertical(#333, #222);
|
||||
@shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
|
||||
.box-shadow(@shadow);
|
||||
|
||||
// Static navbar
|
||||
.navbar-static {
|
||||
margin-bottom: @baseLineHeight;
|
||||
}
|
||||
.navbar-static .navbar-inner {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
.border-radius(4px);
|
||||
}
|
||||
|
||||
// Fixed navbar
|
||||
.navbar-fixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// NAVIGATION
|
||||
// ----------
|
||||
|
||||
// Topbar Nav
|
||||
// Nav for navbar and topbar
|
||||
// ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity
|
||||
.nav {
|
||||
display: block;
|
||||
@ -302,14 +316,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Basic Tabs
|
||||
// Tabs
|
||||
.tabs {
|
||||
float: left;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #ddd;
|
||||
border-color: #ddd;
|
||||
border-style: solid;
|
||||
border-width: 0 0 1px;
|
||||
> li {
|
||||
position: relative; // For the dropdowns mostly
|
||||
top: 1px;
|
||||
margin-bottom: -1px;
|
||||
> a {
|
||||
padding: 0 15px;
|
||||
margin-right: 2px;
|
||||
@ -322,61 +336,129 @@
|
||||
border-color: #eee #eee #ddd;
|
||||
}
|
||||
}
|
||||
&.active > a {
|
||||
color: @gray;
|
||||
background-color: @white;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
// Active state, and it's :hover to override normal :hover
|
||||
.active > a,
|
||||
.active > a:hover {
|
||||
color: @gray;
|
||||
background-color: @white;
|
||||
border: 1px solid #ddd;
|
||||
border-bottom-color: transparent;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
.tabbable {
|
||||
margin-bottom: @baseLineHeight;
|
||||
|
||||
// Tabs on top
|
||||
.tabs {
|
||||
margin-bottom: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
.tab-content {
|
||||
padding: 19px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
// Tabs on bottom
|
||||
&.tabs-bottom .tabs > li {
|
||||
margin-top: -1px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&.tabs-bottom .tabs > li > a {
|
||||
.border-radius(0 0 4px 4px);
|
||||
&:hover {
|
||||
border-bottom-color: transparent;
|
||||
border-top-color: #ddd;
|
||||
}
|
||||
}
|
||||
&.tabs-bottom .tabs > .active > a,
|
||||
&.tabs-bottom .tabs > .active > a:hover {
|
||||
border-color: transparent #ddd #ddd #ddd;
|
||||
}
|
||||
|
||||
// Tabs on left
|
||||
&.tabs-left .tabs {
|
||||
float: left;
|
||||
}
|
||||
&.tabs-left .tabs > li {
|
||||
float: none;
|
||||
}
|
||||
|
||||
// Tabs on right
|
||||
&.tabs-right .tabs {
|
||||
float: right;
|
||||
}
|
||||
&.tabs-right .tabs > li {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Dropdowns in tabs
|
||||
.tabs {
|
||||
// first one for backwards compatibility
|
||||
.menu-dropdown,
|
||||
.dropdown-menu {
|
||||
top: 35px;
|
||||
border-width: 1px;
|
||||
.border-radius(0 6px 6px 6px);
|
||||
}
|
||||
// first one for backwards compatibility
|
||||
a.menu:after,
|
||||
.dropdown-toggle:after {
|
||||
border-top-color: #999;
|
||||
margin-top: 15px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
// first one for backwards compatibility
|
||||
li.open.menu .menu,
|
||||
.open.dropdown .dropdown-toggle {
|
||||
border-color: #999;
|
||||
}
|
||||
// first one for backwards compatibility
|
||||
li.open a.menu:after,
|
||||
.dropdown.open .dropdown-toggle:after {
|
||||
border-top-color: #555;
|
||||
}
|
||||
}
|
||||
.tab-content {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
// Basic pill nav
|
||||
// Pills
|
||||
.pills {
|
||||
a {
|
||||
margin: 5px 3px 5px 0;
|
||||
padding: 0 15px;
|
||||
text-shadow: 0 1px 1px @white;
|
||||
line-height: 30px;
|
||||
text-shadow: 0 1px 1px @white;
|
||||
.border-radius(15px);
|
||||
&:hover {
|
||||
background: @linkColorHover;
|
||||
color: @white;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 1px 1px rgba(0,0,0,.25);
|
||||
background-color: @linkColorHover;
|
||||
}
|
||||
}
|
||||
.active a {
|
||||
background: @linkColor;
|
||||
color: @white;
|
||||
text-shadow: 0 1px 1px rgba(0,0,0,.25);
|
||||
background-color: @linkColor;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content > *,
|
||||
.pill-content > * {
|
||||
display: none;
|
||||
// Stacked pills
|
||||
.pills-vertical > li {
|
||||
float: none;
|
||||
}
|
||||
|
||||
// Tabbable areas
|
||||
.tab-content,
|
||||
.pill-content {
|
||||
}
|
||||
.tab-content > .tab-pane,
|
||||
.pill-content > .pill-pane {
|
||||
display: none;
|
||||
}
|
||||
.tab-content > .active,
|
||||
.pill-content > .active {
|
||||
display: block;
|
||||
@ -438,11 +520,11 @@ footer {
|
||||
// ------------
|
||||
|
||||
.page-header {
|
||||
margin-bottom: @baseLineHeight - 1;
|
||||
border-bottom: 1px solid #ddd;
|
||||
margin-bottom: @baseLineHeight * 1.5;
|
||||
border-bottom: 1px solid #eee;
|
||||
.box-shadow(0 1px 0 rgba(255,255,255,.5));
|
||||
h1 {
|
||||
margin-bottom: (@baseLineHeight / 2) - 1px;
|
||||
margin-bottom: @baseLineHeight * .75;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
180
lib/responsive.less
Normal file
180
lib/responsive.less
Normal file
@ -0,0 +1,180 @@
|
||||
/* Responsive.less
|
||||
* For phone and tablet devices
|
||||
* ------------------------------------------------------------- */
|
||||
|
||||
|
||||
// UP TO LANDSCAPE PHONE
|
||||
// ---------------------
|
||||
|
||||
@media (max-width: 480px) {
|
||||
// Remove width from containers
|
||||
.container {
|
||||
width: auto;
|
||||
padding: 0 10px;
|
||||
}
|
||||
// Make all columns even
|
||||
[class*="span"] {
|
||||
float: none;
|
||||
display: block;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
// Resize modals
|
||||
.modal {
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// Remove the horizontal form styles
|
||||
.form-horizontal .control-group > label {
|
||||
float: none;
|
||||
width: auto;
|
||||
padding-top: 0;
|
||||
text-align: left;
|
||||
}
|
||||
// Move over all input controls and content
|
||||
.form-horizontal .controls {
|
||||
margin-left: 0;
|
||||
}
|
||||
// Move the options list down to align with labels
|
||||
.form-horizontal .control-list {
|
||||
padding-top: 0; // has to be padding because margin collaspes
|
||||
}
|
||||
// Move over buttons in .form-actions to align with .controls
|
||||
.form-horizontal .form-actions {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET
|
||||
// --------------------------------------------------
|
||||
|
||||
@media (min-width: 480px) and (max-width: 768px) {
|
||||
// Remove width from containers
|
||||
.container {
|
||||
width: auto;
|
||||
padding: 0 10px;
|
||||
}
|
||||
// Make all columns even
|
||||
[class*="span"] {
|
||||
float: none;
|
||||
display: block;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// PORTRAIT TABLET TO DEFAULT DESKTOP
|
||||
// ----------------------------------
|
||||
|
||||
@media (min-width: 768px) and (max-width: 940px) {
|
||||
|
||||
// Reset grid variables
|
||||
@gridColumns: 16;
|
||||
@gridColumnWidth: 44px;
|
||||
@gridGutterWidth: 20px;
|
||||
@siteWidth: 748px;
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
// 16cols at 30px wide with 16px gutters
|
||||
.container {
|
||||
width: @siteWidth;
|
||||
}
|
||||
|
||||
// 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); }
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
// LARGE DESKTOP & UP
|
||||
// ------------------
|
||||
|
||||
@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;
|
||||
}
|
||||
[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); }
|
||||
|
||||
}
|
||||
*/
|
||||
@ -24,20 +24,28 @@ body {
|
||||
}
|
||||
|
||||
// Fluid layouts (left aligned, with sidebar, min- & max-width content)
|
||||
.container-fluid {
|
||||
.fluid-container {
|
||||
position: relative;
|
||||
min-width: 940px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
.clearfix();
|
||||
> .sidebar {
|
||||
float: left;
|
||||
width: 220px;
|
||||
}
|
||||
// TODO in v2: rename this and .popover .content to be more specific
|
||||
> .content {
|
||||
margin-left: 240px;
|
||||
}
|
||||
}
|
||||
// Sidebars (left and right options)
|
||||
.fluid-sidebar-left,
|
||||
.fluid-sidebar-right {
|
||||
width: 220px;
|
||||
}
|
||||
.fluid-sidebar-left { float: left; }
|
||||
.fluid-sidebar-right { float: right; }
|
||||
// The main content area
|
||||
.fluid-content {
|
||||
margin-left: 240px;
|
||||
}
|
||||
// Reverse layout for sidebar on right
|
||||
.fluid-container.reverse .fluid-content {
|
||||
margin-left: 0;
|
||||
margin-right: 240px;
|
||||
}
|
||||
|
||||
|
||||
@ -76,10 +84,9 @@ a {
|
||||
// GRID SYSTEM
|
||||
// -----------
|
||||
// To customize the grid system, bring up the variables.less file and change the column count, size, and gutter there
|
||||
|
||||
.row {
|
||||
margin-left: -@gridGutterWidth;
|
||||
.clearfix();
|
||||
margin-left: -1 * @gridGutterWidth;
|
||||
}
|
||||
|
||||
// Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7)
|
||||
@ -101,20 +108,6 @@ a {
|
||||
.span10 { .columns(10); }
|
||||
.span11 { .columns(11); }
|
||||
.span12 { .columns(12); }
|
||||
.span13 { .columns(13); }
|
||||
.span14 { .columns(14); }
|
||||
.span15 { .columns(15); }
|
||||
.span16 { .columns(16); }
|
||||
|
||||
// For optional 24-column grid
|
||||
.span17 { .columns(17); }
|
||||
.span18 { .columns(18); }
|
||||
.span19 { .columns(19); }
|
||||
.span20 { .columns(20); }
|
||||
.span21 { .columns(21); }
|
||||
.span22 { .columns(22); }
|
||||
.span23 { .columns(23); }
|
||||
.span24 { .columns(24); }
|
||||
|
||||
// Offset column options
|
||||
.offset1 { .offset(1); }
|
||||
@ -128,10 +121,3 @@ a {
|
||||
.offset9 { .offset(9); }
|
||||
.offset10 { .offset(10); }
|
||||
.offset11 { .offset(11); }
|
||||
.offset12 { .offset(12); }
|
||||
|
||||
// Unique column sizes for 16-column grid
|
||||
.span-one-third { width: 300px; }
|
||||
.span-two-thirds { width: 620px; }
|
||||
.offset-one-third { margin-left: 340px; }
|
||||
.offset-two-thirds { margin-left: 660px; }
|
||||
|
||||
@ -24,12 +24,12 @@ p {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: bold;
|
||||
color: @grayDark;
|
||||
text-rendering: optimizelegibility;
|
||||
small {
|
||||
color: @grayLight;
|
||||
}
|
||||
}
|
||||
h1 {
|
||||
margin-bottom: @baseLineHeight;
|
||||
font-size: 30px;
|
||||
line-height: @baseLineHeight * 2;
|
||||
small {
|
||||
@ -40,11 +40,11 @@ h2 {
|
||||
font-size: 24px;
|
||||
line-height: @baseLineHeight * 2;
|
||||
small {
|
||||
font-size: 14px;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
h3 {
|
||||
line-height: @baseLineHeight * 2;
|
||||
line-height: @baseLineHeight * 1.5;
|
||||
font-size: 18px;
|
||||
small {
|
||||
font-size: 14px;
|
||||
@ -74,7 +74,7 @@ h6 {
|
||||
|
||||
// Unordered and Ordered lists
|
||||
ul, ol {
|
||||
margin: 0 0 @baseLineHeight 25px;
|
||||
margin: 0 0 @baseLineHeight / 2 25px;
|
||||
}
|
||||
ul ul,
|
||||
ul ol,
|
||||
@ -90,7 +90,7 @@ ol {
|
||||
}
|
||||
li {
|
||||
line-height: @baseLineHeight;
|
||||
color: @gray;
|
||||
color: @grayDark;
|
||||
}
|
||||
ul.unstyled {
|
||||
list-style: none;
|
||||
@ -135,6 +135,14 @@ em {
|
||||
color: @grayLight;
|
||||
}
|
||||
|
||||
// Abbreviations and acronyms
|
||||
abbr {
|
||||
font-size: 90%;
|
||||
text-transform: uppercase;
|
||||
border-bottom: 1px dotted #ddd;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
// Blockquotes
|
||||
blockquote {
|
||||
margin-bottom: @baseLineHeight;
|
||||
|
||||
@ -38,29 +38,12 @@
|
||||
// ----
|
||||
|
||||
// Modify the grid styles in mixins.less
|
||||
@gridColumns: 16;
|
||||
@gridColumnWidth: 40px;
|
||||
@gridColumns: 12;
|
||||
@gridColumnWidth: 60px;
|
||||
@gridGutterWidth: 20px;
|
||||
@extraSpace: (@gridGutterWidth * 2); // For our grid calculations
|
||||
@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
|
||||
|
||||
|
||||
// COLOR SCHEME
|
||||
// ------------
|
||||
|
||||
// Use this to roll your own color schemes if you like (unused by Bootstrap by default)
|
||||
@baseColor: @blue; // Set a base color
|
||||
@complement: spin(@baseColor, 180); // Determine a complementary color
|
||||
@split1: spin(@baseColor, 158); // Split complements
|
||||
@split2: spin(@baseColor, -158);
|
||||
@triad1: spin(@baseColor, 135); // Triads colors
|
||||
@triad2: spin(@baseColor, -135);
|
||||
@tetra1: spin(@baseColor, 90); // Tetra colors
|
||||
@tetra2: spin(@baseColor, -90);
|
||||
@analog1: spin(@baseColor, 22); // Analogs colors
|
||||
@analog2: spin(@baseColor, -22);
|
||||
|
||||
|
||||
// THEME VARIABLES
|
||||
// ---------------
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user