Skip to content

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

Merge branch '3.0.0-wip' into bs3_homepage 

Conflicts:
	dist/css/bootstrap.min.css
parents 5e31478a 04a73ebe
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 3107 additions and 3157 deletions
Gruntfile.js
View file @ 18766db6
......@@ -83,6 +83,17 @@ module.exports = function(grunt) {
},
src: ['less/bootstrap.less'],
dest: 'dist/css/<%= pkg.name %>.min.css'
},
theme: {
src: ['less/theme.less'],
dest: 'dist/css/<%= pkg.name %>-theme.css'
},
theme_min: {
options: {
compress: true
},
src: ['less/theme.less'],
dest: 'dist/css/<%= pkg.name %>-theme.min.css'
}
},
......@@ -169,7 +180,7 @@ module.exports = function(grunt) {
grunt.registerTask('dist', ['clean', 'dist-css', 'dist-js']);
// Default task.
grunt.registerTask('default', ['test', 'dist']);
grunt.registerTask('default', ['test', 'dist', 'build-customizer']);
// task for building customizer
grunt.registerTask('build-customizer', 'Add scripts/less files to customizer.', function () {
......
README.md
View file @ 18766db6
......@@ -22,6 +22,8 @@ Read the [Getting Started page](http://getbootstrap.com/getting-started/) for in
Have a bug or a feature request? [Please open a new issue](https://github.com/twbs/bootstrap/issues). Before opening any issue, please search for existing issues and read the [Issue Guidelines](https://github.com/necolas/issue-guidelines), written by [Nicolas Gallagher](https://github.com/necolas/).
You may use [this JS Bin](http://jsbin.com/aFacAf/1/edit) as a template for your bug reports.
## Documentation
......
_includes/footer.html
View file @ 18766db6
......@@ -13,7 +13,6 @@
<script src="{{ page.base_url }}assets/js/less.js"></script>
<script src="{{ page.base_url }}assets/js/jszip.js"></script>
<script src="{{ page.base_url }}assets/js/uglify.js"></script>
<script src="{{ page.base_url }}assets/js/jquery.bbq.min.js"></script>
<script src="{{ page.base_url }}assets/js/customizer.js"></script>
{% endif %}
......
_layouts/customize.html deleted 100644 → 0
View file @ 5e31478a
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta, title, CSS, favicons, etc. -->
{% include header.html %}
<!-- Place anything custom after this. -->
</head>
<body data-spy="scroll" data-target=".bs-sidebar">
<a class="sr-only" href="#content">Skip navigation</a>
<!-- Docs master nav -->
{% include nav-main.html %}
<!-- Docs page layout -->
<div class="bs-header" id="content" role="banner">
<div class="container">
<h1>{{ page.title }}</h1>
<p>{{ page.lead }}</p>
{% include ads.html %}
</div>
</div>
<!-- Callout for the old docs link -->
{% include old-bs-docs.html %}
<div class="container bs-docs-container">
<div class="col-lg-12">
{{ content }}
</div>
</div>
<!-- Footer
================================================== -->
<footer class="bs-footer">
{% include social-buttons.html %}
<p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
<p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<ul class="footer-links">
<li><a href="{{ site.blog }}">Blog</a></li>
<li class="muted">&middot;</li>
<li><a href="{{ site.repo }}/issues?state=open">Issues</a></li>
<li class="muted">&middot;</li>
<li><a href="{{ site.repo }}/releases">Releases</a></li>
</ul>
</footer>
<!-- JS and analytics only. -->
{% include footer.html %}
</body>
</html>
assets/css/docs.css
View file @ 18766db6
......@@ -189,6 +189,27 @@ body {
font-weight: normal;
}
/* Alerts */
.bs-customizer-alert {
position: fixed;
top: 51px;
left: 0;
right: 0;
z-index: 1030;
padding: 15px 0;
color: #fff;
background-color: #d9534f;
box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
border-bottom: 1px solid #b94441;
}
.bs-customizer-alert .close {
margin-top: -2px;
color: #fff;
text-shadow: none;
}
.bs-customizer-alert p {
margin-bottom: 0;
}
/* Docs pages and sections
......
assets/js/customizer.js
View file @ 18766db6
window.onload = function () { // wait for load in a dumb way because B-0
var cw = '/*!\n * Bootstrap v3.0.0-rc.2\n *\n * Copyright 2013 Twitter, Inc\n * Licensed under the Apache License v2.0\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Designed and built with all the love in the world @twitter by @mdo and @fat.\n */\n\n'
function showError (msg, err) {
$('<div id="bsCustomizerAlert" class="bs-customizer-alert">\
<div class="container">\
<a href="#bsCustomizerAlert" data-dismiss="alert" class="close pull-right">&times;</a>\
<p class="bs-customizer-alert-text">' + msg + '</p>' +
(err.extract ? '<pre class="bs-customizer-alert-extract">' + err.extract.join('\n') + '</pre>' : '') + '\
</div>\
</div>').appendTo('body').alert()
throw err
}
function getQueryParam(key) {
key = key.replace(/[*+?^$.\[\]{}()|\\\/]/g, "\\$&"); // escape RegEx meta chars
var match = location.search.match(new RegExp("[?&]"+key+"=([^&]+)(&|$)"));
return match && decodeURIComponent(match[1].replace(/\+/g, " "));
}
function createGist (configData) {
var data = {
"description": "Bootstrap Customizer Config",
"public": true,
"files": {
"config.json": {
"content": JSON.stringify(configData)
}
}
}
$.ajax({
url: 'https://api.github.com/gists',
type: 'POST',
dataType: 'json',
data: JSON.stringify(data)
})
.success(function(result) {
history.replaceState(false, document.title, window.location.origin + window.location.pathname + '?id=' + result.id)
})
.error(function(err) {
showError('<strong>Error</strong> Could not save gist file, configuration not saved.', err)
})
}
function generateUrl() {
var vars = {}
......@@ -11,39 +52,50 @@ window.onload = function () { // wait for load in a dumb way because B-0
var data = {
vars: vars,
css: $('#less-section input:not(:checked)').map(function () { return this.value }).toArray(),
js: $('#plugin-section input:not(:checked)').map(function () { return this.value }).toArray()
css: $('#less-section input:checked') .map(function () { return this.value }).toArray(),
js: $('#plugin-section input:checked').map(function () { return this.value }).toArray()
}
if ($.isEmptyObject(data.vars) && !data.css.length && !data.js.length) return
window.location = jQuery.param.querystring('/customize/', data)
createGist(data)
}
function parseUrl() {
var data = jQuery.deparam.querystring()
var id = getQueryParam('id')
if (data.js) {
for (var i = 0; i < data.js.length; i++) {
var input = $('input[value="'+data.js[i]+'"]')
input && input.prop('checked', false)
}
}
if (!id) return
if (data.css) {
for (var i = 0; i < data.css.length; i++) {
var input = $('input[value="'+data.css[i]+'"]')
input && input.prop('checked', false)
$.ajax({
url: 'https://api.github.com/gists/' + id,
type: 'GET',
dataType: 'json'
})
.success(function(result) {
var data = JSON.parse(result.files['config.json'].content)
if (data.js) {
$('#plugin-section input').each(function () {
$(this).prop('checked', ~$.inArray(this.value, data.js))
})
}
}
if (data.vars) {
// todo (fat): vars
}
if (data.css) {
$('#less-section input').each(function () {
$(this).prop('checked', ~$.inArray(this.value, data.css))
})
}
if (data.vars) {
for (var i in data.vars) {
$('input[data-var="' + i + '"]').val(data.vars[i])
}
}
})
.error(function(err) {
showError('Error fetching bootstrap config file', err)
})
}
function generateZip(css, js, complete) {
if (!css && !js) return alert('you want to build nothing… o_O')
if (!css && !js) return showError('<strong>Error</strong> No Bootstrap files selected.', new Error('no Bootstrap'))
var zip = new JSZip()
......@@ -62,9 +114,7 @@ window.onload = function () { // wait for load in a dumb way because B-0
}
var content = zip.generate()
location.href = 'data:application/zip;base64,' + content
complete()
}
......@@ -108,15 +158,16 @@ window.onload = function () { // wait for load in a dumb way because B-0
, optimization: 0
, filename: 'bootstrap.css'
}).parse(css, function (err, tree) {
if (err) return alert(err)
if (err) {
return showError('<strong>Error</strong> Could not parse less files.', err)
}
result = {
'bootstrap.css' : cw + tree.toCSS(),
'bootstrap.min.css' : cw + tree.toCSS({ compress: true })
}
})
} catch (err) {
return alert(err)
return showError('<strong>Error</strong> Could not parse less files.', err)
}
return result
......@@ -142,9 +193,7 @@ window.onload = function () { // wait for load in a dumb way because B-0
$downloadBtn.addClass('loading')
generateZip(generateCSS(), generateJavascript(), function () {
$downloadBtn.removeClass('loading')
setTimeout(function () {
generateUrl()
}, 1)
setTimeout(generateUrl, 500)
})
})
......@@ -167,9 +216,27 @@ window.onload = function () { // wait for load in a dumb way because B-0
inputsVariables.val('')
})
try {
parseUrl()
} catch (e) {
// maybe alert user that we can't parse their url
}
$('[data-dependencies]').on('click', function () {
if (!$(this).is(':checked')) return
var dependencies = this.getAttribute('data-dependencies')
if (!dependencies) return
dependencies = dependencies.split(',')
for (var i = 0; i < dependencies.length; i++) {
var dependency = $('[value="' + dependencies[i] + '"]')
dependency && dependency.prop('checked', true)
}
})
$('[data-dependents]').on('click', function () {
if ($(this).is(':checked')) return
var dependents = this.getAttribute('data-dependents')
if (!dependents) return
dependents = dependents.split(',')
for (var i = 0; i < dependents.length; i++) {
var dependent = $('[value="' + dependents[i] + '"]')
dependent && dependent.prop('checked', false)
}
})
parseUrl()
}
\ No newline at end of file
assets/js/jquery.bbq.min.js deleted 100644 → 0
View file @ 5e31478a
This diff is collapsed.
assets/js/jquery.js
View file @ 18766db6
This source diff could not be displayed because it is too large. You can view the blob instead.
components.html
View file @ 18766db6
This diff is collapsed.
composer.json
View file @ 18766db6
{
"name": "twbs/bootstrap"
, "description": "Sleek, intuitive, and powerful front-end framework for faster and easier web development."
, "description": "Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development."
, "keywords": ["bootstrap", "css"]
, "homepage": "http://getbootstrap.com"
, "authors": [
......
customize.html
View file @ 18766db6
This diff is collapsed.
dist/css/bootstrap-theme.css 0 → 100644
View file @ 18766db6
This diff is collapsed.
dist/css/bootstrap-theme.min.css 0 → 100644
View file @ 18766db6
This diff is collapsed.
dist/css/bootstrap.css
View file @ 18766db6
This diff is collapsed.
dist/css/bootstrap.min.css
View file @ 18766db6
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/js/bootstrap.js
View file @ 18766db6
......@@ -49,7 +49,7 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
// http://blog.alexmaccaw.com/css-transitions
$.fn.emulateTransitionEnd = function (duration) {
var called = false, $el = this
var called = false, $el = this
$(this).one($.support.transition.end, function () { called = true })
var callback = function () { if (!called) $($el).trigger($.support.transition.end) }
setTimeout(callback, duration)
......@@ -711,7 +711,7 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
clearMenus()
if (!isActive) {
if ('ontouchstart' in document.documentElement) {
if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
// if mobile we we use a backdrop because click events don't delegate
$('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus)
}
......@@ -723,9 +723,9 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
$parent
.toggleClass('open')
.trigger('shown.bs.dropdown')
}
$this.focus()
$this.focus()
}
return false
}
......@@ -851,7 +851,7 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
var Modal = function (element, options) {
this.options = options
this.$element = $(element).on('click.dismiss.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))
this.$element = $(element)
this.$backdrop =
this.isShown = null
......@@ -880,6 +880,8 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
this.escape()
this.$element.on('click.dismiss.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))
this.backdrop(function () {
var transition = $.support.transition && that.$element.hasClass('fade')
......@@ -902,7 +904,7 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget })
transition ?
that.$element
that.$element.find('.modal-dialog') // wait for modal to slide in
.one($.support.transition.end, function () {
that.$element.focus().trigger(e)
})
......@@ -1179,10 +1181,11 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
clearTimeout(self.timeout)
self.hoverState = 'in'
if (!self.options.delay || !self.options.delay.show) return self.show()
self.hoverState = 'in'
self.timeout = setTimeout(function () {
self.timeout = setTimeout(function () {
if (self.hoverState == 'in') self.show()
}, self.options.delay.show)
}
......@@ -1193,10 +1196,11 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
clearTimeout(self.timeout)
self.hoverState = 'out'
if (!self.options.delay || !self.options.delay.hide) return self.hide()
self.hoverState = 'out'
self.timeout = setTimeout(function () {
self.timeout = setTimeout(function () {
if (self.hoverState == 'out') self.hide()
}, self.options.delay.hide)
}
......@@ -1329,7 +1333,9 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
var $tip = this.tip()
var e = $.Event('hide.bs.' + this.type)
function complete() { $tip.detach() }
function complete() {
if (that.hoverState != 'in') $tip.detach()
}
this.$element.trigger(e)
......
dist/js/bootstrap.min.js
View file @ 18766db6
This diff is collapsed.
examples/jumbotron-narrow/index.html
View file @ 18766db6
......@@ -18,7 +18,7 @@
<body>
<div class="container-narrow">
<div class="container">
<div class="header">
<ul class="nav nav-pills pull-right">
<li class="active"><a href="#">Home</a></li>
......@@ -31,7 +31,7 @@
<div class="jumbotron">
<h1>Jumbotron heading</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-large btn-success" href="#">Sign up today</a></p>
<p><a class="btn btn-lg btn-success" href="#">Sign up today</a></p>
</div>
<div class="row marketing">
......
examples/jumbotron-narrow/jumbotron-narrow.css
View file @ 18766db6
......@@ -31,10 +31,11 @@ body {
border-top: 1px solid #e5e5e5;
}
/* Custom container */
.container-narrow {
margin: 0 auto;
max-width: 700px;
/* Customize container */
@media (min-width: 768px) {
.container {
max-width: 730px;
}
}
.container-narrow > hr {
margin: 30px 0;
......
examples/jumbotron/index.html
View file @ 18766db6
......@@ -59,15 +59,16 @@
</div>
</div>
<div class="container">
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>
<p><a class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
</div>
</div>
<div class="container">
<div class="body-content">
<!-- Example row of columns -->
......
examples/jumbotron/jumbotron.css
View file @ 18766db6
......@@ -13,10 +13,6 @@ body {
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
/* Let the jumbotron breathe */
.jumbotron {
margin-top: 20px;
}
/* Remove padding from wrapping element since we kick in the grid classes here */
.body-content {
padding: 0;
......
examples/justified-nav/index.html
View file @ 18766db6
......@@ -36,7 +36,7 @@
<div class="jumbotron">
<h1>Marketing stuff!</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet.</p>
<p><a class="btn btn-large btn-success" href="#">Get started today</a></p>
<p><a class="btn btn-lg btn-success" href="#">Get started today</a></p>
</div>
......
examples/navbar-fixed-top/index.html
View file @ 18766db6
......@@ -64,7 +64,7 @@
<p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>To see the difference between static and fixed top navbars, just scroll.</p>
<p>
<a class="btn btn-large btn-primary" href="../../components/#navbar">View navbar docs &raquo;</a>
<a class="btn btn-lg btn-primary" href="../../components/#navbar">View navbar docs &raquo;</a>
</p>
</div>
......
examples/navbar-static-top/index.html
View file @ 18766db6
......@@ -65,7 +65,7 @@
<p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>To see the difference between static and fixed top navbars, just scroll.</p>
<p>
<a class="btn btn-large btn-primary" href="../../components/#navbar">View navbar docs &raquo;</a>
<a class="btn btn-lg btn-primary" href="../../components/#navbar">View navbar docs &raquo;</a>
</p>
</div>
......
examples/navbar/index.html
View file @ 18766db6
......@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../assets/ico/favicon.png">
<title>Navbar Template for Bootstrap</title>
......@@ -21,40 +22,38 @@
<!-- Static navbar -->
<div class="navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="./">Default</a></li>
<li><a href="../navbar-static-top/">Static top</a></li>
<li><a href="../navbar-fixed-top/">Fixed top</a></li>
</ul>
</div><!--/.nav-collapse -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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">
<li class="active"><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" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="./">Default</a></li>
<li><a href="../navbar-static-top/">Static top</a></li>
<li><a href="../navbar-fixed-top/">Fixed top</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
<!-- Main component for a primary marketing message or call to action -->
......@@ -62,7 +61,7 @@
<h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>
<a class="btn btn-large btn-primary" href="../../components/#navbar">View navbar docs &raquo;</a>
<a class="btn btn-lg btn-primary" href="../../components/#navbar">View navbar docs &raquo;</a>
</p>
</div>
......
examples/non-responsive/index.html 0 → 100644
View file @ 18766db6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="">
<!-- Note there is no responsive meta tag here -->
<link rel="shortcut icon" href="../../assets/ico/favicon.png">
<title>Non-responsive Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="non-responsive.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Non-responsive Bootstrap</h1>
<p class="lead">Disable the responsiveness of Bootstrap by fixing the width of the container and using the first grid system tier.</p>
</div>
<h3>What changes</h3>
<p>Note the lack of the <code>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</code>, which disables the zooming aspect of sites in mobile devices. In addition, we reset our container's width and are basically good to go.</p>
<h3>Non-responsive grid system</h3>
<div class="row">
<div class="col-xs-4">One third</div>
<div class="col-xs-4">One third</div>
<div class="col-xs-4">One third</div>
</div>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../../assets/js/respond.min.js"></script>
</body>
</html>
examples/non-responsive/non-responsive.css 0 → 100644
View file @ 18766db6
.container {
max-width: none !important;
width: 970px;
}
.col-xs-4 {
padding-top: 15px;
padding-bottom: 15px;
background-color: #eee;
border: 1px solid #ddd;
background-color: rgba(86,61,124,.15);
border: 1px solid rgba(86,61,124,.2);
}
examples/screenshots/carousel.jpg
View replaced file @ 5e31478a View file @ 18766db6
examples/screenshots/carousel.jpg

139 KB | W: | H:

examples/screenshots/carousel.jpg

80.4 KB | W: | H:

examples/screenshots/carousel.jpg
examples/screenshots/carousel.jpg
examples/screenshots/carousel.jpg
examples/screenshots/carousel.jpg
  • 2-up
  • Swipe
  • Onion skin
examples/screenshots/grid.jpg
View replaced file @ 5e31478a View file @ 18766db6
examples/screenshots/grid.jpg

159 KB | W: | H:

examples/screenshots/grid.jpg

97.8 KB | W: | H:

examples/screenshots/grid.jpg
examples/screenshots/grid.jpg
examples/screenshots/grid.jpg
examples/screenshots/grid.jpg
  • 2-up
  • Swipe
  • Onion skin
examples/screenshots/jumbotron.jpg
View replaced file @ 5e31478a View file @ 18766db6
examples/screenshots/jumbotron.jpg

136 KB | W: | H:

examples/screenshots/jumbotron.jpg

76.1 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/navbar-fixed.jpg
View replaced file @ 5e31478a View file @ 18766db6
examples/screenshots/navbar-fixed.jpg

62.7 KB | W: | H:

examples/screenshots/navbar-fixed.jpg

37.2 KB | W: | H:

examples/screenshots/navbar-fixed.jpg
examples/screenshots/navbar-fixed.jpg
examples/screenshots/navbar-fixed.jpg
examples/screenshots/navbar-fixed.jpg
  • 2-up
  • Swipe
  • Onion skin
examples/screenshots/navbar-static.jpg
View replaced file @ 5e31478a View file @ 18766db6
examples/screenshots/navbar-static.jpg

63.9 KB | W: | H:

examples/screenshots/navbar-static.jpg

38.8 KB | W: | H:

examples/screenshots/navbar-static.jpg
examples/screenshots/navbar-static.jpg
examples/screenshots/navbar-static.jpg
examples/screenshots/navbar-static.jpg
  • 2-up
  • Swipe
  • Onion skin
examples/screenshots/navbar.jpg
View replaced file @ 5e31478a View file @ 18766db6
examples/screenshots/navbar.jpg

67.7 KB | W: | H:

examples/screenshots/navbar.jpg

40.1 KB | W: | H:

examples/screenshots/navbar.jpg
examples/screenshots/navbar.jpg
examples/screenshots/navbar.jpg
examples/screenshots/navbar.jpg
  • 2-up
  • Swipe
  • Onion skin
examples/screenshots/offcanvas.jpg
View replaced file @ 5e31478a View file @ 18766db6
examples/screenshots/offcanvas.jpg

198 KB | W: | H:

examples/screenshots/offcanvas.jpg

110 KB | W: | H:

examples/screenshots/offcanvas.jpg
examples/screenshots/offcanvas.jpg
examples/screenshots/offcanvas.jpg
examples/screenshots/offcanvas.jpg
  • 2-up
  • Swipe
  • Onion skin
examples/screenshots/sign-in.jpg
View replaced file @ 5e31478a View file @ 18766db6
examples/screenshots/sign-in.jpg

24.1 KB | W: | H:

examples/screenshots/sign-in.jpg

13.3 KB | W: | H:

examples/screenshots/sign-in.jpg
examples/screenshots/sign-in.jpg
examples/screenshots/sign-in.jpg
examples/screenshots/sign-in.jpg
  • 2-up
  • Swipe
  • Onion skin
examples/screenshots/sticky-footer.jpg
View replaced file @ 5e31478a View file @ 18766db6
examples/screenshots/sticky-footer.jpg

41.4 KB | W: | H:

examples/screenshots/sticky-footer.jpg

24.5 KB | W: | H:

examples/screenshots/sticky-footer.jpg
examples/screenshots/sticky-footer.jpg
examples/screenshots/sticky-footer.jpg
examples/screenshots/sticky-footer.jpg
  • 2-up
  • Swipe
  • Onion skin
examples/signin/index.html
View file @ 18766db6
......@@ -27,7 +27,7 @@
<label class="checkbox">
<input type="checkbox" value="remember-me"> Remember me
</label>
<button class="btn btn-large btn-primary btn-block" type="submit">Sign in</button>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
</div> <!-- /container -->
......
examples/theme/index.html 0 → 100644
View file @ 18766db6
This diff is collapsed.
examples/theme/theme.css 0 → 100644
View file @ 18766db6
body {
padding-top: 70px;
padding-bottom: 30px;
}
.theme-dropdown .dropdown-menu {
display: block;
position: static;
margin-bottom: 20px;
}
.theme-showcase > p > .btn {
margin: 5px 0;
}
\ No newline at end of file
getting-started.html
View file @ 18766db6
......@@ -229,7 +229,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/non-responsive/">
<img src="../examples/screenshots/non-responsive.jpg" alt="">
</a>
<h4>Non-responsive Bootstrap</h4>
<p>Easily disable the responsiveness of Bootstrap <a href="../getting-started/#disable-responsive">per our docs</a>.</p>
</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-md-4">
<a class="thumbnail" href="../examples/theme/">
<img src="../examples/screenshots/theme.jpg" alt="">
</a>
<h4>Bootstrap theme</h4>
<p>Load the optional Bootstrap theme for a visually enhanced experience.</p>
</div>
</div>
</div>
......@@ -242,13 +257,13 @@ bootstrap/
<div class="page-header">
<h1 id="disable-responsive">Disabling responsiveness</h1>
</div>
<p class="lead">Don't want your site or application to be scale on different device? With a little bit of work, you can disable the responsive features of Bootstrap so that mobile users see your full desktop-version site.</p>
<p class="lead">Don't want your site or application to be scaled on different devices? With a little bit of work, you can disable the responsive features of Bootstrap so that mobile users see your full desktop-version site. Read below or check out <a href="../examples/non-responsive/">the non-responsive example</a>.</p>
<h3>Steps to disable responsive views</h3>
<p>To disable responsive features, follow these steps. See it in action in the modified template below.</p>
<ol>
<li>Remove (or just don't add) the viewport <code>&lt;meta&gt;</code> mentioned in <a href="../css/#overview-mobile">the CSS docs</a></li>
<li>Force a single <code>max-width</code> on the <code>.container</code> (e.g., <code>.container { max-width: 940px; }</code>). Be sure that this comes after the default Bootstrap CSS; otherwise, you'll need <code>!important</code>.</li>
<li>Remove the <code>max-width</code> on the <code>.container</code> for all grid tiers with <code>max-width: none !important;</code> and set a regular width like <code>width: 970px;</code>. Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the <code>!important</code> with media queries or some selector-fu.</li>
<li>For grid layouts, make use of <code>.col-xs-*</code> classes in addition to or in place of the medium/large ones. Don't worry, the extra-small device grid scales up to all resolutions, so you're set there.</li>
</ol>
<p>You'll still need respond.js for IE8 (since our media queries are still there and need to be picked up). This just disables the "mobile site" of Bootstrap.</p>
......@@ -268,7 +283,10 @@ bootstrap/
<!-- 2. Add our custom CSS to set the container's fixed width -->
<style>
.container { max-width: 940px; }
.container {
max-width: none !important;
width: 970px;
}
</style>
</head>
<body>
......@@ -359,8 +377,10 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
<p>We'll keep an eye on this though and update our code if we have an easy solution.</p>
<h3>Modals and mobile devices</h3>
<h4>Overflow and scrolling</h4>
<p>Support for <code>overflow: hidden</code> on the <code>&lt;body&gt;</code> element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices' browsers, the <code>&lt;body&gt;</code> content will begin to scroll.</p>
<p>Also, note that if you're using inputs in your modal – iOS has a rendering bug which doesn't update the position of fixed elements when the virtual keyboard is triggered. There are a few work arounds for this including transforming your elements to position absolute or invoking a timer on focus to try to correct the positioning manually. This is not handled by Bootstrap, so it is up to you to decide which solution is best for your application.</p>
<h4>Virtual keyboards</h4>
<p>Also, note that if you're using inputs in your modal – iOS has a rendering bug which doesn't update the position of fixed elements when the virtual keyboard is triggered. There are a few work arounds for this, including transforming your elements to <code>position: absolute</code> or invoking a timer on focus to try to correct the positioning manually. This is not handled by Bootstrap, so it is up to you to decide which solution is best for your application.</p>
<h3>Browser zooming</h3>
<p>Page zooming inevitably presents rendering artifacts in some components, both in Bootstrap and the rest of the web. Depending on the issue, we may be able to fix it (search first and then open an issue if need be). However, we tend to ignore these as they often have no direct solution other than hacky workarounds.</p>
......@@ -541,7 +561,7 @@ img { max-width: none; }
<div class="bs-callout bs-callout-info">
<h4>Alternate customization methods</h4>
<p>While not recommended for folks new to Bootstrap, you may use one of two alternate methods for customization. The first is modifying the source .less files (making upgrades super difficult), and the second is mapping source LESS code to <a href="http://ruby.bvision.com/blog/please-stop-embedding-bootstrap-classes-in-your-html">your own classes via mixins</a>. For the time being, neither options are documented here.</p>
<p>While not recommended for folks new to Bootstrap, you may use one of two alternate methods for customization. The first is modifying the source .less files (making upgrades super difficult), and the second is mapping source LESS code to <a href="http://ruby.bvision.com/blog/please-stop-embedding-bootstrap-classes-in-your-html">your own classes via mixins</a>. For the time being, neither of those options are documented here.</p>
</div>
<h3>Removing potential bloat</h3>
......
javascript.html
View file @ 18766db6
......@@ -541,12 +541,12 @@ $('#myDropdown').on('show.bs.dropdown', function () {
<li><a href="#fat">@fat</a></li>
<li><a href="#mdo">@mdo</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#one">one</a></li>
<li><a href="#two">two</a></li>
<a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="navbarDrop1">
<li><a href="#one" tabindex="-1">one</a></li>
<li><a href="#two" tabindex="-1">two</a></li>
<li class="divider"></li>
<li><a href="#three">three</a></li>
<li><a href="#three" tabindex="-1">three</a></li>
</ul>
</li>
</ul>
......@@ -663,10 +663,10 @@ $('#myScrollspy').on('activate.bs.scrollspy', function () {
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#dropdown1" data-toggle="tab">@fat</a></li>
<li><a href="#dropdown2" data-toggle="tab">@mdo</a></li>
<a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li><a href="#dropdown1" tabindex="-1" data-toggle="tab">@fat</a></li>
<li><a href="#dropdown2" tabindex="-1" data-toggle="tab">@mdo</a></li>
</ul>
</li>
</ul>
......@@ -1104,7 +1104,7 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
<td>string | false</td>
<td>false</td>
<td>
<p>Appends the popover to a specific element. Example: <code>container: 'body'</code></p>
<p>Appends the popover to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize.</p>
</td>
</tr>
</tbody>
......@@ -1903,7 +1903,7 @@ $('#myCarousel').on('slide.bs.carousel', function () {
<td>offset</td>
<td>number | function | object</td>
<td>10</td>
<td>Pixels to offset from screen when calculating position of scroll. If a single number is provided, the offset will be applied in both top and left directions. To provide a unique, bottom and top offset just provide an object <code>offset: { top: 10 }</code> or <code>offset: { top: 10, bottom: 5 }</code>. Use a function when you need to dynamically calculate an offset.</td>
<td>Pixels to offset from screen when calculating position of scroll. If a single number is provided, the offset will be applied in both top and bottom directions. To provide a unique, bottom and top offset just provide an object <code>offset: { top: 10 }</code> or <code>offset: { top: 10, bottom: 5 }</code>. Use a function when you need to dynamically calculate an offset.</td>
</tr>
</tbody>
</table>
......
js/dropdown.js
View file @ 18766db6
......@@ -40,7 +40,7 @@
clearMenus()
if (!isActive) {
if ('ontouchstart' in document.documentElement) {
if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
// if mobile we we use a backdrop because click events don't delegate
$('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus)
}
......@@ -52,9 +52,9 @@
$parent
.toggleClass('open')
.trigger('shown.bs.dropdown')
}
$this.focus()
$this.focus()
}
return false
}
......
js/modal.js
View file @ 18766db6
......@@ -25,7 +25,7 @@
var Modal = function (element, options) {
this.options = options
this.$element = $(element).on('click.dismiss.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))
this.$element = $(element)
this.$backdrop =
this.isShown = null
......@@ -54,6 +54,8 @@
this.escape()
this.$element.on('click.dismiss.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))
this.backdrop(function () {
var transition = $.support.transition && that.$element.hasClass('fade')
......@@ -76,7 +78,7 @@
var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget })
transition ?
that.$element
that.$element.find('.modal-dialog') // wait for modal to slide in
.one($.support.transition.end, function () {
that.$element.focus().trigger(e)
})
......
js/tests/unit/modal.js
View file @ 18766db6
......@@ -174,4 +174,23 @@ $(function () {
})
.modal("show")
})
test("should close reopened modal with [data-dismiss=modal] click", function () {
stop()
$.support.transition = false
var div = $("<div id='modal-test'><div class='contents'><div id='close' data-dismiss='modal'></div></div></div>")
div
.bind("shown.bs.modal", function () {
$('#close').click()
ok(!$('#modal-test').is(":visible"), 'modal hidden')
})
.one("hidden.bs.modal", function() {
div.one('hidden.bs.modal', function () {
start()
}).modal("show")
})
.modal("show")
div.remove()
})
})
js/tests/vendor/jquery.js
View file @ 18766db6
This source diff could not be displayed because it is too large. You can view the blob instead.
js/tooltip.js
View file @ 18766db6
......@@ -108,10 +108,11 @@
clearTimeout(self.timeout)
self.hoverState = 'in'
if (!self.options.delay || !self.options.delay.show) return self.show()
self.hoverState = 'in'
self.timeout = setTimeout(function () {
self.timeout = setTimeout(function () {
if (self.hoverState == 'in') self.show()
}, self.options.delay.show)
}
......@@ -122,10 +123,11 @@
clearTimeout(self.timeout)
self.hoverState = 'out'
if (!self.options.delay || !self.options.delay.hide) return self.hide()
self.hoverState = 'out'
self.timeout = setTimeout(function () {
self.timeout = setTimeout(function () {
if (self.hoverState == 'out') self.hide()
}, self.options.delay.hide)
}
......@@ -258,7 +260,9 @@
var $tip = this.tip()
var e = $.Event('hide.bs.' + this.type)
function complete() { $tip.detach() }
function complete() {
if (that.hoverState != 'in') $tip.detach()
}
this.$element.trigger(e)
......
js/transition.js
View file @ 18766db6
......@@ -42,7 +42,7 @@
// http://blog.alexmaccaw.com/css-transitions
$.fn.emulateTransitionEnd = function (duration) {
var called = false, $el = this
var called = false, $el = this
$(this).one($.support.transition.end, function () { called = true })
var callback = function () { if (!called) $($el).trigger($.support.transition.end) }
setTimeout(callback, duration)
......
less/bootstrap.less
View file @ 18766db6
......@@ -21,43 +21,38 @@
@import "type.less";
@import "code.less";
@import "grid.less";
@import "tables.less";
@import "forms.less";
@import "buttons.less";
// Components: common
// Components
@import "component-animations.less";
@import "input-groups.less";
@import "dropdowns.less";
@import "list-group.less";
@import "panels.less";
@import "wells.less";
@import "close.less";
// Components: Nav
@import "button-groups.less";
@import "input-groups.less";
@import "navs.less";
@import "navbar.less";
@import "button-groups.less";
@import "breadcrumbs.less";
@import "pagination.less";
@import "pager.less";
@import "labels.less";
@import "badges.less";
@import "jumbotron.less";
@import "thumbnails.less";
@import "alerts.less";
@import "progress-bars.less";
@import "media.less";
@import "list-group.less";
@import "panels.less";
@import "wells.less";
@import "close.less";
// Components: Popovers
// Components w/ JavaScript
@import "modals.less";
@import "tooltip.less";
@import "popovers.less";
// Components: Misc
@import "alerts.less";
@import "thumbnails.less";
@import "media.less";
@import "labels.less";
@import "badges.less";
@import "progress-bars.less";
@import "carousel.less";
@import "jumbotron.less";
// Utility classes
@import "utilities.less"; // Has to be last to override when necessary
@import "utilities.less";
@import "responsive-utilities.less";
less/grid.less
View file @ 18766db6
......@@ -272,9 +272,9 @@
// Note that `.col-lg-12` doesn't get floated on purpose—there's no need since
// it's full-width.
@media (min-width: @screen-large-desktop) {
@media (min-width: @screen-lg-desktop) {
.container {
max-width: @container-large-desktop;
max-width: @container-lg-desktop;
}
.col-lg-1,
......
less/jumbotron.less
View file @ 18766db6
......@@ -11,6 +11,7 @@
line-height: (@line-height-base * 1.5);
color: @jumbotron-lead-color;
background-color: @jumbotron-bg;
h1 {
line-height: 1;
color: @jumbotron-heading-color;
......@@ -19,9 +20,19 @@
line-height: 1.4;
}
.container & {
border-radius: @border-radius-large; // Only round corners at higher resolutions if contained in a container
}
@media screen and (min-width: @screen-tablet) {
padding: 50px 60px;
border-radius: @border-radius-large; // Only round corners at higher resolutions
padding-top: 50px;
padding-bottom: 50px;
.container & {
padding-left: 60px;
padding-right: 60px;
}
h1 {
font-size: (@font-size-base * 4.5);
}
......
less/mixins.less
View file @ 18766db6
......@@ -558,7 +558,7 @@
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-small) {
@media (min-width: @screen-sm) {
float: left;
width: percentage((@columns / @grid-columns));
}
......@@ -566,17 +566,17 @@
// Generate the small column offsets
.make-sm-column-offset(@columns) {
@media (min-width: @screen-small) {
@media (min-width: @screen-sm) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-push(@columns) {
@media (min-width: @screen-small) {
@media (min-width: @screen-sm) {
left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-pull(@columns) {
@media (min-width: @screen-small) {
@media (min-width: @screen-sm) {
right: percentage((@columns / @grid-columns));
}
}
......@@ -591,7 +591,7 @@
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-medium) {
@media (min-width: @screen-md) {
float: left;
width: percentage((@columns / @grid-columns));
}
......@@ -599,17 +599,17 @@
// Generate the large column offsets
.make-md-column-offset(@columns) {
@media (min-width: @screen-medium) {
@media (min-width: @screen-md) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-md-column-push(@columns) {
@media (min-width: @screen-medium) {
@media (min-width: @screen-md) {
left: percentage((@columns / @grid-columns));
}
}
.make-md-column-pull(@columns) {
@media (min-width: @screen-medium) {
@media (min-width: @screen-md) {
right: percentage((@columns / @grid-columns));
}
}
......@@ -624,7 +624,7 @@
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-large) {
@media (min-width: @screen-lg) {
float: left;
width: percentage((@columns / @grid-columns));
}
......@@ -632,17 +632,17 @@
// Generate the large column offsets
.make-lg-column-offset(@columns) {
@media (min-width: @screen-large) {
@media (min-width: @screen-lg) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-push(@columns) {
@media (min-width: @screen-large) {
@media (min-width: @screen-lg) {
left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-pull(@columns) {
@media (min-width: @screen-large) {
@media (min-width: @screen-lg) {
right: percentage((@columns / @grid-columns));
}
}
......
less/navbar.less
View file @ 18766db6
......@@ -30,8 +30,6 @@
// styling of responsive aspects.
.navbar-header {
padding-left: @navbar-padding-horizontal;
padding-right: @navbar-padding-horizontal;
.clearfix();
@media (min-width: @grid-float-breakpoint) {
......@@ -66,8 +64,6 @@
@media (min-width: @grid-float-breakpoint) {
width: auto;
padding-right: 0;
padding-left: 0;
border-top: 0;
box-shadow: none;
......@@ -85,6 +81,22 @@
}
// Both navbar header and collapse
//
// 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;
}
}
//
// Navbar alignment options
//
......@@ -130,8 +142,7 @@
.navbar-brand {
float: left;
padding-top: @navbar-padding-vertical;
padding-bottom: @navbar-padding-vertical;
padding: @navbar-padding-vertical @navbar-padding-horizontal;
font-size: @font-size-large;
line-height: @line-height-computed;
color: @navbar-brand-color;
......@@ -141,6 +152,12 @@
text-decoration: none;
background-color: @navbar-brand-hover-bg;
}
@media (min-width: @grid-float-breakpoint) {
.navbar > .container & {
margin-left: -@navbar-padding-horizontal;
}
}
}
......@@ -152,6 +169,7 @@
.navbar-toggle {
position: relative;
float: right;
margin-right: @navbar-padding-horizontal;
padding: 9px 10px;
.navbar-vertical-align(34px);
background-color: transparent;
......@@ -176,9 +194,6 @@
}
@media (min-width: @grid-float-breakpoint) {
position: relative;
top: auto;
left: auto;
display: none;
}
}
......@@ -220,7 +235,7 @@
}
}
@media (max-width: @screen-phone-max) {
@media (max-width: @screen-xs-max) {
// Dropdowns get custom display when collapsed
.open .dropdown-menu {
position: static;
......@@ -315,7 +330,7 @@
.form-inline();
.form-group {
@media (max-width: @screen-phone-max) {
@media (max-width: @screen-xs-max) {
margin-bottom: 5px;
}
}
......@@ -516,7 +531,7 @@
}
}
@media (max-width: @screen-phone-max) {
@media (max-width: @screen-xs-max) {
// Dropdowns get custom display
.open .dropdown-menu {
> .dropdown-header {
......
less/navs.less
View file @ 18766db6
......@@ -162,7 +162,7 @@
}
}
@media (min-width: @screen-small) {
@media (min-width: @screen-sm) {
> li {
display: table-cell;
width: 1%;
......
less/panels.less
View file @ 18766db6
......@@ -15,6 +15,7 @@
// Panel contents
.panel-body {
padding: 15px;
.clearfix();
}
// List groups in panels
......
less/responsive-utilities.less
View file @ 18766db6
......@@ -37,98 +37,98 @@
.visible-xs {
.responsive-visibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-invisibility();
}
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-invisibility();
}
@media (min-width: @screen-large-desktop) {
@media (min-width: @screen-lg) {
.responsive-invisibility();
}
}
.visible-sm {
.responsive-invisibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-visibility();
}
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-invisibility();
}
@media (min-width: @screen-large-desktop) {
@media (min-width: @screen-lg) {
.responsive-invisibility();
}
}
.visible-md {
.responsive-invisibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-invisibility();
}
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-visibility();
}
@media (min-width: @screen-large-desktop) {
@media (min-width: @screen-lg) {
.responsive-invisibility();
}
}
.visible-lg {
.responsive-invisibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-invisibility();
}
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-invisibility();
}
@media (min-width: @screen-large-desktop) {
@media (min-width: @screen-lg) {
.responsive-visibility();
}
}
.hidden-xs {
.responsive-invisibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-visibility();
}
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-visibility();
}
@media (min-width: @screen-large-desktop) {
@media (min-width: @screen-lg) {
.responsive-visibility();
}
}
.hidden-sm {
.responsive-visibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-invisibility();
}
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-visibility();
}
@media (min-width: @screen-large-desktop) {
@media (min-width: @screen-lg) {
.responsive-visibility();
}
}
.hidden-md {
.responsive-visibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-visibility();
}
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-invisibility();
}
@media (min-width: @screen-large-desktop) {
@media (min-width: @screen-lg) {
.responsive-visibility();
}
}
.hidden-lg {
.responsive-visibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-visibility();
}
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-visibility();
}
@media (min-width: @screen-large-desktop) {
@media (min-width: @screen-lg) {
.responsive-invisibility();
}
}
......
less/theme.less 0 → 100644
View file @ 18766db6
//
// Load core variables and mixins
// --------------------------------------------------
@import "variables.less";
@import "mixins.less";
//
// Buttons
// --------------------------------------------------
// Common styles
.btn-default,
.btn-primary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger {
text-shadow: 0 -1px 0 rgba(0,0,0,.2);
@shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
.box-shadow(@shadow);
// Reset the shadow
&:active,
&.active {
.box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
}
}
// Mixin for generating new styles
.btn-styles(@btn-color: #555;) {
#gradient > .vertical(@start-color: @btn-color; @end-color: darken(@btn-color, 10%));
border-color: darken(@btn-color, 12%);
&:active,
&.active {
background-color: darken(@btn-color, 10%);
border-color: darken(@btn-color, 12%);
}
}
// Common styles
.btn {
// Remove the gradient for the pressed/active state
&:active,
&.active {
background-image: none;
}
}
// Apply the mixin to the buttons
.btn-default { .btn-styles(@btn-default-bg;); text-shadow: 0 1px 0 #fff; border-color: #ccc; }
.btn-primary { .btn-styles(@btn-primary-bg); }
.btn-success { .btn-styles(@btn-success-bg); }
.btn-warning { .btn-styles(@btn-warning-bg); }
.btn-danger { .btn-styles(@btn-danger-bg); }
.btn-info { .btn-styles(@btn-info-bg); }
//
// Images
// --------------------------------------------------
.thumbnail,
.img-thumbnail {
.box-shadow(0 1px 2px rgba(0,0,0,.075));
}
//
// Dropdowns
// --------------------------------------------------
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
#gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%));
background-color: darken(@dropdown-link-hover-bg, 5%);
}
//
// Navbar
// --------------------------------------------------
// Basic navbar
.navbar {
#gradient > .vertical(@start-color: lighten(@navbar-bg, 10%); @end-color: @navbar-bg;);
border-radius: @border-radius-base;
@shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075);
.box-shadow(@shadow);
.navbar-nav > .active > a {
background-color: @navbar-bg;
}
}
.navbar-brand,
.navbar-nav > li > a {
text-shadow: 0 1px 0 rgba(255,255,255,.25);
}
// Inverted navbar
.navbar-inverse {
#gradient > .vertical(@start-color: lighten(@navbar-inverse-bg, 10%); @end-color: @navbar-inverse-bg;);
.navbar-nav > .active > a {
background-color: @navbar-inverse-bg;
}
.navbar-brand,
.navbar-nav > li > a {
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
}
}
// Undo rounded corners in static and fixed navbars
.navbar-static-top,
.navbar-fixed-top,
.navbar-fixed-bottom {
border-radius: 0;
}
//
// Alerts
// --------------------------------------------------
// Common styles
.alert {
text-shadow: 0 1px 0 rgba(255,255,255,.2);
@shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.05);
.box-shadow(@shadow);
}
// Mixin for generating new styles
.alert-styles(@color) {
#gradient > .vertical(@start-color: @color; @end-color: darken(@color, 7.5%));
border-color: darken(@color, 15%);
}
// Apply the mixin to the alerts
.alert { .alert-styles(@alert-bg); }
.alert-success { .alert-styles(@alert-success-bg); }
.alert-info { .alert-styles(@alert-info-bg); }
.alert-danger { .alert-styles(@alert-danger-bg); }
//
// Progress bars
// --------------------------------------------------
// Give the progress background some depth
.progress {
#gradient > .vertical(@start-color: darken(@progress-bg, 4%); @end-color: @progress-bg;)
}
// Mixin for generating new styles
.progress-bar-styles(@color) {
#gradient > .vertical(@start-color: @color; @end-color: darken(@color, 10%));
}
// Apply the mixin to the progress bars
.progress-bar { .progress-bar-styles(@progress-bar-bg); }
.progress-bar-success { .progress-bar-styles(@progress-bar-success-bg); }
.progress-bar-info { .progress-bar-styles(@progress-bar-info-bg); }
.progress-bar-warning { .progress-bar-styles(@progress-bar-warning-bg); }
.progress-bar-danger { .progress-bar-styles(@progress-bar-danger-bg); }
//
// List groups
// --------------------------------------------------
.list-group {
border-radius: @border-radius-base;
.box-shadow(0 1px 2px rgba(0,0,0,.075));
}
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
text-shadow: 0 -1px 0 darken(@list-group-active-bg, 10%);
#gradient > .vertical(@start-color: @list-group-active-bg; @end-color: darken(@list-group-active-bg, 7.5%));
border-color: darken(@list-group-active-border, 7.5%);
}
//
// Panels
// --------------------------------------------------
// Common styles
.panel {
.box-shadow(0 1px 2px rgba(0,0,0,.05));
}
// Mixin for generating new styles
.panel-heading-styles(@color) {
#gradient > .vertical(@start-color: @color; @end-color: darken(@color, 5%));
}
// Apply the mixin to the panel headings only
.panel-heading { .panel-heading-styles(@panel-heading-bg); }
.panel-primary > .panel-heading { .panel-heading-styles(@panel-primary-heading-bg); }
.panel-success > .panel-heading { .panel-heading-styles(@panel-success-heading-bg); }
.panel-info > .panel-heading { .panel-heading-styles(@panel-info-heading-bg); }
.panel-warning > .panel-heading { .panel-heading-styles(@panel-warning-heading-bg); }
.panel-danger > .panel-heading { .panel-heading-styles(@panel-danger-heading-bg); }
//
// Wells
// --------------------------------------------------
.well {
#gradient > .vertical(@start-color: darken(@well-bg, 5%); @end-color: @well-bg;);
border-color: darken(@well-bg, 10%);
@shadow: inset 0 1px 3px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.1);
.box-shadow(@shadow);
}
less/variables.less
View file @ 18766db6
......@@ -193,26 +193,25 @@
// --------------------------------------------------
// Extra small screen / phone
@screen-xsmall: 480px;
@screen-phone: @screen-xsmall;
@screen-xs: 480px;
@screen-phone: @screen-xs;
// Small screen / tablet
@screen-small: 768px;
@screen-tablet: @screen-small;
@screen-sm: 768px;
@screen-tablet: @screen-sm;
// Medium screen / desktop
@screen-medium: 992px;
@screen-desktop: @screen-medium;
@screen-md: 992px;
@screen-desktop: @screen-md;
// Large screen / wide desktop
@screen-large: 1200px;
@screen-large-desktop: @screen-large;
@screen-lg: 1200px;
@screen-lg-desktop: @screen-lg;
// So media queries don't overlap when required, provide a maximum
@screen-phone-max: (@screen-small - 1);
@screen-small-max: (@screen-medium - 1);
@screen-tablet-max: (@screen-desktop - 1);
@screen-desktop-max: (@screen-large-desktop - 1);
@screen-xs-max: (@screen-sm - 1);
@screen-sm-max: (@screen-md - 1);
@screen-md-max: (@screen-lg - 1);
// Grid system
......@@ -600,10 +599,10 @@
// --------------------------------------------------
// Small screen / tablet
@container-tablet: ((720px + @grid-gutter-width));
@container-tablet: ((720px + @grid-gutter-width));
// Medium screen / desktop
@container-desktop: ((940px + @grid-gutter-width));
@container-desktop: ((940px + @grid-gutter-width));
// Large screen / wide desktop
@container-large-desktop: ((1140px + @grid-gutter-width));
@container-lg-desktop: ((1140px + @grid-gutter-width));
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