Skip to content
GitLab
Commit 1bc8607b authored by Mark Otto's avatar Mark Otto
Browse files

Merge branch 'master' into css-source-maps 

Conflicts:
	Gruntfile.js
parents 9e38e255 d15218a0
1 merge request!11804enable CSS source maps in grunt-contrib-less
Hide whitespace changes
Inline Side-by-side
Showing
with 543 additions and 119 deletions
+543 -119
examples/blog/index.html 0 → 100644
+ 171
- 0
View file @ 1bc8607b
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">
<title>Blog Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="blog.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="blog-masthead">
<div class="container">
<nav class="blog-nav">
<a class="blog-nav-item active" href="#">Home</a>
<a class="blog-nav-item" href="#">New features</a>
<a class="blog-nav-item" href="#">Press</a>
<a class="blog-nav-item" href="#">New hires</a>
<a class="blog-nav-item" href="#">About</a>
</nav>
</div>
</div>
<div class="container">
<div class="blog-header">
<h1 class="blog-title">The Bootstrap Blog</h1>
<p class="lead blog-description">The official example template of creating a blog with Bootstrap.</p>
</div>
<div class="row">
<div class="col-sm-8 blog-main">
<div class="blog-post">
<h2 class="blog-post-title">Sample blog post</h2>
<p class="blog-post-meta">December 1, 2013 by <a href="#">Mark</a></p>
<p>This blog post shows a few different types of content that's supported and styled with Bootstrap. Basic typography, images, and code are all supported.</p>
<hr>
<p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
<blockquote>
<p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</blockquote>
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
<h2>Heading</h2>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<h3>Sub-heading</h3>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<pre><code>Example code block</code></pre>
<p>Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
<h3>Sub-heading</h3>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<ul>
<li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>
<li>Donec id elit non mi porta gravida at eget metus.</li>
<li>Nulla vitae elit libero, a pharetra augue.</li>
</ul>
<p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p>
<ol>
<li>Vestibulum id ligula porta felis euismod semper.</li>
<li>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li>
<li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li>
</ol>
<p>Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.</p>
</div><!-- /.blog-post -->
<div class="blog-post">
<h2 class="blog-post-title">Another blog post</h2>
<p class="blog-post-meta">November 23, 2013 by <a href="#">Jacob</a></p>
<p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
<blockquote>
<p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</blockquote>
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div><!-- /.blog-post -->
<div class="blog-post">
<h2 class="blog-post-title">New feature</h2>
<p class="blog-post-meta">November 14, 2013 by <a href="#">Chris</a></p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<ul>
<li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>
<li>Donec id elit non mi porta gravida at eget metus.</li>
<li>Nulla vitae elit libero, a pharetra augue.</li>
</ul>
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
<p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p>
</div><!-- /.blog-post -->
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</div><!-- /.blog-main -->
<div class="col-sm-3 col-sm-offset-1 blog-sidebar">
<div class="sidebar-module sidebar-module-inset">
<h4>About</h4>
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
<div class="sidebar-module">
<h4>Archives</h4>
<ol class="list-unstyled">
<li><a href="#">December 2013</a></li>
<li><a href="#">November 2013</a></li>
<li><a href="#">October 2013</a></li>
<li><a href="#">September 2013</a></li>
<li><a href="#">August 2013</a></li>
<li><a href="#">July 2013</a></li>
<li><a href="#">June 2013</a></li>
<li><a href="#">May 2013</a></li>
<li><a href="#">April 2013</a></li>
<li><a href="#">March 2013</a></li>
<li><a href="#">February 2013</a></li>
<li><a href="#">January 2013</a></li>
</ol>
</div>
<div class="sidebar-module">
<h4>Elsewhere</h4>
<ol class="list-unstyled">
<li><a href="#">GitHub</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ol>
</div>
</div><!-- /.blog-sidebar -->
</div><!-- /.row -->
</div><!-- /.container -->
<div class="blog-footer">
<p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
<p>
<a href="#">Back to top</a>
</p>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<script src="../../docs-assets/js/holder.js"></script>
</body>
</html>
examples/cover/cover.css
+ 1
- 0
View file @ 1bc8607b
......@@ -40,6 +40,7 @@ body {
.site-wrapper {
display: table;
width: 100%;
height: 100%; /* For at leat Firefox */
min-height: 100%;
}
.site-wrapper-inner {
......
examples/non-responsive/index.html
+ 4
- 0
View file @ 1bc8607b
......@@ -82,6 +82,10 @@
<h3>Regarding navbars</h3>
<p>As a heads up, the navbar component is rather tricky here in that the styles for displaying it are rather specific and detailed. Overrides to ensure desktop styles display are not as performant or sleek as one would like. Just be aware there may be potential gotchas as you build on top of this example when using the navbar.</p>
<h3>Browsers, scrolling, and fixed elements</h3>
<p>Non-responsive layouts highlight a key drawback to fixed elements. <strong class="text-danger">Any fixed component, such as a fixed navbar, will not be scrollable when the viewport becomes narrower than the page content.</strong> In other words, given the non-responsive container width of 970px and a viewport of 800px, you'll potentially hide 170px of content.</p>
<p>There is no way around this as it's default browser behavior. The only solution is a responsive layout or using a non-fixed element.</p>
<h3>Non-responsive grid system</h3>
<div class="row">
<div class="col-xs-4">One third</div>
......
examples/screenshots/blog.jpg 0 → 100644
+ 0
- 0
View file @ 1bc8607b
examples/screenshots/blog.jpg

119 KB

getting-started.html
+ 36
- 13
View file @ 1bc8607b
......@@ -277,6 +277,15 @@ bootstrap/
<h4>Dashboard</h4>
<p>Basic structure for a admin dashboard with fixed sidebar and navbar.</p>
</div>
<div class="col-xs-6 col-md-4">
<a class="thumbnail" href="../examples/blog/">
<img src="../examples/screenshots/blog.jpg" alt="">
</a>
<h4>Blog</h4>
<p>Simple two-column blog layout with custom navigation, header, and type.</p>
</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-md-4">
<a class="thumbnail" href="../examples/non-responsive/">
<img src="../examples/screenshots/non-responsive.jpg" alt="">
......@@ -284,8 +293,6 @@ bootstrap/
<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="">
......@@ -746,11 +753,11 @@ bootstrap/
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="browsers">Browser support</h1>
<h1 id="support">Browser and device support</h1>
</div>
<p class="lead">Bootstrap is built to work best in the latest desktop and mobile browsers, meaning older browsers might display differently styled, though fully functional, renderings of certain components.</p>
<h3>Supported browsers</h3>
<h3 id="support-browsers">Supported browsers</h3>
<p>Specifically, we support the latest versions of the following:</p>
<ul>
<li>Chrome (Mac, Windows, iOS, and Android)</li>
......@@ -761,7 +768,7 @@ bootstrap/
</ul>
<p>Unofficially, Bootstrap should look and behave well enough in Chromium and Chrome for Linux, Firefox for Linux, and Internet Explorer 7, though they are not officially supported.</p>
<h3>Internet Explorer 8 and 9</h3>
<h3 id="support-ie8-ie9">Internet Explorer 8 and 9</h3>
<p>Internet Explorer 8 and 9 are also supported, however, please be aware that some CSS3 properties and HTML5 elements are not fully supported by these browsers. In addition, <strong>Internet Explorer 8 requires the use of <a href="https://github.com/scottjehl/Respond">Respond.js</a> to enable media query support.</strong></p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
......@@ -804,7 +811,7 @@ bootstrap/
<p>Visit <a href="http://caniuse.com/">Can I use...</a> for details on browser support of CSS3 and HTML5 features.</p>
<h3>Internet Explorer 8 and Respond.js</h3>
<h3 id="support-ie8-respondjs">Internet Explorer 8 and Respond.js</h3>
<p>Beware of the following caveats when using Respond.js in your development and production environments for Internet Explorer 8.</p>
<h4 id="respond-js-x-domain">Respond.js and cross-domain CSS</h4>
<p>Using Respond.js with CSS hosted on a different (sub)domain (for example, on a CDN) requires some additional setup. <a href="https://github.com/scottjehl/Respond/blob/master/README.md#cdnx-domain-setup">See the Respond.js docs</a> for details.</p>
......@@ -813,10 +820,10 @@ bootstrap/
<h4 id="respond-import">Respond.js and <code>@import</code></h4>
<p>Respond.js doesn't work with CSS that's referenced via <code>@import</code>. In particular, some Drupal configurations are known to use <code>@import</code>. <a href="https://github.com/scottjehl/Respond/blob/master/README.md#support--caveats">See the Respond.js docs</a> for details.</p>
<h3>Internet Explorer 8 and box-sizing</h3>
<h3 id="support-ie8-box-sizing">Internet Explorer 8 and box-sizing</h3>
<p>IE8 does not fully support <code>box-sizing: border-box;</code> when combined with <code>min-width</code>, <code>max-width</code>, <code>min-height</code>, or <code>max-height</code>. For that reason, as of v3.0.1, we no longer use <code>max-width</code> on <code>.container</code>s.</p>
<h3 id="ie-compat-modes">IE Compatibility modes</h3>
<h3 id="support-ie-compatibility-modes">IE Compatibility modes</h3>
<p>Bootstrap is not supported in the old Internet Explorer compatibility modes. To be sure you're using the latest rendering mode for IE, consider including the appropriate <code>&lt;meta&gt;</code> tag in your pages:</p>
{% highlight html %}
<meta http-equiv="X-UA-Compatible" content="IE=edge">
......@@ -825,7 +832,7 @@ bootstrap/
<p>This tag is included in all Bootstrap's documentation and examples to ensure the best rendering possible in each supported version of Internet Explorer.</p>
<p>See <a href="http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge">this StackOverflow question</a> for more information.</p>
<h3 id="ie-10-width">Internet Explorer 10 in Windows 8 and Windows Phone 8</h3>
<h3 id="support-ie10-width">Internet Explorer 10 in Windows 8 and Windows Phone 8</h3>
<p>Internet Explorer 10 doesn't differentiate <strong>device width</strong> from <strong>viewport width</strong>, and thus doesn't properly apply the media queries in Bootstrap's CSS. Normally you'd just add a quick snippet of CSS to fix this:</p>
{% highlight css %}
@-ms-viewport { width: device-width; }
......@@ -853,7 +860,7 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
<p>For more information and usage guidelines, read <a href="http://timkadlec.com/2013/01/windows-phone-8-and-device-width/">Windows Phone 8 and Device-Width</a>.</p>
<p>As a heads up, we include this in the Bootstrap docs as an example.</p>
<h3 id="safari-percentages">Safari percent rounding</h3>
<h3 id="support-safari-percentages">Safari percent rounding</h3>
<p>As of Safari v6.1 for OS X and Safari for iOS v7.0.1, Safari's rendering engine has some trouble with the number of decimal places used in our <code>.col-*-1</code> grid classes. So if you have 12 individual grid columns, you'll notice that they come up short compared to other rows of columns. We can't do much here (<a href="https://github.com/twbs/bootstrap/issues/9282">see #9282</a>) but you do have some options:</p>
<ul>
<li>Add <code>.pull-right</code> to your last grid column to get the hard-right alignment</li>
......@@ -861,14 +868,30 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
</ul>
<p>We'll keep an eye on this though and update our code if we have an easy solution.</p>
<h3 id="mobile-modals">Modals and mobile devices</h3>
<h3 id="support-fixed-position-keyboards">Modals, navbars, and virtual keyboards</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>
<h4>Virtual keyboards</h4>
<p>Also, note that if you're using inputs in your modal – iOS has a rendering bug that doesn't update the position of fixed elements when the virtual keyboard is triggered. A few workarounds for this include 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>
<p>Also, note that if you're using inputs in your modal or navbar, iOS has a rendering bug that doesn't update the position of fixed elements when the virtual keyboard is triggered. A few workarounds for this include 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 id="browser-zoom">Browser zooming</h3>
<h3 id="support-browser-zoom">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>
<h3 id="support-android-stock-browser">Android stock browser</h3>
<p>Out of the box, Android 4.1 (and even some newer releases apparently) ship with the Browser app as the default web browser of choice (as opposed to Chrome). Unfortunately, the Browser app has lots of bugs and inconsistencies with CSS in general.</p>
<h4>Select menus</h4>
<p>On <code>&lt;select&gt;</code> elements, the Android stock browser will not display the side controls if there is a <code>border-radius</code> and/or <code>border</code> applied. Use the snippet of code below to remove the offending CSS and render the <code>&lt;select&gt;</code> as an unstyled element on the Android stock broswer. The useragent sniffing avoids interference with Chrome, Safari, and Mozilla browsers.</p>
{% highlight html %}
<script>
var nua = navigator.userAgent;
var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1);
if (isAndroid) {
$('select.form-control').removeClass('form-control').css('width', '100%');
}
</script>
{% endhighlight %}
<p>Want to see an example? <a href="http://jsbin.com/OyaqoDO/2">Check out this JS Bin demo.</a></p>
</div>
......
javascript.html
+ 109
- 13
View file @ 1bc8607b
......@@ -74,7 +74,7 @@ $('#myModal').on('show.bs.modal', function (e) {
<div class="bs-callout bs-callout-warning" id="callout-third-party-libs">
<h4>Third-party libraries</h4>
<p><strong>Bootstrap does not officially support third-party JavaScript libraries</strong> like Prototype or jQuery UI. Despite <code>.noConflict</code> and namespaced events, there may be compatibility problems that you need to fix on your own. Ask on the <a href="http://groups.google.com/group/twitter-bootstrap">mailing list</a> if you need help.</p>
<p><strong>Bootstrap does not officially support third-party JavaScript libraries</strong> like Prototype or jQuery UI. Despite <code>.noConflict</code> and namespaced events, there may be compatibility problems that you need to fix on your own.</p>
</div>
</div>
......@@ -110,7 +110,7 @@ $('#myModal').on('show.bs.modal', function (e) {
</div>
<div class="bs-callout bs-callout-warning">
<h4>Mobile device caveats</h4>
<p>There are some caveats regarding using modals on mobile devices. <a href="{{ page.base_url }}getting-started#mobile-modals">See our browser support docs</a> for details.</p>
<p>There are some caveats regarding using modals on mobile devices. <a href="{{ page.base_url }}getting-started#fixed-position-keyboards">See our browser support docs</a> for details.</p>
</div>
<h3>Static example</h3>
......@@ -223,9 +223,9 @@ $('#myModal').on('show.bs.modal', function (e) {
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
</div>
</div>
{% endhighlight %}
......@@ -235,6 +235,67 @@ $('#myModal').on('show.bs.modal', function (e) {
<p>Additionally, you may give a description of your modal dialog with <code>aria-describedby</code> on <code>.modal</code>.</p>
</div>
<h2 id="modals-sizes">Optional sizes</h2>
<p>Modals have two optional sizes, available via modifier classes to be placed on a <code>.modal-dialog</code>.</p>
<div class="bs-example">
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-modal-lg">Large modal</button>
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-modal-sm">Small modal</button>
</div>
{% highlight html %}
<!-- Large modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-modal-lg">Large modal</button>
<div class="modal fade bs-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
...
</div>
</div>
</div>
<!-- Small modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-modal-sm">Small modal</button>
<div class="modal fade bs-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
...
</div>
</div>
</div>
{% endhighlight %}
<!-- Modal content for the above example -->
<div class="modal fade bs-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myLargeModalLabel">Large modal</h4>
</div>
<div class="modal-body">
...
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade bs-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="mySmallModalLabel">Small modal</h4>
</div>
<div class="modal-body">
...
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<h2 id="modals-usage">Usage</h2>
<p>The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds <code>.model-open</code> to the <code>&lt;body&gt;</code> to override default scrolling behavior and generates a <code>.modal-backdrop</code> to provide a click area for dismissing shown modals when clicking outside the modal.</p>
......@@ -843,6 +904,15 @@ $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
</div>
</div><!-- /example -->
{% highlight html %}
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
{% endhighlight %}
<div class="bs-callout bs-callout-danger">
<h4>Opt-in functionality</h4>
......@@ -865,9 +935,17 @@ $('#example').tooltip(options)
{% endhighlight %}
<h3>Markup</h3>
<p>The generated markup of a tooltip is rather simple, though it does require a position (by default, set to <code>top</code> by the plugin).</p>
<p>The required markup for a tooltip is only a <code>data</code> attribute and <code>title</code> on the HTML element you wish to have a tooltip. The generated markup of a tooltip is rather simple, though it does require a position (by default, set to <code>top</code> by the plugin).</p>
<div class="bs-callout bs-callout-warning">
<h4>Multiple-line links</h4>
<p>Sometimes you want to add a tooltip to a hyperlink that wraps multiple lines. The default behavior of the tooltip plugin is to center it horizontally and vertically. Add <code>white-space: nowrap;</code> to your anchors to avoid this.</p>
</div>
{% highlight html linenos %}
<div class="tooltip">
<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="first tooltip">Hover over me</a>
<!-- Generated markup by the plugin -->
<div class="tooltip top">
<div class="tooltip-inner">
Tooltip!
</div>
......@@ -950,11 +1028,6 @@ $('#example').tooltip(options)
<p>Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.</p>
</div>
<h3>Markup</h3>
{% highlight html %}
<a href="#" data-toggle="tooltip" title="first tooltip">Hover over me</a>
{% endhighlight %}
<h3>Methods</h3>
<h4>$().tooltip(options)</h4>
......@@ -1100,6 +1173,29 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
</button>
</div>
</div><!-- /example -->
{% highlight html %}
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on left
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on top
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on bottom
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on right
</button>
{% endhighlight %}
<div class="bs-callout bs-callout-warning">
<h4>Multiple-line links</h4>
<p>Sometimes you want to add a tooltip to a hyperlink that wraps multiple lines. The default behavior of the tooltip plugin is to center it horizontally and vertically. Add <code>white-space: nowrap;</code> to your anchors to avoid this.</p>
</div>
<h2 id="popovers-usage">Usage</h2>
......@@ -1957,7 +2053,7 @@ $('#myCarousel').on('slide.bs.carousel', function () {
<p>The affix plugin toggles between three classes, each representing a particular state: <code>.affix</code>, <code>.affix-top</code>, and <code>.affix-bottom</code>. You must provide the styles for these classes yourself (independent of this plugin) to handle the actual positions.</p>
<p>Here's how the affix plugin works:</p>
<ol>
<li>To start, the plugin adds <code>.affix-top</code> to indicate the element is in it's top-most position. At this point no CSS positioning is required.</li>
<li>To start, the plugin adds <code>.affix-top</code> to indicate the element is in its top-most position. At this point no CSS positioning is required.</li>
<li>Scrolling past the element you want affixed should trigger the actual affixing. This is where <code>.affix</code> replaces <code>.affix-top</code> and sets <code>position: fixed;</code> (provided by Bootstrap's code CSS).</li>
<li>If a bottom offset is defined, scrolling past that should replace <code>.affix</code> with <code>.affix-bottom</code>. Since offsets are optional, setting one requires you to set the appropriate CSS. In this case, add <code>position: absolute;</code> when necessary. The plugin uses the data attribute or JavaScript option to determine where to position the element from there.</li>
</ol>
......
js/.jscs.json
+ 1
- 1
View file @ 1bc8607b
{
"requireSpaceAfterKeywords": ["if", "else", "for", "while", "do", "switch", "return"],
"requireSpaceAfterKeywords": ["if", "else", "for", "while", "do", "switch", "return", "try", "catch"],
"requireSpacesInFunctionExpression": { "beforeOpeningCurlyBrace": true },
"disallowLeftStickedOperators": ["?", "+", "-", "/", "*", "=", "==", "===", "!=", "!==", ">", ">=", "<", "<="],
"requireRightStickedOperators": ["!"],
......
js/modal.js
+ 0
- 1
View file @ 1bc8607b
......@@ -149,7 +149,6 @@
}
Modal.prototype.backdrop = function (callback) {
var that = this
var animate = this.$element.hasClass('fade') ? 'fade' : ''
if (this.isShown && this.options.backdrop) {
......
less/breadcrumbs.less
+ 1
- 1
View file @ 1bc8607b
......@@ -4,7 +4,7 @@
.breadcrumb {
padding: 8px 15px;
padding: @breadcrumb-padding-vertical @breadcrumb-padding-horizontal;
margin-bottom: @line-height-computed;
list-style: none;
background-color: @breadcrumb-bg;
......
less/button-groups.less
+ 8
- 9
View file @ 1bc8607b
......@@ -37,18 +37,17 @@
// Optional: Group multiple button groups together for a toolbar
.btn-toolbar {
margin-left: -5px; // Offset the first child's margin
&:extend(.clearfix all);
.btn-group {
.btn-group,
.input-group {
float: left;
}
// Space out series of button groups
> .btn,
> .btn-group {
+ .btn,
+ .btn-group {
margin-left: 5px;
}
> .btn-group,
> .input-group {
margin-left: 5px;
}
}
......@@ -188,13 +187,13 @@
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
.btn-group-vertical > .btn-group:first-child {
.btn-group-vertical > .btn-group:first-child:not(:last-child) {
> .btn:last-child,
> .dropdown-toggle {
.border-bottom-radius(0);
}
}
.btn-group-vertical > .btn-group:last-child > .btn:first-child {
.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
.border-top-radius(0);
}
......
less/dropdowns.less
+ 28
- 2
View file @ 1bc8607b
......@@ -46,6 +46,8 @@
background-clip: padding-box;
// Aligns the dropdown menu to right
//
// Deprecated as of 3.1 in favor of `.dropdown-menu-[dir]`
&.pull-right {
right: 0;
left: auto;
......@@ -126,6 +128,25 @@
}
}
// Menu positioning
//
// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
// menu with the parent.
.dropdown-menu-right {
left: auto; // Reset the default from `.dropdown-menu`
right: 0;
}
// With v3, we enabled auto-flipping if you have a dropdown within a right
// aligned nav component. To enable the undoing of that, we provide an override
// to restore the default dropdown menu alignment.
//
// This is only for left-aligning a dropdown menu within a `.navbar-right` or
// `.pull-right` nav component.
.dropdown-menu-left {
left: 0;
right: auto;
}
// Dropdown section headers
.dropdown-header {
display: block;
......@@ -142,7 +163,7 @@
right: 0;
bottom: 0;
top: 0;
z-index: @zindex-dropdown - 10;
z-index: (@zindex-dropdown - 10);
}
// Right aligned dropdowns
......@@ -180,7 +201,12 @@
@media (min-width: @grid-float-breakpoint) {
.navbar-right {
.dropdown-menu {
.pull-right > .dropdown-menu();
.dropdown-menu-right();
}
// Necessary for overrides of the default right aligned menu.
// Will remove come v4 in all likelihood.
.dropdown-menu-left {
.dropdown-menu-left();
}
}
}
......
less/forms.less
+ 59
- 8
View file @ 1bc8607b
......@@ -155,6 +155,14 @@ output {
}
}
// Special styles for iOS date input
//
// In Mobile Safari, date inputs require a pixel line-height that matches the
// given height of the input.
input[type="date"] {
line-height: @input-height-base;
}
// Form groups
//
......@@ -226,7 +234,12 @@ input[type="checkbox"],
}
}
// Form control sizing
//
// Build on `.form-control` with modifier classes to decrease or increase the
// height and font-size of form controls.
.input-sm {
.input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
}
......@@ -240,15 +253,35 @@ input[type="checkbox"],
//
// Apply contextual and semantic states to individual form controls.
// Warning
.has-feedback {
// Enable absolute positioning
position: relative;
// Ensure icons don't overlap text
.form-control {
padding-right: (@input-height-base * 1.25);
}
// Feedback icon (requires .glyphicon classes)
.form-control-feedback {
position: absolute;
top: (@line-height-computed + 5); // Height of the `label` and its margin
right: 0;
display: block;
width: @input-height-base;
height: @input-height-base;
line-height: @input-height-base;
text-align: center;
}
}
// Feedback states
.has-warning {
.form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg);
}
// Error
.has-error {
.form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
}
// Success
.has-success {
.form-control-validation(@state-success-text; @state-success-text; @state-success-bg);
}
......@@ -294,7 +327,7 @@ input[type="checkbox"],
// Kick in the inline
@media (min-width: @screen-sm) {
// Inline-block all the things for "inline"
.form-group {
.form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
......@@ -303,12 +336,13 @@ input[type="checkbox"],
// In navbar-form, allow folks to *not* use `.form-group`
.form-control {
display: inline-block;
width: auto; // Prevent labels from stacking above inputs in `.form-group`
vertical-align: middle;
}
// Override `width: 100%;` when not within a `.form-group`
select.form-control {
width: auto;
.control-label {
margin-bottom: 0;
vertical-align: middle;
}
// Remove default margin on radios/checkboxes that were used for stacking, and
......@@ -327,6 +361,14 @@ input[type="checkbox"],
float: none;
margin-left: 0;
}
// Validation states
//
// Reposition the icon because it's now within a grid column and columns have
// `position: relative;` on them. Also accounts for the grid gutter padding.
.has-feedback .form-control-feedback {
top: 0;
}
}
}
......@@ -352,7 +394,7 @@ input[type="checkbox"],
// and other content below items
.radio,
.checkbox {
min-height: @line-height-computed + (@padding-base-vertical + 1);
min-height: (@line-height-computed + (@padding-base-vertical + 1));
}
// Make form groups behave like rows
......@@ -370,4 +412,13 @@ input[type="checkbox"],
text-align: right;
}
}
// Validation states
//
// Reposition the icon because it's now within a grid column and columns have
// `position: relative;` on them. Also accounts for the grid gutter padding.
.has-feedback .form-control-feedback {
top: 0;
right: (@grid-gutter-width / 2);
}
}
less/glyphicons.less
+ 0
- 4
View file @ 1bc8607b
......@@ -28,10 +28,6 @@
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
&:empty {
width: 1em;
}
}
// Individual icons
......
less/grid.less
+ 2
- 2
View file @ 1bc8607b
......@@ -10,10 +10,10 @@
.container {
.container-fixed();
@media (min-width: @screen-sm) {
@media (min-width: @screen-sm-min) {
width: @container-sm;
}
@media (min-width: @screen-md) {
@media (min-width: @screen-md-min) {
width: @container-md;
}
@media (min-width: @screen-lg-min) {
......
less/input-groups.less
+ 39
- 18
View file @ 1bc8607b
......@@ -17,6 +17,11 @@
}
.form-control {
// IE9 fubars the placeholder attribute in text inputs and the arrows on
// select elements in input groups. To fix it, we float the input. Details:
// https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855
float: left;
width: 100%;
margin-bottom: 0;
}
......@@ -90,8 +95,10 @@
.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group > .btn,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
.border-right-radius(0);
}
.input-group-addon:first-child {
......@@ -100,8 +107,10 @@
.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .btn-group > .btn,
.input-group-btn:last-child > .dropdown-toggle,
.input-group-btn:first-child > .btn:not(:first-child) {
.input-group-btn:first-child > .btn:not(:first-child),
.input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
.border-left-radius(0);
}
.input-group-addon:last-child {
......@@ -112,25 +121,37 @@
// -------------------------
.input-group-btn {
position: relative;
// Jankily prevent input button groups from wrapping with `white-space` and
// `font-size` in combination with `inline-block` on buttons.
font-size: 0;
white-space: nowrap;
// Negative margin to only have a 1px border between the two
&:first-child > .btn {
margin-right: -1px;
// Negative margin for spacing, position for bringing hovered/focused/actived
// element above the siblings.
> .btn {
position: relative;
+ .btn {
margin-left: -1px;
}
// Bring the "active" button to the front
&:hover,
&:focus,
&:active {
z-index: 2;
}
}
&:last-child > .btn {
margin-left: -1px;
}
}
.input-group-btn > .btn {
position: relative;
// Jankily prevent input button groups from wrapping
+ .btn {
margin-left: -4px;
// Negative margin to only have a 1px border between the two
&:first-child {
> .btn,
> .btn-group {
margin-right: -1px;
}
}
// Bring the "active" button to the front
&:hover,
&:active {
z-index: 2;
&:last-child {
> .btn,
> .btn-group {
margin-left: -1px;
}
}
}
less/jumbotron.less
+ 3
- 5
View file @ 1bc8607b
......@@ -6,19 +6,17 @@
.jumbotron {
padding: @jumbotron-padding;
margin-bottom: @jumbotron-padding;
font-size: @jumbotron-font-size;
font-weight: 200;
line-height: (@line-height-base * 1.5);
color: @jumbotron-color;
background-color: @jumbotron-bg;
h1,
.h1 {
line-height: 1;
color: @jumbotron-heading-color;
}
p {
line-height: 1.4;
margin-bottom: (@jumbotron-padding / 2);
font-size: @jumbotron-font-size;
font-weight: 200;
}
.container & {
......
less/list-group.less
+ 1
- 1
View file @ 1bc8607b
......@@ -79,7 +79,7 @@ a.list-group-item {
color: inherit;
}
.list-group-item-text {
color: lighten(@list-group-active-bg, 40%);
color: @list-group-active-text-color;
}
}
}
......
less/mixins.less
+ 58
- 28
View file @ 1bc8607b
......@@ -147,17 +147,17 @@
// Transformations
.rotate(@degrees) {
-webkit-transform: rotate(@degrees);
-ms-transform: rotate(@degrees); // IE9+
-ms-transform: rotate(@degrees); // IE9 only
transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
-webkit-transform: scale(@ratio, @ratio-y);
-ms-transform: scale(@ratio, @ratio-y); // IE9+
-ms-transform: scale(@ratio, @ratio-y); // IE9 only
transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
-webkit-transform: translate(@x, @y);
-ms-transform: translate(@x, @y); // IE9+
-ms-transform: translate(@x, @y); // IE9 only
transform: translate(@x, @y);
}
.skew(@x; @y) {
......@@ -172,12 +172,12 @@
.rotateX(@degrees) {
-webkit-transform: rotateX(@degrees);
-ms-transform: rotateX(@degrees); // IE9+
-ms-transform: rotateX(@degrees); // IE9 only
transform: rotateX(@degrees);
}
.rotateY(@degrees) {
-webkit-transform: rotateY(@degrees);
-ms-transform: rotateY(@degrees); // IE9+
-ms-transform: rotateY(@degrees); // IE9 only
transform: rotateY(@degrees);
}
.perspective(@perspective) {
......@@ -193,6 +193,7 @@
.transform-origin(@origin) {
-webkit-transform-origin: @origin;
-moz-transform-origin: @origin;
-ms-transform-origin: @origin; // IE9 only
transform-origin: @origin;
}
......@@ -201,6 +202,30 @@
-webkit-animation: @animation;
animation: @animation;
}
.animation-name(@name) {
-webkit-animation-name: @name;
animation-name: @name;
}
.animation-duration(@duration) {
-webkit-animation-duration: @duration;
animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
-webkit-animation-timing-function: @timing-function;
animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
-webkit-animation-delay: @delay;
animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
-webkit-animation-iteration-count: @iteration-count;
animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
-webkit-animation-direction: @direction;
animation-direction: @direction;
}
// Backface visibility
// Prevent browsers from flickering when using CSS 3D transforms.
......@@ -353,7 +378,7 @@
//
// Keep images from scaling beyond the width of their parents.
.img-responsive(@display: block;) {
.img-responsive(@display: block) {
display: @display;
max-width: 100%; // Part 1: Set a maximum relative to the parent
height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
......@@ -613,30 +638,39 @@
position: relative;
float: left;
width: percentage((@columns / @grid-columns));
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
}
.make-xs-column-offset(@columns) {
@media (min-width: @screen-xs-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-xs-column-push(@columns) {
@media (min-width: @screen-xs-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-xs-column-pull(@columns) {
@media (min-width: @screen-xs-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-sm-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the small column offsets
.make-sm-column-offset(@columns) {
@media (min-width: @screen-sm-min) {
margin-left: percentage((@columns / @grid-columns));
......@@ -653,23 +687,19 @@
}
}
// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-md-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the medium column offsets
.make-md-column-offset(@columns) {
@media (min-width: @screen-md-min) {
margin-left: percentage((@columns / @grid-columns));
......@@ -686,23 +716,19 @@
}
}
// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-lg-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the large column offsets
.make-lg-column-offset(@columns) {
@media (min-width: @screen-lg-min) {
margin-left: percentage((@columns / @grid-columns));
......@@ -729,11 +755,11 @@
// Common styles for all sizes of grid columns, widths 1-12
.col(@index) when (@index = 1) { // initial
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
.col(@index + 1, @item);
.col((@index + 1), @item);
}
.col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
.col(@index + 1, ~"@{list}, @{item}");
.col((@index + 1), ~"@{list}, @{item}");
}
.col(@index, @list) when (@index > @grid-columns) { // terminal
@{list} {
......@@ -751,11 +777,11 @@
.make-grid-columns-float(@class) {
.col(@index) when (@index = 1) { // initial
@item: ~".col-@{class}-@{index}";
.col(@index + 1, @item);
.col((@index + 1), @item);
}
.col(@index, @list) when (@index =< @grid-columns) { // general
@item: ~".col-@{class}-@{index}";
.col(@index + 1, ~"@{list}, @{item}");
.col((@index + 1), ~"@{list}, @{item}");
}
.col(@index, @list) when (@index > @grid-columns) { // terminal
@{list} {
......@@ -790,7 +816,7 @@
.make-grid(@index, @class, @type) when (@index >= 0) {
.calc-grid(@index, @class, @type);
// next iteration
.make-grid(@index - 1, @class, @type);
.make-grid((@index - 1), @class, @type);
}
......@@ -825,6 +851,10 @@
border-color: @border-color;
background-color: @background-color;
}
// Optional feedack icon
.form-control-feedback {
color: @text-color;
}
}
// Form control focus state
......
less/modals.less
+ 14
- 5
View file @ 1bc8607b
......@@ -22,7 +22,12 @@
right: 0;
bottom: 0;
left: 0;
z-index: @zindex-modal-background;
z-index: @zindex-modal;
-webkit-overflow-scrolling: touch;
// Prevent Chrome on Windows from adding a focus outline. For details, see
// https://github.com/twbs/bootstrap/pull/10951.
outline: 0;
// When fading in the modal, animate it to slide down
&.fade .modal-dialog {
......@@ -37,7 +42,6 @@
position: relative;
width: auto;
margin: 10px;
z-index: (@zindex-modal-background + 10);
}
// Actual modal
......@@ -60,11 +64,11 @@
right: 0;
bottom: 0;
left: 0;
z-index: (@zindex-modal-background - 10);
z-index: @zindex-modal-background;
background-color: @modal-backdrop-bg;
// Fade for backdrop
&.fade { .opacity(0); }
&.in { .opacity(.5); }
&.in { .opacity(@modal-backdrop-opacity); }
}
// Modal header
......@@ -116,8 +120,9 @@
}
// Scale up the modal
@media screen and (min-width: @screen-sm-min) {
@media (min-width: @screen-sm-min) {
// Automatically set modal's width for larger viewports
.modal-dialog {
width: 600px;
margin: 30px auto;
......@@ -126,4 +131,8 @@
.box-shadow(0 5px 15px rgba(0,0,0,.5));
}
// Modal sizes
.modal-sm { width: @modal-sm; }
.modal-lg { width: @modal-lg; }
}
less/navbar.less
+ 8
- 8
View file @ 1bc8607b
......@@ -161,6 +161,13 @@
text-decoration: none;
}
// Prevent Glyphicons from increasing height of navbar
> .glyphicon {
float: left;
margin-top: -2px;
margin-right: 5px;
}
@media (min-width: @grid-float-breakpoint) {
.navbar > .container &,
.navbar > .container-fluid & {
......@@ -205,7 +212,7 @@
// Navbar nav links
//
// Builds on top of the `.nav` components with it's own modifier class to make
// Builds on top of the `.nav` components with its own modifier class to make
// the nav the full height of the horizontal nav (above 768px).
.navbar-nav {
......@@ -329,13 +336,6 @@
.border-bottom-radius(0);
}
// Right aligned menus need alt position
.navbar-nav.pull-right > li > .dropdown-menu,
.navbar-nav > li > .dropdown-menu.pull-right {
left: auto;
right: 0;
}
// Buttons in navbars
//
......
Supports Markdown
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