Commit afdaa0e6 authored by Mark Otto's avatar Mark Otto

Merge branch '3.0.0-wip' into bs3_homepage

parents afef74d0 2fa09759
......@@ -33,6 +33,9 @@ nbproject
*.komodoproject
.komodotools
# grunt-html-validation
validation-staus.json
# Folders to ignore
.hg
.svn
......
......@@ -2,4 +2,10 @@ language: node_js
node_js:
- 0.8
before_script:
- npm install -g grunt-cli
\ No newline at end of file
- gem install jekyll
- npm install -g grunt-cli
env:
global:
- secure: Besg41eyU+2mfxrywQ4ydOShMdc34ImaO0S0ENP+aCOBuyNBIgP59wy5tBMmyai2/8eInYeVps4Td96mWInMMxzTe3Bar7eTLG5tWVKRSr/wc4NBPZ/ppoPAmCEsz9Y+VptRH9/FO8n7hsL9EFZ+xBKbG+C0SccGoyBDpA5j7/w=
- secure: Ptiv7phCImFP3ALIz+sMQzrZg8k7C1gLZbFBhWxjnQr3g06wIfX3Ls5y9OHvxid+lOZZjISui3wzBVgpVHqwHUYf96+r0mo6/mJ+F4ffUmShZANVaIMD/JRTnXhUQJbvntGLvxn1EYWPdNM+2IHJrMipnjHxU9tkgAnlel4Zdew=
- TWBS_HAVE_OWN_BROWSERSTACK_KEY: ""
......@@ -48,7 +48,7 @@ We only accept issues that are bug reports or feature requests. Bugs must be iso
- Multiple-line approach (one property and value per line)
- Always a space after a property's colon (.e.g, `display: block;` and not `display:block;`)
- End all lines with a semi-colon
- For multiple, comma-separated selectors, place each selector on it's own line
- For multiple, comma-separated selectors, place each selector on its own line
- Attribute selectors, like `input[type="text"]` should always wrap the attribute's value in double quotes, for consistency and safety (see this [blog post on unquoted attribute values](http://mathiasbynens.be/notes/unquoted-attribute-values) that can lead to XSS attacks).
### JS
......
/* jshint node: true */
module.exports = function(grunt) {
"use strict";
// Project configuration.
grunt.initConfig({
// Metadata.
pkg: grunt.file.readJSON('package.json'),
banner: '/**\n' +
'* <%= pkg.name %>.js v<%= pkg.version %> by @fat and @mdo\n' +
'* Copyright <%= grunt.template.today("yyyy") %> <%= pkg.author %>\n' +
'* <%= _.pluck(pkg.licenses, "url").join(", ") %>\n' +
'*/\n',
jqueryCheck: 'if (!jQuery) { throw new Error(\"Bootstrap requires jQuery\") }\n\n',
// Task configuration.
clean: {
dist: ['dist']
},
concat: {
options: {
banner: '<%= banner %><%= jqueryCheck %>',
stripBanners: false
},
bootstrap: {
src: ['js/transition.js', 'js/alert.js', 'js/button.js', 'js/carousel.js', 'js/collapse.js', 'js/dropdown.js', 'js/modal.js', 'js/tooltip.js', 'js/popover.js', 'js/scrollspy.js', 'js/tab.js', 'js/affix.js'],
dest: 'dist/js/<%= pkg.name %>.js'
}
},
jshint: {
options: {
jshintrc: 'js/.jshintrc'
},
gruntfile: {
src: 'Gruntfile.js'
},
src: {
src: ['js/*.js']
},
test: {
src: ['js/tests/unit/*.js']
}
},
recess: {
options: {
compile: true
},
bootstrap: {
files: {
'dist/css/bootstrap.css': ['less/bootstrap.less']
}
},
min: {
options: {
compress: true
},
files: {
'dist/css/bootstrap.min.css': ['less/bootstrap.less']
}
}
},
uglify: {
options: {
banner: '<%= banner %>'
},
bootstrap: {
files: {
'dist/js/<%= pkg.name %>.min.js': ['<%= concat.bootstrap.dest %>']
}
}
},
qunit: {
options: {
inject: 'js/tests/unit/phantom.js'
},
files: ['js/tests/*.html']
},
connect: {
server: {
options: {
port: 3000,
base: '.'
}
}
"use strict";
// Project configuration.
grunt.initConfig({
// Metadata.
pkg: grunt.file.readJSON('package.json'),
banner: '/**\n' +
'* <%= pkg.name %>.js v<%= pkg.version %> by @fat and @mdo\n' +
'* Copyright <%= grunt.template.today("yyyy") %> <%= pkg.author %>\n' +
'* <%= _.pluck(pkg.licenses, "url").join(", ") %>\n' +
'*/\n',
jqueryCheck: 'if (!jQuery) { throw new Error(\"Bootstrap requires jQuery\") }\n\n',
// Task configuration.
clean: {
dist: ['dist']
},
jshint: {
options: {
jshintrc: 'js/.jshintrc'
},
gruntfile: {
src: 'Gruntfile.js'
},
src: {
src: ['js/*.js']
},
test: {
src: ['js/tests/unit/*.js']
}
},
concat: {
options: {
banner: '<%= banner %><%= jqueryCheck %>',
stripBanners: false
},
bootstrap: {
src: [
'js/transition.js',
'js/alert.js',
'js/button.js',
'js/carousel.js',
'js/collapse.js',
'js/dropdown.js',
'js/modal.js',
'js/tooltip.js',
'js/popover.js',
'js/scrollspy.js',
'js/tab.js',
'js/affix.js'
],
dest: 'dist/js/<%= pkg.name %>.js'
}
},
uglify: {
options: {
banner: '<%= banner %>'
},
bootstrap: {
src: ['<%= concat.bootstrap.dest %>'],
dest: 'dist/js/<%= pkg.name %>.min.js'
}
},
recess: {
options: {
compile: true
},
bootstrap: {
src: ['less/bootstrap.less'],
dest: 'dist/css/<%= pkg.name %>.css'
},
min: {
options: {
compress: true
},
watch: {
src: {
files: '<%= jshint.src.src %>',
tasks: ['jshint:src', 'qunit']
},
test: {
files: '<%= jshint.test.src %>',
tasks: ['jshint:test', 'qunit']
},
recess: {
files: 'less/*.less',
tasks: ['recess']
}
src: ['less/bootstrap.less'],
dest: 'dist/css/<%= pkg.name %>.min.css'
}
},
qunit: {
options: {
inject: 'js/tests/unit/phantom.js'
},
files: ['js/tests/*.html']
},
connect: {
server: {
options: {
port: 3000,
base: '.'
}
});
}
},
jekyll: {
docs: {}
},
validation: {
options: {
reset: true,
},
files: {
src: ["_gh_pages/**/*.html"]
}
},
watch: {
src: {
files: '<%= jshint.src.src %>',
tasks: ['jshint:src', 'qunit']
},
test: {
files: '<%= jshint.test.src %>',
tasks: ['jshint:test', 'qunit']
},
recess: {
files: 'less/*.less',
tasks: ['recess']
}
}
});
// These plugins provide necessary tasks.
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-qunit');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-html-validation');
grunt.loadNpmTasks('grunt-jekyll');
grunt.loadNpmTasks('grunt-recess');
grunt.loadNpmTasks('browserstack-runner');
// Docs HTML validation task
grunt.registerTask('validate-docs', ['jekyll', 'validation']);
// Test task.
var testSubtasks = ['jshint', 'qunit', 'validate-docs'];
// Only run BrowserStack tests under Travis
if (process.env.TRAVIS) {
// Only run BrowserStack tests if this is a mainline commit in twbs/bootstrap, or you have your own BrowserStack key
if ((process.env.TRAVIS_REPO_SLUG === 'twbs/bootstrap' && process.env.TRAVIS_PULL_REQUEST === 'false') || process.env.TWBS_HAVE_OWN_BROWSERSTACK_KEY) {
testSubtasks.push('browserstack_runner');
}
}
grunt.registerTask('test', testSubtasks);
// These plugins provide necessary tasks.
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-qunit');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-recess');
// JS distribution task.
grunt.registerTask('dist-js', ['concat', 'uglify']);
// CSS distribution task.
grunt.registerTask('dist-css', ['recess']);
// Test task.
grunt.registerTask('test', ['jshint', 'qunit']);
// Full distribution task.
grunt.registerTask('dist', ['clean', 'dist-css', 'dist-js']);
// JS distribution task.
grunt.registerTask('dist-js', ['concat', 'uglify']);
// Default task.
grunt.registerTask('default', ['test', 'dist']);
// CSS distribution task.
grunt.registerTask('dist-css', ['recess']);
// task for building customizer
grunt.registerTask('build-customizer', 'Add scripts/less files to customizer.', function () {
var fs = require('fs')
// Full distribution task.
grunt.registerTask('dist', ['clean', 'dist-css', 'dist-js']);
function getFiles(type) {
var files = {}
fs.readdirSync(type)
.filter(function (path) {
return new RegExp('\\.' + type + '$').test(path)
})
.forEach(function (path) {
return files[path] = fs.readFileSync(type + '/' + path, 'utf8')
})
return 'var __' + type + ' = ' + JSON.stringify(files) + '\n'
}
// Default task.
grunt.registerTask('default', ['test', 'dist']);
var customize = fs.readFileSync('customize.html', 'utf-8')
var files = '<!-- generated -->\n<script id="files">\n' + getFiles('js') + getFiles('less') + '<\/script>\n<!-- /generated -->'
fs.writeFileSync('customize.html', customize.replace(/<!-- generated -->(.|[\n\r])*<!-- \/generated -->/, files))
});
};
......@@ -63,13 +63,13 @@ When completed, you'll be able to run the various Grunt commands provided from t
### Available Grunt commands
#### Build - `grunt`
Run `grunt` to run tests locally and compile the CSS and JavaScript into `/dist`. **Requires recess and uglify-js.**
Run `grunt` to run tests locally and compile the CSS and JavaScript into `/dist`. **Requires [recess](https://github.com/twitter/recess) and [uglify-js](https://github.com/mishoo/UglifyJS).**
#### Only compile CSS and JavaScript - `grunt dist`
`grunt dist` creates the `/dist` directory with compiled files. **Requires recess and uglify-js.**
`grunt dist` creates the `/dist` directory with compiled files. **Requires [recess](https://github.com/twitter/recess) and [uglify-js](https://github.com/mishoo/UglifyJS).**
#### Tests - `grunt test`
Runs jshint and qunit tests headlessly in [phantomjs](http://code.google.com/p/phantomjs/) (used for ci). **Requires phantomjs.**
Runs jshint and qunit tests headlessly in [phantomjs](https://github.com/ariya/phantomjs/) (used for CI). **Requires [phantomjs](https://github.com/ariya/phantomjs/).**
#### Watch - `grunt watch`
This is a convenience method for watching just Less files and automatically building them whenever you save.
......
......@@ -13,10 +13,7 @@ port: 9001
# Custom vars
repo: https://github.com/twbs/bootstrap
download: https://github.com/twbs/bootstrap/archive/3.0.0-wip.zip
download_dist: http://getbootstrap.com/bs-v3.0.0-rc1-dist.zip
examples: http://examples.getbootstrap.com
examples_repo: https://github.com/twbs/bootstrap-examples
download_dist: http://getbootstrap.com/bs-v3.0.0-rc.2-dist.zip
glyphicons: http://glyphicons.getbootstrap.com
glyphicons_repo: https://github.com/twbs/bootstrap-glyphicons
......@@ -24,5 +21,5 @@ glyphicons_repo: https://github.com/twbs/bootstrap-glyphicons
blog: http://blog.getbootstrap.com
expo: http://expo.getbootstrap.com
cdn_css: //netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css
cdn_js: //netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js
cdn_css: //netdna.bootstrapcdn.com/bootstrap/3.0.0-wip/css/bootstrap.min.css
cdn_js: //netdna.bootstrapcdn.com/bootstrap/3.0.0-wip/js/bootstrap.min.js
<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
\ No newline at end of file
<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script>var z = document.createElement("script"); z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
......@@ -4,18 +4,25 @@
<script src="{{ page.base_url }}assets/js/jquery.js"></script>
<script src="{{ page.base_url }}dist/js/bootstrap.js"></script>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script src="http://platform.twitter.com/widgets.js"></script>
<script src="{{ page.base_url }}assets/js/holder.js"></script>
<script src="{{ page.base_url }}assets/js/application.js"></script>
{% if page.slug == "customize" %}
<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 %}
<!-- Analytics
================================================== -->
<script>
var _gauges = _gauges || [];
(function() {
var t = document.createElement('script');
t.type = 'text/javascript';
t.async = true;
t.id = 'gauges-tracker';
t.setAttribute('data-site-id', '4f0dc9fef5a1f55508000013');
......
......@@ -31,12 +31,12 @@
<link rel="apple-touch-icon-precomposed" href="{{ page.base_url }}assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="{{ page.base_url }}assets/ico/favicon.png">
<script type="text/javascript">
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-146052-10']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
var ga = document.createElement('script'); ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
......
......@@ -12,6 +12,8 @@
<ul class="nav">
<li><a href="#btn-groups-single">Basic button group</a></li>
<li><a href="#btn-groups-toolbar">Button toolbar</a></li>
<li><a href="#btn-groups-sizing">Button group sizing</a></li>
<li><a href="#btn-groups-nested">Nested button groups</a></li>
<li><a href="#btn-groups-vertical">Vertical variation</a></li>
<li><a href="#btn-groups-justified">Justified link buttons</a></li>
</ul>
......@@ -50,9 +52,7 @@
<li>
<a href="#navbar">Navbar</a>
<ul class="nav">
<li><a href="#navbar-basic">Basic navbar</a></li>
<li><a href="#navbar-nav">Nav links</a></li>
<li><a href="#navbar-forms">Forms in navbars</a></li>
<li><a href="#navbar-default">Default navbar</a></li>
<li><a href="#navbar-buttons">Buttons in navbars</a></li>
<li><a href="#navbar-text">Text in navbars</a></li>
<li><a href="#navbar-links">Links in navbars</a></li>
......@@ -60,7 +60,7 @@
<li><a href="#navbar-fixed-top">Fixed top navbar</a></li>
<li><a href="#navbar-fixed-bottom">Fixed bottom navbar</a></li>
<li><a href="#navbar-static-top">Static top navbar</a></li>
<li><a href="#navbar-responsive">Responsive navbar</a></li>
<li><a href="#navbar-inverted">Inverted navbar</a></li>
</ul>
</li>
<li><a href="#breadcrumbs">Breadcrumbs</a></li>
......@@ -80,13 +80,19 @@
<li><a href="#type-components-page-header">Page header</a></li>
</ul>
</li>
<li><a href="#thumbnails">Thumbnails</a></li>
<li>
<a href="#thumbnails">Thumbnails</a>
<ul class="nav">
<li><a href="#thumbnails-default">Default thumbnails</a></li>
<li><a href="#thumbnails-custom-content">Custom content</a></li>
</ul>
</li>
<li>
<a href="#alerts">Alerts</a>
<ul class="nav">
<li><a href="#alerts-default">Default alert</a></li>
<li><a href="#alerts-block">Block alerts</a></li>
<li><a href="#alerts-alternatives">Contextual alternatives</a></li>
<li><a href="#alerts-dismissable">Dismissable alerts</a></li>
<li><a href="#alerts-links">Links in alerts</a></li>
</ul>
</li>
......@@ -100,7 +106,13 @@
<li><a href="#progress-stacked">Stacked</a></li>
</ul>
</li>
<li><a href="#media">Media object</a></li>
<li>
<a href="#media">Media object</a>
<ul class="nav">
<li><a href="#media-default">Default media</a></li>
<li><a href="#media-list">Media list</a></li>
</ul>
</li>
<li>
<a href="#list-group">List group</a>
<ul class="nav">
......
......@@ -15,10 +15,12 @@
<li>
<a href="#grid">Grid system</a>
<ul class="nav">
<li><a href="#grid-media-queries">Media queries</a></li>
<li><a href="#grid-options">Available options</a></li>
<li><a href="#grid-example-basic">Ex: Stacked-to-horizonal</a></li>
<li><a href="#grid-example-mixed">Ex: Mobile-desktop</a></li>
<li><a href="#grid-example-mixed-complete">Ex: Mobile, tablet, desktop</a></li>
<li><a href="#grid-responsive-resets">Responsive column resets</a></li>
<li><a href="#grid-offsetting">Offset columns</a></li>
<li><a href="#grid-nesting">Nested columns</a></li>
<li><a href="#grid-column-ordering">Column ordering</a></li>
......@@ -46,7 +48,7 @@
<li><a href="#tables-bordered">Bordered tables</a></li>
<li><a href="#tables-hover-rows">Hover rows</a></li>
<li><a href="#tables-condensed">Condensed tables</a></li>
<li><a href="#tables-row-classes">Contextual row classes</a></li>
<li><a href="#tables-contextual-classes">Contextual classes</a></li>
</ul>
</li>
<li>
......@@ -56,6 +58,7 @@
<li><a href="#forms-inline">Inline variation</a></li>
<li><a href="#forms-horizontal">Horizontal variation</a></li>
<li><a href="#forms-controls">Supported controls</a></li>
<li><a href="#forms-controls-static">Static form control</a></li>
<li><a href="#forms-control-states">Control states</a></li>
<li><a href="#forms-control-sizes">Control sizing</a></li>
<li><a href="#forms-help-text">Help text</a></li>
......
......@@ -11,12 +11,24 @@
<li>
<a href="#template">Basic template</a>
</li>
<li>
<a href="#examples">Examples</a>
</li>
<li>
<a href="#disable-responsive">Disabling responsiveness</a>
</li>
<li>
<a href="#browsers">Browser support</a>
</li>
<li>
<a href="#third-parties">Third party support</a>
</li>
<li>
<a href="#accessibility">Accessibility</a>
</li>
<li>
<a href="#license-faqs">License FAQs</a>
</li>
<li>
<a href="#customizing">Customizing Bootstrap</a>
</li>
\ No newline at end of file
</li>
<div class="navbar navbar-inverse navbar-fixed-top bs-docs-nav">
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
<div class="container">
<a href="{{ page.base_url }}" class="navbar-brand">Bootstrap 3 RC1</a>
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse collapse bs-navbar-collapse">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-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 href="{{ page.base_url }}" class="navbar-brand">Bootstrap 3 RC2</a>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li{% if page.slug == "getting-started" %} class="active"{% endif %}>
<a href="{{ page.base_url }}getting-started">Getting started</a>
......@@ -24,6 +27,6 @@
<a href="{{ page.base_url }}customize">Customize</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</header>
<div class="bs-social">
<ul class="bs-social-buttons">
<li>
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&repo=bootstrap&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&amp;repo=bootstrap&amp;type=watch&amp;count=true" width="100" height="20" title="Star on GitHub"></iframe>
</li>
<li>
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&repo=bootstrap&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="102px" height="20px"></iframe>
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&amp;repo=bootstrap&amp;type=fork&amp;count=true" width="102" height="20" title="Fork on GitHub"></iframe>
</li>
<li class="follow-btn">
<a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @twbootstrap</a>
</li>
<li class="tweet-btn">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://twbs.github.com/bootstrap/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Twitter Bootstrap">Tweet</a>
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://getbootstrap.com/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Twitter Bootstrap">Tweet</a>
</li>
</ul>
</div>
......@@ -6,12 +6,13 @@
<!-- 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">
<div class="bs-header" id="content" role="banner">
<div class="container">
<h1>{{ page.title }}</h1>
<p>{{ page.lead }}</p>
......@@ -22,9 +23,9 @@
<!-- Callout for the old docs link -->
{% include old-bs-docs.html %}
<div class="bs-customize-placeholder">
<div class="container bs-docs-container">
<p class="lead">Until RC2, the Bootstrap 3 customizer will be disabled. In the mean time, snag the <a href="{{ site.repo }}/releases">compiled CSS and JavaScript</a>. Hang tight!</p>
<div class="container bs-docs-container">
<div class="col-lg-12">
{{ content }}
</div>
</div>
......
......@@ -6,12 +6,13 @@
<!-- Place anything custom after this. -->
</head>
<body>
<a class="sr-only" href="#content">Skip navigation</a>
<!-- Docs master nav -->
{% include nav-main.html %}
<!-- Docs page layout -->
<div class="bs-header">
<div class="bs-header" id="content">
<div class="container">
<h1>{{ page.title }}</h1>
<p>{{ page.lead }}</p>
......@@ -24,8 +25,8 @@
<div class="container bs-docs-container">
<div class="row">
<div class="col-lg-3">
<div class="bs-sidebar">
<div class="col-md-3">
<div class="bs-sidebar hidden-print" role="complementary">
<ul class="nav bs-sidenav">
{% if page.slug == "getting-started" %}
{% include nav-getting-started.html %}
......@@ -41,7 +42,7 @@
</ul>
</div>
</div>
<div class="col-lg-9">
<div class="col-md-9" role="main">
{{ content }}
</div>
</div>
......@@ -50,7 +51,7 @@
<!-- Footer
================================================== -->
<footer class="bs-footer">
<footer class="bs-footer" role="contentinfo">
{% 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>
......
......@@ -6,6 +6,7 @@
<!-- Place anything custom after this. -->
</head>
<body class="bs-docs-home">
<a class="sr-only" href="#content">Skip navigation</a>
<!-- Docs master nav -->
{% include nav-main.html %}
......@@ -16,7 +17,7 @@
<!-- Callout for the old docs link -->
{% include old-bs-docs.html %}
<div class="container">
<footer class="container" role="contentinfo">
{% include social-buttons.html %}
<ul class="bs-masthead-links">
......@@ -24,7 +25,7 @@
<a href="{{ site.repo }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'GitHub project']);">GitHub project</a>
</li>
<li>
<a href="{{ site.examples }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Examples']);">Examples</a>
<a href="../getting-started#examples" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Examples']);">Examples</a>
</li>
<li>
<a href="{{ site.glyphicons }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Glyphicons']);">Glyphicons</a>
......@@ -33,7 +34,7 @@
<a href="{{ site.expo }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Expo']);">Bootstrap Expo</a>
</li>
</ul>
</div>
</footer>
<!-- JS and analytics only. -->
{% include footer.html %}
......
......@@ -55,6 +55,10 @@ body {
.bs-docs-nav {
background-color: #563d7c;
border-color: #463265;
}
.bs-docs-nav .navbar-collapse {
border-color: #463265;
}
.bs-docs-nav .navbar-brand {
color: #fff;
......@@ -127,8 +131,8 @@ body {
/* Download button */
.bs-masthead .btn-outline {
margin-top: 5px;
margin-bottom: 5px;
margin-top: 20px;
margin-bottom: 20px;
padding: 18px 24px;
font-size: 21px;
}
......@@ -178,6 +182,7 @@ body {
margin-top: 15px;
}
.bs-customizer input[type="text"] {
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
background-color: #fafafa;
}
.bs-customizer .help-block {
......@@ -188,6 +193,10 @@ body {
text-align: center;
}
#less-section label {
font-weight: normal;
}
/* Docs pages and sections
......@@ -213,7 +222,7 @@ body {
}
.bs-docs-section + .bs-docs-section {
margin-top: 80px;
padding-top: 80px;
}
/* Ads in page headers */
......@@ -343,6 +352,17 @@ body {
}
/* Examples grid
-------------------------------------------------- */
.bs-examples h4 {
margin-bottom: 5px;
}
.bs-examples p {
margin-bottom: 20px;
}
/* Special grid styles
-------------------------------------------------- */
......@@ -368,7 +388,7 @@ body {
.bs-example {
position: relative;
padding: 45px 15px 15px;
margin: 0 -15px -1px;
margin: 0 -15px 15px;
background-color: #fafafa;
box-shadow: inset 0 3px 6px rgba(0,0,0,.05);
border-color: #e5e5e5 #eee #eee;
......@@ -389,11 +409,10 @@ body {
}
/* Tweak display of the examples */
.bs-example + .prettyprint,
.bs-example + .highlight {
margin-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
margin: -15px -15px 15px;
border-radius: 0;
border-width: 0 0 1px;
}
/* Tweak content of examples for optimum awesome */
......@@ -401,16 +420,15 @@ body {
.bs-example > ul:last-child,
.bs-example > ol:last-child,
.bs-example > blockquote:last-child,
.bs-example > input:last-child,
.bs-example > select:last-child,
.bs-example > textarea:last-child,
.bs-example > .form-control:last-child,
.bs-example > .table:last-child,
.bs-example > .navbar:last-child
.bs-example > .jumbotron:last-child,
.bs-example > .alert:last-child,
.bs-example > .panel:last-child,
.bs-example > .list-group:last-child,
.bs-example > .well:last-child {
.bs-example > .well:last-child,
.bs-example > .progress:last-child {
margin-bottom: 0;
}
.bs-example > p > .close {
......@@ -418,17 +436,15 @@ body {
}
/* Typography */
.bs-example-type .table td {
.bs-example-type .table td:last-child {
color: #999;
vertical-align: middle;
}
.bs-example-type .table td,
.bs-example-type .table th {
.bs-example-type .table td {
padding: 15px 0;
border-color: #eee;
}
.bs-example-type .table tr:first-child td,
.bs-example-type .table tr:first-child th {
.bs-example-type .table tr:first-child td {
border-top: 0;
}
.bs-example-type h1,
......@@ -440,12 +456,24 @@ body {
margin: 0;
}
/* Forms */
.bs-example.form-inline select,
.bs-example.form-inline input[type="text"],
.bs-example.form-inline input[type="password"] {
width: 180px;
/* Images */
.bs-example > .img-circle,
.bs-example > .img-rounded,
.bs-example > .img-thumbnail {
margin: 5px;
}
/* Buttons */
.bs-example > .btn,
.bs-example > .btn-group {
margin-top: 5px;
margin-bottom: 5px;
}
.bs-example > .btn-toolbar + .btn-toolbar {
margin-top: 10px;
}
/* Forms */
.bs-example-control-sizing select,
.bs-example-control-sizing input[type="text"] + input[type="text"] {
margin-top: 10px;
......@@ -453,6 +481,9 @@ body {
.bs-example-form .input-group {
margin-bottom: 10px;
}
.bs-example > textarea.form-control {
resize: vertical;
}
/* List groups */
.bs-example > .list-group {
......@@ -467,7 +498,6 @@ body {
.bs-navbar-bottom-example {
z-index: 1;
padding: 0;
min-height: 110px;
overflow: hidden; /* cut the drop shadows off */
}
.bs-navbar-top-example .navbar-fixed-top,
......@@ -476,33 +506,35 @@ body {
margin-left: 0;
margin-right: 0;
}
.bs-navbar-top-example .navbar-fixed-top {
top: -1px;
}
.bs-navbar-bottom-example .navbar-fixed-bottom {
bottom: -1px;
}
.bs-navbar-top-example {
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
padding-bottom: 45px;
}
.bs-navbar-top-example:after {
top: auto;
bottom: 15px;
-webkit-border-radius: 0 4px 0 4px;
-moz-border-radius: 0 4px 0 4px;
border-radius: 0 4px 0 4px;
}
.bs-navbar-top-example .navbar-fixed-top {
top: -1px;
}
.bs-navbar-bottom-example {
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
padding-top: 45px;
}
.bs-navbar-bottom-example .navbar-fixed-bottom {
bottom: -1px;
}
.bs-navbar-bottom-example .navbar {
margin-bottom: 0;
}
@media (min-width: 768px) {
.bs-navbar-top-example {
border-radius: 0 0 4px 4px;
}
.bs-navbar-bottom-example {
border-radius: 4px 4px 0 0;
}
}
/* Example modals */
.bs-example-modal {
background-color: #f5f5f5;
......@@ -523,19 +555,11 @@ body {
}
/* Example dropdowns */
.bs-example > .dropdown > .dropdown-menu,
.bs-example-submenu > .pull-left > .dropup > .dropdown-menu,
.bs-example-submenu > .pull-left > .dropdown > .dropdown-menu {
.bs-example > .dropdown > .dropdown-menu {
position: static;
display: block;
margin-bottom: 5px;
}
.bs-example-submenu {
min-height: 230px;
}
.bs-example-submenu > .pull-left + .pull-left {
margin-left: 20px;
}
/* Example tabbable tabs */
.bs-example-tabs .nav-tabs {
......@@ -546,6 +570,10 @@ body {
.bs-example-tooltips {
text-align: center;
}
.bs-example-tooltips > .btn {
margin-top: 5px;
margin-bottom: 5px;
}
/* Popovers */
.bs-example-popover {
......@@ -561,19 +589,6 @@ body {
}
/* Example templates
-------------------------------------------------- */
.bs-examples h4 {
margin-bottom: 5px;
}
.bs-examples p {
margin-bottom: 20px;
}
/* Responsive docs
-------------------------------------------------- */
......@@ -607,6 +622,10 @@ body {
border-bottom: 0;
}
}
.bs-table-scrollable .highlight pre {
white-space: normal;
}
/* Related: responsive utilities tables */
.table code {
......@@ -641,17 +660,9 @@ body {
------------------------- */
.responsive-utilities-test {
margin-top: 5px;
padding-left: 0;
list-style: none;
overflow: hidden; /* clear floats */
}
.responsive-utilities-test li {
position: relative;
float: left;
width: 25%;
}
.responsive-utilities-test li + li {
margin-left: 10px;
.responsive-utilities-test .col-xs-6 {
margin-bottom: 10px;
}
.responsive-utilities-test span {
padding: 15px 10px;
......@@ -661,13 +672,25 @@ body {
text-align: center;
border-radius: 4px;
}
.responsive-utilities-test.visible-on [class*="hidden"],
.responsive-utilities-test.hidden-on [class*="visible"] {
.visible-on .col-xs-6 .hidden-xs,
.visible-on .col-xs-6 .hidden-sm,
.visible-on .col-xs-6 .hidden-md,
.visible-on .col-xs-6 .hidden-lg,
.hidden-on .col-xs-6 .visible-xs,
.hidden-on .col-xs-6 .visible-sm,
.hidden-on .col-xs-6 .visible-md,
.hidden-on .col-xs-6 .visible-lg {
color: #999;
border: 1px solid #ddd;
}
.responsive-utilities-test.visible-on [class*="visible"],
.responsive-utilities-test.hidden-on [class*="hidden"] {
.visible-on .col-xs-6 .visible-xs,
.visible-on .col-xs-6 .visible-sm,
.visible-on .col-xs-6 .visible-md,
.visible-on .col-xs-6 .visible-lg,
.hidden-on .col-xs-6 .hidden-xs,
.hidden-on .col-xs-6 .hidden-sm,
.hidden-on .col-xs-6 .hidden-md,
.hidden-on .col-xs-6 .hidden-lg {
color: #468847;
background-color: #dff0d8;
border: 1px solid #d6e9c6;
......@@ -724,6 +747,11 @@ body {
.bs-social-buttons .twitter-share-button {
width: 98px !important;
}
/* Style the GitHub buttons via CSS instead of inline attributes */
.github-btn {
border: 0;
overflow: hidden;
}
......@@ -731,7 +759,7 @@ body {
-------------------------------------------------- */
/* Pseudo :focus state for showing how it looks in the docs */
input.focused {
#focusedInput {
border-color: rgba(82,168,236,.8);
outline: 0;
outline: thin dotted \9; /* IE6-9 */
......@@ -813,6 +841,15 @@ input.focused {
border-radius: 4px 4px 0 0;
box-shadow: none;
}
.bs-example + .prettyprint,
.bs-example + .highlight {
margin-top: -16px;
margin-left: 0;
margin-right: 0;
border-width: 1px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.carbonad {
margin: 0 !important;
......@@ -824,10 +861,6 @@ input.focused {
.bs-sidebar {
display: block;
}
/* Show the hidden subnavs when space allows it */
.bs-sidebar .nav > .active > ul {
display: block;
}
/* Tweak display of docs jumbotrons */
.bs-masthead {
......@@ -837,7 +870,7 @@ input.focused {
.bs-masthead h1 {
font-size: 100px;
}
.bs-masthead p {
.bs-masthead .lead {
margin-left: 15%;
margin-right: 15%;
font-size: 30px;
......@@ -852,7 +885,23 @@ input.focused {
/* Tablets/desktops and up */
@media screen and (min-width: 992px) {
.bs-header h1,
.bs-header p {
margin-right: 380px;
}
.carbonad {
position: absolute;
top: 20px;
right: 0;
padding: 15px !important;
width: 330px !important;
min-height: 132px;
}
/* Show the hidden subnavs when space allows it */
.bs-sidebar .nav > .active > ul {
display: block;
}
/* Widen the fixed sidebar */
.bs-sidebar.affix,
.bs-sidebar.affix-bottom {
......@@ -870,19 +919,6 @@ input.focused {
margin-top: 0;
margin-bottom: 0;
}
.bs-header h1,
.bs-header p {
margin-right: 380px;
}
.carbonad {
position: absolute;
top: 20px;
right: 0;
padding: 15px !important;
width: 330px !important;
min-height: 132px;
}
}
/* Large desktops and up */
......@@ -891,7 +927,7 @@ input.focused {
/* Widen the fixed sidebar again */
.bs-sidebar.affix-bottom,
.bs-sidebar.affix {
width: 270px;
width: 263px;
}
}
......@@ -16,16 +16,12 @@
offset: navHeight
})
$('.bs-docs-container [href=#]').click(function (e) {
e.preventDefault()
$window.on('load', function () {
$body.scrollspy('refresh')
})
$body.on('click', '.bs-sidenav [href^=#]', function (e) {
var $target = $(this.getAttribute('href'))
e.preventDefault() // prevent browser scroll
$window.scrollTop($target.offset().top - navHeight + 5)
$('.bs-docs-container [href=#]').click(function (e) {
e.preventDefault()
})
// back to top
......@@ -54,7 +50,8 @@
// tooltip demo
$('.tooltip-demo').tooltip({
selector: "[data-toggle=tooltip]"
selector: "[data-toggle=tooltip]",
container: "body"
})
$('.tooltip-test').tooltip()
......@@ -81,88 +78,6 @@
// carousel demo
$('.bs-docs-carousel-example').carousel()
// javascript build logic
var inputsComponent = $("#less input")
, inputsPlugin = $("#plugins input")
, inputsVariables = $("#less-variables input")
// toggle all plugin checkboxes
$('#less .toggle').on('click', function (e) {
e.preventDefault()
inputsComponent.prop('checked', !inputsComponent.is(':checked'))
})
$('#plugins .toggle').on('click', function (e) {
e.preventDefault()
inputsPlugin.prop('checked', !inputsPlugin.is(':checked'))
})
$('#less-variables .toggle').on('click', function (e) {
e.preventDefault()
inputsVariables.val('')
})
// request built javascript
$('.bs-customize-download .btn').on('click', function (e) {
e.preventDefault()
var css = $("#less input:checked")
.map(function () { return this.value })
.toArray()
, js = $("#plugins input:checked")
.map(function () { return this.value })
.toArray()
, vars = {}
$("#less-variables input")
.each(function () {
$(this).val() && (vars[ $(this).prev().text() ] = $(this).val())
})
$.ajax({
type: 'POST'
, url: /localhost/.test(window.location) ? 'http://localhost:9001' : 'http://bootstrap.herokuapp.com'
, dataType: 'jsonpi'
, params: {
js: js
, css: css
, vars: vars
}
})
})
})
// Modified from the original jsonpi https://github.com/benvinegar/jquery-jsonpi
$.ajaxTransport('jsonpi', function(opts, originalOptions, jqXHR) {
var url = opts.url;
return {
send: function(_, completeCallback) {
var name = 'jQuery_iframe_' + jQuery.now()
, iframe, form
iframe = $('<iframe>')
.attr('name', name)
.appendTo('head')
form = $('<form>')
.attr('method', opts.type) // GET or POST
.attr('action', url)
.attr('target', name)
$.each(opts.params, function(k, v) {
$('<input>')
.attr('type', 'hidden')
.attr('name', k)
.attr('value', typeof v == 'string' ? v : JSON.stringify(v))
.appendTo(form)
})
form.appendTo('body').submit()
}
}
})
}(window.jQuery)
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 generateUrl() {
var vars = {}
$('#less-variables-section input')
.each(function () {
$(this).val() && (vars[ $(this).prev().text() ] = $(this).val())
})
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()
}
if ($.isEmptyObject(data.vars) && !data.css.length && !data.js.length) return
window.location = jQuery.param.querystring('/customize/', data)
}
function parseUrl() {
var data = jQuery.deparam.querystring()
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 (data.css) {
for (var i = 0; i < data.css.length; i++) {
var input = $('input[value="'+data.css[i]+'"]')
input && input.prop('checked', false)
}
}
if (data.vars) {
// todo (fat): vars
}
}
function generateZip(css, js, complete) {
if (!css && !js) return alert('you want to build nothing… o_O')
var zip = new JSZip()
if (css) {
var cssFolder = zip.folder('css')
for (var fileName in css) {
cssFolder.file(fileName, css[fileName])
}
}
if (js) {
var jsFolder = zip.folder('js')
for (var fileName in js) {
jsFolder.file(fileName, js[fileName])
}
}
var content = zip.generate()
location.href = 'data:application/zip;base64,' + content
complete()
}
function generateCustomCSS(vars) {
var result = ''
for (var key in vars) {
result += key + ': ' + vars[key] + ';\n'
}
return result + '\n\n'
}
function generateCSS() {
var $checked = $('#less-section input:checked')
if (!$checked.length) return false
var result = {}
var vars = {}
var css = ''
$('#less-variables-section input')
.each(function () {
$(this).val() && (vars[ $(this).prev().text() ] = $(this).val())
})
css += __less['variables.less']
if (vars) css += generateCustomCSS(vars)
css += __less['mixins.less']
css += $checked
.map(function () { return __less[this.value] })
.toArray()
.join('\n')
css = css.replace(/@import[^\n]*/gi, '') //strip any imports
try {
var parser = new less.Parser({
paths: ['variables.less', 'mixins.less']
, optimization: 0
, filename: 'bootstrap.css'
}).parse(css, function (err, tree) {
if (err) return alert(err)
result = {
'bootstrap.css' : cw + tree.toCSS(),
'bootstrap.min.css' : cw + tree.toCSS({ compress: true })
}
})
} catch (err) {
return alert(err)
}
return result
}
function generateJavascript() {
var $checked = $('#plugin-section input:checked')
if (!$checked.length) return false
var js = $checked
.map(function () { return __js[this.value] })
.toArray()
.join('\n')
return {
'bootstrap.js': js,
'bootstrap.min.js': cw + uglify(js)
}
}
var $downloadBtn = $('#btn-download').on('click', function (e) {
e.preventDefault()
$downloadBtn.addClass('loading')
generateZip(generateCSS(), generateJavascript(), function () {
$downloadBtn.removeClass('loading')
setTimeout(function () {
generateUrl()
}, 1)
})
})
var inputsComponent = $('#less-section input')
var inputsPlugin = $('#plugin-section input')
var inputsVariables = $('#less-variables-section input')
$('#less-section .toggle').on('click', function (e) {
e.preventDefault()
inputsComponent.prop('checked', !inputsComponent.is(':checked'))
})
$('#plugin-section .toggle').on('click', function (e) {
e.preventDefault()
inputsPlugin.prop('checked', !inputsPlugin.is(':checked'))
})
$('#less-variables-section .toggle').on('click', function (e) {
e.preventDefault()
inputsVariables.val('')
})
try {
parseUrl()
} catch (e) {
// maybe alert user that we can't parse their url
}
}
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
{
"name": "bootstrap",
"version": "3.0.0",
"main": ["./dist/js/bootstrap.min.js", "./dist/js/bootstrap.js", "./dist/css/bootstrap.min.css", "./dist/css/bootstrap.css"],
"main": ["./dist/js/bootstrap.js", "./dist/css/bootstrap.css"],
"ignore": [
"**/.*"
],
......
{
"username": "--secure--",
"key": "--secure--",
"test_path": "js/tests/index.html",
"browsers": [
{
"browser": "firefox",
"browser_version": "latest",
"os": "OS X",
"os_version": "Mountain Lion"
},
{
"browser": "safari",
"browser_version": "latest",
"os": "OS X",
"os_version": "Mountain Lion"
},
{
"browser": "chrome",
"browser_version": "latest",
"os": "OS X",
"os_version": "Mountain Lion"
},
{
"browser": "firefox",
"browser_version": "latest",
"os": "Windows",
"os_version": "7"
},
{
"browser": "chrome",
"browser_version": "latest",
"os": "Windows",
"os_version": "7"
}
]
}
This diff is collapsed.
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
This diff is collapsed.
/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
body {
padding-bottom: 40px;
color: #5a5a5a;
}
/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */
/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
position: relative;
z-index: 15;
}
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
margin-bottom: 60px;
/* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
margin-top: -90px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
height: 500px;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
/* MARKETING CONTENT
-------------------------------------------------- */
/* Pad the edges of the mobile views a bit */
.marketing {
padding-left: 15px;
padding-right: 15px;
}
/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
text-align: center;
margin-bottom: 20px;
}
.marketing h2 {
font-weight: normal;
}
.marketing .col-lg-4 p {
margin-left: 10px;
margin-right: 10px;
}
/* Featurettes
------------------------- */
.featurette-divider {
margin: 80px 0; /* Space out the Bootstrap <hr> more */
}
.featurette {
padding-top: 120px; /* Vertically center images part 1: add padding above and below text. */
overflow: hidden; /* Vertically center images part 2: clear their floats. */
}
.featurette-image {
margin-top: -120px; /* Vertically center images part 3: negative margin up the image the same amount of the padding to center it. */
}
/* Give some space on the sides of the floated elements so text doesn't run right into it. */
.featurette-image.pull-left {
margin-right: 40px;
}
.featurette-image.pull-right {
margin-left: 40px;
}
/* Thin out the marketing headings */
.featurette-heading {
font-size: 50px;
font-weight: 300;
line-height: 1;
letter-spacing: -1px;
}
/* RESPONSIVE CSS
-------------------------------------------------- */
@media (min-width: 768px) {
/* Remve the edge padding needed for mobile */
.marketing {
padding-left: 0;
padding-right: 0;
}
/* Navbar positioning foo */
.navbar-wrapper {
margin-top: 20px;
}
/* The navbar becomes detached from the top, so we round the corners */
.navbar-wrapper .navbar {
border-radius: 4px;
}
/* Bump up size of carousel content */
.carousel-caption p {
margin-bottom: 20px;
font-size: 21px;
line-height: 1.4;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Carousel Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.css" rel="stylesheet">
<link href="../../dist/css/bootstrap-glyphicons.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="carousel.css" rel="stylesheet">
</head>
<!-- NAVBAR
================================================== -->
<body>
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse navbar-static-top">
<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>
</div>
</div>
</div>
</div>
</div>
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img data-src="holder.js/1500x500/auto/#777:#7a7a7a/text:First slide" alt="">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-large btn-primary" href="#">Sign up today</a></p>
</div>
</div>
</div>
<div class="item">
<img data-src="holder.js/1500x500/auto/#777:#7a7a7a/text:Second slide" alt="">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-large btn-primary" href="#">Learn more</a></p>
</div>
</div>
</div>
<div class="item">
<img data-src="holder.js/1500x500/auto/#777:#7a7a7a/text:Third slide" alt="">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-large btn-primary" href="#">Browse gallery</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div><!-- /.carousel -->
<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->
<div class="container marketing">
<!-- Three columns of text below the carousel -->
<div class="row">
<div class="col-lg-4">
<img class="img-circle" data-src="holder.js/140x140">
<h2>Heading</h2>
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
<p><a class="btn btn-default" href="#">View details &raquo;</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<img class="img-circle" data-src="holder.js/140x140">
<h2>Heading</h2>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
<p><a class="btn btn-default" href="#">View details &raquo;</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<img class="img-circle" data-src="holder.js/140x140">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-default" href="#">View details &raquo;</a></p>
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
<!-- START THE FEATURETTES -->
<hr class="featurette-divider">
<div class="featurette">
<img class="featurette-image img-circle pull-right" data-src="holder.js/512x512">
<h2 class="featurette-heading">First featurette heading. <span class="text-muted">It'll blow your mind.</span></h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
<hr class="featurette-divider">
<div class="featurette">
<img class="featurette-image img-circle pull-left" data-src="holder.js/512x512">
<h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
<hr class="featurette-divider">
<div class="featurette">
<img class="featurette-image img-circle pull-right" data-src="holder.js/512x512">
<h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
<hr class="featurette-divider">
<!-- /END THE FEATURETTES -->
<!-- FOOTER -->
<footer>
<p class="pull-right"><a href="#">Back to top</a></p>
<p>&copy; 2013 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
</footer>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../../assets/js/jquery.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<script src="../../assets/js/holder.js"></script>
</body>
</html>
.container {
padding-left: 15px;
padding-right: 15px;
}
h4 {
margin-top: 25px;
}
.row {
margin-bottom: 20px;
}
.row .row {
margin-top: 10px;
margin-bottom: 0;
}
[class*="col-"] {
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);
}
hr {
margin-top: 40px;
margin-bottom: 40px;
}
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Grid Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="grid.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Bootstrap grid examples</h1>
<p class="lead">Basic grid layouts to get you familiar with building within the Bootstrap grid system.</p>
</div>
<h3>Three equal columns</h3>
<p>Get three equal-width columns <strong>starting at desktops and scaling to large desktops</strong>. On mobile devices, tablets and below, the columns will automatically stack.</p>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<h3>Three unequal columns</h3>
<p>Get three columns <strong>starting at desktops and scaling to large desktops</strong> of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.</p>
<div class="row">
<div class="col-md-3">.col-md-3</div>
<div class="col-md-6">.col-md-6</div>
<div class="col-md-3">.col-md-3</div>
</div>
<h3>Two columns</h3>
<p>Get two columns <strong>starting at desktops and scaling to large desktops</strong>.</p>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<h3>Full width, single column</h3>
<p class="text-warning">No grid classes are necessary for full-width elements.</p>
<hr>
<h3>Two columns with two nested columns</h3>
<p>Per the documentation, nesting is easy—just put a row of columns within an existing row. This gives you two columns <strong>starting at desktops and scaling to large desktops</strong>, with another two (equal widths) within the larger column.</p>
<p>At mobile device sizes, tablets and down, these columns and their nested columns will stack.</p>
<div class="row">
<div class="col-md-8">
.col-md-8
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</div>
<div class="col-md-4">.col-md-4</div>
</div>
<hr>
<h3>Mixed: mobile and desktop</h3>
<p>The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.</p>
<p>Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.</p>
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-6">.col-xs-6 .col-md-6</div>
<div class="col-xs-6 col-md-6">.col-xs-6 .col-md-6</div>
</div>
<hr>
<h3>Mixed: mobile, tablet, and desktop</h3>
<p></p>
<div class="row">
<div class="col-xs-12 col-sm-8 col-lg-8">.col-xs-12 .col-lg-8</div>
<div class="col-xs-6 col-sm-4 col-lg-4">.col-xs-6 .col-lg-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4 col-lg-4">.col-xs-6 .col-sm-4 .col-lg-4</div>
<div class="col-xs-6 col-sm-4 col-lg-4">.col-xs-6 .col-sm-4 .col-lg-4</div>
<div class="col-xs-6 col-sm-4 col-lg-4">.col-xs-6 .col-sm-4 .col-lg-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-lg-6">.col-xs-6 .col-sm-6 .col-lg-6</div>
<div class="col-xs-6 col-sm-6 col-lg-6">.col-xs-6 .col-sm-6 .col-lg-6</div>
</div>
</div> <!-- /container -->
</body>
</html>
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
/* Move down content because we have a fixed navbar that is 50px tall */
body {
padding-top: 50px;
padding-bottom: 20px;
}
/* Set widths on the navbar form inputs since otherwise they're 100% wide */
.navbar-form input[type="text"],
.navbar-form input[type="password"] {
width: 180px;
}
/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* 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;
}
}
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
.jumbotron {
margin-top: 30px;
}
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
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