Skip to content

B
bootstrap
Commit c37b710e authored by Mark Otto's avatar Mark Otto
Browse files
Options

Merge branch 'master' into pr/11744 

Conflicts:
	dist/css/bootstrap.min.css
parents b5008ebf e43e87b2
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1971 additions and 988 deletions
Gruntfile.js
View file @ c37b710e
/* jshint node: true */
module.exports = function(grunt) {
module.exports = function (grunt) {
"use strict";
// Force use of Unix newlines
......@@ -40,6 +40,21 @@ module.exports = function(grunt) {
}
},
jscs: {
options: {
config: 'js/.jscs.json',
},
gruntfile: {
src: ['Gruntfile.js']
},
src: {
src: ['js/*.js']
},
test: {
src: ['js/tests/unit/*.js']
}
},
concat: {
options: {
banner: '<%= banner %><%= jqueryCheck %>',
......@@ -288,6 +303,7 @@ module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-html-validation');
grunt.loadNpmTasks('grunt-jekyll');
grunt.loadNpmTasks('grunt-jscs-checker');
grunt.loadNpmTasks('grunt-recess');
grunt.loadNpmTasks('grunt-saucelabs');
grunt.loadNpmTasks('grunt-sed');
......@@ -296,7 +312,7 @@ module.exports = function(grunt) {
grunt.registerTask('validate-html', ['jekyll', 'validation']);
// Test task.
var testSubtasks = ['dist-css', 'jshint', 'qunit', 'validate-html'];
var testSubtasks = ['dist-css', 'jshint', 'jscs', 'qunit', 'validate-html'];
// Only run Sauce Labs tests if there's a Sauce access key
if (typeof process.env.SAUCE_ACCESS_KEY !== 'undefined') {
testSubtasks.push('connect');
......
README.md
View file @ c37b710e
......@@ -123,7 +123,6 @@ Keep track of development and community news.
* Follow [@twbootstrap on Twitter](http://twitter.com/twbootstrap).
* Read and subscribe to [The Official Bootstrap Blog](http://blog.getbootstrap.com).
* Have a question that's not a feature request or bug report? [Ask on the mailing list.](http://groups.google.com/group/twitter-bootstrap)
* Chat with fellow Bootstrappers in IRC. On the `irc.freenode.net` server, in the `##twitter-bootstrap` channel.
......
_includes/footer.html
View file @ c37b710e
......@@ -2,7 +2,7 @@
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="{{ page.base_url }}dist/js/bootstrap.js"></script>
<script src="{{ page.base_url }}dist/js/bootstrap.min.js"></script>
<script src="{{ page.base_url }}docs-assets/js/holder.js"></script>
......
_includes/header.html
View file @ c37b710e
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<meta name="description" content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.">
<meta name="keywords" content="HTML, CSS, JS, JavaScript, framework, bootstrap, front-end, frontend, web development">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contibutors">
<title>
{% if page.title == "Bootstrap" %}
......
_includes/nav-components.html
View file @ c37b710e
......@@ -121,6 +121,7 @@
<li><a href="#list-group-basic">Basic example</a></li>
<li><a href="#list-group-badges">Badges</a></li>
<li><a href="#list-group-linked">Linked items</a></li>
<li><a href="#list-group-contextual-classes">Contextual classes</a></li>
<li><a href="#list-group-custom-content">Custom content</a></li>
</ul>
</li>
......
_includes/nav-css.html
View file @ c37b710e
......@@ -16,6 +16,7 @@
<li><a href="#grid-media-queries">Media queries</a></li>
<li><a href="#grid-options">Grid options</a></li>
<li><a href="#grid-example-basic">Ex: Stacked-to-horizonal</a></li>
<li><a href="#grid-example-fluid">Ex: Fluid container</a></li>
<li><a href="#grid-example-mixed">Ex: Mobile and desktops</a></li>
<li><a href="#grid-example-mixed-complete">Ex: Mobile, tablet, desktops</a></li>
<li><a href="#grid-responsive-resets">Responsive column resets</a></li>
......@@ -37,7 +38,14 @@
<li><a href="#type-lists">Lists</a></li>
</ul>
</li>
<li><a href="#code">Code</a></li>
<li>
<a href="#code">Code</a>
<ul class="nav">
<li><a href="#code-inline">Inline code</a></li>
<li><a href="#code-user-input">User input</a></li>
<li><a href="#code-block">Blocks of code</a></li>
</ul>
</li>
<li>
<a href="#tables">Tables</a>
<ul class="nav">
......
about.html
View file @ c37b710e
......@@ -69,7 +69,6 @@ base_url: "../"
<p class="lead">Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.</p>
<ul>
<li>Read and subscribe to <a href="http://blog.getbootstrap.com/">The Official Bootstrap Blog</a>.</li>
<li>Have a question that's not a feature request or bug report? <a href="http://groups.google.com/group/twitter-bootstrap">Ask on the mailing list.</a></li>
<li>Chat with fellow Bootstrappers using IRC in the <code>irc.freenode.net</code> server, in the <a href="irc://irc.freenode.net/#twitter-bootstrap">##twitter-bootstrap channel</a>.</li>
<li>Find inspiring examples of people building with Bootstrap at the <a href="http://expo.getbootstrap.com">Bootstrap Expo</a>.</li>
</ul>
......
components.html
View file @ c37b710e
This diff is collapsed.
css.html
View file @ c37b710e
......@@ -76,7 +76,7 @@ base_url: "../"
<h3 id="grid-intro">Introduction</h3>
<p>Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:</p>
<ul>
<li>Rows must be placed within a <code>.container</code> for proper alignment and padding.</li>
<li>Rows must be placed within a <code>.container</code> (fixed-width) or <code>.container-fluid</code> (full-width) for proper alignment and padding.</li>
<li>Use rows to create horizontal groups of columns.</li>
<li>Content should be placed within columns, and only columns may be immediate children of rows.</li>
<li>Predefined grid classes like <code>.row</code> and <code>.col-xs-4</code> are available for quickly making grid layouts. LESS mixins can also be used for more semantic layouts.</li>
......@@ -249,6 +249,16 @@ base_url: "../"
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
{% endhighlight %}
<h3 id="grid-example-fluid">Example: Fluid container</h3>
<p>Turn any fixed-width grid layout into a full-width layout by changing your outermost <code>.container</code> to <code>.container-fluid</code>.</p>
{% highlight html %}
<div class="container-fluid">
<div class="row">
...
</div>
</div>
{% endhighlight %}
<h3 id="grid-example-mixed">Example: Mobile and desktop</h3>
......@@ -1047,7 +1057,7 @@ base_url: "../"
<h1 id="code">Code</h1>
</div>
<h2>Inline</h2>
<h2 id="code-inline">Inline</h2>
<p>Wrap inline snippets of code with <code>&lt;code&gt;</code>.</p>
<div class="bs-example">
For example, <code>&lt;section&gt;</code> should be wrapped as inline.
......@@ -1056,7 +1066,16 @@ base_url: "../"
For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %}
<h2>Basic block</h2>
<h2 id="code-user-input">User input</h2>
<p>Use the <code>&lt;kbd&gt;</code> to indicate input that is typically entered via keyboard.</p>
<div class="bs-example">
To switch directories, type <kbd>cd</kbd> followed the name of the directory.
</div>
{% highlight html %}
To switch directories, type <kbd>cd</kbd> followed the name of the directory.
{% endhighlight %}
<h2 id="code-block">Basic block</h2>
<p>Use <code>&lt;pre&gt;</code> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.</p>
<div class="bs-example">
<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
......@@ -1327,6 +1346,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</td>
<td>Indicates a dangerous or potentially negative action</td>
</tr>
<tr>
<td>
<code>.info</code>
</td>
<td>Indicates a neutral informative change or action</td>
</tr>
</tbody>
</table>
</div>
......@@ -1383,6 +1408,18 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<td>8</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="info">
<td>9</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
</tbody>
</table>
</div><!-- /example -->
......@@ -1392,6 +1429,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
......@@ -1399,6 +1437,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>
{% endhighlight %}
......
dist/css/bootstrap.css
View file @ c37b710e
This diff is collapsed.
dist/css/bootstrap.min.css
View file @ c37b710e
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/js/bootstrap.js
View file @ c37b710e
......@@ -763,7 +763,7 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
if (e.keyCode == 38 && index > 0) index-- // up
if (e.keyCode == 40 && index < $items.length - 1) index++ // down
if (!~index) index=0
if (!~index) index = 0
$items.eq(index).focus()
}
......@@ -1013,7 +1013,7 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
} else if (!this.isShown && this.$backdrop) {
this.$backdrop.removeClass('in')
$.support.transition && this.$element.hasClass('fade')?
$.support.transition && this.$element.hasClass('fade') ?
this.$backdrop
.one($.support.transition.end, callback)
.emulateTransitionEnd(150) :
......@@ -1213,7 +1213,7 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
}
Tooltip.prototype.show = function () {
var e = $.Event('show.bs.'+ this.type)
var e = $.Event('show.bs.' + this.type)
if (this.hasContent() && this.enabled) {
this.$element.trigger(e)
......
docs-assets/css/docs.css
View file @ c37b710e
......@@ -921,7 +921,6 @@ h1[id] {
*/
.highlight {
display: none; /* hidden by default, until >480px */
padding: 9px 14px;
margin-bottom: 14px;
background-color: #f7f7f9;
......@@ -949,13 +948,6 @@ h1[id] {
color: #bebec5;
}
/* Show code snippets when we have the space */
@media (min-width: 481px) {
.highlight {
display: block;
}
}
/*
* Responsive tests
......@@ -1037,11 +1029,12 @@ h1[id] {
*/
.bs-glyphicons {
margin: 0 -19px 20px -16px;
overflow: hidden;
}
.bs-glyphicons-list {
padding-left: 0;
padding-bottom: 1px;
margin-bottom: 20px;
list-style: none;
overflow: hidden;
}
.bs-glyphicons li {
float: left;
......@@ -1049,7 +1042,7 @@ h1[id] {
height: 115px;
padding: 10px;
margin: 0 -1px -1px 0;
font-size: 12px;
font-size: 10px;
line-height: 1.4;
text-align: center;
border: 1px solid #ddd;
......@@ -1069,8 +1062,13 @@ h1[id] {
}
@media (min-width: 768px) {
.bs-glyphicons {
margin-left: 0;
margin-right: 0;
}
.bs-glyphicons li {
width: 12.5%;
font-size: 12px;
}
}
......
docs-assets/js/raw-files.js
View file @ c37b710e
This diff is collapsed.
examples/cover/cover.css 0 → 100644
View file @ c37b710e
/*
* Globals
*/
/* Links */
a,
a:focus,
a:hover {
color: #fff;
}
/* Custom default button */
.btn-default,
.btn-default:hover,
.btn-default:focus {
color: #333;
text-shadow: none; /* Prevent inheritence from `body` */
background-color: #fff;
border: 1px solid #fff;
}
/*
* Base structure
*/
html,
body {
height: 100%;
background-color: #333;
}
body {
color: #fff;
text-align: center;
text-shadow: 0 1px 3px rgba(0,0,0,.5);
box-shadow: inset 0 0 100px rgba(0,0,0,.5);
}
/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
display: table;
width: 100%;
min-height: 100%;
}
.site-wrapper-inner {
display: table-cell;
vertical-align: top;
}
.cover-container {
margin-left: auto;
margin-right: auto;
}
/* Padding for spacing */
.inner {
padding: 30px;
}
/*
* Header
*/
.masthead-brand {
margin-top: 10px;
margin-bottom: 10px;
}
.masthead-nav > li {
display: inline-block;
}
.masthead-nav > li + li {
margin-left: 20px;
}
.masthead-nav > li > a {
padding-left: 0;
padding-right: 0;
font-size: 16px;
font-weight: bold;
color: #fff; /* IE8 proofing */
color: rgba(255,255,255,.75);
border-bottom: 2px solid transparent;
}
.masthead-nav > li > a:hover,
.masthead-nav > li > a:focus {
background-color: transparent;
border-bottom-color: rgba(255,255,255,.25);
}
.masthead-nav > .active > a,
.masthead-nav > .active > a:hover,
.masthead-nav > .active > a:focus {
color: #fff;
border-bottom-color: #fff;
}
@media (min-width: 768px) {
.masthead-brand {
float: left;
}
.masthead-nav {
float: right;
}
}
/*
* Cover
*/
.cover {
padding: 0 20px;
}
.cover .btn-lg {
padding: 10px 20px;
font-weight: bold;
}
/*
* Footer
*/
.mastfoot {
color: #999; /* IE8 proofing */
color: rgba(255,255,255,.5);
}
/*
* Affix and center
*/
@media (min-width: 768px) {
/* Pull out the header and footer */
.masthead {
position: fixed;
top: 0;
}
.mastfoot {
position: fixed;
bottom: 0;
}
/* Start the vertical centering */
.site-wrapper-inner {
vertical-align: middle;
}
/* Handle the widths */
.masthead,
.mastfoot,
.cover-container {
width: 100%; /* Must be percentage or pixels for horizontal alignment */
}
}
@media (min-width: 992px) {
.masthead,
.mastfoot,
.cover-container {
width: 700px;
}
}
examples/cover/index.html 0 → 100644
View file @ c37b710e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">
<title>Cover Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="cover.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand">Cover</h3>
<ul class="nav masthead-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<div class="inner cover">
<h1 class="cover-heading">Cover your page.</h1>
<p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p>
<p class="lead">
<a href="#" class="btn btn-lg btn-default">Learn more</a>
</p>
</div>
<div class="mastfoot">
<div class="inner">
<p>Cover template for <a href="http://getbootstrap.com">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<script src="../../docs-assets/js/holder.js"></script>
</body>
</html>
examples/dashboard/dashboard.css 0 → 100644
View file @ c37b710e
/*
* Base structure
*/
/* Move down content because we have a fixed navbar that is 50px tall */
body {
padding-top: 50px;
}
/*
* Global add-ons
*/
.sub-header {
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
/*
* Sidebar
*/
/* Hide for mobile, show later */
.sidebar {
display: none;
}
@media (min-width: 768px) {
.sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 1000;
display: block;
padding: 70px 20px 20px;
background-color: #f5f5f5;
border-right: 1px solid #eee;
}
}
/* Sidebar navigation */
.nav-sidebar {
margin-left: -20px;
margin-right: -21px; /* 20px padding + 1px border */
margin-bottom: 20px;
}
.nav-sidebar > li > a {
padding-left: 20px;
padding-right: 20px;
}
.nav-sidebar > .active > a {
color: #fff;
background-color: #428bca;
}
/*
* Main content
*/
.main {
padding: 20px;
}
@media (min-width: 768px) {
.main {
padding-left: 40px;
pading-right: 40px;
}
}
.main .page-header {
margin-top: 0;
}
/*
* Placeholder dashboard ideas
*/
.placeholders {
margin-bottom: 30px;
text-align: center;
}
.placeholders h4 {
margin-bottom: 0;
}
.placeholder {
margin-bottom: 20px;
}
.placeholder img {
border-radius: 50%;
}
examples/dashboard/index.html 0 → 100644
View file @ c37b710e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">
<title>Dashboard Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="dashboard.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Dashboard</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Help</a></li>
</ul>
<form action="" class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 sidebar">
<ul class="nav nav-sidebar">
<li class="active"><a href="#">Overview</a></li>
<li><a href="#">Reports</a></li>
<li><a href="#">Analytics</a></li>
<li><a href="#">Export</a></li>
</ul>
<ul class="nav nav-sidebar">
<li><a href="">Nav item</a></li>
<li><a href="">Nav item again</a></li>
<li><a href="">One more nav</a></li>
<li><a href="">Another nav item</a></li>
<li><a href="">More navigation</a></li>
</ul>
<ul class="nav nav-sidebar">
<li><a href="">Nav item again</a></li>
<li><a href="">One more nav</a></li>
<li><a href="">Another nav item</a></li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 main">
<h1 class="page-header">Dashboard</h1>
<div class="row placeholders">
<div class="col-xs-6 col-sm-3 placeholder">
<img data-src="holder.js/200x200/auto/sky" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
<div class="col-xs-6 col-sm-3 placeholder">
<img data-src="holder.js/200x200/auto/vine" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
<div class="col-xs-6 col-sm-3 placeholder">
<img data-src="holder.js/200x200/auto/sky" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
<div class="col-xs-6 col-sm-3 placeholder">
<img data-src="holder.js/200x200/auto/vine" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
</div>
<h2 class="sub-header">Section title</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,001</td>
<td>Lorem</td>
<td>ipsum</td>
<td>dolor</td>
<td>sit</td>
</tr>
<tr>
<td>1,002</td>
<td>amet</td>
<td>consectetur</td>
<td>adipiscing</td>
<td>elit</td>
</tr>
<tr>
<td>1,003</td>
<td>Integer</td>
<td>nec</td>
<td>odio</td>
<td>Praesent</td>
</tr>
<tr>
<td>1,003</td>
<td>libero</td>
<td>Sed</td>
<td>cursus</td>
<td>ante</td>
</tr>
<tr>
<td>1,004</td>
<td>dapibus</td>
<td>diam</td>
<td>Sed</td>
<td>nisi</td>
</tr>
<tr>
<td>1,005</td>
<td>Nulla</td>
<td>quis</td>
<td>sem</td>
<td>at</td>
</tr>
<tr>
<td>1,006</td>
<td>nibh</td>
<td>elementum</td>
<td>imperdiet</td>
<td>Duis</td>
</tr>
<tr>
<td>1,007</td>
<td>sagittis</td>
<td>ipsum</td>
<td>Praesent</td>
<td>mauris</td>
</tr>
<tr>
<td>1,008</td>
<td>Fusce</td>
<td>nec</td>
<td>tellus</td>
<td>sed</td>
</tr>
<tr>
<td>1,009</td>
<td>augue</td>
<td>semper</td>
<td>porta</td>
<td>Mauris</td>
</tr>
<tr>
<td>1,010</td>
<td>massa</td>
<td>Vestibulum</td>
<td>lacinia</td>
<td>arcu</td>
</tr>
<tr>
<td>1,011</td>
<td>eget</td>
<td>nulla</td>
<td>Class</td>
<td>aptent</td>
</tr>
<tr>
<td>1,012</td>
<td>taciti</td>
<td>sociosqu</td>
<td>ad</td>
<td>litora</td>
</tr>
<tr>
<td>1,013</td>
<td>torquent</td>
<td>per</td>
<td>conubia</td>
<td>nostra</td>
</tr>
<tr>
<td>1,014</td>
<td>per</td>
<td>inceptos</td>
<td>himenaeos</td>
<td>Curabitur</td>
</tr>
<tr>
<td>1,015</td>
<td>sodales</td>
<td>ligula</td>
<td>in</td>
<td>libero</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<script src="../../docs-assets/js/holder.js"></script>
</body>
</html>
examples/screenshots/jumbotron.jpg
View replaced file @ b5008ebf View file @ c37b710e
examples/screenshots/jumbotron.jpg

119 KB | W: | H:

examples/screenshots/jumbotron.jpg

98.8 KB | W: | H:

examples/screenshots/jumbotron.jpg
examples/screenshots/jumbotron.jpg
examples/screenshots/jumbotron.jpg
examples/screenshots/jumbotron.jpg
  • 2-up
  • Swipe
  • Onion skin
examples/screenshots/theme.jpg
View replaced file @ b5008ebf View file @ c37b710e
examples/screenshots/theme.jpg

93.2 KB | W: | H:

examples/screenshots/theme.jpg

83.5 KB | W: | H:

examples/screenshots/theme.jpg
examples/screenshots/theme.jpg
examples/screenshots/theme.jpg
examples/screenshots/theme.jpg
  • 2-up
  • Swipe
  • Onion skin
getting-started.html
View file @ c37b710e
......@@ -17,7 +17,7 @@ base_url: "../"
<h3 id="download-compiled">Compiled CSS, JS, and fonts</h3>
<p>The fastest way to get Bootstrap is to download the precompiled and minified versions of our CSS, JavaScript, and fonts. No documentation or original source code files are included.</p>
<p><a class="btn btn-lg btn-primary" href="{{ site.download_dist }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);" role="button">Download precompiled Bootstrap</a></p>
<p><a class="btn btn-lg btn-primary" href="{{ site.download_dist }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);" role="button">Download Bootstrap</a></p>
<h3 id="download-additional">Additional downloads</h3>
<div class="bs-docs-dl-options">
......@@ -261,6 +261,22 @@ bootstrap/
<h4>Carousel</h4>
<p>Customize the navbar and carousel, then add some new components.</p>
</div>
<div class="col-xs-6 col-md-4">
<a class="thumbnail" href="../examples/cover/">
<img src="../examples/screenshots/cover.jpg" alt="">
</a>
<h4>Cover</h4>
<p>A one-page template for building simple and beautiful home pages.</p>
</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-md-4">
<a class="thumbnail" href="../examples/dashboard/">
<img src="../examples/screenshots/dashboard.jpg" alt="">
</a>
<h4>Dashboard</h4>
<p>Basic structure for a admin dashboard with fixed sidebar and navbar.</p>
</div>
<div class="col-xs-6 col-md-4">
<a class="thumbnail" href="../examples/non-responsive/">
<img src="../examples/screenshots/non-responsive.jpg" alt="">
......@@ -805,7 +821,8 @@ bootstrap/
{% highlight html %}
<meta http-equiv="X-UA-Compatible" content="IE=edge">
{% endhighlight %}
<p>This tag is included in all docs pages and examples to ensure the best rendering possible in each supported version of Internet Explorer.</p>
<p>Confirm the document mode by opening the debugging tools: press <kbd>F12</kbd> and check the "Document Mode".</p>
<p>This tag is included in all Bootstrap's documentation and examples to ensure the best rendering possible in each supported version of Internet Explorer.</p>
<p>See <a href="http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge">this StackOverflow question</a> for more information.</p>
<h3 id="ie-10-width">Internet Explorer 10 in Windows 8 and Windows Phone 8</h3>
......
javascript.html
View file @ c37b710e
......@@ -30,7 +30,7 @@ base_url: "../"
<h3 id="js-data-attrs">Data attributes</h3>
<p>You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first-class API and should be your first consideration when using a plugin.</p>
<p>That said, in some situations it may be desirable to turn this functionality off. Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the document namespaced with <code>data-api</code>. This looks like this:
<p>That said, in some situations it may be desirable to turn this functionality off. Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the document namespaced with <code>data-api</code>. This looks like this:</p>
{% highlight js %}
$(document).off('.data-api')
{% endhighlight %}
......@@ -50,7 +50,7 @@ $('.btn.danger').button('toggle').addClass('fat')
{% highlight js %}
$('#myModal').modal() // initialized with defaults
$('#myModal').modal({ keyboard: false }) // initialized with no keyboard
$('#myModal').modal('show') // initializes and invokes show immediately</p>
$('#myModal').modal('show') // initializes and invokes show immediately
{% endhighlight %}
<p>Each plugin also exposes its raw constructor on a <code>Constructor</code> property: <code>$.fn.popover.Constructor</code>. If you'd like to get a particular plugin instance, retrieve it directly from an element: <code>$('[rel=popover]').data('popover')</code>.</p>
......@@ -415,7 +415,7 @@ $('#myModal').on('hidden.bs.modal', function (e) {
</nav> <!-- /navbar-example -->
</div> <!-- /example -->
<h3>Within tabs</h3>
<h3>Within pills</h3>
<div class="bs-example">
<ul class="nav nav-pills">
<li class="active"><a href="#">Regular link</a></li>
......@@ -449,7 +449,7 @@ $('#myModal').on('hidden.bs.modal', function (e) {
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
</ul>
</li>
</ul> <!-- /tabs -->
</ul> <!-- /pills -->
</div> <!-- /example -->
......
js/.jscs.json 0 → 100644
View file @ c37b710e
{
"requireSpaceAfterKeywords": ["if", "else", "for", "while", "do", "switch", "return"],
"requireSpacesInFunctionExpression": { "beforeOpeningCurlyBrace": true },
"disallowLeftStickedOperators": ["?", "+", "-", "/", "*", "=", "==", "===", "!=", "!==", ">", ">=", "<", "<="],
"requireRightStickedOperators": ["!"],
"disallowRightStickedOperators": ["?", "/", "*", ":", "=", "==", "===", "!=", "!==", ">", ">=", "<", "<="],
"disallowSpaceAfterPrefixUnaryOperators": ["++", "--", "+", "-", "~", "!"],
"disallowSpaceBeforePostfixUnaryOperators": ["++", "--"],
"requireSpaceBeforeBinaryOperators": ["+", "-", "/", "*", "=", "==", "===", "!=", "!=="],
"requireSpaceAfterBinaryOperators": ["+", "-", "/", "*", "=", "==", "===", "!=", "!=="],
"disallowKeywords": ["with"],
"validateLineBreaks": "LF",
"requireLineFeedAtFileEnd": true
}
js/dropdown.js
View file @ c37b710e
......@@ -85,7 +85,7 @@
if (e.keyCode == 38 && index > 0) index-- // up
if (e.keyCode == 40 && index < $items.length - 1) index++ // down
if (!~index) index=0
if (!~index) index = 0
$items.eq(index).focus()
}
......
js/modal.js
View file @ c37b710e
......@@ -180,7 +180,7 @@
} else if (!this.isShown && this.$backdrop) {
this.$backdrop.removeClass('in')
$.support.transition && this.$element.hasClass('fade')?
$.support.transition && this.$element.hasClass('fade') ?
this.$backdrop
.one($.support.transition.end, callback)
.emulateTransitionEnd(150) :
......
js/tests/unit/scrollspy.js
View file @ c37b710e
......@@ -19,7 +19,7 @@ $(function () {
test("should switch active class on scroll", function () {
var sectionHTML = '<div id="masthead"></div>'
, $section = $(sectionHTML).append('#qunit-fixture')
, topbarHTML ='<div class="topbar">'
, topbarHTML = '<div class="topbar">'
+ '<div class="topbar-inner">'
+ '<div class="container">'
+ '<h3><a href="#">Bootstrap</a></h3>'
......
js/tests/unit/tooltip.js
View file @ c37b710e
......@@ -290,7 +290,7 @@ $(function () {
test("should place tooltips inside the body", function () {
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
.appendTo('#qunit-fixture')
.tooltip({container:'body'})
.tooltip({container: 'body'})
.tooltip('show')
ok($("body > .tooltip").length, 'inside the body')
ok(!$("#qunit-fixture > .tooltip").length, 'not found in parent')
......@@ -301,7 +301,7 @@ $(function () {
var container = $("<div />").appendTo("body")
.css({position: "absolute", width: 200, height: 200, bottom: 0, left: 0})
, tooltip = $("<a href='#' title='Very very very very very very very very long tooltip'>Hover me</a>")
.css({position: "absolute", top:0, left: 0})
.css({position: "absolute", top: 0, left: 0})
.appendTo(container)
.tooltip({placement: "top", animate: false})
.tooltip("show")
......@@ -347,7 +347,7 @@ $(function () {
.tooltip('show')
, tooltip = container.find(".tooltip")
ok( Math.round(target.offset().top + target[0].offsetHeight/2 - tooltip[0].offsetHeight/2) === Math.round(tooltip.offset().top) )
ok( Math.round(target.offset().top + (target[0].offsetHeight / 2) - (tooltip[0].offsetHeight / 2)) === Math.round(tooltip.offset().top) )
target.tooltip('hide')
})
......
js/tooltip.js
View file @ c37b710e
......@@ -133,7 +133,7 @@
}
Tooltip.prototype.show = function () {
var e = $.Event('show.bs.'+ this.type)
var e = $.Event('show.bs.' + this.type)
if (this.hasContent() && this.enabled) {
this.$element.trigger(e)
......
less/buttons.less
View file @ c37b710e
......@@ -56,6 +56,10 @@
.btn-primary {
.button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
}
// Success appears as green
.btn-success {
.button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
}
// Warning appears as orange
.btn-warning {
.button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
......@@ -64,10 +68,6 @@
.btn-danger {
.button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
}
// Success appears as green
.btn-success {
.button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
}
// Info appears as blue-green
.btn-info {
.button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
......
less/code.less
View file @ c37b710e
......@@ -21,6 +21,16 @@ code {
border-radius: @border-radius-base;
}
// User input typically entered via keyboard
kbd {
padding: 2px 4px;
font-size: 90%;
color: @kbd-color;
background-color: @kbd-bg;
border-radius: @border-radius-small;
box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);
}
// Blocks of code
pre {
display: block;
......
less/grid.less
View file @ c37b710e
......@@ -2,7 +2,11 @@
// Grid system
// --------------------------------------------------
// Set the container width, and override it for fixed navbars in media queries
// Container widths
//
// Set the container width, and override it for fixed navbars in media queries.
.container {
.container-fixed();
......@@ -17,12 +21,30 @@
}
}
// mobile first defaults
// Fluid container
//
// Utilizes the mixin meant for fixed width containers, but without any defined
// width for fluid, full width layouts.
.container-fluid {
.container-fixed();
}
// Row
//
// Rows contain and clear the floats of your columns.
.row {
.make-row();
}
// Columns
//
// Common styles for small and large grid columns
.make-grid-columns();
......@@ -76,4 +98,3 @@
.make-grid(@grid-columns, lg, push);
.make-grid(@grid-columns, lg, offset);
}
less/list-group.less
View file @ c37b710e
......@@ -2,17 +2,21 @@
// List groups
// --------------------------------------------------
// Base class
//
// Easily usable on <ul>, <ol>, or <div>.
.list-group {
// No need to set list-style: none; since .list-group-item is block level
margin-bottom: 20px;
padding-left: 0; // reset padding because ul and ol
}
// Individual list items
// -------------------------
//
// Use on `li`s or `div`s within the `.list-group` parent.
.list-group-item {
position: relative;
......@@ -41,7 +45,12 @@
}
}
// Linked list items
//
// Use anchor elements instead of `li`s or `div`s to create linked list items.
// Includes an extra `.active` modifier class for showing selected items.
a.list-group-item {
color: @list-group-link-color;
......@@ -75,8 +84,21 @@ a.list-group-item {
}
}
// Contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.
.list-group-item-variant(success; @state-success-bg; @state-success-text);
.list-group-item-variant(warning; @state-warning-bg; @state-warning-text);
.list-group-item-variant(danger; @state-danger-bg; @state-danger-text);
.list-group-item-variant(info; @state-info-bg; @state-info-text);
// Custom content options
// -------------------------
//
// Extra classes for creating well-formatted content within `.list-group-item`s.
.list-group-item-heading {
margin-top: 0;
......
less/mixins.less
View file @ c37b710e
......@@ -150,10 +150,10 @@
-ms-transform: rotate(@degrees); // IE9+
transform: rotate(@degrees);
}
.scale(@ratio) {
-webkit-transform: scale(@ratio);
-ms-transform: scale(@ratio); // IE9+
transform: scale(@ratio);
.scale(@ratio; @ratio-y...) {
-webkit-transform: scale(@ratio, @ratio-y);
-ms-transform: scale(@ratio, @ratio-y); // IE9+
transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
-webkit-transform: translate(@x, @y);
......@@ -414,26 +414,53 @@
.table-row-variant(@state; @background) {
// Exact selectors below required to override `.table-striped` and prevent
// inheritance to nested tables.
.table {
> thead,
> tbody,
> tfoot {
> tr > .@{state},
> .@{state} > td,
> .@{state} > th {
background-color: @background;
}
.table > thead > tr,
.table > tbody > tr,
.table > tfoot > tr {
> td.@{state},
> th.@{state},
&.@{state} > td,
&.@{state} > th {
background-color: @background;
}
}
// Hover states for `.table-hover`
// Note: this is not available for cells or rows within `thead` or `tfoot`.
.table-hover > tbody {
> tr > .@{state}:hover,
> .@{state}:hover > td,
> .@{state}:hover > th {
.table-hover > tbody > tr {
> td.@{state}:hover,
> th.@{state}:hover,
&.@{state}:hover > td,
&.@{state}:hover > th {
background-color: darken(@background, 5%);
}
}
}
// List Groups
// -------------------------
.list-group-item-variant(@state; @background; @color) {
.list-group-item-@{state} {
color: @color;
background-color: @background;
}
a.list-group-item-@{state} {
color: @color;
.list-group-item-heading { color: inherit; }
&:hover,
&:focus {
color: @color;
background-color: darken(@background, 5%);
}
&.active,
&.active:hover,
&.active:focus {
color: #fff;
background-color: @color;
border-color: @color;
}
}
}
......@@ -475,7 +502,7 @@
.badge {
color: @background;
background-color: #fff;
background-color: @color;
}
}
......
less/navbar.less
View file @ c37b710e
......@@ -93,14 +93,17 @@
//
// When a container is present, change the behavior of the header and collapse.
.container > .navbar-header,
.container > .navbar-collapse {
margin-right: -@navbar-padding-horizontal;
margin-left: -@navbar-padding-horizontal;
@media (min-width: @grid-float-breakpoint) {
margin-right: 0;
margin-left: 0;
.container,
.container-fluid {
> .navbar-header,
> .navbar-collapse {
margin-right: -@navbar-padding-horizontal;
margin-left: -@navbar-padding-horizontal;
@media (min-width: @grid-float-breakpoint) {
margin-right: 0;
margin-left: 0;
}
}
}
......@@ -159,7 +162,8 @@
}
@media (min-width: @grid-float-breakpoint) {
.navbar > .container & {
.navbar > .container &,
.navbar > .container-fluid & {
margin-left: -@navbar-padding-horizontal;
}
}
......
less/tables.less
View file @ c37b710e
......@@ -156,8 +156,9 @@ table {
// Generate the contextual variants
.table-row-variant(active; @table-bg-active);
.table-row-variant(success; @state-success-bg);
.table-row-variant(danger; @state-danger-bg);
.table-row-variant(warning; @state-warning-bg);
.table-row-variant(danger; @state-danger-bg);
.table-row-variant(info; @state-info-bg);
// Responsive tables
......
less/type.less
View file @ c37b710e
......@@ -120,6 +120,7 @@ cite { font-style: normal; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-justify { text-align: justify; }
// Page header
......
less/variables.less
View file @ c37b710e
......@@ -286,7 +286,7 @@
// Navbar toggle
@navbar-default-toggle-hover-bg: #ddd;
@navbar-default-toggle-icon-bar-bg: #ccc;
@navbar-default-toggle-icon-bar-bg: #888;
@navbar-default-toggle-border-color: #ddd;
......@@ -602,6 +602,9 @@
@code-color: #c7254e;
@code-bg: #f9f2f4;
@kbd-color: #fff;
@kbd-bg: #333;
@pre-bg: #f5f5f5;
@pre-color: @gray-dark;
@pre-border-color: #ccc;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment