mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-22 13:13:03 +02:00
Code Issues Releases Wiki Activity

update all examples

Browse Source
This commit is contained in:
Mark Otto
2016-12-28 17:25:00 -08:00
committed by Mark Otto
parent 5310bb4c0f
commit 0e84876379
10 changed files with 32 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
docs/examples/carousel/carousel.css
View File

@@ -35,14 +35,6 @@ body {
height: 32rem; height: 32rem;
} }
.carousel-indicators li {
width: .75rem;
height: .75rem;
margin-right: .25rem;
margin-left: .25rem;
border-radius: 50%;
}
/* MARKETING CONTENT /* MARKETING CONTENT
-------------------------------------------------- */ -------------------------------------------------- */

4
docs/examples/carousel/index.html
View File

@@ -19,13 +19,13 @@
</head> </head>
<body> <body>
<nav class="navbar navbar-inverse navbar-fixed-top navbar-toggleable-md bg-inverse"> <nav class="navbar navbar-toggleable-md navbar-inverse navbar-fixed-top bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<a class="navbar-brand" href="#">Carousel</a> <a class="navbar-brand" href="#">Carousel</a>
<div class="collapse navbar-collapse" id="navbarCollapse"> <div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav mt-2 mt-lg-0"> <ul class="navbar-nav mr-auto">
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li> </li>

10
docs/examples/dashboard/index.html
View File

@@ -19,14 +19,14 @@
</head> </head>
<body> <body>
<nav class="navbar navbar-inverse navbar-fixed-top bg-inverse navbar-toggleable-md"> <nav class="navbar navbar-toggleable-md navbar-inverse navbar-fixed-top bg-inverse">
<button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<a class="navbar-brand" href="#">Dashboard</a> <a class="navbar-brand" href="#">Dashboard</a>
<div class="collapse navbar-collapse" id="navbarsExampleDefault"> <div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="nav navbar-nav"> <ul class="navbar-nav mr-auto">
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li> </li>
@@ -50,7 +50,7 @@
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<nav class="col-sm-3 col-md-2 hidden-xs-down bg-faded sidebar"> <nav class="col-sm-3 col-md-2 hidden-xs-down bg-faded sidebar">
<ul class="nav nav-pills"> <ul class="nav nav-pills flex-column">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link active" href="#">Overview <span class="sr-only">(current)</span></a> <a class="nav-link active" href="#">Overview <span class="sr-only">(current)</span></a>
</li> </li>
@@ -65,7 +65,7 @@
</li> </li>
</ul> </ul>
<ul class="nav nav-pills"> <ul class="nav nav-pills flex-column">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Nav item</a> <a class="nav-link" href="#">Nav item</a>
</li> </li>
@@ -80,7 +80,7 @@
</li> </li>
</ul> </ul>
<ul class="nav nav-pills"> <ul class="nav nav-pills flex-column">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Nav item again</a> <a class="nav-link" href="#">Nav item again</a>
</li> </li>

4
docs/examples/jumbotron/index.html
View File

@@ -20,14 +20,14 @@
<body> <body>
<nav class="navbar navbar-inverse navbar-fixed-top bg-inverse navbar-toggleable-md"> <nav class="navbar navbar-toggleable-md navbar-inverse navbar-fixed-top bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<a class="navbar-brand" href="#">Navbar</a> <a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarsExampleDefault"> <div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="nav navbar-nav"> <ul class="navbar-nav mr-auto">
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li> </li>

4
docs/examples/navbar-top-fixed/index.html
View File

@@ -20,13 +20,13 @@
<body> <body>
<nav class="navbar navbar-inverse navbar-fixed-top navbar-toggleable-md bg-inverse"> <nav class="navbar navbar-toggleable-md navbar-inverse navbar-fixed-top bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<a class="navbar-brand" href="#">Fixed navbar</a> <a class="navbar-brand" href="#">Fixed navbar</a>
<div class="collapse navbar-collapse" id="navbarCollapse"> <div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav mt-2 mt-lg-0"> <ul class="navbar-nav mr-auto">
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li> </li>

6
docs/examples/navbar-top/index.html
View File

@@ -20,13 +20,13 @@
<body> <body>
<nav class="navbar navbar-inverse navbar-toggleable-md bg-inverse mb-3"> <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse mb-4">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<a class="navbar-brand" href="#">Fixed navbar</a> <a class="navbar-brand" href="#">Top navbar</a>
<div class="collapse navbar-collapse" id="navbarCollapse"> <div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav mt-2 mt-lg-0"> <ul class="navbar-nav mr-auto">
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li> </li>

24
docs/examples/navbars/index.html
View File

@@ -20,14 +20,14 @@
<body> <body>
<nav class="navbar navbar-inverse bg-inverse navbar-toggleable-md"> <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<a class="navbar-brand" href="#">Navbar</a> <a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarsExampleDefault"> <div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="nav navbar-nav"> <ul class="navbar-nav mr-auto">
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li> </li>
@@ -46,7 +46,7 @@
</div> </div>
</li> </li>
</ul> </ul>
<form class="form-inline my-2 my-lg-0"> <form class="form-inline my-2 my-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search"> <input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form> </form>
@@ -61,7 +61,7 @@
<a class="navbar-brand" href="#">Container</a> <a class="navbar-brand" href="#">Container</a>
<div class="collapse navbar-collapse" id="navbarsExampleContainer"> <div class="collapse navbar-collapse" id="navbarsExampleContainer">
<ul class="nav navbar-nav"> <ul class="navbar-nav mr-auto">
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li> </li>
@@ -80,7 +80,7 @@
</div> </div>
</li> </li>
</ul> </ul>
<form class="form-inline my-2 my-lg-0"> <form class="form-inline my-2 my-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search"> <input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form> </form>
@@ -93,8 +93,8 @@
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarsExampleCenteredNav"> <div class="collapse navbar-collapse justify-content-md-center" id="navbarsExampleCenteredNav">
<ul class="nav navbar-nav text-md-center"> <ul class="navbar-nav">
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" href="#">Centered nav only <span class="sr-only">(current)</span></a> <a class="nav-link" href="#">Centered nav only <span class="sr-only">(current)</span></a>
</li> </li>
@@ -124,7 +124,7 @@
<a class="navbar-brand" href="#">Navbar</a> <a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="containerNavbar"> <div class="collapse navbar-collapse" id="containerNavbar">
<ul class="nav navbar-nav"> <ul class="navbar-nav mr-auto">
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li> </li>
@@ -143,7 +143,7 @@
</div> </div>
</li> </li>
</ul> </ul>
<form class="form-inline my-2 my-lg-0"> <form class="form-inline my-2 my-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search"> <input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form> </form>
@@ -155,8 +155,8 @@
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="containerNavbarCenter"> <div class="collapse navbar-collapse justify-content-md-center" id="containerNavbarCenter">
<ul class="nav navbar-nav text-md-center"> <ul class="navbar-nav">
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" href="#">Centered nav only <span class="sr-only">(current)</span></a> <a class="nav-link" href="#">Centered nav only <span class="sr-only">(current)</span></a>
</li> </li>
@@ -184,7 +184,7 @@
<p>This example is a quick exercise to illustrate how the navbar and it's contents work. Some navbars extend the width of the viewport, others are confined within a <code>.container</code>. For positioning of navbars, checkout the <a href="../navbar-top/">top</a> and <a href="../navbar-top-fixed/">fixed top</a> examples.</p> <p>This example is a quick exercise to illustrate how the navbar and it's contents work. Some navbars extend the width of the viewport, others are confined within a <code>.container</code>. For positioning of navbars, checkout the <a href="../navbar-top/">top</a> and <a href="../navbar-top-fixed/">fixed top</a> examples.</p>
<p>At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.</p> <p>At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.</p>
<p> <p>
<a class="btn btn-lg btn-primary" href="../../components/navbar/" role="button">View navbar docs &raquo;</a> <a class="btn btn-primary" href="../../components/navbar/" role="button">View navbar docs &raquo;</a>
</p> </p>
</div> </div>
</div> </div>

4
docs/examples/offcanvas/index.html
View File

@@ -20,14 +20,14 @@
<body> <body>
<nav class="navbar navbar-fixed-top navbar-inverse bg-inverse navbar-toggleable-md"> <nav class="navbar navbar-toggleable-md navbar-fixed-top navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<a class="navbar-brand" href="#">Navbar</a> <a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarsExampleDefault"> <div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="nav navbar-nav"> <ul class="navbar-nav mr-auto">
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li> </li>

4
docs/examples/starter-template/index.html
View File

@@ -20,14 +20,14 @@
<body> <body>
<nav class="navbar navbar-inverse bg-inverse navbar-fixed-top navbar-toggleable-md"> <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse navbar-fixed-top">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<a class="navbar-brand" href="#">Navbar</a> <a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarsExampleDefault"> <div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="nav navbar-nav"> <ul class="navbar-nav mr-auto">
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li> </li>

4
docs/examples/sticky-footer-navbar/index.html
View File

@@ -21,13 +21,13 @@
<body> <body>
<!-- Fixed navbar --> <!-- Fixed navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top navbar-toggleable-md bg-inverse"> <nav class="navbar navbar-toggleable-md navbar-inverse navbar-fixed-top bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<a class="navbar-brand" href="#">Fixed navbar</a> <a class="navbar-brand" href="#">Fixed navbar</a>
<div class="collapse navbar-collapse" id="navbarCollapse"> <div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav mt-2 mt-lg-0"> <ul class="navbar-nav mr-auto">
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li> </li>