mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-18 15:54:26 +01:00
Merge branch 'master' of github.com:twbs/bootstrap
This commit is contained in:
commit
3e62905f9d
@ -1499,7 +1499,7 @@ base_url: "../"
|
|||||||
|
|
||||||
<h2 id="navbar-forms">Forms</h2>
|
<h2 id="navbar-forms">Forms</h2>
|
||||||
<p>Place form content within <code>.navbar-form</code> for proper vertical alignment and collapsed behavior in narrow viewports. Use the alignment options to decide where it resides within the navbar content.</p>
|
<p>Place form content within <code>.navbar-form</code> for proper vertical alignment and collapsed behavior in narrow viewports. Use the alignment options to decide where it resides within the navbar content.</p>
|
||||||
<p>As a heads up, <code>.navbar-form</code> shares much of it's code with <code>.form-inline</code> via mixin.</p>
|
<p>As a heads up, <code>.navbar-form</code> shares much of its code with <code>.form-inline</code> via mixin.</p>
|
||||||
<div class="bs-example">
|
<div class="bs-example">
|
||||||
<nav class="navbar navbar-default" role="navigation">
|
<nav class="navbar navbar-default" role="navigation">
|
||||||
<div class="navbar-header">
|
<div class="navbar-header">
|
||||||
@ -2209,7 +2209,7 @@ body { padding-bottom: 70px; }
|
|||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
<h1 id="alerts">Alerts</h1>
|
<h1 id="alerts">Alerts</h1>
|
||||||
</div>
|
</div>
|
||||||
<p class="lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the <a href="../javascript/#js-alerts">alerts jQuery plugin</a>.</p>
|
<p class="lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the <a href="../javascript/#alerts">alerts jQuery plugin</a>.</p>
|
||||||
|
|
||||||
<h2 id="alerts-examples">Examples</h2>
|
<h2 id="alerts-examples">Examples</h2>
|
||||||
<p>Wrap any text and an optional dismiss button in <code>.alert</code> and one of the four contextual classes (e.g., <code>.alert-success</code>) for basic alert messages.</p>
|
<p>Wrap any text and an optional dismiss button in <code>.alert</code> and one of the four contextual classes (e.g., <code>.alert-success</code>) for basic alert messages.</p>
|
||||||
|
2
css.html
2
css.html
@ -501,7 +501,7 @@ base_url: "../"
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Generate the large column offsets
|
// Generate the medium column offsets
|
||||||
.make-md-column-offset(@columns) {
|
.make-md-column-offset(@columns) {
|
||||||
@media (min-width: @screen-medium) {
|
@media (min-width: @screen-medium) {
|
||||||
margin-left: percentage((@columns / @grid-columns));
|
margin-left: percentage((@columns / @grid-columns));
|
||||||
|
9
dist/css/bootstrap.css
vendored
9
dist/css/bootstrap.css
vendored
@ -316,13 +316,6 @@ textarea {
|
|||||||
line-height: inherit;
|
line-height: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
button,
|
|
||||||
input,
|
|
||||||
select[multiple],
|
|
||||||
textarea {
|
|
||||||
background-image: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: #428bca;
|
color: #428bca;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
@ -1724,6 +1717,7 @@ output {
|
|||||||
color: #555555;
|
color: #555555;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
|
background-image: none;
|
||||||
border: 1px solid #cccccc;
|
border: 1px solid #cccccc;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||||
@ -2006,6 +2000,7 @@ textarea.input-lg {
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
background-image: none;
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
|
2
dist/css/bootstrap.min.css
vendored
2
dist/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
@ -13,7 +13,7 @@ base_url: "../"
|
|||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
<h1 id="download">Download Bootstrap</h1>
|
<h1 id="download">Download Bootstrap</h1>
|
||||||
</div>
|
</div>
|
||||||
<p class="lead">There are a few easy ways to quickly get started with Bootstrap, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p>
|
<p class="lead">Bootstrap has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p>
|
||||||
|
|
||||||
<h3 id="download-compiled">Compiled CSS, JS, and fonts</h3>
|
<h3 id="download-compiled">Compiled CSS, JS, and fonts</h3>
|
||||||
<p>The fastest way to get Bootstrap is to download the compiled and minified versions of our CSS and JavaScript, along with the included fonts. No documentation or original source files are included.</p>
|
<p>The fastest way to get Bootstrap is to download the compiled and minified versions of our CSS and JavaScript, along with the included fonts. No documentation or original source files are included.</p>
|
||||||
@ -367,6 +367,10 @@ bootstrap/
|
|||||||
<td><code>.btn-large</code></td>
|
<td><code>.btn-large</code></td>
|
||||||
<td><code>.btn-lg</code></td>
|
<td><code>.btn-lg</code></td>
|
||||||
</tr>
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>.alert-error</code></td>
|
||||||
|
<td><code>.alert-danger</code></td>
|
||||||
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><code>.visible-phone</code></td>
|
<td><code>.visible-phone</code></td>
|
||||||
<td><code>.visible-xs</code></td>
|
<td><code>.visible-xs</code></td>
|
||||||
@ -427,6 +431,10 @@ bootstrap/
|
|||||||
<td><code>.muted</code></td>
|
<td><code>.muted</code></td>
|
||||||
<td><code>.text-muted</code></td>
|
<td><code>.text-muted</code></td>
|
||||||
</tr>
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>.text-error</code></td>
|
||||||
|
<td><code>.text-danger</code></td>
|
||||||
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div><!-- /.table-responsive -->
|
</div><!-- /.table-responsive -->
|
||||||
@ -672,7 +680,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>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>
|
||||||
|
|
||||||
<h3>Safari percent rounding</h3>
|
<h3>Safari percent rounding</h3>
|
||||||
<p>In the latest Safari for Mac, its rendering engine has a little trouble with the long decimal places of our <code>.col-*-1</code> grid classes, meaning if you have 12 individual columns you'll notice they come up short compared to other rows of columns. There's not much we can do here (<a href="https://github.com/twbs/bootstrap/issues/9282">see #9282</a>) but you do have some options:</p>
|
<p>In the latest Safari for Mac, its rendering engine has a little trouble with the long decimal places of our <code>.col-*-1</code> grid classes, meaning if you have 12 individual columns you'll notice 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>
|
<ul>
|
||||||
<li>Add <code>.pull-right</code> to your last grid column to get the hard-right alignment</li>
|
<li>Add <code>.pull-right</code> to your last grid column to get the hard-right alignment</li>
|
||||||
<li>Tweak your percentages manually to get the perfect rounding for Safari (more difficult than the first option)</li>
|
<li>Tweak your percentages manually to get the perfect rounding for Safari (more difficult than the first option)</li>
|
||||||
@ -683,7 +691,7 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
|
|||||||
<h4>Overflow and scrolling</h4>
|
<h4>Overflow and scrolling</h4>
|
||||||
<p>Support for <code>overflow: hidden</code> on the <code><body></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><body></code> content will begin to scroll.</p>
|
<p>Support for <code>overflow: hidden</code> on the <code><body></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><body></code> content will begin to scroll.</p>
|
||||||
<h4>Virtual keyboards</h4>
|
<h4>Virtual keyboards</h4>
|
||||||
<p>Also, note that if you're using inputs in your modal – iOS has a rendering bug which doesn't update the position of fixed elements when the virtual keyboard is triggered. There are a few work arounds for this, including transforming your elements to <code>position: absolute</code> or invoking a timer on focus to try to correct the positioning manually. This is not handled by Bootstrap, so it is up to you to decide which solution is best for your application.</p>
|
<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 work arounds 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>Browser zooming</h3>
|
<h3>Browser zooming</h3>
|
||||||
<p>Page zooming inevitably presents rendering artifacts in some components, both in Bootstrap and the rest of the web. Depending on the issue, we may be able to fix it (search first and then open an issue if need be). However, we tend to ignore these as they often have no direct solution other than hacky workarounds.</p>
|
<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>
|
||||||
@ -817,7 +825,7 @@ img { max-width: none; }
|
|||||||
<p>From there, include whatever Bootstrap components and HTML content you need to get your template setup. It's best to have a rough idea in mind of modifications to make and content to include, so be sure to spend a brief amount of time on that before moving on.</p>
|
<p>From there, include whatever Bootstrap components and HTML content you need to get your template setup. It's best to have a rough idea in mind of modifications to make and content to include, so be sure to spend a brief amount of time on that before moving on.</p>
|
||||||
|
|
||||||
<h3>Customizing components</h3>
|
<h3>Customizing components</h3>
|
||||||
<p>There are varying degrees to customizing components, but most fall into two camps: light customizations and complete visual overhauls. Luckily, there are plenty of examples of both.</p>
|
<p>You can customize components to varying degrees, but most fall into two camps: light customizations and complete visual overhauls. Luckily, plenty examples of both are available.</p>
|
||||||
<p>We define light customizations as mostly surface layer changes, things like a color and font changes to existing Bootstrap components. A great example of this is the the <a href="http://translate.twitter.com">Twitter Translation Center</a> (coded by @mdo). Let's look at how to implement the custom button we wrote for this site, <code>.btn-ttc</code>.</p>
|
<p>We define light customizations as mostly surface layer changes, things like a color and font changes to existing Bootstrap components. A great example of this is the the <a href="http://translate.twitter.com">Twitter Translation Center</a> (coded by @mdo). Let's look at how to implement the custom button we wrote for this site, <code>.btn-ttc</code>.</p>
|
||||||
<p>Instead of using the provided Bootstrap buttons, which only require just one class to start, <code>.btn</code>, we'll add our own modifier class, <code>.btn-ttc</code>. This will give us a slightly custom look with minimal effort.</p>
|
<p>Instead of using the provided Bootstrap buttons, which only require just one class to start, <code>.btn</code>, we'll add our own modifier class, <code>.btn-ttc</code>. This will give us a slightly custom look with minimal effort.</p>
|
||||||
{% highlight html %}
|
{% highlight html %}
|
||||||
|
@ -1,63 +0,0 @@
|
|||||||
// Simple phantom.js integration script
|
|
||||||
// Adapted from Modernizr
|
|
||||||
|
|
||||||
function waitFor(testFx, onReady, timeOutMillis) {
|
|
||||||
var maxtimeOutMillis = timeOutMillis ? timeOutMillis : 5001 //< Default Max Timout is 5s
|
|
||||||
, start = new Date().getTime()
|
|
||||||
, condition = false
|
|
||||||
, interval = setInterval(function () {
|
|
||||||
if ((new Date().getTime() - start < maxtimeOutMillis) && !condition) {
|
|
||||||
// If not time-out yet and condition not yet fulfilled
|
|
||||||
condition = (typeof(testFx) === "string" ? eval(testFx) : testFx()) //< defensive code
|
|
||||||
} else {
|
|
||||||
if (!condition) {
|
|
||||||
// If condition still not fulfilled (timeout but condition is 'false')
|
|
||||||
console.log("'waitFor()' timeout")
|
|
||||||
phantom.exit(1)
|
|
||||||
} else {
|
|
||||||
// Condition fulfilled (timeout and/or condition is 'true')
|
|
||||||
typeof(onReady) === "string" ? eval(onReady) : onReady() //< Do what it's supposed to do once the condition is fulfilled
|
|
||||||
clearInterval(interval) //< Stop this interval
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, 100) //< repeat check every 100ms
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
if (phantom.args.length === 0 || phantom.args.length > 2) {
|
|
||||||
console.log('Usage: phantom.js URL')
|
|
||||||
phantom.exit()
|
|
||||||
}
|
|
||||||
|
|
||||||
var page = new WebPage()
|
|
||||||
|
|
||||||
// Route "console.log()" calls from within the Page context to the main Phantom context (i.e. current "this")
|
|
||||||
page.onConsoleMessage = function(msg) {
|
|
||||||
console.log(msg)
|
|
||||||
};
|
|
||||||
|
|
||||||
page.open(phantom.args[0], function(status){
|
|
||||||
if (status !== "success") {
|
|
||||||
console.log("Unable to access network")
|
|
||||||
phantom.exit()
|
|
||||||
} else {
|
|
||||||
waitFor(function(){
|
|
||||||
return page.evaluate(function(){
|
|
||||||
var el = document.getElementById('qunit-testresult')
|
|
||||||
if (el && el.innerText.match('completed')) {
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
return false
|
|
||||||
})
|
|
||||||
}, function(){
|
|
||||||
var failedNum = page.evaluate(function(){
|
|
||||||
var el = document.getElementById('qunit-testresult')
|
|
||||||
try {
|
|
||||||
return el.getElementsByClassName('failed')[0].innerHTML
|
|
||||||
} catch (e) { }
|
|
||||||
return 10000
|
|
||||||
});
|
|
||||||
phantom.exit((parseInt(failedNum, 10) > 0) ? 1 : 0)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
@ -1,14 +0,0 @@
|
|||||||
/*
|
|
||||||
* Simple connect server for phantom.js
|
|
||||||
* Adapted from Modernizr
|
|
||||||
*/
|
|
||||||
|
|
||||||
var connect = require('connect')
|
|
||||||
, http = require('http')
|
|
||||||
, fs = require('fs')
|
|
||||||
, app = connect()
|
|
||||||
.use(connect.static(__dirname + '/../../'));
|
|
||||||
|
|
||||||
http.createServer(app).listen(3000);
|
|
||||||
|
|
||||||
fs.writeFileSync(__dirname + '/pid.txt', process.pid, 'utf-8')
|
|
@ -17,6 +17,7 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
border-radius: @border-radius-base;
|
border-radius: @border-radius-base;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
@ -133,6 +133,7 @@ output {
|
|||||||
color: @input-color;
|
color: @input-color;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
background-color: @input-bg;
|
background-color: @input-bg;
|
||||||
|
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
|
||||||
border: 1px solid @input-border;
|
border: 1px solid @input-border;
|
||||||
border-radius: @input-border-radius;
|
border-radius: @input-border-radius;
|
||||||
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
|
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
|
||||||
|
@ -37,17 +37,6 @@ textarea {
|
|||||||
line-height: inherit;
|
line-height: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Reset unusual Firefox-on-Android default style.
|
|
||||||
//
|
|
||||||
// See https://github.com/necolas/normalize.css/issues/214
|
|
||||||
|
|
||||||
button,
|
|
||||||
input,
|
|
||||||
select[multiple],
|
|
||||||
textarea {
|
|
||||||
background-image: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Links
|
// Links
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user