Skip to content

B
bootstrap
Commit a6f3bdb7 authored by XhmikosR's avatar XhmikosR
Browse files
Options

Move inline CSS to docs.css.

parent d5a2b27e
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 67 additions and 46 deletions
docs/_includes/components/breadcrumbs.html
View file @ a6f3bdb7
......@@ -11,7 +11,7 @@
<li><a href="#">Home</a></li>
<li class="active">Library</li>
</ol>
<ol class="breadcrumb" style="margin-bottom: 5px;">
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
......
docs/_includes/components/navs.html
View file @ a6f3bdb7
......@@ -49,7 +49,7 @@
{% endhighlight %}
<p>Pills are also vertically stackable. Just add <code>.nav-stacked</code>.</p>
<div class="bs-example" data-example-id="simple-nav-stacked">
<ul class="nav nav-pills nav-stacked" style="max-width: 300px;">
<ul class="nav nav-pills nav-stacked nav-pills-stacked-example">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
......
docs/_includes/css/buttons.html
View file @ a6f3bdb7
......@@ -112,7 +112,7 @@
<p>Create block level buttons&mdash;those that span the full width of a parent&mdash; by adding <code>.btn-block</code>.</p>
<div class="bs-example" data-example-id="block-btns">
<div class="well" style="max-width: 400px; margin: 0 auto 10px;">
<div class="well center-block" style="max-width: 400px;">
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
</div>
......
docs/_includes/js/affix.html
View file @ a6f3bdb7
......@@ -46,12 +46,12 @@ $('#myAffix').affix({
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset-top="200"</code>.</p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<table class="table table-bordered table-striped js-options-table">
<thead>
<tr>
<th style="width: 100px;">Name</th>
<th style="width: 100px;">type</th>
<th style="width: 50px;">default</th>
<th>Name</th>
<th>type</th>
<th>default</th>
<th>description</th>
</tr>
</thead>
......@@ -80,7 +80,7 @@ $('#myAffix').affix({
<table class="table table-bordered table-striped bs-events-table">
<thead>
<tr>
<th style="width: 150px;">Event Type</th>
<th>Event Type</th>
<th>Description</th>
</tr>
</thead>
......
docs/_includes/js/alerts.html
View file @ a6f3bdb7
......@@ -49,7 +49,7 @@
<table class="table table-bordered table-striped bs-events-table">
<thead>
<tr>
<th style="width: 150px;">Event Type</th>
<th>Event Type</th>
<th>Description</th>
</tr>
</thead>
......
docs/_includes/js/carousel.html
View file @ a6f3bdb7
......@@ -155,12 +155,12 @@ $('.carousel').carousel()
<h3 id="carousel-options">Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-interval=""</code>.</p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<table class="table table-bordered table-striped js-options-table">
<thead>
<tr>
<th style="width: 100px;">Name</th>
<th style="width: 50px;">type</th>
<th style="width: 50px;">default</th>
<th>Name</th>
<th>type</th>
<th>default</th>
<th>description</th>
</tr>
</thead>
......@@ -230,7 +230,7 @@ $('.carousel').carousel({
<table class="table table-bordered table-striped bs-events-table">
<thead>
<tr>
<th style="width: 150px;">Event Type</th>
<th>Event Type</th>
<th>Description</th>
</tr>
</thead>
......
docs/_includes/js/collapse.html
View file @ a6f3bdb7
......@@ -192,12 +192,12 @@ $('.collapse').collapse()
<h3 id="collapse-options">Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-parent=""</code>.</p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<table class="table table-bordered table-striped js-options-table">
<thead>
<tr>
<th style="width: 100px;">Name</th>
<th style="width: 50px;">type</th>
<th style="width: 50px;">default</th>
<th>Name</th>
<th>type</th>
<th>default</th>
<th>description</th>
</tr>
</thead>
......@@ -243,7 +243,7 @@ $('#myCollapsible').collapse({
<table class="table table-bordered table-striped bs-events-table">
<thead>
<tr>
<th style="width: 150px;">Event Type</th>
<th>Event Type</th>
<th>Description</th>
</tr>
</thead>
......
docs/_includes/js/dropdowns.html
View file @ a6f3bdb7
......@@ -169,7 +169,7 @@ $('.dropdown-toggle').dropdown()
<table class="table table-bordered table-striped bs-events-table">
<thead>
<tr>
<th style="width: 150px;">Event Type</th>
<th>Event Type</th>
<th>Description</th>
</tr>
</thead>
......
docs/_includes/js/modal.html
View file @ a6f3bdb7
......@@ -108,7 +108,7 @@
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="bs-example" style="padding-bottom: 24px;">
<div class="bs-example bs-example-padded-bottom">
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
......@@ -220,7 +220,7 @@
<h2 id="modals-related-target">Varying modal content based on trigger button</h2>
<p>Have a bunch of buttons that all trigger the same modal, just with slightly different contents? Use <code>event.relatedTarget</code> and <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes">HTML <code>data-*</code> attributes</a> (possibly <a href="http://api.jquery.com/data/">via jQuery</a>) to vary the contents of the modal depending on which button was clicked. See the Modal Events docs for details on <code>relatedTarget</code>,</p>
<div class="bs-example" style="padding-bottom: 24px;">
<div class="bs-example">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@twbootstrap">Open modal for @twbootstrap</button>
......@@ -314,12 +314,12 @@ $('#exampleModal').on('show.bs.modal', function (event) {
<h3 id="modals-options">Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-backdrop=""</code>.</p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<table class="table table-bordered table-striped js-options-table">
<thead>
<tr>
<th style="width: 100px;">Name</th>
<th style="width: 50px;">type</th>
<th style="width: 50px;">default</th>
<th>Name</th>
<th>type</th>
<th>default</th>
<th>description</th>
</tr>
</thead>
......@@ -386,7 +386,7 @@ $('#myModal').modal({
<table class="table table-bordered table-striped bs-events-table">
<thead>
<tr>
<th style="width: 150px;">Event Type</th>
<th>Event Type</th>
<th>Description</th>
</tr>
</thead>
......
docs/_includes/js/popovers.html
View file @ a6f3bdb7
......@@ -76,7 +76,7 @@ $(function () {
</div>
<h3>Live demo</h3>
<div class="bs-example" style="padding-bottom: 24px;">
<div class="bs-example bs-example-padded-bottom">
<button type="button" class="btn btn-lg btn-danger bs-docs-popover" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
</div>
{% highlight html %}
......@@ -125,7 +125,7 @@ sagittis lacus vel augue laoreet rutrum faucibus.">
<h4>Specific markup required for dismiss-on-next-click</h4>
<p>For proper cross-browser and cross-platform behavior, you must use the <code>&lt;a&gt;</code> tag, <i>not</i> the <code>&lt;button&gt;</code> tag, and you also must include a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#tabindex"><code>tabindex</code></a> attribute.</p>
</div>
<div class="bs-example" style="padding-bottom: 24px;">
<div class="bs-example bs-example-padded-bottom">
<a tabindex="0" class="btn btn-lg btn-danger bs-docs-popover" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
</div>
{% highlight html %}
......@@ -140,12 +140,12 @@ sagittis lacus vel augue laoreet rutrum faucibus.">
<h3 id="popovers-options">Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<table class="table table-bordered table-striped js-options-table js-options-table">
<thead>
<tr>
<th style="width: 100px;">Name</th>
<th style="width: 100px;">Type</th>
<th style="width: 50px;">Default</th>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
......@@ -272,7 +272,7 @@ sagittis lacus vel augue laoreet rutrum faucibus.">
<table class="table table-bordered table-striped bs-events-table">
<thead>
<tr>
<th style="width: 150px;">Event Type</th>
<th>Event Type</th>
<th>Description</th>
</tr>
</thead>
......
docs/_includes/js/scrollspy.html
View file @ a6f3bdb7
......@@ -106,12 +106,12 @@ $('[data-spy="scroll"]').each(function () {
<h3 id="scrollspy-options">Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset=""</code>.</p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<table class="table table-bordered table-striped js-options-table">
<thead>
<tr>
<th style="width: 100px;">Name</th>
<th style="width: 100px;">type</th>
<th style="width: 50px;">default</th>
<th>Name</th>
<th>type</th>
<th>default</th>
<th>description</th>
</tr>
</thead>
......@@ -131,7 +131,7 @@ $('[data-spy="scroll"]').each(function () {
<table class="table table-bordered table-striped bs-events-table">
<thead>
<tr>
<th style="width: 150px;">Event Type</th>
<th>Event Type</th>
<th>Description</th>
</tr>
</thead>
......
docs/_includes/js/tabs.html
View file @ a6f3bdb7
......@@ -131,7 +131,7 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
<table class="table table-bordered table-striped bs-events-table">
<thead>
<tr>
<th style="width: 150px;">Event Type</th>
<th>Event Type</th>
<th>Description</th>
</tr>
</thead>
......
docs/_includes/js/tooltips.html
View file @ a6f3bdb7
......@@ -110,12 +110,12 @@ $('#example').tooltip(options)
<h3 id="tooltips-options">Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<table class="table table-bordered table-striped js-options-table">
<thead>
<tr>
<th style="width: 100px;">Name</th>
<th style="width: 100px;">Type</th>
<th style="width: 50px;">Default</th>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
......@@ -233,7 +233,7 @@ $('#example').tooltip(options)
<table class="table table-bordered table-striped bs-events-table">
<thead>
<tr>
<th style="width: 150px;">Event Type</th>
<th>Event Type</th>
<th>Description</th>
</tr>
</thead>
......
docs/assets/css/docs.min.css
View file @ a6f3bdb7
This diff is collapsed.
docs/assets/css/src/docs.css
View file @ a6f3bdb7
......@@ -913,6 +913,10 @@ h1[id] {
content: "Example";
}
.bs-example-padded-bottom {
padding-bottom: 24px;
}
/* Tweak display of the code snippets when following an example */
.bs-example + .highlight,
.bs-example + .zero-clipboard + .highlight {
......@@ -1166,6 +1170,10 @@ h1[id] {
overflow: auto;
}
.bs-example > .nav-pills-stacked-example {
max-width: 300px;
}
/* Simple collapse example */
#collapseExample .well {
margin-bottom: 0;
......@@ -1177,6 +1185,19 @@ h1[id] {
white-space: nowrap;
}
.bs-events-table > thead > tr > th:first-child {
width: 150px;
}
.js-options-table > thead > tr > th:nth-child(1),
.js-options-table > thead > tr > th:nth-child(2) {
width: 100px;
}
.js-options-table > thead > tr > th:nth-child(3) {
width: 50px;
}
/*
* Code snippets
*
......
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