begin rewrite
This commit is contained in:
parent
33b40b123d
commit
7e804cf553
209
css/grid.css
Normal file
209
css/grid.css
Normal file
|
|
@ -0,0 +1,209 @@
|
|||
/*
|
||||
Grid
|
||||
========================================
|
||||
*/
|
||||
|
||||
:root {
|
||||
--grid-gutter: 24px;
|
||||
}
|
||||
|
||||
/* Container */
|
||||
.container {
|
||||
width: 100%;
|
||||
padding: 0 calc(var(--grid-gutter) / 2);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) { .container { max-width: 540px; } }
|
||||
@media (min-width: 768px) { .container { max-width: 720px; } }
|
||||
@media (min-width: 992px) { .container { max-width: 960px; } }
|
||||
@media (min-width: 1200px) { .container { max-width: 1140px; } }
|
||||
|
||||
.container-fluid {
|
||||
width: 100%;
|
||||
padding: 0 calc(var(--grid-gutter) / 2);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Row */
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 calc(var(--grid-gutter) / -2);
|
||||
}
|
||||
|
||||
/* Base column styles */
|
||||
[class*="col"] {
|
||||
padding: 0 calc(var(--grid-gutter) / 2);
|
||||
}
|
||||
|
||||
.col {
|
||||
flex: 1 0 0%;
|
||||
}
|
||||
|
||||
.col-auto {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* Column widths */
|
||||
.col-1 { flex: 0 0 8.33333%; max-width: 8.33333%; }
|
||||
.col-2 { flex: 0 0 16.66667%; max-width: 16.66667%; }
|
||||
.col-3 { flex: 0 0 25%; max-width: 25%; }
|
||||
.col-4 { flex: 0 0 33.33333%; max-width: 33.33333%; }
|
||||
.col-5 { flex: 0 0 41.66667%; max-width: 41.66667%; }
|
||||
.col-6 { flex: 0 0 50%; max-width: 50%; }
|
||||
.col-7 { flex: 0 0 58.33333%; max-width: 58.33333%; }
|
||||
.col-8 { flex: 0 0 66.66667%; max-width: 66.66667%; }
|
||||
.col-9 { flex: 0 0 75%; max-width: 75%; }
|
||||
.col-10 { flex: 0 0 83.33333%; max-width: 83.33333%; }
|
||||
.col-11 { flex: 0 0 91.66667%; max-width: 91.66667%; }
|
||||
.col-12 { flex: 0 0 100%; max-width: 100%; }
|
||||
|
||||
/* Offset classes */
|
||||
.offset-1 { margin-left: 8.33333%; }
|
||||
.offset-2 { margin-left: 16.66667%; }
|
||||
.offset-3 { margin-left: 25%; }
|
||||
.offset-4 { margin-left: 33.33333%; }
|
||||
.offset-5 { margin-left: 41.66667%; }
|
||||
.offset-6 { margin-left: 50%; }
|
||||
.offset-7 { margin-left: 58.33333%; }
|
||||
.offset-8 { margin-left: 66.66667%; }
|
||||
.offset-9 { margin-left: 75%; }
|
||||
.offset-10 { margin-left: 83.33333%; }
|
||||
.offset-11 { margin-left: 91.66667%; }
|
||||
|
||||
/* Small breakpoint (576px and up) */
|
||||
@media (min-width: 576px) {
|
||||
.col-sm { flex: 1 0 0%; }
|
||||
.col-sm-auto { flex: 0 0 auto; width: auto; }
|
||||
.col-sm-1 { flex: 0 0 8.33333%; max-width: 8.33333%; }
|
||||
.col-sm-2 { flex: 0 0 16.66667%; max-width: 16.66667%; }
|
||||
.col-sm-3 { flex: 0 0 25%; max-width: 25%; }
|
||||
.col-sm-4 { flex: 0 0 33.33333%; max-width: 33.33333%; }
|
||||
.col-sm-5 { flex: 0 0 41.66667%; max-width: 41.66667%; }
|
||||
.col-sm-6 { flex: 0 0 50%; max-width: 50%; }
|
||||
.col-sm-7 { flex: 0 0 58.33333%; max-width: 58.33333%; }
|
||||
.col-sm-8 { flex: 0 0 66.66667%; max-width: 66.66667%; }
|
||||
.col-sm-9 { flex: 0 0 75%; max-width: 75%; }
|
||||
.col-sm-10 { flex: 0 0 83.33333%; max-width: 83.33333%; }
|
||||
.col-sm-11 { flex: 0 0 91.66667%; max-width: 91.66667%; }
|
||||
.col-sm-12 { flex: 0 0 100%; max-width: 100%; }
|
||||
|
||||
.offset-sm-0 { margin-left: 0; }
|
||||
.offset-sm-1 { margin-left: 8.33333%; }
|
||||
.offset-sm-2 { margin-left: 16.66667%; }
|
||||
.offset-sm-3 { margin-left: 25%; }
|
||||
.offset-sm-4 { margin-left: 33.33333%; }
|
||||
.offset-sm-5 { margin-left: 41.66667%; }
|
||||
.offset-sm-6 { margin-left: 50%; }
|
||||
.offset-sm-7 { margin-left: 58.33333%; }
|
||||
.offset-sm-8 { margin-left: 66.66667%; }
|
||||
.offset-sm-9 { margin-left: 75%; }
|
||||
.offset-sm-10 { margin-left: 83.33333%; }
|
||||
.offset-sm-11 { margin-left: 91.66667%; }
|
||||
}
|
||||
|
||||
/* Medium breakpoint (768px and up) */
|
||||
@media (min-width: 768px) {
|
||||
.col-md { flex: 1 0 0%; }
|
||||
.col-md-auto { flex: 0 0 auto; width: auto; }
|
||||
.col-md-1 { flex: 0 0 8.33333%; max-width: 8.33333%; }
|
||||
.col-md-2 { flex: 0 0 16.66667%; max-width: 16.66667%; }
|
||||
.col-md-3 { flex: 0 0 25%; max-width: 25%; }
|
||||
.col-md-4 { flex: 0 0 33.33333%; max-width: 33.33333%; }
|
||||
.col-md-5 { flex: 0 0 41.66667%; max-width: 41.66667%; }
|
||||
.col-md-6 { flex: 0 0 50%; max-width: 50%; }
|
||||
.col-md-7 { flex: 0 0 58.33333%; max-width: 58.33333%; }
|
||||
.col-md-8 { flex: 0 0 66.66667%; max-width: 66.66667%; }
|
||||
.col-md-9 { flex: 0 0 75%; max-width: 75%; }
|
||||
.col-md-10 { flex: 0 0 83.33333%; max-width: 83.33333%; }
|
||||
.col-md-11 { flex: 0 0 91.66667%; max-width: 91.66667%; }
|
||||
.col-md-12 { flex: 0 0 100%; max-width: 100%; }
|
||||
|
||||
.offset-md-0 { margin-left: 0; }
|
||||
.offset-md-1 { margin-left: 8.33333%; }
|
||||
.offset-md-2 { margin-left: 16.66667%; }
|
||||
.offset-md-3 { margin-left: 25%; }
|
||||
.offset-md-4 { margin-left: 33.33333%; }
|
||||
.offset-md-5 { margin-left: 41.66667%; }
|
||||
.offset-md-6 { margin-left: 50%; }
|
||||
.offset-md-7 { margin-left: 58.33333%; }
|
||||
.offset-md-8 { margin-left: 66.66667%; }
|
||||
.offset-md-9 { margin-left: 75%; }
|
||||
.offset-md-10 { margin-left: 83.33333%; }
|
||||
.offset-md-11 { margin-left: 91.66667%; }
|
||||
}
|
||||
|
||||
/* Large breakpoint (992px and up) */
|
||||
@media (min-width: 992px) {
|
||||
.col-lg { flex: 1 0 0%; }
|
||||
.col-lg-auto { flex: 0 0 auto; width: auto; }
|
||||
.col-lg-1 { flex: 0 0 8.33333%; max-width: 8.33333%; }
|
||||
.col-lg-2 { flex: 0 0 16.66667%; max-width: 16.66667%; }
|
||||
.col-lg-3 { flex: 0 0 25%; max-width: 25%; }
|
||||
.col-lg-4 { flex: 0 0 33.33333%; max-width: 33.33333%; }
|
||||
.col-lg-5 { flex: 0 0 41.66667%; max-width: 41.66667%; }
|
||||
.col-lg-6 { flex: 0 0 50%; max-width: 50%; }
|
||||
.col-lg-7 { flex: 0 0 58.33333%; max-width: 58.33333%; }
|
||||
.col-lg-8 { flex: 0 0 66.66667%; max-width: 66.66667%; }
|
||||
.col-lg-9 { flex: 0 0 75%; max-width: 75%; }
|
||||
.col-lg-10 { flex: 0 0 83.33333%; max-width: 83.33333%; }
|
||||
.col-lg-11 { flex: 0 0 91.66667%; max-width: 91.66667%; }
|
||||
.col-lg-12 { flex: 0 0 100%; max-width: 100%; }
|
||||
|
||||
.offset-lg-0 { margin-left: 0; }
|
||||
.offset-lg-1 { margin-left: 8.33333%; }
|
||||
.offset-lg-2 { margin-left: 16.66667%; }
|
||||
.offset-lg-3 { margin-left: 25%; }
|
||||
.offset-lg-4 { margin-left: 33.33333%; }
|
||||
.offset-lg-5 { margin-left: 41.66667%; }
|
||||
.offset-lg-6 { margin-left: 50%; }
|
||||
.offset-lg-7 { margin-left: 58.33333%; }
|
||||
.offset-lg-8 { margin-left: 66.66667%; }
|
||||
.offset-lg-9 { margin-left: 75%; }
|
||||
.offset-lg-10 { margin-left: 83.33333%; }
|
||||
.offset-lg-11 { margin-left: 91.66667%; }
|
||||
}
|
||||
|
||||
/* Extra large breakpoint (1200px and up) */
|
||||
@media (min-width: 1200px) {
|
||||
.col-xl { flex: 1 0 0%; }
|
||||
.col-xl-auto { flex: 0 0 auto; width: auto; }
|
||||
.col-xl-1 { flex: 0 0 8.33333%; max-width: 8.33333%; }
|
||||
.col-xl-2 { flex: 0 0 16.66667%; max-width: 16.66667%; }
|
||||
.col-xl-3 { flex: 0 0 25%; max-width: 25%; }
|
||||
.col-xl-4 { flex: 0 0 33.33333%; max-width: 33.33333%; }
|
||||
.col-xl-5 { flex: 0 0 41.66667%; max-width: 41.66667%; }
|
||||
.col-xl-6 { flex: 0 0 50%; max-width: 50%; }
|
||||
.col-xl-7 { flex: 0 0 58.33333%; max-width: 58.33333%; }
|
||||
.col-xl-8 { flex: 0 0 66.66667%; max-width: 66.66667%; }
|
||||
.col-xl-9 { flex: 0 0 75%; max-width: 75%; }
|
||||
.col-xl-10 { flex: 0 0 83.33333%; max-width: 83.33333%; }
|
||||
.col-xl-11 { flex: 0 0 91.66667%; max-width: 91.66667%; }
|
||||
.col-xl-12 { flex: 0 0 100%; max-width: 100%; }
|
||||
|
||||
.offset-xl-0 { margin-left: 0; }
|
||||
.offset-xl-1 { margin-left: 8.33333%; }
|
||||
.offset-xl-2 { margin-left: 16.66667%; }
|
||||
.offset-xl-3 { margin-left: 25%; }
|
||||
.offset-xl-4 { margin-left: 33.33333%; }
|
||||
.offset-xl-5 { margin-left: 41.66667%; }
|
||||
.offset-xl-6 { margin-left: 50%; }
|
||||
.offset-xl-7 { margin-left: 58.33333%; }
|
||||
.offset-xl-8 { margin-left: 66.66667%; }
|
||||
.offset-xl-9 { margin-left: 75%; }
|
||||
.offset-xl-10 { margin-left: 83.33333%; }
|
||||
.offset-xl-11 { margin-left: 91.66667%; }
|
||||
}
|
||||
|
||||
/* Utility classes */
|
||||
.no-gutters {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.no-gutters > [class*="col"] {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
63
css/navbar.css
Normal file
63
css/navbar.css
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
/* Variables */
|
||||
:root {
|
||||
--navbar-height: 40px;
|
||||
--navbar-bg: #fafafa;
|
||||
--navbar-bg-highlight: #f2f2f2;
|
||||
--navbar-bg-active-top: #f2f2f2;
|
||||
--navbar-bg-active-highlight: #e6e6e6;
|
||||
--navbar-border: #d4d4d4;
|
||||
--navbar-link: #777;
|
||||
--navbar-link-hover: #333;
|
||||
--navbar-link-active: #555;
|
||||
--navbar-active: #08c;
|
||||
--navbar-active-bg: transparent;
|
||||
--navbar-brand-color: var(--navbar-link);
|
||||
}
|
||||
|
||||
/* Navbar Base */
|
||||
.navbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: var(--navbar-height);
|
||||
margin-bottom: 1.25rem;
|
||||
padding: 0 1.25rem;
|
||||
background-color: var(--navbar-bg);
|
||||
background-image: linear-gradient(to bottom, white, var(--navbar-bg-highlight));
|
||||
border: 1px solid var(--navbar-border);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
|
||||
}
|
||||
|
||||
.navbar .nav-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navbar .nav-menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
li {
|
||||
display: inline-flex;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
li.active {
|
||||
background-image: linear-gradient(to bottom, var(--navbar-bg-active-top), var(--navbar-bg-active-highlight));
|
||||
color: var(--navbar-link-active);
|
||||
}
|
||||
}
|
||||
|
||||
.navbar .brand {
|
||||
display: block;
|
||||
font-size: 20px;
|
||||
font-weight: 200;
|
||||
color: var(--navbar-brand-color);
|
||||
margin-right: 1.25rem;
|
||||
text-shadow: 0 1px 0 white;
|
||||
|
||||
&:hover, &:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
121
css/reset.css
Normal file
121
css/reset.css
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
/*
|
||||
Reset
|
||||
========================================
|
||||
*/
|
||||
|
||||
/* Box sizing normalization */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Document basics */
|
||||
html {
|
||||
font-size: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
/* Reset margins */
|
||||
body,
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
p, blockquote, pre,
|
||||
dl, dd, ol, ul,
|
||||
form, fieldset, legend,
|
||||
figure, figcaption {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Body defaults */
|
||||
body {
|
||||
line-height: 1.5;
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", sans-serif;
|
||||
}
|
||||
|
||||
/* Lists */
|
||||
ul, ol {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
/* Media elements */
|
||||
img, svg, video, canvas, audio, iframe, embed, object {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Form elements */
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Button defaults */
|
||||
button {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Pre/Code formatting */
|
||||
pre, code, kbd, samp {
|
||||
font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/* Subscript/Superscript */
|
||||
sub, sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/* Horizontal rule */
|
||||
hr {
|
||||
height: 0;
|
||||
border: 0;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
/* Accessibility improvements */
|
||||
[tabindex="-1"]:focus {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
/* Remove animations for users who prefer reduced motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
118
docs/grid.md
Normal file
118
docs/grid.md
Normal file
|
|
@ -0,0 +1,118 @@
|
|||
# Grid Documentation
|
||||
|
||||
## Features
|
||||
|
||||
- 12-column layout system
|
||||
- Responsive breakpoints: sm (576px), md (768px), lg (992px), xl (1200px)
|
||||
- Fluid and fixed-width containers
|
||||
- Offsets for column positioning
|
||||
- No-gutters option to remove spacing
|
||||
- Based on Flexbox for modern layout capabilities
|
||||
|
||||
## Basic Usage
|
||||
|
||||
### Container
|
||||
|
||||
Wrap your content in a container:
|
||||
|
||||
```html
|
||||
<div class="container">
|
||||
<!-- Content here -->
|
||||
</div>
|
||||
```
|
||||
|
||||
For full-width container:
|
||||
|
||||
```html
|
||||
<div class="container-fluid">
|
||||
<!-- Content here -->
|
||||
</div>
|
||||
```
|
||||
|
||||
### Rows and Columns
|
||||
|
||||
Structure your layout with rows and columns:
|
||||
|
||||
```html
|
||||
<div class="row">
|
||||
<div class="col">Equal width</div>
|
||||
<div class="col">Equal width</div>
|
||||
<div class="col">Equal width</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Specific Column Sizes
|
||||
|
||||
Specify column widths using the 12-column system:
|
||||
|
||||
```html
|
||||
<div class="row">
|
||||
<div class="col-4">4 columns</div>
|
||||
<div class="col-8">8 columns</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Responsive Columns
|
||||
|
||||
Columns change width at different breakpoints:
|
||||
|
||||
```html
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-lg-3">
|
||||
<!-- Full width on mobile, half on tablet, quarter on desktop -->
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Offset Columns
|
||||
|
||||
Push columns to the right:
|
||||
|
||||
```html
|
||||
<div class="row">
|
||||
<div class="col-6 offset-3">Centered column</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### No Gutters
|
||||
|
||||
Remove spacing between columns:
|
||||
|
||||
```html
|
||||
<div class="row no-gutters">
|
||||
<div class="col-6">No spacing</div>
|
||||
<div class="col-6">No spacing</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Customization
|
||||
|
||||
Adjust the gutter size by modifying the CSS variable:
|
||||
|
||||
```css
|
||||
:root {
|
||||
--grid-gutter: 30px; /* Change from default 24px */
|
||||
}
|
||||
```
|
||||
|
||||
## Available Classes
|
||||
|
||||
### Container Classes
|
||||
- `.container` - Responsive fixed-width container
|
||||
- `.container-fluid` - Full-width container
|
||||
|
||||
### Row Class
|
||||
- `.row` - Flex container for columns
|
||||
|
||||
### Column Classes
|
||||
- `.col` - Equal width column
|
||||
- `.col-auto` - Auto-sized column based on content
|
||||
- `.col-1` through `.col-12` - Specific width columns
|
||||
- `.col-sm-*`, `.col-md-*`, `.col-lg-*`, `.col-xl-*` - Responsive width columns
|
||||
|
||||
### Offset Classes
|
||||
- `.offset-1` through `.offset-11` - Push columns right
|
||||
- `.offset-sm-*`, `.offset-md-*`, `.offset-lg-*`, `.offset-xl-*` - Responsive offsets
|
||||
|
||||
### Utility Classes
|
||||
- `.no-gutters` - Remove spacing between columns
|
||||
40
docs/navbar.md
Normal file
40
docs/navbar.md
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
# Navbar Documentation
|
||||
|
||||
A lightweight navbar inspired by Bootstrap 2 with cleaner HTML and easier customization.
|
||||
|
||||
## Features
|
||||
|
||||
- Simple, semantic HTML structure
|
||||
- CSS variables for easy theming
|
||||
- No dependencies
|
||||
- Responsive design
|
||||
- CSS-only dropdowns
|
||||
|
||||
## Usage
|
||||
|
||||
1. Include the CSS and JS files:
|
||||
```html
|
||||
<link rel="stylesheet" href="navbar.css">
|
||||
<script src="navbar.js"></script>
|
||||
```
|
||||
|
||||
2. Add the navbar HTML to your page:
|
||||
```html
|
||||
<nav class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<a class="brand" href="#">Site Name</a>
|
||||
<!-- Add navigation here -->
|
||||
</div>
|
||||
</nav>
|
||||
```
|
||||
|
||||
## Variants
|
||||
|
||||
### Standard Navbar
|
||||
Default navbar with rounded corners and bottom margin.
|
||||
|
||||
### Fixed Navbar
|
||||
Add class `navbar-fixed` to the navbar element to make it stick to the top of the viewport.
|
||||
|
||||
### Static Top Navbar
|
||||
Add class `navbar-static-top` to the navbar element for a full-width navbar without rounded corners.
|
||||
15
js/navbar.js
Normal file
15
js/navbar.js
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
/*
|
||||
Navbar JavaScript
|
||||
========================================
|
||||
*/
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Mobile menu toggle
|
||||
const btnNavbar = document.querySelector('.btn-navbar');
|
||||
const navCollapse = document.querySelector('.nav-collapse');
|
||||
|
||||
if (btnNavbar && navCollapse) {
|
||||
btnNavbar.addEventListener('click', function() {
|
||||
navCollapse.classList.toggle('active');
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
@ -1,133 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Buttons · Bootstrap</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<!-- Le styles -->
|
||||
<link href="..//bootstrap.css" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<link href="../bootstrap-responsive.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<h2>Dropups</h2>
|
||||
<div class="btn-toolbar">
|
||||
<div class="btn-group dropup">
|
||||
<button class="btn">Dropup</button>
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group dropup">
|
||||
<button class="btn btn-primary">Dropup</button>
|
||||
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span
|
||||
class="caret"></span></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group dropup">
|
||||
<button class="btn btn-danger">Dropup</button>
|
||||
<button class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span
|
||||
class="caret"></span></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group dropup">
|
||||
<button class="btn btn-warning">Dropup</button>
|
||||
<button class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span
|
||||
class="caret"></span></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group dropup">
|
||||
<button class="btn btn-success">Dropup</button>
|
||||
<button class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span
|
||||
class="caret"></span></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group dropup">
|
||||
<button class="btn btn-info">Dropup</button>
|
||||
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group dropup">
|
||||
<button class="btn btn-inverse">Dropup</button>
|
||||
<button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown"><span
|
||||
class="caret"></span></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
</div><!-- /btn-toolbar -->
|
||||
|
||||
|
||||
</div> <!-- /container -->
|
||||
|
||||
<!-- Le javascript ================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="../../docs/assets/js/jquery.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-transition.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-alert.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-modal.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-dropdown.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-scrollspy.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-tab.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-tooltip.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-popover.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-button.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-collapse.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-carousel.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-typeahead.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,150 +0,0 @@
|
|||
/*!
|
||||
* Bootstrap CSS Tests
|
||||
*/
|
||||
|
||||
|
||||
/* Remove background image */
|
||||
body {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
/* Space out subhead */
|
||||
.subhead {
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
/*h4 {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
*/
|
||||
|
||||
.type-test {
|
||||
margin-bottom: 20px;
|
||||
padding: 0 20px 20px;
|
||||
background: url(../../docs/assets/img/grid-baseline-20px.png);
|
||||
}
|
||||
.type-test h1,
|
||||
.type-test h2,
|
||||
.type-test h3,
|
||||
.type-test h4,
|
||||
.type-test h5,
|
||||
.type-test h6 {
|
||||
background-color: rgba(255,0,0,.2);
|
||||
}
|
||||
|
||||
|
||||
/* colgroup tests */
|
||||
.col1 {
|
||||
background-color: rgba(255,0,0,.1);
|
||||
}
|
||||
.col2 {
|
||||
background-color: rgba(0,255,0,.1);
|
||||
}
|
||||
.col3 {
|
||||
background-color: rgba(0,0,255,.1);
|
||||
}
|
||||
|
||||
|
||||
/* Fluid row inputs */
|
||||
#rowInputs .row > [class*=span],
|
||||
#fluidRowInputs .row-fluid > [class*=span] {
|
||||
background-color: rgba(255,0,0,.1);
|
||||
}
|
||||
|
||||
|
||||
/* Fluid grid */
|
||||
.fluid-grid {
|
||||
margin-bottom: 45px;
|
||||
}
|
||||
.fluid-grid .row {
|
||||
height: 40px;
|
||||
padding-top: 10px;
|
||||
margin-top: 10px;
|
||||
color: #ddd;
|
||||
text-align: center;
|
||||
}
|
||||
.fluid-grid .span1 {
|
||||
background-color: #999;
|
||||
}
|
||||
|
||||
|
||||
/* Gradients */
|
||||
|
||||
[class^="gradient-"] {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
margin: 20px 0;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.gradient-horizontal {
|
||||
background-color: #333333;
|
||||
background-image: -moz-linear-gradient(left, #555555, #333333);
|
||||
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#555555), to(#333333));
|
||||
background-image: -webkit-linear-gradient(left, #555555, #333333);
|
||||
background-image: -o-linear-gradient(left, #555555, #333333);
|
||||
background-image: linear-gradient(to right, #555555, #333333);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff555555', endColorstr='#ff333333', GradientType=1);
|
||||
}
|
||||
|
||||
.gradient-vertical {
|
||||
background-color: #474747;
|
||||
background-image: -moz-linear-gradient(top, #555555, #333333);
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#555555), to(#333333));
|
||||
background-image: -webkit-linear-gradient(top, #555555, #333333);
|
||||
background-image: -o-linear-gradient(top, #555555, #333333);
|
||||
background-image: linear-gradient(to bottom, #555555, #333333);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff555555', endColorstr='#ff333333', GradientType=0);
|
||||
}
|
||||
|
||||
.gradient-directional {
|
||||
background-color: #333333;
|
||||
background-image: -moz-linear-gradient(45deg, #555555, #333333);
|
||||
background-image: -webkit-linear-gradient(45deg, #555555, #333333);
|
||||
background-image: -o-linear-gradient(45deg, #555555, #333333);
|
||||
background-image: linear-gradient(45deg, #555555, #333333);
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
.gradient-vertical-three {
|
||||
background-color: #8940a5;
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#00b3ee), color-stop(50%, #7a43b6), to(#c3325f));
|
||||
background-image: -webkit-linear-gradient(#00b3ee, #7a43b6 50%, #c3325f);
|
||||
background-image: -moz-linear-gradient(top, #00b3ee, #7a43b6 50%, #c3325f);
|
||||
background-image: -o-linear-gradient(#00b3ee, #7a43b6 50%, #c3325f);
|
||||
background-image: linear-gradient(#00b3ee, #7a43b6 50%, #c3325f);
|
||||
background-repeat: no-repeat;
|
||||
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff00b3ee', endColorstr='#ffc3325f', GradientType=0);
|
||||
}
|
||||
|
||||
.gradient-radial {
|
||||
background-color: #333333;
|
||||
background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(#555555), to(#333333));
|
||||
background-image: -webkit-radial-gradient(circle, #555555, #333333);
|
||||
background-image: -moz-radial-gradient(circle, #555555, #333333);
|
||||
background-image: -o-radial-gradient(circle, #555555, #333333);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.gradient-striped {
|
||||
background-color: #555555;
|
||||
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
|
||||
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
||||
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
||||
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
||||
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
||||
}
|
||||
|
||||
.gradient-horizontal-three {
|
||||
background-color: #00b3ee;
|
||||
background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(#00b3ee), color-stop(50%, #7a43b6), to(#c3325f));
|
||||
background-image: -webkit-linear-gradient(left, #00b3ee, #7a43b6 50%, #c3325f);
|
||||
background-image: -moz-linear-gradient(left, #00b3ee, #7a43b6 50%, #c3325f);
|
||||
background-image: -o-linear-gradient(left, #00b3ee, #7a43b6 50%, #c3325f);
|
||||
background-image: linear-gradient(to right, #00b3ee, #7a43b6 50%, #c3325f);
|
||||
background-repeat: no-repeat;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00b3ee', endColorstr='#c3325f', GradientType=0);
|
||||
}
|
||||
1376
tests/css-tests.html
1376
tests/css-tests.html
File diff suppressed because it is too large
Load Diff
|
|
@ -1,64 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Bootstrap</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<!-- Le styles -->
|
||||
<link href="../bootstrap.css" rel="stylesheet">
|
||||
<link href="../bootstrap-responsive.css" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<form class="container">
|
||||
|
||||
<div class="page-header">
|
||||
<h1>Fixed grid</h1>
|
||||
</div>
|
||||
|
||||
<h3>Vertical alignment</h3>
|
||||
<input type="text" class="span2" placeholder="span2">
|
||||
<select class="span2">
|
||||
<option>span2</option>
|
||||
</select>
|
||||
<span class="uneditable-input span2">span1</span>
|
||||
|
||||
<h3>Width across elements</h3>
|
||||
<div>
|
||||
<input type="text" class="span2" placeholder="span2">
|
||||
</div>
|
||||
<div>
|
||||
<select class="span2">
|
||||
<option>span2</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<span class="uneditable-input span2">span2</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="page-header">
|
||||
<h1>Fluid grid</h1>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
<input type="text" class="span2" placeholder="span2">
|
||||
<select class="span2">
|
||||
<option>span2</option>
|
||||
</select>
|
||||
<span class="uneditable-input span2">span1</span>
|
||||
</div>
|
||||
|
||||
</form> <!-- /container -->
|
||||
</body>
|
||||
</html>
|
||||
165
tests/forms.html
165
tests/forms.html
|
|
@ -1,165 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Bootstrap</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<!-- Le styles -->
|
||||
<link href="../bootstrap.css" rel="stylesheet">
|
||||
<link href="../bootstrap-responsive.css" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<form class="container">
|
||||
<div class="page-header">
|
||||
<h1>Form controls</h1>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
|
||||
<label>Select</label>
|
||||
<select>
|
||||
<option>Select</option>
|
||||
<option>Option 2</option>
|
||||
<option>Option 3</option>
|
||||
</select>
|
||||
|
||||
<hr>
|
||||
|
||||
<label>textarea</label>
|
||||
<textarea>Textarea</textarea>
|
||||
|
||||
<hr>
|
||||
|
||||
<label>text</label>
|
||||
<input type="text" value="Text input">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>password</label>
|
||||
<input type="password" value="Password input">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>checkbox</label>
|
||||
<input type="checkbox" value="">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>radio</label>
|
||||
<input type="radio" value="">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>button</label>
|
||||
<input type="button" value="Button">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>submit</label>
|
||||
<input type="submit" value="Submit">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>reset</label>
|
||||
<input type="reset" value="Reset">
|
||||
|
||||
</div><!-- /span4 -->
|
||||
<div class="span4">
|
||||
|
||||
<label>file</label>
|
||||
<input type="file" value="">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>hidden</label>
|
||||
<input type="hidden" value="hidden">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>image</label>
|
||||
<input type="image" value="">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>datetime</label>
|
||||
<input type="datetime" value="">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>datetime-local</label>
|
||||
<input type="datetime-local" value="">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>date</label>
|
||||
<input type="date" value="">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>month</label>
|
||||
<input type="month" value="">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>time</label>
|
||||
<input type="time" value="">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>week</label>
|
||||
<input type="week" value="">
|
||||
|
||||
</div><!-- /span4 -->
|
||||
<div class="span4">
|
||||
|
||||
<label>number</label>
|
||||
<input type="number" value="">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>range</label>
|
||||
<input type="range" value="">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>email</label>
|
||||
<input type="email" value="">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>url</label>
|
||||
<input type="url" value="">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>search</label>
|
||||
<input type="search" value="">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>tel</label>
|
||||
<input type="tel" value="">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>color</label>
|
||||
<input type="color" value="">
|
||||
|
||||
</div><!-- /span4 -->
|
||||
</div><!-- /row -->
|
||||
|
||||
</form> <!-- /container -->
|
||||
</body>
|
||||
</html>
|
||||
175
tests/grid.html
Normal file
175
tests/grid.html
Normal file
|
|
@ -0,0 +1,175 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Grid</title>
|
||||
<link rel="stylesheet" href="../css/reset.css">
|
||||
<link rel="stylesheet" href="../css/grid.css">
|
||||
<style>
|
||||
[class*="col"] {
|
||||
background-color: #f8f9fa;
|
||||
border: 1px solid #dee2e6;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nested-demo [class*="col"] {
|
||||
background-color: #e9ecef;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
12
|
||||
<div class="row nested-demo">
|
||||
<div class="col-1">1</div>
|
||||
<div class="col-1">1</div>
|
||||
<div class="col-1">1</div>
|
||||
<div class="col-1">1</div>
|
||||
<div class="col-1">1</div>
|
||||
<div class="col-1">1</div>
|
||||
<div class="col-1">1</div>
|
||||
<div class="col-1">1</div>
|
||||
<div class="col-1">1</div>
|
||||
<div class="col-1">1</div>
|
||||
<div class="col-1">1</div>
|
||||
<div class="col-1">1</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-11">
|
||||
11
|
||||
<div class="row nested-demo">
|
||||
<div class="col-1">1</div>
|
||||
<div class="col-1">1</div>
|
||||
<div class="col-1">1</div>
|
||||
<div class="col-1">1</div>
|
||||
<div class="col-1">1</div>
|
||||
<div class="col-1">1</div>
|
||||
<div class="col-1">1</div>
|
||||
<div class="col-1">1</div>
|
||||
<div class="col-1">1</div>
|
||||
<div class="col-1">1</div>
|
||||
<div class="col-1">1</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-1">
|
||||
1
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-10">
|
||||
10
|
||||
<div class="row nested-demo">
|
||||
<div class="col-1">1</div>
|
||||
<div class="col-1">1</div>
|
||||
<div class="col-1">1</div>
|
||||
<div class="col-1">1</div>
|
||||
<div class="col-1">1</div>
|
||||
<div class="col-1">1</div>
|
||||
<div class="col-1">1</div>
|
||||
<div class="col-1">1</div>
|
||||
<div class="col-1">1</div>
|
||||
<div class="col-1">1</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
2
|
||||
<div class="row nested-demo">
|
||||
<div class="col-6">1/2</div>
|
||||
<div class="col-6">1/2</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-9">
|
||||
9
|
||||
<div class="row nested-demo">
|
||||
<div class="col-1">1</div>
|
||||
<div class="col-1">1</div>
|
||||
<div class="col-1">1</div>
|
||||
<div class="col-1">1</div>
|
||||
<div class="col-1">1</div>
|
||||
<div class="col-1">1</div>
|
||||
<div class="col-1">1</div>
|
||||
<div class="col-1">1</div>
|
||||
<div class="col-1">1</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
3
|
||||
<div class="row nested-demo">
|
||||
<div class="col-4">1/3</div>
|
||||
<div class="col-4">1/3</div>
|
||||
<div class="col-4">1/3</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-8">
|
||||
8
|
||||
<div class="row nested-demo">
|
||||
<div class="col-3">1/4</div>
|
||||
<div class="col-3">1/4</div>
|
||||
<div class="col-3">1/4</div>
|
||||
<div class="col-3">1/4</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
4
|
||||
<div class="row nested-demo">
|
||||
<div class="col-6">1/2</div>
|
||||
<div class="col-6">1/2</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-7">
|
||||
7
|
||||
<div class="row nested-demo">
|
||||
<div class="col-4">~1/3</div>
|
||||
<div class="col-4">~1/3</div>
|
||||
<div class="col-4">~1/3</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-5">
|
||||
5
|
||||
<div class="row nested-demo">
|
||||
<div class="col-6">1/2</div>
|
||||
<div class="col-6">1/2</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
6
|
||||
<div class="row nested-demo">
|
||||
<div class="col-6">1/2</div>
|
||||
<div class="col-6">1/2</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
6
|
||||
<div class="row nested-demo">
|
||||
<div class="col-6">1/2</div>
|
||||
<div class="col-6">1/2</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,92 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Bootstrap, from Twitter</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<!-- Le styles -->
|
||||
<link href="../bootstrap.css" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
padding-top: 60px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<link href="../bootstrap-responsive.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Fixed navbar -->
|
||||
<div class="navbar navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</a>
|
||||
<a class="brand" href="#">Project name</a>
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b
|
||||
class="caret"></b></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li class="nav-header">Nav header</li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
<li><a href="#">One more separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="nav pull-right">
|
||||
<li><a href="./navbar.html">Default</a></li>
|
||||
<li><a href="./navbar-static-top.html">Static top</a></li>
|
||||
<li class="active"><a href="./navbar-fixed-top.html">Fixed top</a></li>
|
||||
</ul>
|
||||
</div><!--/.nav-collapse -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<!-- Main hero unit for a primary marketing message or call to action -->
|
||||
<div class="hero-unit">
|
||||
<h1>Navbar example</h1>
|
||||
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar
|
||||
work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
|
||||
<p>
|
||||
<a class="btn btn-large btn-primary" href="../components.html#navbar">View navbar docs »</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div> <!-- /container -->
|
||||
|
||||
<!-- Le javascript ================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="../../docs/assets/js/jquery.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-transition.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-alert.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-modal.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-dropdown.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-scrollspy.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-tab.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-tooltip.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-popover.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-button.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-collapse.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-carousel.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-typeahead.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,96 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Bootstrap</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<!-- Le styles -->
|
||||
<link href="../bootstrap.css" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.hero-unit {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
<link href="../bootstrap-responsive.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Static navbar -->
|
||||
<div class="navbar navbar-static-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</a>
|
||||
<a class="brand" href="#">Project name</a>
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b
|
||||
class="caret"></b></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li class="nav-header">Nav header</li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
<li><a href="#">One more separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="nav pull-right">
|
||||
<li><a href="./navbar.html">Default</a></li>
|
||||
<li class="active"><a href="./navbar-static-top.html">Static top</a></li>
|
||||
<li><a href="./navbar-fixed-top.html">Fixed top</a></li>
|
||||
</ul>
|
||||
</div><!--/.nav-collapse -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container">
|
||||
|
||||
<!-- Main hero unit for a primary marketing message or call to action -->
|
||||
<div class="hero-unit">
|
||||
<h1>Navbar example</h1>
|
||||
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar
|
||||
work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
|
||||
<p>
|
||||
<a class="btn btn-large btn-primary" href="../components.html#navbar">View navbar docs »</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div> <!-- /container -->
|
||||
|
||||
<!-- Le javascript ================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="../../docs/assets/js/jquery.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-transition.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-alert.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-modal.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-dropdown.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-scrollspy.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-tab.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-tooltip.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-popover.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-button.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-collapse.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-carousel.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-typeahead.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,93 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Bootstrap</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<!-- Le styles -->
|
||||
<link href="../bootstrap.css" rel="stylesheet">
|
||||
<title>Navbar</title>
|
||||
<link rel="stylesheet" href="../css/reset.css">
|
||||
<link rel="stylesheet" href="../css/navbar.css">
|
||||
<style>
|
||||
body {
|
||||
padding-top: 0;
|
||||
padding-bottom: 30px;
|
||||
padding: 20px;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
margin-top: 20px;
|
||||
.content {
|
||||
margin-top: 30px;
|
||||
padding: 20px;
|
||||
background: #f9f9f9;
|
||||
border-radius: 5px;
|
||||
}
|
||||
</style>
|
||||
<link href="../bootstrap-responsive.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<nav class="navbar">
|
||||
<a class="navbar-brand" href="#">Project name</a>
|
||||
<!-- Standard Navbar -->
|
||||
<nav class="navbar">
|
||||
<div class="nav-group">
|
||||
<a class="brand" href="#">MakoCSS</a>
|
||||
|
||||
<button class="navbar-toggle" data-toggle="collapse" data-target="#main-nav">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
|
||||
<div id="main-nav" class="navbar-collapse">
|
||||
<ul class="navbar-nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li class="nav-header">Nav header</li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
<li><a href="#">One more separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="navbar-nav navbar-right">
|
||||
<li class="active"><a href="./navbar.html">Default</a></li>
|
||||
<li><a href="./navbar-static-top.html">Static top</a></li>
|
||||
<li><a href="./navbar-fixed-top.html">Fixed top</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Main hero unit for a primary marketing message or call to action -->
|
||||
<div class="hero-unit">
|
||||
<h1>Navbar example</h1>
|
||||
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar
|
||||
work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
|
||||
<p>
|
||||
<a class="btn btn-large btn-primary" href="../components.html#navbar">View navbar docs »</a>
|
||||
</p>
|
||||
<ul class="nav-menu">
|
||||
<li class="active"><a href="standard.html">Standard</a></li>
|
||||
<li><a href="fixed.html">Fixed</a></li>
|
||||
<li><a href="static-top.html">Static Top</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle">Dropdown</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div> <!-- /container -->
|
||||
<div class="nav-group">
|
||||
<form class="navbar-search">
|
||||
<input type="text" class="search-query" placeholder="Search">
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Le javascript ================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="../../docs/assets/js/jquery.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-transition.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-alert.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-modal.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-dropdown.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-scrollspy.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-tab.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-tooltip.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-popover.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-button.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-collapse.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-carousel.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-typeahead.js"></script>
|
||||
<div class="content">
|
||||
<h1>Standard Navbar Demo</h1>
|
||||
<p>This demonstrates the default navbar style with rounded corners and a bottom margin.</p>
|
||||
<p>The standard navbar scrolls with the page content.</p>
|
||||
</div>
|
||||
|
||||
<script src="../js/navbar.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user