Compare commits
No commits in common. "d644195bea67ac6c6f84dd09acb0087b3e9b030b" and "98baf9acc64de04627effef9084167fc2b4aa3b0" have entirely different histories.
d644195bea
...
98baf9acc6
5
.Trash-1000/files/included.php
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
<?php include_once 'header.php';?>
|
||||||
|
|
||||||
|
<h1>pagina de include</h1>
|
||||||
|
|
||||||
|
<?php include_once 'footer.php';?>
|
0
.Trash-1000/files/sidebar.html
Normal file
3
.Trash-1000/info/included.php.trashinfo
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
[Trash Info]
|
||||||
|
Path=included.php
|
||||||
|
DeletionDate=2017-09-05T19:02:02
|
3
.Trash-1000/info/sidebar.html.trashinfo
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
[Trash Info]
|
||||||
|
Path=sidebar.html
|
||||||
|
DeletionDate=2017-09-05T18:56:27
|
6
.gitignore
vendored
@ -1,3 +1,3 @@
|
|||||||
/vendor/
|
2021y22.csv
|
||||||
/logs/*
|
*.bak
|
||||||
!/logs/README.md
|
bkp/*
|
||||||
|
10
.htaccess
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
RewriteEngine On
|
||||||
|
#example.com/page will display the contents of example.com/page.html
|
||||||
|
RewriteCond %{REQUEST_FILENAME} !-f
|
||||||
|
RewriteCond %{REQUEST_FILENAME} !-d
|
||||||
|
RewriteCond %{REQUEST_FILENAME}.php -f
|
||||||
|
RewriteRule ^(.+)$ $1.php [L,QSA]
|
||||||
|
|
||||||
|
#301 from example.com/page.html to example.com/page
|
||||||
|
RewriteCond %{THE_REQUEST} ^[A-Z]{3,9}\ /.*\.php\ HTTP/
|
||||||
|
RewriteRule ^(.*)\.php$ /$1 [R=301,L]
|
@ -1,14 +0,0 @@
|
|||||||
# How to Contribute
|
|
||||||
|
|
||||||
## Pull Requests
|
|
||||||
|
|
||||||
1. Fork the Slim Skeleton repository
|
|
||||||
2. Create a new branch for each feature or improvement
|
|
||||||
3. Send a pull request from each feature branch to the **3.x** branch
|
|
||||||
|
|
||||||
It is very important to separate new features or improvements into separate feature branches, and to send a
|
|
||||||
pull request for each branch. This allows us to review and pull in new features or improvements individually.
|
|
||||||
|
|
||||||
## Style Guide
|
|
||||||
|
|
||||||
All pull requests must adhere to the [PSR-2 standard](https://github.com/php-fig/fig-standards/blob/master/accepted/PSR-2-coding-style-guide.md).
|
|
26
README.md
@ -1,26 +0,0 @@
|
|||||||
# Slim Framework 3 Skeleton Application
|
|
||||||
|
|
||||||
Use this skeleton application to quickly setup and start working on a new Slim Framework 3 application. This application uses the latest Slim 3 with the PHP-View template renderer. It also uses the Monolog logger.
|
|
||||||
|
|
||||||
This skeleton application was built for Composer. This makes setting up a new Slim Framework application quick and easy.
|
|
||||||
|
|
||||||
## Install the Application
|
|
||||||
|
|
||||||
Run this command from the directory in which you want to install your new Slim Framework application.
|
|
||||||
|
|
||||||
php composer.phar create-project slim/slim-skeleton [my-app-name]
|
|
||||||
|
|
||||||
Replace `[my-app-name]` with the desired directory name for your new application. You'll want to:
|
|
||||||
|
|
||||||
* Point your virtual host document root to your new application's `public/` directory.
|
|
||||||
* Ensure `logs/` is web writeable.
|
|
||||||
|
|
||||||
To run the application in development, you can also run this command.
|
|
||||||
|
|
||||||
php composer.phar start
|
|
||||||
|
|
||||||
Run this command to run the test suite
|
|
||||||
|
|
||||||
php composer.phar test
|
|
||||||
|
|
||||||
That's it! Now go build something cool.
|
|
25
calendario.php
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
<?php include_once 'header.php'; ?>
|
||||||
|
|
||||||
|
<!-- Full Calendar -->
|
||||||
|
<link rel='stylesheet' href='js/fullcalendar/fullcalendar.css' />
|
||||||
|
<link rel='stylesheet' href='js/fullcalendar/sched/scheduler.css' />
|
||||||
|
<script src="js/fullcalendar/lib/moment.min.js"></script>
|
||||||
|
<script src="js/fullcalendar/fullcalendar.js"></script>
|
||||||
|
<script src="js/fullcalendar/locale-all.js"></script>
|
||||||
|
<script type="text/javascript" src="js/fullcalendar/sched/scheduler.js"></script>
|
||||||
|
<script src="js/calprog.js"></script>
|
||||||
|
<div class="row">
|
||||||
|
<div id="content" class="col-xs-12 col-sm-8">
|
||||||
|
<div class="row">
|
||||||
|
<h1 id="welcome"><strong>Calendario</strong></h1>
|
||||||
|
<div id="calendario">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<?php include_once 'sidebar.php'; ?>
|
||||||
|
<?php include_once 'footer.php'; ?>
|
30
committess.php
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
<?php include_once 'header.php'; ?>
|
||||||
|
<div class="row">
|
||||||
|
<div id="content" class="col-xs-12 col-sm-8">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-12">
|
||||||
|
<h1><strong>Committees</strong></h1>
|
||||||
|
<h2>Scientific Committee</h2>
|
||||||
|
<ul class="comite">
|
||||||
|
<li><a href="http://www.math.lsa.umich.edu/~canary/" data-linktype="external" data-val="http://www.math.lsa.umich.edu/~canary/">Dick Canary - University of Michigan</a></li>
|
||||||
|
<li><a href="https://www.math.u-psud.fr/~crovisie/" data-linktype="external" data-val="https://www.math.u-psud.fr/~crovisie/">Sylvain Crovisier - Université Paris-Sud</a></li>
|
||||||
|
<li><a href="https://www.ihes.fr/en/professeur/3403-2/" data-linktype="external" data-val="https://www.ihes.fr/en/professeur/3403-2/">Fanny Kassel - IHES</a></li>
|
||||||
|
<li><a href="http://cayley.kr/wiki/Sang-hyun_Kim" data-linktype="external" data-val="http://cayley.kr/wiki/Sang-hyun_Kim">Sang-hyun Kim - Seoul National University</a></li>
|
||||||
|
<li><a href="https://www.dpmms.cam.ac.uk/~gpp24/" data-linktype="external" data-val="https://www.dpmms.cam.ac.uk/~gpp24/">Gabriel Paternain - University of Cambridge</a></li>
|
||||||
|
<li><a href="http://w3.impa.br/~enrique/" data-linktype="external" data-val="http://w3.impa.br/~enrique/">Enrique Pujals - IMPA</a></li>
|
||||||
|
<li><a data-val="http://www.cmat.edu.uy/~rpotrie/" href="http://www.cmat.edu.uy/~rpotrie/" data-linktype="external">Rafael Potrie - CMAT</a></li>
|
||||||
|
</ul>
|
||||||
|
<h2>Organizing Committee</h2>
|
||||||
|
<ul class="comite">
|
||||||
|
<li>Juan Alonso</li>
|
||||||
|
<li>Joaquín Brum</li>
|
||||||
|
<li>Andrés Sambarino</li>
|
||||||
|
<li>Martín Sambarino</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<?php include_once 'sidebar.php'; ?>
|
||||||
|
<?php include_once 'footer.php'; ?>
|
@ -1,38 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "slim/slim-skeleton",
|
|
||||||
"description": "Groups Geometry and Dynamics, ICM2018 Satellite, Web Project",
|
|
||||||
"keywords": ["ICM2018", "GGDWorkshop", "Montevideo","Math","Groups","Geometry"],
|
|
||||||
"homepage": "https://ggdworkshop.cmat.edu.uy",
|
|
||||||
"license": "GPLv2",
|
|
||||||
"authors": [
|
|
||||||
{
|
|
||||||
"name": "Germán Correa",
|
|
||||||
"email": "germanc@cmat.edu.uy",
|
|
||||||
"homepage": "http://www.cmat.edu.uy"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"require": {
|
|
||||||
"php": ">=8.2",
|
|
||||||
"slim/slim": "^3.1",
|
|
||||||
"monolog/monolog": "^1.17",
|
|
||||||
"slim/twig-view": "^2.3",
|
|
||||||
"google/recaptcha": "^1.1",
|
|
||||||
"kanellov/slim-twig-flash": "^0.2.0"
|
|
||||||
},
|
|
||||||
"require-dev": {
|
|
||||||
"phpunit/phpunit": ">=4.8 < 6.0"
|
|
||||||
},
|
|
||||||
"autoload-dev": {
|
|
||||||
"psr-4": {
|
|
||||||
"Tests\\": "tests/"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"config": {
|
|
||||||
"process-timeout" : 0
|
|
||||||
},
|
|
||||||
"scripts": {
|
|
||||||
"start": "php -S localhost:8080 -t public index.php",
|
|
||||||
"test": "phpunit"
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
10
config.php
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
|
||||||
|
class Config {
|
||||||
|
/**
|
||||||
|
* path to the sqlite file
|
||||||
|
*/
|
||||||
|
const PATH_TO_SQLITE_FILE = 'db/ggdworkshop.db';
|
||||||
|
|
||||||
|
}
|
@ -1,9 +1,8 @@
|
|||||||
{% extends "layout.html" %}
|
<?php include_once 'header.php'; ?>
|
||||||
|
|
||||||
{% block content %}
|
<div class="row">
|
||||||
|
<div id="content" class="col-xs-12 col-sm-8">
|
||||||
<div class="row">
|
<h1>Contáctenos</h1>
|
||||||
<h1>Contact</h1>
|
|
||||||
<form id="contactform" action="contact.php" method="post" class="form-horizontal">
|
<form id="contactform" action="contact.php" method="post" class="form-horizontal">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label class="control-label col-sm-2" for="nombre">Nombre:</label>
|
<label class="control-label col-sm-2" for="nombre">Nombre:</label>
|
||||||
@ -19,18 +18,18 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label class="control-label col-sm-2">Mensaje:</label>
|
<label class="control-label col-sm-2">Mensaje:</label>
|
||||||
<div class="col-sm-8">
|
<div class="col-sm-8">
|
||||||
<textarea class="form-control" rows="5" name="mensage"
|
<textarea class="form-control" rows="5" name="mensage"
|
||||||
id="mensaje" placeholder="Los contacto por...." required></textarea>
|
id="mensaje" placeholder="Los contacto por...." required></textarea>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<div class="g-recaptcha col-sm-8 col-sm-offset-2" data-callback="onReturnCallback"data-sitekey="6LeLxy4UAAAAALcrNXxcOiW1B3QgcfgZ6u4l52kZ"></div>
|
<div class="g-recaptcha col-sm-8 col-sm-offset-2" data-callback="onReturnCallback"data-sitekey="6LeLxy4UAAAAALcrNXxcOiW1B3QgcfgZ6u4l52kZ"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<div class="col-sm-offset-2 col-sm-8">
|
<div class="col-sm-offset-2 col-sm-8">
|
||||||
<button type="submit" class="btn btn-lg btn-primary">Enviar</button>
|
<button type="submit" class="btn btn-lg btn-primary">Enviar</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
<br/>
|
<br/>
|
||||||
@ -38,4 +37,6 @@
|
|||||||
<strong>Success!</strong> Indicates a successful or positive action.
|
<strong>Success!</strong> Indicates a successful or positive action.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
|
||||||
|
<?php include_once 'sidebar.php'; ?>
|
||||||
|
<?php include_once 'footer.php'; ?>
|
61
db/db.php
@ -1,9 +1,19 @@
|
|||||||
<?php
|
<?php
|
||||||
|
|
||||||
|
$root = realpath($_SERVER["DOCUMENT_ROOT"]);
|
||||||
|
$db_path = $root."/db/ggdworkshop.db";
|
||||||
|
$schema_path = $root."/db/schema.sql";
|
||||||
|
|
||||||
class DB{
|
class DB{
|
||||||
private $pdo;
|
private $pdo;
|
||||||
|
|
||||||
public function __construct($dbpdo){
|
public function connect(){
|
||||||
$this->pdo = $dbpdo;
|
if($this->pdo == null){
|
||||||
|
global $db_path;
|
||||||
|
$this->pdo = new \PDO('sqlite:'.$db_path);
|
||||||
|
$this->pdo->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );
|
||||||
|
}
|
||||||
|
return $this->pdo;
|
||||||
}
|
}
|
||||||
|
|
||||||
public function schema($schema_file){
|
public function schema($schema_file){
|
||||||
@ -12,15 +22,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
public function insert($registro){
|
public function insert($registro){
|
||||||
|
$columns = implode(",", array_keys($registro));
|
||||||
|
echo $columns;
|
||||||
$sql = 'INSERT INTO Registro (nombre,apellido,titulo,afiliacion,ciudad,'
|
$sql = "INSERT INTO Registro ($columns)"
|
||||||
.'pais,email,fechaLlegada,fechaPartida,financiacion,'
|
|
||||||
."invitado,cartaInvitacion,roomingPref,roommate,fechaRegistro)"
|
|
||||||
.' VALUES (:nombre,:apellido,:titulo,:afiliacion,:ciudad,:pais,:email,:fechaLlegada,'
|
.' VALUES (:nombre,:apellido,:titulo,:afiliacion,:ciudad,:pais,:email,:fechaLlegada,'
|
||||||
.':fechaPartida,:financiacion,:invitado,:cartaInvitacion,:roomingPref,:roommate,:fechaRegistro);';
|
.':fechaPartida,:financiacion,:invitado,:cartaInvitacion,:roomingPref,:roommate,:fechaRegistro);';
|
||||||
|
echo $sql;
|
||||||
$stmt = $this->pdo->prepare($sql);
|
$stmt = $this->pdo->prepare($sql);
|
||||||
$stmt->execute([
|
$stmt->execute([
|
||||||
':nombre' => $registro['nombre'],
|
':nombre' => $registro['nombre'],
|
||||||
':apellido' => $registro['apellido'],
|
':apellido' => $registro['apellido'],
|
||||||
@ -29,17 +37,17 @@
|
|||||||
':ciudad' => $registro['ciudad'],
|
':ciudad' => $registro['ciudad'],
|
||||||
':pais' => $registro['pais'],
|
':pais' => $registro['pais'],
|
||||||
':email' => $registro['email'],
|
':email' => $registro['email'],
|
||||||
':fechaLlegada' => $registro['bda'],
|
':fechaLlegada' => $registro['fechaLlegada'],
|
||||||
':fechaPartida' => $registro['eda'],
|
':fechaPartida' => $registro['fechaPartida'],
|
||||||
':financiacion' => $registro['financiacion'],
|
':financiacion' => $registro['financiacion'],
|
||||||
':invitado' => $registro['invited'],
|
':invitado' => $registro['invitado'],
|
||||||
':cartaInvitacion' => $registro['letterinvited'],
|
':cartaInvitacion' => $registro['cartaInvitacion'],
|
||||||
':roomingPref' => $registro['roomtype'],
|
':roomingPref' => $registro['roomingPref'],
|
||||||
':roommate' => $registro['roomate'],
|
':roommate' => $registro['roommate'],
|
||||||
':fechaRegistro' => $date = date('Y-m-d H:i:s'),
|
':fechaRegistro' => $registro['fechaRegistro']
|
||||||
]);
|
]);
|
||||||
return $this->pdo->lastInsertId();
|
return $this->pdo->lastInsertId();
|
||||||
|
|
||||||
}
|
}
|
||||||
public function getAll(){
|
public function getAll(){
|
||||||
$stmt = $this->pdo->prepare("SELECT * FROM Registro");
|
$stmt = $this->pdo->prepare("SELECT * FROM Registro");
|
||||||
@ -47,13 +55,16 @@
|
|||||||
return $stmt->fetchAll(\PDO::FETCH_BOTH);
|
return $stmt->fetchAll(\PDO::FETCH_BOTH);
|
||||||
|
|
||||||
}
|
}
|
||||||
public function findByMail($email){
|
|
||||||
$stmt = $this->pdo->prepare("SELECT * FROM Registro WHERE email=:email");
|
|
||||||
$stmt->bindParam(":email",$email);
|
|
||||||
$stmt->execute();
|
|
||||||
return $result = $stmt->fetch(\PDO::FETCH_ASSOC);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
}
|
||||||
|
|
||||||
|
$db = new DB();
|
||||||
|
$db->connect();
|
||||||
|
$db->schema($schema_path);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
?>
|
?>
|
||||||
|
|
||||||
|
@ -1,33 +1,19 @@
|
|||||||
CREATE TABLE IF NOT EXISTS Registro
|
CREATE TABLE IF NOT EXISTS Registro
|
||||||
(
|
(
|
||||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
nombre VARCHAR(50) NOT NULL,
|
nombre VARCHAR(50) NOT NULL,
|
||||||
apellido VARCHAR(50) NOT NULL,
|
apellido VARCHAR(50) NOT NULL,
|
||||||
titulo VARCHAR(50),
|
titulo VARCHAR(50),
|
||||||
afiliacion VARCHAR(50),
|
afiliacion VARCHAR(50),
|
||||||
ciudad VARCHAR(50),
|
ciudad VARCHAR(50),
|
||||||
pais VARCHAR(50),
|
pais VARCHAR(50),
|
||||||
email VARCHAR(80) NOT NULL UNIQUE,
|
email VARCHAR(80) NOT NULL UNIQUE,
|
||||||
fechaLlegada DATE,
|
fechaLlegada DATE,
|
||||||
fechaPartida DATE,
|
fechaPartida DATE,
|
||||||
financiacion BOOLEAN NOT NULL,
|
financiacion BOOLEAN NOT NULL,
|
||||||
invitado BOOLEAN NOT NULL,
|
invitado BOOLEAN NOT NULL,
|
||||||
cartaInvitacion BOOLEAN NOT NULL,
|
cartaInvitacion BOOLEAN NOT NULL,
|
||||||
roomingPref VARCHAR(50),
|
roomingPref VARCHAR(50),
|
||||||
roommate VARCHAR(50),
|
roommate VARCHAR(50),
|
||||||
fechaRegistro DATETIME NOT NULL
|
fechaRegistro DATETIME NOT NULL
|
||||||
);
|
);
|
||||||
|
|
||||||
CREATE TABLE IF NOT EXISTS Speakers
|
|
||||||
(
|
|
||||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
|
||||||
nombre VARCHAR(50) NOT NULL,
|
|
||||||
apellido VARCHAR(50) NOT NULL,
|
|
||||||
afiliacion VARCHAR(50) NOT NULL,
|
|
||||||
foto VARCHAR(100)
|
|
||||||
|
|
||||||
);
|
|
||||||
INSERT INTO Speakers(nombre,apellido,afiliacion,foto)
|
|
||||||
VALUES('Jairo','Bochi','Universidad Católica de Chile','img/speakers/jariobochi.jpg');
|
|
||||||
INSERT INTO Speakers(nombre,apellido,afiliacion,foto)
|
|
||||||
VALUES('Christian','Bonatti','Université de Bourgogne','img/speakers/cbonatti.jpg');
|
|
28
dbconnect.php
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
<?php
|
||||||
|
/**
|
||||||
|
* SQLite connnection
|
||||||
|
*/
|
||||||
|
class SQLiteConnection {
|
||||||
|
/**
|
||||||
|
* PDO instance
|
||||||
|
* @var type
|
||||||
|
*/
|
||||||
|
private $pdo;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* return in instance of the PDO object that connects to the SQLite database
|
||||||
|
* @return \PDO
|
||||||
|
*/
|
||||||
|
public function connect() {
|
||||||
|
if ($this->pdo == null) {
|
||||||
|
try {
|
||||||
|
$this->pdo = new \PDO("sqlite:" . Config::PATH_TO_SQLITE_FILE);
|
||||||
|
} catch (\PDOException $e) {
|
||||||
|
// handle the exception here
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
return $this->pdo;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
?>
|
BIN
favicon.ico
Normal file
After Width: | Height: | Size: 6.3 KiB |
Before Width: | Height: | Size: 106 KiB After Width: | Height: | Size: 106 KiB |
10
footer.php
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<footer id="footer">
|
||||||
|
<p>Creado por: <a href="wwww.cmat.edu.uy">El Centro de Matemática</a></p>
|
||||||
|
<p style="text-transform:none;">Germán Correa - germanc@cmat.edu.uy</a></p>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
77
header.php
Normal file
@ -0,0 +1,77 @@
|
|||||||
|
<!DOCTYPE HTML>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<title>GGD Workshop</title>
|
||||||
|
<meta name="description" content="Workshop on Groups Geometry and Dynamics" />
|
||||||
|
<meta name="keywords" content="Workshop ICM Groups Geometry Dynamics" />
|
||||||
|
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<link rel="icon" type="image/x-icon" href="favicon.ico" />
|
||||||
|
<link rel="alternate" href="http://ggd.cmat.edu.uy" hreflang="es-uy" />
|
||||||
|
|
||||||
|
<!-- Jquery -->
|
||||||
|
<script type="text/javascript" src="lib/jquery/jquery-3.2.1.min.js"></script>
|
||||||
|
|
||||||
|
<!-- Jquery UI -->
|
||||||
|
<link rel="stylesheet" href="lib/jquery/jquery-ui.css">
|
||||||
|
<script type="text/javascript" src="lib/fullcalendar/lib/jquery-ui.min.js"></script>
|
||||||
|
|
||||||
|
<!-- Moment.js -->
|
||||||
|
<script type="text/javascript" src="lib/fullcalendar/lib/moment.min.js"></script>
|
||||||
|
|
||||||
|
<!-- Jquery validate -->
|
||||||
|
<script src="lib/jquery/jquery-validation/dist/jquery.validate.min.js"></script>
|
||||||
|
<script src="lib/jquery/jquery-validation/dist/additional-methods.min.js"></script>
|
||||||
|
|
||||||
|
<!-- Bootstrap 3.3.7 -->
|
||||||
|
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css">
|
||||||
|
<script src="lib/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||||
|
|
||||||
|
<!-- Select2 -->
|
||||||
|
<link href="lib/select2/dist/css/select2.min.css" rel="stylesheet" />
|
||||||
|
<script src="lib/select2/dist/js/select2.full.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- google captcha -->
|
||||||
|
<script src="https://www.google.com/recaptcha/api.js?hl=es" async defer></script>
|
||||||
|
|
||||||
|
<!-- My App -->
|
||||||
|
<link rel="stylesheet" type="text/css" href="style/style.css" />
|
||||||
|
<script type="text/javascript" src="js/app.js"></script>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="main">
|
||||||
|
<header id="header">
|
||||||
|
<div class="bg"></div>
|
||||||
|
<div id="logo" class="jumbotron">
|
||||||
|
<div id="logo_text">
|
||||||
|
|
||||||
|
<!-- class="logo_colour", allows you to change the colour of the text -->
|
||||||
|
<h1 class="title"><a href="/"><!--<span class="logo_init">GGD</span>--><span class="logo_colour"> Workshop on<br/> Group Geometry and Dynamics</span></a></h1>
|
||||||
|
<br/>
|
||||||
|
<h2 class="subtitle">
|
||||||
|
<strong>With a homage to Ricardo Mañé</strong><br>
|
||||||
|
<strong>23 - 27, July 2018</strong>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<nav class="navbar navbar-inverse " id="menubar">
|
||||||
|
<div class="container">
|
||||||
|
<ul class="nav navbar-nav" id="menu">
|
||||||
|
<!--<li id="home" class="selected"><a href="/">Home</a></li>-->
|
||||||
|
<li id="program" class="selected"><a href="program">Program</a></li>
|
||||||
|
<li id="registro" class="selected"><a href="registration">Registration</a></li>
|
||||||
|
<li id="program" class="selected"><a href="participants">Participants</a></li>
|
||||||
|
<li id="program" class="selected"><a href="committess">Committees</a></li>
|
||||||
|
|
||||||
|
<li id="mapa" class="selected"><a href="location">Practical Information</a></li>
|
||||||
|
<li id="contacto" class="selected"><a href="contact">Contact</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<div id="site_content" class="container">
|
||||||
|
|
20
img/.comments/headerpic-big.jpg.xml
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<comment version="3.0">
|
||||||
|
<caption>La Rambla</caption>
|
||||||
|
<note>Vista al atardecer de La Rambla República del Perú en el borde costero de Montevideo, Uruguay.</note>
|
||||||
|
<place/>
|
||||||
|
<categories>
|
||||||
|
<category value="Borde"/>
|
||||||
|
<category value="Clouds"/>
|
||||||
|
<category value="Montevideo"/>
|
||||||
|
<category value="Rambla"/>
|
||||||
|
<category value="República del Perú"/>
|
||||||
|
<category value="Sky"/>
|
||||||
|
<category value="Uruguay"/>
|
||||||
|
<category value="costa"/>
|
||||||
|
<category value="long exposure"/>
|
||||||
|
<category value="río de la plata"/>
|
||||||
|
<category value="sea"/>
|
||||||
|
<category value="sunset"/>
|
||||||
|
</categories>
|
||||||
|
</comment>
|
BIN
img/afiche-final.jpg
Normal file
After Width: | Height: | Size: 1.3 MiB |
BIN
img/afiche.jpg
Normal file
After Width: | Height: | Size: 748 KiB |
Before Width: | Height: | Size: 95 KiB After Width: | Height: | Size: 95 KiB |
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 94 KiB |
BIN
img/favico.png
Normal file
After Width: | Height: | Size: 2.4 KiB |
BIN
img/headeralt.jpg
Normal file
After Width: | Height: | Size: 575 KiB |
BIN
img/headerpic.jpg
Normal file
After Width: | Height: | Size: 767 KiB |
Before Width: | Height: | Size: 488 KiB After Width: | Height: | Size: 488 KiB |
BIN
img/pjimage.jpg
Normal file
After Width: | Height: | Size: 144 KiB |
BIN
img/pmu15-tapa.png
Normal file
After Width: | Height: | Size: 30 KiB |
Before Width: | Height: | Size: 131 KiB After Width: | Height: | Size: 131 KiB |
38
index.php
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
<?php include_once 'header.php'; ?>
|
||||||
|
<div class="row">
|
||||||
|
<div id="content" class="col-xs-12 col-sm-8">
|
||||||
|
<div class="row">
|
||||||
|
<h1 id="welcome"><strong>Welcome!</strong></h1>
|
||||||
|
<p>
|
||||||
|
The Dynamical Systems Group at the Universidad de la República has
|
||||||
|
been organizing several international Conferences and
|
||||||
|
Workshops in the last 20 years, focusing on different aspects of
|
||||||
|
dynamics and related topics.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
As our group expanded, both in number of participants and areas
|
||||||
|
of research, we are holding a Workshop on Groups, Geometry and Dynamics
|
||||||
|
on 2018 at Montevideo as a satellite conference of ICM 2018 (Rio de
|
||||||
|
Janeiro). The goal of the Workshop is to bring together top scientists
|
||||||
|
working on these areas to discuss new trends on these topics. The
|
||||||
|
idea is to have few talks and lots of discussion time.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
During the conference we will be holding a memorial recognition to Ricardo Mañé
|
||||||
|
(1948-1995), a top Uruguayan mathematician who worked on Dynamical
|
||||||
|
Systems, and who in 2018 would have been 70 years old.
|
||||||
|
</p>
|
||||||
|
<div class="thumbnail">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Ricardo_Ma%C3%B1%C3%A9" target="_blank">
|
||||||
|
<img class="img-responsive" src="img/rmane.jpg" alt="Ricardo Mañé"/>
|
||||||
|
<div class="caption">
|
||||||
|
<p>Quisque in porttitor ante. Morbi non maximus purus. Nulla vel varius nulla. Fusce in orci a nibh sodales sagittis eu vel elit. </p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<?php include_once 'sidebar.php' ?>
|
||||||
|
<?php include_once 'footer.php' ?>
|
6
js/bootstrap.min.js
vendored
Normal file
33
js/calprog.js
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
$(document).ready(function(){
|
||||||
|
|
||||||
|
$("#calendario").fullCalendar({
|
||||||
|
locale: 'es',
|
||||||
|
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
|
||||||
|
defaultDate: '2017-12-21',
|
||||||
|
defaultView: 'agendaWeek',
|
||||||
|
visibleRange:{
|
||||||
|
start: '2017-12-21',
|
||||||
|
end: '2017-12-23'
|
||||||
|
},
|
||||||
|
allDaySlot: false,
|
||||||
|
minTime: "08:00:00",
|
||||||
|
maxTime: "22:00:00",
|
||||||
|
resources: [
|
||||||
|
{ id:"s1", title: "Salon 1"},
|
||||||
|
{ id:"s2", title: "Salon 2"},
|
||||||
|
|
||||||
|
|
||||||
|
],
|
||||||
|
|
||||||
|
events: [
|
||||||
|
{
|
||||||
|
id:"1",
|
||||||
|
resourceid: 's1',
|
||||||
|
title: "Charla Pedorra",
|
||||||
|
start: "2017-12-21T12:00",
|
||||||
|
end: "2017-12-21T13:00"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
});
|
||||||
|
});
|
@ -1,57 +1,30 @@
|
|||||||
|
|
||||||
function showMsg(error,msg){
|
|
||||||
|
|
||||||
var msgTxt = $("#msgModal .modal-body .alert");
|
|
||||||
if(error){
|
|
||||||
msgTxt.removeClass("alert-success");
|
|
||||||
msgTxt.addClass("alert-danger");
|
|
||||||
msgTxt.html('<strong><span class="glyphicon glyphicon-remove-sign">'
|
|
||||||
+'</span>Error! </strong><br/>'+msg);
|
|
||||||
}
|
|
||||||
else{
|
|
||||||
msgTxt.removeClass("alert-danger");
|
|
||||||
msgTxt.addClass("alert-success");
|
|
||||||
msgTxt.html('<strong><span class="glyphicon glyphicon-ok-sign">'
|
|
||||||
+'</span>Success! </strong><br/>'+msg);
|
|
||||||
}
|
|
||||||
$("#msgModal").modal({show:true})
|
|
||||||
}
|
|
||||||
|
|
||||||
$().ready(function(){
|
$().ready(function(){
|
||||||
$("#statusmsg").hide();
|
$("#statusmsg").hide();
|
||||||
|
|
||||||
$("#txtbda,#txteda").datepicker({
|
$("#txtbda,#txteda").datepicker({
|
||||||
|
|
||||||
dateFormat: "dd/mm/yy",
|
dateFormat: "dd/mm/yy",
|
||||||
minDate:new Date(2018,6,23),
|
minDate:new Date(2018,6,23),
|
||||||
maxDate:new Date(2018,6,27)
|
maxDate:new Date(2018,6,27)
|
||||||
});
|
});
|
||||||
|
|
||||||
$("#pais").select2({
|
$("#pais").select2({
|
||||||
data: data.paises,
|
data: data.paises,
|
||||||
placeholder: "Select Country",
|
placeholder: "Select Country",
|
||||||
width: "100%",
|
width: "100%",
|
||||||
});/*.one('select2-focus', select2Focus).on("select2-blur", function () {
|
|
||||||
$(this).one('select2-focus', select2Focus)
|
|
||||||
});
|
});
|
||||||
|
|
||||||
function select2Focus() {
|
|
||||||
var select2 = $(this).data('select2');
|
|
||||||
setTimeout(function() {
|
|
||||||
if (!select2.opened()) {
|
|
||||||
select2.open();
|
|
||||||
}
|
|
||||||
}, 0);
|
|
||||||
}*/
|
|
||||||
|
|
||||||
$("#roomtype").select2({
|
$("#roomtype").select2({
|
||||||
data: data.roomtypes,
|
data: data.roomtypes,
|
||||||
placeholder: "Select Rooming Preference",
|
placeholder: "Select Rooming Preference",
|
||||||
width:"100%",
|
width:"100%",
|
||||||
minimumResultsForSearch: -1,
|
minimumResultsForSearch: -1,
|
||||||
dropdownCssClass: "bigdrop",
|
dropdownCssClass: "bigdrop",
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
$('#registerform').on('submit',function(e) {
|
$('#registerform').on('submit',function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
@ -74,7 +47,6 @@ function select2Focus() {
|
|||||||
invited:{required:true},
|
invited:{required:true},
|
||||||
financiacion:"required",
|
financiacion:"required",
|
||||||
letterinvited:"required",
|
letterinvited:"required",
|
||||||
"g-recaptcha-response":"required"
|
|
||||||
|
|
||||||
|
|
||||||
},
|
},
|
||||||
@ -90,38 +62,26 @@ function select2Focus() {
|
|||||||
email: "Please enter a valid e-mail address",
|
email: "Please enter a valid e-mail address",
|
||||||
invited: "Select one option please",
|
invited: "Select one option please",
|
||||||
financiacion: "Select one option please",
|
financiacion: "Select one option please",
|
||||||
letterinvited: "Select one option please",
|
letterinvited: "Select one option please"
|
||||||
'g-recaptcha-response': "Please validate reCAPTCHA",
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
},
|
},
|
||||||
submitHandler: function(form){
|
submitHandler: function(form){
|
||||||
var formdata = $(form).serializeArray();
|
var formdata = $(form).serializeArray();
|
||||||
formdata.find(item => item.name === "pais").value = $("#pais").select2("data")[0].text;
|
formdata.find(item => item.name === "pais").value = $("#pais").select2("data")[0].text;
|
||||||
formdata.find(item => item.name === "roomtype").value = $("#roomtype").select2("data")[0].text;
|
formdata.find(item => item.name === "roomtype").value = $("#roomtype").select2("data")[0].text;
|
||||||
var parameters = $.param(formdata);
|
var parameters = $.param(formdata);
|
||||||
|
console.log(parameters);
|
||||||
var post = $.post('api/register', parameters);
|
var post = $.post('api/register', parameters);
|
||||||
post.done(function(data){
|
post.done(function(data){
|
||||||
if(data.success){
|
console.log(data);
|
||||||
|
|
||||||
showMsg(false,data.msg);
|
|
||||||
}
|
|
||||||
else{
|
|
||||||
var errMsg = data.msg+"<ul>";
|
|
||||||
$.each(data.errors, function(k,v){
|
|
||||||
errMsg+="<li>"+v+"</li>";
|
|
||||||
});
|
|
||||||
errMsg+="</ul>";
|
|
||||||
console.log(errMsg);
|
|
||||||
showMsg(true,errMsg);
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
//console.log(parameters);
|
||||||
|
|
||||||
},
|
},
|
||||||
errorElement: "em",
|
errorElement: "em",
|
||||||
errorPlacement: function ( error, element ) {
|
errorPlacement: function ( error, element ) {
|
||||||
// Add the `help-block` class to the error element
|
// Add the `help-block` class to the error element
|
||||||
error.addClass("help-block");
|
error.addClass("help-block");
|
||||||
var esradio = $(element).prop("type") == "radio";
|
var esradio = $(element).prop("type") == "radio";
|
||||||
var padre = element.parents(".input-container");
|
var padre = element.parents(".input-container");
|
||||||
@ -129,20 +89,20 @@ function select2Focus() {
|
|||||||
padre.append(error);
|
padre.append(error);
|
||||||
var iconstatus = $("<span class='glyphicon glyphicon-remove form-control-feedback'></span>");
|
var iconstatus = $("<span class='glyphicon glyphicon-remove form-control-feedback'></span>");
|
||||||
if(!$.contains(padre,"span.glyhpicon")){
|
if(!$.contains(padre,"span.glyhpicon")){
|
||||||
error.before(iconstatus);
|
error.before(iconstatus);
|
||||||
}
|
}
|
||||||
if(esradio){
|
if(esradio){
|
||||||
error.css("display", "inline");
|
error.css("display", "inline");
|
||||||
$(iconstatus).css("display", "inline");
|
$(iconstatus).css("display", "inline");
|
||||||
$(iconstatus).css("position", "initial");
|
$(iconstatus).css("position", "initial");
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
success: function(label,element){
|
success: function(label,element){
|
||||||
var esradio = $(element).prop("type") == "radio";
|
var esradio = $(element).prop("type") == "radio";
|
||||||
var padre = $(element).parents(".input-container");
|
var padre = $(element).parents(".input-container");
|
||||||
var iconstatus = padre.children("span.glyphicon");
|
var iconstatus = padre.children("span.glyphicon");
|
||||||
if(!iconstatus){
|
if(!iconstatus){
|
||||||
label.before("<span class='glyphicon glyphicon-ok form-control-feedback'></span>");
|
label.before("<span class='glyphicon glyphicon-ok form-control-feedback'></span>");
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
highlight: function ( element, errorClass, validClass ) {
|
highlight: function ( element, errorClass, validClass ) {
|
||||||
@ -150,19 +110,32 @@ function select2Focus() {
|
|||||||
var iconstatus = padre.children("span.glyphicon");
|
var iconstatus = padre.children("span.glyphicon");
|
||||||
padre.addClass("has-error").removeClass("has-success");
|
padre.addClass("has-error").removeClass("has-success");
|
||||||
iconstatus.addClass( "glyphicon-remove" ).removeClass( "glyphicon-ok" );
|
iconstatus.addClass( "glyphicon-remove" ).removeClass( "glyphicon-ok" );
|
||||||
padre.addClass( "has-error" ).removeClass( "has-success" );
|
padre.addClass( "has-error" ).removeClass( "has-success" );
|
||||||
},
|
},
|
||||||
unhighlight: function (element, errorClass, validClass) {
|
unhighlight: function (element, errorClass, validClass) {
|
||||||
var padre = $(element).parents(".input-container");
|
var padre = $(element).parents(".input-container");
|
||||||
var iconstatus = padre.children("span.glyphicon");
|
var iconstatus = padre.children("span.glyphicon");
|
||||||
padre.addClass("has-success").removeClass("has-error");
|
padre.addClass("has-success").removeClass("has-error");
|
||||||
iconstatus.addClass( "glyphicon-ok" ).removeClass( "glyphicon-remove" );
|
iconstatus.addClass( "glyphicon-ok" ).removeClass( "glyphicon-remove" );
|
||||||
padre.addClass( "has-success" ).removeClass( "has-error" );
|
padre.addClass( "has-success" ).removeClass( "has-error" );
|
||||||
},
|
}
|
||||||
//});
|
});
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
var finan;
|
||||||
|
$('input:radio[name="financiacion"]').change(function(){
|
||||||
|
finan=true;
|
||||||
|
if($(this).is(':checked') && $(this).val() == "si"){
|
||||||
|
$("#detallefinan").show();
|
||||||
|
$("#detallefinan textarea").addClass("has-error");
|
||||||
|
}
|
||||||
|
else
|
||||||
|
$("#detallefinan").hide();
|
||||||
|
|
||||||
|
$('#sifinan').tooltip("hide");
|
||||||
|
$('#sifinan').tooltip("destroy");
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
17
lib/bootstrap/.editorconfig
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
# editorconfig.org
|
||||||
|
|
||||||
|
root = true
|
||||||
|
|
||||||
|
[*]
|
||||||
|
charset = utf-8
|
||||||
|
end_of_line = lf
|
||||||
|
indent_size = 2
|
||||||
|
indent_style = space
|
||||||
|
insert_final_newline = true
|
||||||
|
trim_trailing_whitespace = true
|
||||||
|
|
||||||
|
[*.md]
|
||||||
|
trim_trailing_whitespace = false
|
||||||
|
|
||||||
|
[*.py]
|
||||||
|
indent_size = 4
|
15
lib/bootstrap/.gitattributes
vendored
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
# Enforce Unix newlines
|
||||||
|
*.css text eol=lf
|
||||||
|
*.html text eol=lf
|
||||||
|
*.js text eol=lf
|
||||||
|
*.json text eol=lf
|
||||||
|
*.less text eol=lf
|
||||||
|
*.md text eol=lf
|
||||||
|
*.svg text eol=lf
|
||||||
|
*.yml text eol=lf
|
||||||
|
# Don't diff or textually merge source maps
|
||||||
|
*.map binary
|
||||||
|
|
||||||
|
bootstrap-theme.css linguist-vendored=false
|
||||||
|
bootstrap.css linguist-vendored=false
|
||||||
|
bootstrap.js linguist-vendored=false
|
41
lib/bootstrap/.gitignore
vendored
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
# Ignore docs files
|
||||||
|
_gh_pages
|
||||||
|
_site
|
||||||
|
.ruby-version
|
||||||
|
|
||||||
|
# Numerous always-ignore extensions
|
||||||
|
*.diff
|
||||||
|
*.err
|
||||||
|
*.log
|
||||||
|
*.orig
|
||||||
|
*.rej
|
||||||
|
*.swo
|
||||||
|
*.swp
|
||||||
|
*.vi
|
||||||
|
*.zip
|
||||||
|
*~
|
||||||
|
|
||||||
|
# OS or Editor folders
|
||||||
|
._*
|
||||||
|
.cache
|
||||||
|
.DS_Store
|
||||||
|
.idea
|
||||||
|
.project
|
||||||
|
.settings
|
||||||
|
.tmproj
|
||||||
|
*.esproj
|
||||||
|
*.sublime-project
|
||||||
|
*.sublime-workspace
|
||||||
|
nbproject
|
||||||
|
Thumbs.db
|
||||||
|
|
||||||
|
# Komodo
|
||||||
|
.komodotools
|
||||||
|
*.komodoproject
|
||||||
|
|
||||||
|
# Jekyll metadata
|
||||||
|
docs/.jekyll-metadata
|
||||||
|
|
||||||
|
# Folders to ignore
|
||||||
|
bower_components
|
||||||
|
node_modules
|
12
lib/bootstrap/.hound.yml
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
fail_on_violations: true
|
||||||
|
|
||||||
|
scss:
|
||||||
|
enabled: false
|
||||||
|
|
||||||
|
javascript:
|
||||||
|
enabled: true
|
||||||
|
config_file: js/.jshintrc
|
||||||
|
|
||||||
|
jscs:
|
||||||
|
enabled: true
|
||||||
|
config_file: js/.jscsrc
|
41
lib/bootstrap/.travis.yml
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
sudo: required
|
||||||
|
dist: trusty
|
||||||
|
language: node_js
|
||||||
|
git:
|
||||||
|
depth: 10
|
||||||
|
node_js:
|
||||||
|
- "0.12"
|
||||||
|
before_install:
|
||||||
|
# Remove ./node_modules/.bin from PATH so node-which doesn't replace Unix which and cause RVM to barf. See https://github.com/travis-ci/travis-ci/issues/5092
|
||||||
|
- export PATH=$(python -c 'from sys import argv;from collections import OrderedDict as od;print(":".join(od((p,None) for p in argv[1].split(":") if p.startswith("/")).keys()))' "$PATH")
|
||||||
|
- rvm install 2.2
|
||||||
|
- rvm use 2.2 --fuzzy
|
||||||
|
- "export TRAVIS_COMMIT_MSG=\"$(git log --format=%B --no-merges -n 1)\""
|
||||||
|
- echo "$TRAVIS_COMMIT_MSG" | grep '\[skip validator\]'; export TWBS_DO_VALIDATOR=$?; true
|
||||||
|
- echo "$TRAVIS_COMMIT_MSG" | grep '\[skip sauce\]'; export TWBS_DO_SAUCE=$?; true
|
||||||
|
- if [ "$TRAVIS_REPO_SLUG" = twbs-savage/bootstrap ]; then export TWBS_DO_VALIDATOR=0; fi
|
||||||
|
install:
|
||||||
|
- bundle install --deployment --jobs=1
|
||||||
|
- cp grunt/npm-shrinkwrap.json ./
|
||||||
|
- npm install
|
||||||
|
cache:
|
||||||
|
directories:
|
||||||
|
- node_modules
|
||||||
|
- vendor/bundle
|
||||||
|
env:
|
||||||
|
global:
|
||||||
|
- NPM_CONFIG_PROGRESS="false"
|
||||||
|
- SAUCE_USERNAME="bootstrap"
|
||||||
|
- secure: "pJkBwnuae9dKU5tEcCqccfS1QQw7/meEcfz63fM7ba7QJNjoA6BaXj08L5Z3Vb5vBmVPwBawxo5Hp0jC0r/Z/O0hGnAmz/Cz09L+cy7dSAZ9x4hvZePSja/UAusaB5ogMoO8l2b773MzgQeSmrLbExr9BWLeqEfjC2hFgdgHLaQ="
|
||||||
|
- secure: "RKWpS+P20b4tG9tawzCMJSmQftoonmC7tJzyGYiHuEM1TcpHALLBcnzKlr/+DiPTfzDJWY4kS8pxfhK4uXOe8OHnhpMNub7LEWtFPePlZIervOJcsOydaQocTKqVVWD6OUubMeQmQ+tZmvmpjoJ1uPPEbFs9ciF7+dv3U5tLUZ0="
|
||||||
|
- secure: "XswSKBY0HJ/aO9VOBeWlvGpqSFF/DsJmNKz7o5RkJMJX340qe44J929uUNwwOwlv9YrgptzC2W6l8bpmZQV+p6IYs99SoSA8CCaUfIJaqeU9x/UiT5vIHgqaNax+vFJwvzHLpF5v/ggFqFEKCd54gCDasePLTztHeC4oL104iaQ="
|
||||||
|
matrix:
|
||||||
|
- TWBS_TEST=core
|
||||||
|
- TWBS_TEST=validate-html
|
||||||
|
- TWBS_TEST=sauce-js-unit
|
||||||
|
matrix:
|
||||||
|
fast_finish: true
|
||||||
|
notifications:
|
||||||
|
slack: heybb:iz4wwosL0N0EdaX1gvgkU0NH
|
||||||
|
webhooks:
|
||||||
|
- http://savage1.twbsapps.com/savage/travis
|
5
lib/bootstrap/CHANGELOG.md
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
Bootstrap uses [GitHub's Releases feature](https://github.com/blog/1547-release-your-software) for its changelogs.
|
||||||
|
|
||||||
|
See [the Releases section of our GitHub project](https://github.com/twbs/bootstrap/releases) for changelogs for each release version of Bootstrap.
|
||||||
|
|
||||||
|
Release announcement posts on [the official Bootstrap blog](http://blog.getbootstrap.com) contain summaries of the most noteworthy changes made in each release.
|
1
lib/bootstrap/CNAME
Normal file
@ -0,0 +1 @@
|
|||||||
|
getbootstrap.com
|
271
lib/bootstrap/CONTRIBUTING.md
Normal file
@ -0,0 +1,271 @@
|
|||||||
|
# Contributing to Bootstrap
|
||||||
|
|
||||||
|
Looking to contribute something to Bootstrap? **Here's how you can help.**
|
||||||
|
|
||||||
|
Please take a moment to review this document in order to make the contribution
|
||||||
|
process easy and effective for everyone involved.
|
||||||
|
|
||||||
|
Following these guidelines helps to communicate that you respect the time of
|
||||||
|
the developers managing and developing this open source project. In return,
|
||||||
|
they should reciprocate that respect in addressing your issue or assessing
|
||||||
|
patches and features.
|
||||||
|
|
||||||
|
|
||||||
|
## Using the issue tracker
|
||||||
|
|
||||||
|
The [issue tracker](https://github.com/twbs/bootstrap/issues) is
|
||||||
|
the preferred channel for [bug reports](#bug-reports), [features requests](#feature-requests)
|
||||||
|
and [submitting pull requests](#pull-requests), but please respect the following
|
||||||
|
restrictions:
|
||||||
|
|
||||||
|
* Please **do not** use the issue tracker for personal support requests. Stack
|
||||||
|
Overflow ([`twitter-bootstrap-3`](https://stackoverflow.com/questions/tagged/twitter-bootstrap-3) tag), [Slack](https://bootstrap-slack.herokuapp.com/) or [IRC](README.md#community) are better places to get help.
|
||||||
|
|
||||||
|
* Please **do not** derail or troll issues. Keep the discussion on topic and
|
||||||
|
respect the opinions of others.
|
||||||
|
|
||||||
|
* Please **do not** post comments consisting solely of "+1" or ":thumbsup:".
|
||||||
|
Use [GitHub's "reactions" feature](https://github.com/blog/2119-add-reactions-to-pull-requests-issues-and-comments)
|
||||||
|
instead. We reserve the right to delete comments which violate this rule.
|
||||||
|
|
||||||
|
* Please **do not** open issues or pull requests regarding the code in
|
||||||
|
[`Normalize`](https://github.com/necolas/normalize.css) (open them in
|
||||||
|
their respective repositories).
|
||||||
|
|
||||||
|
* Please **do not** open issues regarding the official themes offered on <http://themes.getbootstrap.com/>.
|
||||||
|
Instead, please email any questions or feedback regarding those themes to `themes AT getbootstrap DOT com`.
|
||||||
|
|
||||||
|
|
||||||
|
## Issues and labels
|
||||||
|
|
||||||
|
Our bug tracker utilizes several labels to help organize and identify issues. Here's what they represent and how we use them:
|
||||||
|
|
||||||
|
- `browser bug` - Issues that are reported to us, but actually are the result of a browser-specific bug. These are diagnosed with reduced test cases and result in an issue opened on that browser's own bug tracker.
|
||||||
|
- `confirmed` - Issues that have been confirmed with a reduced test case and identify a bug in Bootstrap.
|
||||||
|
- `css` - Issues stemming from our compiled CSS or source Less/Sass files.
|
||||||
|
- `customizer` - Issues with our web-based Customizer.
|
||||||
|
- `docs` - Issues for improving or updating our documentation.
|
||||||
|
- `examples` - Issues involving the example templates included in our docs.
|
||||||
|
- `feature` - Issues asking for a new feature to be added, or an existing one to be extended or modified. New features require a minor version bump (e.g., `v3.0.0` to `v3.1.0`).
|
||||||
|
- `grunt` - Issues with our included JavaScript-based Gruntfile, which is used to run all our tests, concatenate and compile source files, and more.
|
||||||
|
- `help wanted` - Issues we need or would love help from the community to resolve.
|
||||||
|
- `js` - Issues stemming from our compiled or source JavaScript files.
|
||||||
|
- `meta` - Issues with the project itself or our GitHub repository.
|
||||||
|
|
||||||
|
For a complete look at our labels, see the [project labels page](https://github.com/twbs/bootstrap/labels).
|
||||||
|
|
||||||
|
|
||||||
|
## Bug reports
|
||||||
|
|
||||||
|
A bug is a _demonstrable problem_ that is caused by the code in the repository.
|
||||||
|
Good bug reports are extremely helpful, so thanks!
|
||||||
|
|
||||||
|
Guidelines for bug reports:
|
||||||
|
|
||||||
|
0. **Validate and lint your code** — [validate your HTML](http://html5.validator.nu)
|
||||||
|
and [lint your HTML](https://github.com/twbs/bootlint) to ensure your
|
||||||
|
problem isn't caused by a simple error in your own code.
|
||||||
|
|
||||||
|
1. **Use the GitHub issue search** — check if the issue has already been
|
||||||
|
reported.
|
||||||
|
|
||||||
|
2. **Check if the issue has been fixed** — try to reproduce it using the
|
||||||
|
latest `master` or development branch in the repository.
|
||||||
|
|
||||||
|
3. **Isolate the problem** — ideally create a [reduced test
|
||||||
|
case](https://css-tricks.com/reduced-test-cases/) and a live example.
|
||||||
|
[This JS Bin](http://jsbin.com/lefey/1/edit?html,output) is a helpful template.
|
||||||
|
|
||||||
|
|
||||||
|
A good bug report shouldn't leave others needing to chase you up for more
|
||||||
|
information. Please try to be as detailed as possible in your report. What is
|
||||||
|
your environment? What steps will reproduce the issue? What browser(s) and OS
|
||||||
|
experience the problem? Do other browsers show the bug differently? What
|
||||||
|
would you expect to be the outcome? All these details will help people to fix
|
||||||
|
any potential bugs.
|
||||||
|
|
||||||
|
Example:
|
||||||
|
|
||||||
|
> Short and descriptive example bug report title
|
||||||
|
>
|
||||||
|
> A summary of the issue and the browser/OS environment in which it occurs. If
|
||||||
|
> suitable, include the steps required to reproduce the bug.
|
||||||
|
>
|
||||||
|
> 1. This is the first step
|
||||||
|
> 2. This is the second step
|
||||||
|
> 3. Further steps, etc.
|
||||||
|
>
|
||||||
|
> `<url>` - a link to the reduced test case
|
||||||
|
>
|
||||||
|
> Any other information you want to share that is relevant to the issue being
|
||||||
|
> reported. This might include the lines of code that you have identified as
|
||||||
|
> causing the bug, and potential solutions (and your opinions on their
|
||||||
|
> merits).
|
||||||
|
|
||||||
|
### Reporting upstream browser bugs
|
||||||
|
|
||||||
|
Sometimes bugs reported to us are actually caused by bugs in the browser(s) themselves, not bugs in Bootstrap per se.
|
||||||
|
When feasible, we aim to report such upstream bugs to the relevant browser vendor(s), and then list them on our [Wall of Browser Bugs](http://getbootstrap.com/browser-bugs/) and [document them in MDN](https://developer.mozilla.org/en-US/docs/Web).
|
||||||
|
|
||||||
|
| Vendor(s) | Browser(s) | Rendering engine | Bug reporting website(s) | Notes |
|
||||||
|
| ------------- | ---------------------------- | ---------------- | ------------------------------------------------------------------------------------- | -------------------------------------------------------- |
|
||||||
|
| Mozilla | Firefox | Gecko | https://bugzilla.mozilla.org/enter_bug.cgi | "Core" is normally the right product option to choose. |
|
||||||
|
| Apple | Safari | WebKit | https://bugs.webkit.org/enter_bug.cgi?product=WebKit <br> https://bugreport.apple.com | In Apple's bug reporter, choose "Safari" as the product. |
|
||||||
|
| Google, Opera | Chrome, Chromium, Opera v15+ | Blink | https://code.google.com/p/chromium/issues/list | Click the "New issue" button. |
|
||||||
|
| Microsoft | Edge | EdgeHTML | https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/ | |
|
||||||
|
|
||||||
|
### Issues bots
|
||||||
|
|
||||||
|
[@twbs-lmvtfy](https://github.com/twbs-lmvtfy) is a Bootstrap bot that hangs out in our GitHub issue tracker and automatically checks for HTML validation errors in live examples (e.g. jsFiddles, JS Bins, Bootplys, Plunks, CodePens, etc.) posted in issue comments. If it finds any errors, it will post a follow-up comment on the issue and point out the errors. If this happens with an example you've posted, please fix the errors and post an updated live example. If you opened a bug report, please check whether the bug still occurs with your revised, valid live example. If the bug no longer occurs, it was probably due to your invalid HTML rather than something in Bootstrap and we'd appreciate it if you could close out the GitHub issue.
|
||||||
|
|
||||||
|
|
||||||
|
## Feature requests
|
||||||
|
|
||||||
|
Feature requests are welcome, but please note that they **must target
|
||||||
|
[Bootstrap v4](https://github.com/twbs/bootstrap/tree/v4-dev),** because
|
||||||
|
Bootstrap v3 is now in maintenance mode and is closed off to new features.
|
||||||
|
This is so that we can focus our efforts on Bootstrap v4, the future of the
|
||||||
|
framework.
|
||||||
|
|
||||||
|
Before opening a feature request, please take a moment to find out whether your idea
|
||||||
|
fits with the scope and aims of the project. It's up to *you* to make a strong
|
||||||
|
case to convince the project's developers of the merits of this feature. Please
|
||||||
|
provide as much detail and context as possible.
|
||||||
|
|
||||||
|
|
||||||
|
## Pull requests
|
||||||
|
|
||||||
|
Good pull requests—patches, improvements, new features—are a fantastic
|
||||||
|
help. They should remain focused in scope and avoid containing unrelated
|
||||||
|
commits.
|
||||||
|
|
||||||
|
**Please ask first** before embarking on any significant pull request (e.g.
|
||||||
|
implementing features, refactoring code, porting to a different language),
|
||||||
|
otherwise you risk spending a lot of time working on something that the
|
||||||
|
project's developers might not want to merge into the project.
|
||||||
|
|
||||||
|
In particular, **pull requests that add new features to Bootstrap v3 will be
|
||||||
|
rejected.** Bootstrap v3 is now in maintenance mode and is therefore closed
|
||||||
|
off to new features, so that we can focus our efforts on Bootstrap v4, the
|
||||||
|
future of the framework. Pull requests that add new features should target
|
||||||
|
[Bootstrap v4 (the `v4-dev` git branch)](https://github.com/twbs/bootstrap/tree/v4-dev)
|
||||||
|
instead, where they will be welcomed and duly considered.
|
||||||
|
|
||||||
|
Please adhere to the [coding guidelines](#code-guidelines) used throughout the
|
||||||
|
project (indentation, accurate comments, etc.) and any other requirements
|
||||||
|
(such as test coverage).
|
||||||
|
|
||||||
|
**Do not edit `bootstrap.css`, `bootstrap-theme.css`, or `bootstrap.js`
|
||||||
|
directly!** Those files are automatically generated. You should edit the
|
||||||
|
source files in [`/bootstrap/less/`](https://github.com/twbs/bootstrap/tree/master/less),
|
||||||
|
[`/bootstrap/scss/`](https://github.com/twbs/bootstrap/tree/v4-dev/scss) (for Bootstrap v4),
|
||||||
|
and/or [`/bootstrap/js/`](https://github.com/twbs/bootstrap/tree/master/js) instead.
|
||||||
|
|
||||||
|
Similarly, when contributing to Bootstrap's documentation, you should edit the
|
||||||
|
documentation source files in
|
||||||
|
[the `/bootstrap/docs/` directory of the `master` branch](https://github.com/twbs/bootstrap/tree/master/docs).
|
||||||
|
**Do not edit the `gh-pages` branch.** That branch is generated from the
|
||||||
|
documentation source files and is managed separately by the Bootstrap Core Team.
|
||||||
|
|
||||||
|
Adhering to the following process is the best way to get your work
|
||||||
|
included in the project:
|
||||||
|
|
||||||
|
1. [Fork](https://help.github.com/fork-a-repo/) the project, clone your fork,
|
||||||
|
and configure the remotes:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Clone your fork of the repo into the current directory
|
||||||
|
git clone https://github.com/<your-username>/bootstrap.git
|
||||||
|
# Navigate to the newly cloned directory
|
||||||
|
cd bootstrap
|
||||||
|
# Assign the original repo to a remote called "upstream"
|
||||||
|
git remote add upstream https://github.com/twbs/bootstrap.git
|
||||||
|
```
|
||||||
|
|
||||||
|
2. If you cloned a while ago, get the latest changes from upstream:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git checkout master
|
||||||
|
git pull upstream master
|
||||||
|
```
|
||||||
|
|
||||||
|
3. Create a new topic branch (off the main project development branch) to
|
||||||
|
contain your feature, change, or fix:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git checkout -b <topic-branch-name>
|
||||||
|
```
|
||||||
|
|
||||||
|
4. Commit your changes in logical chunks. Please adhere to these [git commit
|
||||||
|
message guidelines](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html)
|
||||||
|
or your code is unlikely to be merged into the main project. Use Git's
|
||||||
|
[interactive rebase](https://help.github.com/articles/interactive-rebase)
|
||||||
|
feature to tidy up your commits before making them public.
|
||||||
|
|
||||||
|
5. Locally merge (or rebase) the upstream development branch into your topic branch:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git pull [--rebase] upstream master
|
||||||
|
```
|
||||||
|
|
||||||
|
6. Push your topic branch up to your fork:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git push origin <topic-branch-name>
|
||||||
|
```
|
||||||
|
|
||||||
|
7. [Open a Pull Request](https://help.github.com/articles/using-pull-requests/)
|
||||||
|
with a clear title and description against the `master` branch.
|
||||||
|
|
||||||
|
**IMPORTANT**: By submitting a patch, you agree to allow the project owners to
|
||||||
|
license your work under the terms of the [MIT License](LICENSE) (if it
|
||||||
|
includes code changes) and under the terms of the
|
||||||
|
[Creative Commons Attribution 3.0 Unported License](docs/LICENSE)
|
||||||
|
(if it includes documentation changes).
|
||||||
|
|
||||||
|
### Pull request bots
|
||||||
|
|
||||||
|
[@twbs-rorschach](https://github.com/twbs-rorschach) is a Bootstrap bot that hangs out in our GitHub issue tracker and automatically checks all pull requests for a few simple common mistakes. It's possible that Rorschach might leave a comment on your pull request and then close it. If that happens, simply fix the problem(s) mentioned in the comment (there should be link(s) in the comment explaining the problem(s) in detail) and then either:
|
||||||
|
|
||||||
|
* Push the revised version to your pull request's branch and post a comment on the pull request saying that you've fixed the problem(s). One of the Bootstrap Core Team members will then come along and reopen your pull request.
|
||||||
|
* Or you can just open a new pull request for your revised version.
|
||||||
|
|
||||||
|
[@twbs-savage](https://github.com/twbs-savage) is a Bootstrap bot that automatically runs cross-browser tests (via [Sauce](https://saucelabs.com) and Travis CI) on JavaScript pull requests. Savage will leave a comment on pull requests stating whether cross-browser JS tests passed or failed, with a link to the full Travis build details. If your pull request fails, check the Travis log to see which browser + OS combinations failed. Each browser test in the Travis log includes a link to a Sauce page with details about the test. On those details pages, you can watch a screencast of the test run to see exactly which unit tests failed.
|
||||||
|
|
||||||
|
|
||||||
|
## Code guidelines
|
||||||
|
|
||||||
|
### HTML
|
||||||
|
|
||||||
|
[Adhere to the Code Guide.](http://codeguide.co/#html)
|
||||||
|
|
||||||
|
- Use tags and elements appropriate for an HTML5 doctype (e.g., self-closing tags).
|
||||||
|
- Use CDNs and HTTPS for third-party JS when possible. We don't use protocol-relative URLs in this case because they break when viewing the page locally via `file://`.
|
||||||
|
- Use [WAI-ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) attributes in documentation examples to promote accessibility.
|
||||||
|
|
||||||
|
### CSS
|
||||||
|
|
||||||
|
[Adhere to the Code Guide.](http://codeguide.co/#css)
|
||||||
|
|
||||||
|
- When feasible, default color palettes should comply with [WCAG color contrast guidelines](http://www.w3.org/TR/WCAG20/#visual-audio-contrast).
|
||||||
|
- Except in rare cases, don't remove default `:focus` styles (via e.g. `outline: none;`) without providing alternative styles. See [this A11Y Project post](http://a11yproject.com/posts/never-remove-css-outlines) for more details.
|
||||||
|
|
||||||
|
### JS
|
||||||
|
|
||||||
|
- No semicolons (in client-side JS)
|
||||||
|
- 2 spaces (no tabs)
|
||||||
|
- strict mode
|
||||||
|
- "Attractive"
|
||||||
|
- Don't use [jQuery event alias convenience methods](https://github.com/jquery/jquery/blob/master/src/event/alias.js) (such as `$().focus()`). Instead, use [`$().trigger(eventType, ...)`](http://api.jquery.com/trigger/) or [`$().on(eventType, ...)`](http://api.jquery.com/on/), depending on whether you're firing an event or listening for an event. (For example, `$().trigger('focus')` or `$().on('focus', function (event) { /* handle focus event */ })`) We do this to be compatible with custom builds of jQuery where the event aliases module has been excluded.
|
||||||
|
|
||||||
|
### Checking coding style
|
||||||
|
|
||||||
|
Run `grunt test` before committing to ensure your changes follow our coding standards.
|
||||||
|
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
By contributing your code, you agree to license your contribution under the [MIT License](LICENSE).
|
||||||
|
By contributing to the documentation, you agree to license your contribution under the [Creative Commons Attribution 3.0 Unported License](docs/LICENSE).
|
||||||
|
|
||||||
|
Prior to v3.1.0, Bootstrap's code was released under the Apache License v2.0.
|
6
lib/bootstrap/Gemfile
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
source 'https://rubygems.org'
|
||||||
|
|
||||||
|
group :development, :test do
|
||||||
|
gem 'jekyll', '~> 3.1.2'
|
||||||
|
gem 'jekyll-sitemap', '~> 0.11.0'
|
||||||
|
end
|
43
lib/bootstrap/Gemfile.lock
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
GEM
|
||||||
|
remote: https://rubygems.org/
|
||||||
|
specs:
|
||||||
|
addressable (2.4.0)
|
||||||
|
colorator (0.1)
|
||||||
|
ffi (1.9.14-x64-mingw32)
|
||||||
|
jekyll (3.1.6)
|
||||||
|
colorator (~> 0.1)
|
||||||
|
jekyll-sass-converter (~> 1.0)
|
||||||
|
jekyll-watch (~> 1.1)
|
||||||
|
kramdown (~> 1.3)
|
||||||
|
liquid (~> 3.0)
|
||||||
|
mercenary (~> 0.3.3)
|
||||||
|
rouge (~> 1.7)
|
||||||
|
safe_yaml (~> 1.0)
|
||||||
|
jekyll-sass-converter (1.4.0)
|
||||||
|
sass (~> 3.4)
|
||||||
|
jekyll-sitemap (0.11.0)
|
||||||
|
addressable (~> 2.4.0)
|
||||||
|
jekyll-watch (1.4.0)
|
||||||
|
listen (~> 3.0, < 3.1)
|
||||||
|
kramdown (1.11.1)
|
||||||
|
liquid (3.0.6)
|
||||||
|
listen (3.0.8)
|
||||||
|
rb-fsevent (~> 0.9, >= 0.9.4)
|
||||||
|
rb-inotify (~> 0.9, >= 0.9.7)
|
||||||
|
mercenary (0.3.6)
|
||||||
|
rb-fsevent (0.9.7)
|
||||||
|
rb-inotify (0.9.7)
|
||||||
|
ffi (>= 0.5.0)
|
||||||
|
rouge (1.11.1)
|
||||||
|
safe_yaml (1.0.4)
|
||||||
|
sass (3.4.22)
|
||||||
|
|
||||||
|
PLATFORMS
|
||||||
|
x64-mingw32
|
||||||
|
|
||||||
|
DEPENDENCIES
|
||||||
|
jekyll (~> 3.1.2)
|
||||||
|
jekyll-sitemap (~> 0.11.0)
|
||||||
|
|
||||||
|
BUNDLED WITH
|
||||||
|
1.12.5
|
511
lib/bootstrap/Gruntfile.js
Normal file
@ -0,0 +1,511 @@
|
|||||||
|
/*!
|
||||||
|
* Bootstrap's Gruntfile
|
||||||
|
* http://getbootstrap.com
|
||||||
|
* Copyright 2013-2016 Twitter, Inc.
|
||||||
|
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||||
|
*/
|
||||||
|
|
||||||
|
module.exports = function (grunt) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
// Force use of Unix newlines
|
||||||
|
grunt.util.linefeed = '\n';
|
||||||
|
|
||||||
|
RegExp.quote = function (string) {
|
||||||
|
return string.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&');
|
||||||
|
};
|
||||||
|
|
||||||
|
var fs = require('fs');
|
||||||
|
var path = require('path');
|
||||||
|
var generateGlyphiconsData = require('./grunt/bs-glyphicons-data-generator.js');
|
||||||
|
var BsLessdocParser = require('./grunt/bs-lessdoc-parser.js');
|
||||||
|
var getLessVarsData = function () {
|
||||||
|
var filePath = path.join(__dirname, 'less/variables.less');
|
||||||
|
var fileContent = fs.readFileSync(filePath, { encoding: 'utf8' });
|
||||||
|
var parser = new BsLessdocParser(fileContent);
|
||||||
|
return { sections: parser.parseFile() };
|
||||||
|
};
|
||||||
|
var generateRawFiles = require('./grunt/bs-raw-files-generator.js');
|
||||||
|
var generateCommonJSModule = require('./grunt/bs-commonjs-generator.js');
|
||||||
|
var configBridge = grunt.file.readJSON('./grunt/configBridge.json', { encoding: 'utf8' });
|
||||||
|
|
||||||
|
Object.keys(configBridge.paths).forEach(function (key) {
|
||||||
|
configBridge.paths[key].forEach(function (val, i, arr) {
|
||||||
|
arr[i] = path.join('./docs/assets', val);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Project configuration.
|
||||||
|
grunt.initConfig({
|
||||||
|
|
||||||
|
// Metadata.
|
||||||
|
pkg: grunt.file.readJSON('package.json'),
|
||||||
|
banner: '/*!\n' +
|
||||||
|
' * Bootstrap v<%= pkg.version %> (<%= pkg.homepage %>)\n' +
|
||||||
|
' * Copyright 2011-<%= grunt.template.today("yyyy") %> <%= pkg.author %>\n' +
|
||||||
|
' * Licensed under the <%= pkg.license %> license\n' +
|
||||||
|
' */\n',
|
||||||
|
jqueryCheck: configBridge.config.jqueryCheck.join('\n'),
|
||||||
|
jqueryVersionCheck: configBridge.config.jqueryVersionCheck.join('\n'),
|
||||||
|
|
||||||
|
// Task configuration.
|
||||||
|
clean: {
|
||||||
|
dist: 'dist',
|
||||||
|
docs: 'docs/dist'
|
||||||
|
},
|
||||||
|
|
||||||
|
jshint: {
|
||||||
|
options: {
|
||||||
|
jshintrc: 'js/.jshintrc'
|
||||||
|
},
|
||||||
|
grunt: {
|
||||||
|
options: {
|
||||||
|
jshintrc: 'grunt/.jshintrc'
|
||||||
|
},
|
||||||
|
src: ['Gruntfile.js', 'package.js', 'grunt/*.js']
|
||||||
|
},
|
||||||
|
core: {
|
||||||
|
src: 'js/*.js'
|
||||||
|
},
|
||||||
|
test: {
|
||||||
|
options: {
|
||||||
|
jshintrc: 'js/tests/unit/.jshintrc'
|
||||||
|
},
|
||||||
|
src: 'js/tests/unit/*.js'
|
||||||
|
},
|
||||||
|
assets: {
|
||||||
|
src: ['docs/assets/js/src/*.js', 'docs/assets/js/*.js', '!docs/assets/js/*.min.js']
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
jscs: {
|
||||||
|
options: {
|
||||||
|
config: 'js/.jscsrc'
|
||||||
|
},
|
||||||
|
grunt: {
|
||||||
|
src: '<%= jshint.grunt.src %>'
|
||||||
|
},
|
||||||
|
core: {
|
||||||
|
src: '<%= jshint.core.src %>'
|
||||||
|
},
|
||||||
|
test: {
|
||||||
|
src: '<%= jshint.test.src %>'
|
||||||
|
},
|
||||||
|
assets: {
|
||||||
|
options: {
|
||||||
|
requireCamelCaseOrUpperCaseIdentifiers: null
|
||||||
|
},
|
||||||
|
src: '<%= jshint.assets.src %>'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
concat: {
|
||||||
|
options: {
|
||||||
|
banner: '<%= banner %>\n<%= jqueryCheck %>\n<%= jqueryVersionCheck %>',
|
||||||
|
stripBanners: false
|
||||||
|
},
|
||||||
|
bootstrap: {
|
||||||
|
src: [
|
||||||
|
'js/transition.js',
|
||||||
|
'js/alert.js',
|
||||||
|
'js/button.js',
|
||||||
|
'js/carousel.js',
|
||||||
|
'js/collapse.js',
|
||||||
|
'js/dropdown.js',
|
||||||
|
'js/modal.js',
|
||||||
|
'js/tooltip.js',
|
||||||
|
'js/popover.js',
|
||||||
|
'js/scrollspy.js',
|
||||||
|
'js/tab.js',
|
||||||
|
'js/affix.js'
|
||||||
|
],
|
||||||
|
dest: 'dist/js/<%= pkg.name %>.js'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
uglify: {
|
||||||
|
options: {
|
||||||
|
compress: {
|
||||||
|
warnings: false
|
||||||
|
},
|
||||||
|
mangle: true,
|
||||||
|
preserveComments: /^!|@preserve|@license|@cc_on/i
|
||||||
|
},
|
||||||
|
core: {
|
||||||
|
src: '<%= concat.bootstrap.dest %>',
|
||||||
|
dest: 'dist/js/<%= pkg.name %>.min.js'
|
||||||
|
},
|
||||||
|
customize: {
|
||||||
|
src: configBridge.paths.customizerJs,
|
||||||
|
dest: 'docs/assets/js/customize.min.js'
|
||||||
|
},
|
||||||
|
docsJs: {
|
||||||
|
src: configBridge.paths.docsJs,
|
||||||
|
dest: 'docs/assets/js/docs.min.js'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
qunit: {
|
||||||
|
options: {
|
||||||
|
inject: 'js/tests/unit/phantom.js'
|
||||||
|
},
|
||||||
|
files: 'js/tests/index.html'
|
||||||
|
},
|
||||||
|
|
||||||
|
less: {
|
||||||
|
compileCore: {
|
||||||
|
options: {
|
||||||
|
strictMath: true,
|
||||||
|
sourceMap: true,
|
||||||
|
outputSourceFiles: true,
|
||||||
|
sourceMapURL: '<%= pkg.name %>.css.map',
|
||||||
|
sourceMapFilename: 'dist/css/<%= pkg.name %>.css.map'
|
||||||
|
},
|
||||||
|
src: 'less/bootstrap.less',
|
||||||
|
dest: 'dist/css/<%= pkg.name %>.css'
|
||||||
|
},
|
||||||
|
compileTheme: {
|
||||||
|
options: {
|
||||||
|
strictMath: true,
|
||||||
|
sourceMap: true,
|
||||||
|
outputSourceFiles: true,
|
||||||
|
sourceMapURL: '<%= pkg.name %>-theme.css.map',
|
||||||
|
sourceMapFilename: 'dist/css/<%= pkg.name %>-theme.css.map'
|
||||||
|
},
|
||||||
|
src: 'less/theme.less',
|
||||||
|
dest: 'dist/css/<%= pkg.name %>-theme.css'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
autoprefixer: {
|
||||||
|
options: {
|
||||||
|
browsers: configBridge.config.autoprefixerBrowsers
|
||||||
|
},
|
||||||
|
core: {
|
||||||
|
options: {
|
||||||
|
map: true
|
||||||
|
},
|
||||||
|
src: 'dist/css/<%= pkg.name %>.css'
|
||||||
|
},
|
||||||
|
theme: {
|
||||||
|
options: {
|
||||||
|
map: true
|
||||||
|
},
|
||||||
|
src: 'dist/css/<%= pkg.name %>-theme.css'
|
||||||
|
},
|
||||||
|
docs: {
|
||||||
|
src: ['docs/assets/css/src/docs.css']
|
||||||
|
},
|
||||||
|
examples: {
|
||||||
|
expand: true,
|
||||||
|
cwd: 'docs/examples/',
|
||||||
|
src: ['**/*.css'],
|
||||||
|
dest: 'docs/examples/'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
csslint: {
|
||||||
|
options: {
|
||||||
|
csslintrc: 'less/.csslintrc'
|
||||||
|
},
|
||||||
|
dist: [
|
||||||
|
'dist/css/bootstrap.css',
|
||||||
|
'dist/css/bootstrap-theme.css'
|
||||||
|
],
|
||||||
|
examples: [
|
||||||
|
'docs/examples/**/*.css'
|
||||||
|
],
|
||||||
|
docs: {
|
||||||
|
options: {
|
||||||
|
ids: false,
|
||||||
|
'overqualified-elements': false
|
||||||
|
},
|
||||||
|
src: 'docs/assets/css/src/docs.css'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
cssmin: {
|
||||||
|
options: {
|
||||||
|
// TODO: disable `zeroUnits` optimization once clean-css 3.2 is released
|
||||||
|
// and then simplify the fix for https://github.com/twbs/bootstrap/issues/14837 accordingly
|
||||||
|
compatibility: 'ie8',
|
||||||
|
keepSpecialComments: '*',
|
||||||
|
sourceMap: true,
|
||||||
|
sourceMapInlineSources: true,
|
||||||
|
advanced: false
|
||||||
|
},
|
||||||
|
minifyCore: {
|
||||||
|
src: 'dist/css/<%= pkg.name %>.css',
|
||||||
|
dest: 'dist/css/<%= pkg.name %>.min.css'
|
||||||
|
},
|
||||||
|
minifyTheme: {
|
||||||
|
src: 'dist/css/<%= pkg.name %>-theme.css',
|
||||||
|
dest: 'dist/css/<%= pkg.name %>-theme.min.css'
|
||||||
|
},
|
||||||
|
docs: {
|
||||||
|
src: [
|
||||||
|
'docs/assets/css/ie10-viewport-bug-workaround.css',
|
||||||
|
'docs/assets/css/src/pygments-manni.css',
|
||||||
|
'docs/assets/css/src/docs.css'
|
||||||
|
],
|
||||||
|
dest: 'docs/assets/css/docs.min.css'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
csscomb: {
|
||||||
|
options: {
|
||||||
|
config: 'less/.csscomb.json'
|
||||||
|
},
|
||||||
|
dist: {
|
||||||
|
expand: true,
|
||||||
|
cwd: 'dist/css/',
|
||||||
|
src: ['*.css', '!*.min.css'],
|
||||||
|
dest: 'dist/css/'
|
||||||
|
},
|
||||||
|
examples: {
|
||||||
|
expand: true,
|
||||||
|
cwd: 'docs/examples/',
|
||||||
|
src: '**/*.css',
|
||||||
|
dest: 'docs/examples/'
|
||||||
|
},
|
||||||
|
docs: {
|
||||||
|
src: 'docs/assets/css/src/docs.css',
|
||||||
|
dest: 'docs/assets/css/src/docs.css'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
copy: {
|
||||||
|
fonts: {
|
||||||
|
expand: true,
|
||||||
|
src: 'fonts/**',
|
||||||
|
dest: 'dist/'
|
||||||
|
},
|
||||||
|
docs: {
|
||||||
|
expand: true,
|
||||||
|
cwd: 'dist/',
|
||||||
|
src: [
|
||||||
|
'**/*'
|
||||||
|
],
|
||||||
|
dest: 'docs/dist/'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
connect: {
|
||||||
|
server: {
|
||||||
|
options: {
|
||||||
|
port: 3000,
|
||||||
|
base: '.'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
jekyll: {
|
||||||
|
options: {
|
||||||
|
bundleExec: true,
|
||||||
|
config: '_config.yml',
|
||||||
|
incremental: false
|
||||||
|
},
|
||||||
|
docs: {},
|
||||||
|
github: {
|
||||||
|
options: {
|
||||||
|
raw: 'github: true'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
htmlmin: {
|
||||||
|
dist: {
|
||||||
|
options: {
|
||||||
|
collapseBooleanAttributes: true,
|
||||||
|
collapseWhitespace: true,
|
||||||
|
conservativeCollapse: true,
|
||||||
|
decodeEntities: false,
|
||||||
|
minifyCSS: {
|
||||||
|
compatibility: 'ie8',
|
||||||
|
keepSpecialComments: 0
|
||||||
|
},
|
||||||
|
minifyJS: true,
|
||||||
|
minifyURLs: false,
|
||||||
|
processConditionalComments: true,
|
||||||
|
removeAttributeQuotes: true,
|
||||||
|
removeComments: true,
|
||||||
|
removeOptionalAttributes: true,
|
||||||
|
removeOptionalTags: true,
|
||||||
|
removeRedundantAttributes: true,
|
||||||
|
removeScriptTypeAttributes: true,
|
||||||
|
removeStyleLinkTypeAttributes: true,
|
||||||
|
removeTagWhitespace: false,
|
||||||
|
sortAttributes: true,
|
||||||
|
sortClassName: true
|
||||||
|
},
|
||||||
|
expand: true,
|
||||||
|
cwd: '_gh_pages',
|
||||||
|
dest: '_gh_pages',
|
||||||
|
src: [
|
||||||
|
'**/*.html',
|
||||||
|
'!examples/**/*.html'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
pug: {
|
||||||
|
options: {
|
||||||
|
pretty: true,
|
||||||
|
data: getLessVarsData
|
||||||
|
},
|
||||||
|
customizerVars: {
|
||||||
|
src: 'docs/_pug/customizer-variables.pug',
|
||||||
|
dest: 'docs/_includes/customizer-variables.html'
|
||||||
|
},
|
||||||
|
customizerNav: {
|
||||||
|
src: 'docs/_pug/customizer-nav.pug',
|
||||||
|
dest: 'docs/_includes/nav/customize.html'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
htmllint: {
|
||||||
|
options: {
|
||||||
|
ignore: [
|
||||||
|
'Attribute "autocomplete" not allowed on element "button" at this point.',
|
||||||
|
'Attribute "autocomplete" is only allowed when the input type is "color", "date", "datetime", "datetime-local", "email", "hidden", "month", "number", "password", "range", "search", "tel", "text", "time", "url", or "week".',
|
||||||
|
'Element "img" is missing required attribute "src".'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
src: '_gh_pages/**/*.html'
|
||||||
|
},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
src: {
|
||||||
|
files: '<%= jshint.core.src %>',
|
||||||
|
tasks: ['jshint:core', 'qunit', 'concat']
|
||||||
|
},
|
||||||
|
test: {
|
||||||
|
files: '<%= jshint.test.src %>',
|
||||||
|
tasks: ['jshint:test', 'qunit']
|
||||||
|
},
|
||||||
|
less: {
|
||||||
|
files: 'less/**/*.less',
|
||||||
|
tasks: 'less'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
'saucelabs-qunit': {
|
||||||
|
all: {
|
||||||
|
options: {
|
||||||
|
build: process.env.TRAVIS_JOB_ID,
|
||||||
|
throttled: 10,
|
||||||
|
maxRetries: 3,
|
||||||
|
maxPollRetries: 4,
|
||||||
|
urls: ['http://127.0.0.1:3000/js/tests/index.html?hidepassed'],
|
||||||
|
browsers: grunt.file.readYAML('grunt/sauce_browsers.yml')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
exec: {
|
||||||
|
npmUpdate: {
|
||||||
|
command: 'npm update'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
compress: {
|
||||||
|
main: {
|
||||||
|
options: {
|
||||||
|
archive: 'bootstrap-<%= pkg.version %>-dist.zip',
|
||||||
|
mode: 'zip',
|
||||||
|
level: 9,
|
||||||
|
pretty: true
|
||||||
|
},
|
||||||
|
files: [
|
||||||
|
{
|
||||||
|
expand: true,
|
||||||
|
cwd: 'dist/',
|
||||||
|
src: ['**'],
|
||||||
|
dest: 'bootstrap-<%= pkg.version %>-dist'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// These plugins provide necessary tasks.
|
||||||
|
require('load-grunt-tasks')(grunt, { scope: 'devDependencies' });
|
||||||
|
require('time-grunt')(grunt);
|
||||||
|
|
||||||
|
// Docs HTML validation task
|
||||||
|
grunt.registerTask('validate-html', ['jekyll:docs', 'htmllint']);
|
||||||
|
|
||||||
|
var runSubset = function (subset) {
|
||||||
|
return !process.env.TWBS_TEST || process.env.TWBS_TEST === subset;
|
||||||
|
};
|
||||||
|
var isUndefOrNonZero = function (val) {
|
||||||
|
return val === undefined || val !== '0';
|
||||||
|
};
|
||||||
|
|
||||||
|
// Test task.
|
||||||
|
var testSubtasks = [];
|
||||||
|
// Skip core tests if running a different subset of the test suite
|
||||||
|
if (runSubset('core') &&
|
||||||
|
// Skip core tests if this is a Savage build
|
||||||
|
process.env.TRAVIS_REPO_SLUG !== 'twbs-savage/bootstrap') {
|
||||||
|
testSubtasks = testSubtasks.concat(['dist-css', 'dist-js', 'csslint:dist', 'test-js', 'docs']);
|
||||||
|
}
|
||||||
|
// Skip HTML validation if running a different subset of the test suite
|
||||||
|
if (runSubset('validate-html') &&
|
||||||
|
// Skip HTML5 validator on Travis when [skip validator] is in the commit message
|
||||||
|
isUndefOrNonZero(process.env.TWBS_DO_VALIDATOR)) {
|
||||||
|
testSubtasks.push('validate-html');
|
||||||
|
}
|
||||||
|
// Only run Sauce Labs tests if there's a Sauce access key
|
||||||
|
if (typeof process.env.SAUCE_ACCESS_KEY !== 'undefined' &&
|
||||||
|
// Skip Sauce if running a different subset of the test suite
|
||||||
|
runSubset('sauce-js-unit') &&
|
||||||
|
// Skip Sauce on Travis when [skip sauce] is in the commit message
|
||||||
|
isUndefOrNonZero(process.env.TWBS_DO_SAUCE)) {
|
||||||
|
testSubtasks.push('connect');
|
||||||
|
testSubtasks.push('saucelabs-qunit');
|
||||||
|
}
|
||||||
|
grunt.registerTask('test', testSubtasks);
|
||||||
|
grunt.registerTask('test-js', ['jshint:core', 'jshint:test', 'jshint:grunt', 'jscs:core', 'jscs:test', 'jscs:grunt', 'qunit']);
|
||||||
|
|
||||||
|
// JS distribution task.
|
||||||
|
grunt.registerTask('dist-js', ['concat', 'uglify:core', 'commonjs']);
|
||||||
|
|
||||||
|
// CSS distribution task.
|
||||||
|
grunt.registerTask('less-compile', ['less:compileCore', 'less:compileTheme']);
|
||||||
|
grunt.registerTask('dist-css', ['less-compile', 'autoprefixer:core', 'autoprefixer:theme', 'csscomb:dist', 'cssmin:minifyCore', 'cssmin:minifyTheme']);
|
||||||
|
|
||||||
|
// Full distribution task.
|
||||||
|
grunt.registerTask('dist', ['clean:dist', 'dist-css', 'copy:fonts', 'dist-js']);
|
||||||
|
|
||||||
|
// Default task.
|
||||||
|
grunt.registerTask('default', ['clean:dist', 'copy:fonts', 'test']);
|
||||||
|
|
||||||
|
grunt.registerTask('build-glyphicons-data', function () { generateGlyphiconsData.call(this, grunt); });
|
||||||
|
|
||||||
|
// task for building customizer
|
||||||
|
grunt.registerTask('build-customizer', ['build-customizer-html', 'build-raw-files']);
|
||||||
|
grunt.registerTask('build-customizer-html', 'pug');
|
||||||
|
grunt.registerTask('build-raw-files', 'Add scripts/less files to customizer.', function () {
|
||||||
|
var banner = grunt.template.process('<%= banner %>');
|
||||||
|
generateRawFiles(grunt, banner);
|
||||||
|
});
|
||||||
|
|
||||||
|
grunt.registerTask('commonjs', 'Generate CommonJS entrypoint module in dist dir.', function () {
|
||||||
|
var srcFiles = grunt.config.get('concat.bootstrap.src');
|
||||||
|
var destFilepath = 'dist/js/npm.js';
|
||||||
|
generateCommonJSModule(grunt, srcFiles, destFilepath);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Docs task.
|
||||||
|
grunt.registerTask('docs-css', ['autoprefixer:docs', 'autoprefixer:examples', 'csscomb:docs', 'csscomb:examples', 'cssmin:docs']);
|
||||||
|
grunt.registerTask('lint-docs-css', ['csslint:docs', 'csslint:examples']);
|
||||||
|
grunt.registerTask('docs-js', ['uglify:docsJs', 'uglify:customize']);
|
||||||
|
grunt.registerTask('lint-docs-js', ['jshint:assets', 'jscs:assets']);
|
||||||
|
grunt.registerTask('docs', ['docs-css', 'lint-docs-css', 'docs-js', 'lint-docs-js', 'clean:docs', 'copy:docs', 'build-glyphicons-data', 'build-customizer']);
|
||||||
|
grunt.registerTask('docs-github', ['jekyll:github', 'htmlmin']);
|
||||||
|
|
||||||
|
grunt.registerTask('prep-release', ['dist', 'docs', 'docs-github', 'compress']);
|
||||||
|
};
|
22
lib/bootstrap/ISSUE_TEMPLATE.md
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
Before opening an issue:
|
||||||
|
|
||||||
|
- [Search for duplicate or closed issues](https://github.com/twbs/bootstrap/issues?utf8=%E2%9C%93&q=is%3Aissue)
|
||||||
|
- [Validate](http://validator.w3.org/nu/) and [lint](https://github.com/twbs/bootlint#in-the-browser) any HTML to avoid common problems
|
||||||
|
- Prepare a [reduced test case](https://css-tricks.com/reduced-test-cases/) for any bugs
|
||||||
|
- Read the [contributing guidelines](https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md)
|
||||||
|
|
||||||
|
When asking general "how to" questions:
|
||||||
|
|
||||||
|
- Please do not open an issue here
|
||||||
|
- Instead, ask for help on [StackOverflow, IRC, or Slack](https://github.com/twbs/bootstrap/blob/master/README.md#community)
|
||||||
|
|
||||||
|
When reporting a bug, include:
|
||||||
|
|
||||||
|
- Operating system and version (Windows, Mac OS X, Android, iOS, Win10 Mobile)
|
||||||
|
- Browser and version (Chrome, Firefox, Safari, IE, MS Edge, Opera 15+, Android Browser)
|
||||||
|
- Reduced test cases and potential fixes using [JS Bin](https://jsbin.com)
|
||||||
|
|
||||||
|
When suggesting a feature, include:
|
||||||
|
|
||||||
|
- As much detail as possible for what we should add and why it's important to Bootstrap
|
||||||
|
- Relevant links to prior art, screenshots, or live demos whenever possible
|
21
lib/bootstrap/LICENSE
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
The MIT License (MIT)
|
||||||
|
|
||||||
|
Copyright (c) 2011-2016 Twitter, Inc.
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in
|
||||||
|
all copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||||
|
THE SOFTWARE.
|
142
lib/bootstrap/README.md
Normal file
@ -0,0 +1,142 @@
|
|||||||
|
# [Bootstrap](http://getbootstrap.com)
|
||||||
|
|
||||||
|
[](https://bootstrap-slack.herokuapp.com)
|
||||||
|

|
||||||
|
[](https://www.npmjs.com/package/bootstrap)
|
||||||
|
[](https://travis-ci.org/twbs/bootstrap)
|
||||||
|
[](https://david-dm.org/twbs/bootstrap#info=devDependencies)
|
||||||
|
[](https://www.nuget.org/packages/Bootstrap)
|
||||||
|
[](https://saucelabs.com/u/bootstrap)
|
||||||
|
|
||||||
|
Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development, created by [Mark Otto](https://twitter.com/mdo) and [Jacob Thornton](https://twitter.com/fat), and maintained by the [core team](https://github.com/orgs/twbs/people) with the massive support and involvement of the community.
|
||||||
|
|
||||||
|
To get started, check out <http://getbootstrap.com>!
|
||||||
|
|
||||||
|
|
||||||
|
## Table of contents
|
||||||
|
|
||||||
|
* [Quick start](#quick-start)
|
||||||
|
* [Bugs and feature requests](#bugs-and-feature-requests)
|
||||||
|
* [Documentation](#documentation)
|
||||||
|
* [Contributing](#contributing)
|
||||||
|
* [Community](#community)
|
||||||
|
* [Versioning](#versioning)
|
||||||
|
* [Creators](#creators)
|
||||||
|
* [Copyright and license](#copyright-and-license)
|
||||||
|
|
||||||
|
|
||||||
|
## Quick start
|
||||||
|
|
||||||
|
Several quick start options are available:
|
||||||
|
|
||||||
|
* [Download the latest release](https://github.com/twbs/bootstrap/archive/v3.3.7.zip).
|
||||||
|
* Clone the repo: `git clone https://github.com/twbs/bootstrap.git`.
|
||||||
|
* Install with [Bower](http://bower.io): `bower install bootstrap`.
|
||||||
|
* Install with [npm](https://www.npmjs.com): `npm install bootstrap@3`.
|
||||||
|
* Install with [Meteor](https://www.meteor.com): `meteor add twbs:bootstrap`.
|
||||||
|
* Install with [Composer](https://getcomposer.org): `composer require twbs/bootstrap`.
|
||||||
|
|
||||||
|
Read the [Getting started page](http://getbootstrap.com/getting-started/) for information on the framework contents, templates and examples, and more.
|
||||||
|
|
||||||
|
### What's included
|
||||||
|
|
||||||
|
Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:
|
||||||
|
|
||||||
|
```
|
||||||
|
bootstrap/
|
||||||
|
├── css/
|
||||||
|
│ ├── bootstrap.css
|
||||||
|
│ ├── bootstrap.css.map
|
||||||
|
│ ├── bootstrap.min.css
|
||||||
|
│ ├── bootstrap.min.css.map
|
||||||
|
│ ├── bootstrap-theme.css
|
||||||
|
│ ├── bootstrap-theme.css.map
|
||||||
|
│ ├── bootstrap-theme.min.css
|
||||||
|
│ └── bootstrap-theme.min.css.map
|
||||||
|
├── js/
|
||||||
|
│ ├── bootstrap.js
|
||||||
|
│ └── bootstrap.min.js
|
||||||
|
└── fonts/
|
||||||
|
├── glyphicons-halflings-regular.eot
|
||||||
|
├── glyphicons-halflings-regular.svg
|
||||||
|
├── glyphicons-halflings-regular.ttf
|
||||||
|
├── glyphicons-halflings-regular.woff
|
||||||
|
└── glyphicons-halflings-regular.woff2
|
||||||
|
```
|
||||||
|
|
||||||
|
We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). CSS [source maps](https://developer.chrome.com/devtools/docs/css-preprocessors) (`bootstrap.*.map`) are available for use with certain browsers' developer tools. Fonts from Glyphicons are included, as is the optional Bootstrap theme.
|
||||||
|
|
||||||
|
|
||||||
|
## Bugs and feature requests
|
||||||
|
|
||||||
|
Have a bug or a feature request? Please first read the [issue guidelines](https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md#using-the-issue-tracker) and search for existing and closed issues. If your problem or idea is not addressed yet, [please open a new issue](https://github.com/twbs/bootstrap/issues/new).
|
||||||
|
|
||||||
|
Note that **feature requests must target [Bootstrap v4](https://github.com/twbs/bootstrap/tree/v4-dev),** because Bootstrap v3 is now in maintenance mode and is closed off to new features. This is so that we can focus our efforts on Bootstrap v4.
|
||||||
|
|
||||||
|
|
||||||
|
## Documentation
|
||||||
|
|
||||||
|
Bootstrap's documentation, included in this repo in the root directory, is built with [Jekyll](http://jekyllrb.com) and publicly hosted on GitHub Pages at <http://getbootstrap.com>. The docs may also be run locally.
|
||||||
|
|
||||||
|
### Running documentation locally
|
||||||
|
|
||||||
|
1. If necessary, [install Jekyll](http://jekyllrb.com/docs/installation) and other Ruby dependencies with `bundle install`.
|
||||||
|
**Note for Windows users:** Read [this unofficial guide](http://jekyll-windows.juthilo.com/) to get Jekyll up and running without problems.
|
||||||
|
2. From the root `/bootstrap` directory, run `bundle exec jekyll serve` in the command line.
|
||||||
|
4. Open `http://localhost:9001` in your browser, and voilà.
|
||||||
|
|
||||||
|
Learn more about using Jekyll by reading its [documentation](http://jekyllrb.com/docs/home/).
|
||||||
|
|
||||||
|
### Documentation for previous releases
|
||||||
|
|
||||||
|
Documentation for v2.3.2 has been made available for the time being at <http://getbootstrap.com/2.3.2/> while folks transition to Bootstrap 3.
|
||||||
|
|
||||||
|
[Previous releases](https://github.com/twbs/bootstrap/releases) and their documentation are also available for download.
|
||||||
|
|
||||||
|
|
||||||
|
## Contributing
|
||||||
|
|
||||||
|
Please read through our [contributing guidelines](https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development.
|
||||||
|
|
||||||
|
Moreover, if your pull request contains JavaScript patches or features, you must include [relevant unit tests](https://github.com/twbs/bootstrap/tree/master/js/tests). All HTML and CSS should conform to the [Code Guide](https://github.com/mdo/code-guide), maintained by [Mark Otto](https://github.com/mdo).
|
||||||
|
|
||||||
|
**Bootstrap v3 is now closed off to new features.** It has gone into maintenance mode so that we can focus our efforts on [Bootstrap v4](https://github.com/twbs/bootstrap/tree/v4-dev), the future of the framework. Pull requests which add new features (rather than fix bugs) should target [Bootstrap v4 (the `v4-dev` git branch)](https://github.com/twbs/bootstrap/tree/v4-dev) instead.
|
||||||
|
|
||||||
|
Editor preferences are available in the [editor config](https://github.com/twbs/bootstrap/blob/master/.editorconfig) for easy use in common text editors. Read more and download plugins at <http://editorconfig.org>.
|
||||||
|
|
||||||
|
|
||||||
|
## Community
|
||||||
|
|
||||||
|
Get updates on Bootstrap's development and chat with the project maintainers and community members.
|
||||||
|
|
||||||
|
* Follow [@getbootstrap on Twitter](https://twitter.com/getbootstrap).
|
||||||
|
* Read and subscribe to [The Official Bootstrap Blog](http://blog.getbootstrap.com).
|
||||||
|
* Join [the official Slack room](https://bootstrap-slack.herokuapp.com).
|
||||||
|
* Chat with fellow Bootstrappers in IRC. On the `irc.freenode.net` server, in the `##bootstrap` channel.
|
||||||
|
* Implementation help may be found at Stack Overflow (tagged [`twitter-bootstrap-3`](https://stackoverflow.com/questions/tagged/twitter-bootstrap-3)).
|
||||||
|
* Developers should use the keyword `bootstrap` on packages which modify or add to the functionality of Bootstrap when distributing through [npm](https://www.npmjs.com/browse/keyword/bootstrap) or similar delivery mechanisms for maximum discoverability.
|
||||||
|
|
||||||
|
|
||||||
|
## Versioning
|
||||||
|
|
||||||
|
For transparency into our release cycle and in striving to maintain backward compatibility, Bootstrap is maintained under [the Semantic Versioning guidelines](http://semver.org/). Sometimes we screw up, but we'll adhere to those rules whenever possible.
|
||||||
|
|
||||||
|
See [the Releases section of our GitHub project](https://github.com/twbs/bootstrap/releases) for changelogs for each release version of Bootstrap. Release announcement posts on [the official Bootstrap blog](http://blog.getbootstrap.com) contain summaries of the most noteworthy changes made in each release.
|
||||||
|
|
||||||
|
|
||||||
|
## Creators
|
||||||
|
|
||||||
|
**Mark Otto**
|
||||||
|
|
||||||
|
* <https://twitter.com/mdo>
|
||||||
|
* <https://github.com/mdo>
|
||||||
|
|
||||||
|
**Jacob Thornton**
|
||||||
|
|
||||||
|
* <https://twitter.com/fat>
|
||||||
|
* <https://github.com/fat>
|
||||||
|
|
||||||
|
|
||||||
|
## Copyright and license
|
||||||
|
|
||||||
|
Code and documentation copyright 2011-2016 Twitter, Inc. Code released under [the MIT license](https://github.com/twbs/bootstrap/blob/master/LICENSE). Docs released under [Creative Commons](https://github.com/twbs/bootstrap/blob/master/docs/LICENSE).
|
40
lib/bootstrap/_config.yml
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
# Dependencies
|
||||||
|
markdown: kramdown
|
||||||
|
highlighter: rouge
|
||||||
|
|
||||||
|
# Permalinks
|
||||||
|
permalink: pretty
|
||||||
|
|
||||||
|
# Server
|
||||||
|
source: docs
|
||||||
|
destination: _gh_pages
|
||||||
|
host: 0.0.0.0
|
||||||
|
port: 9001
|
||||||
|
url: http://getbootstrap.com
|
||||||
|
encoding: UTF-8
|
||||||
|
|
||||||
|
gems:
|
||||||
|
- jekyll-sitemap
|
||||||
|
|
||||||
|
# Custom vars
|
||||||
|
current_version: 3.3.7
|
||||||
|
repo: https://github.com/twbs/bootstrap
|
||||||
|
sass_repo: https://github.com/twbs/bootstrap-sass
|
||||||
|
|
||||||
|
download:
|
||||||
|
source: https://github.com/twbs/bootstrap/archive/v3.3.7.zip
|
||||||
|
dist: https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip
|
||||||
|
sass: https://github.com/twbs/bootstrap-sass/archive/v3.3.7.tar.gz
|
||||||
|
|
||||||
|
blog: http://blog.getbootstrap.com
|
||||||
|
expo: http://expo.getbootstrap.com
|
||||||
|
themes: http://themes.getbootstrap.com
|
||||||
|
|
||||||
|
cdn:
|
||||||
|
# See https://www.srihash.org for info on how to generate the hashes
|
||||||
|
css: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
|
||||||
|
css_hash: "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
|
||||||
|
css_theme: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css
|
||||||
|
css_theme_hash: "sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
|
||||||
|
js: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
|
||||||
|
js_hash: "sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
|
34
lib/bootstrap/bower.json
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
{
|
||||||
|
"name": "bootstrap",
|
||||||
|
"description": "The most popular front-end framework for developing responsive, mobile first projects on the web.",
|
||||||
|
"keywords": [
|
||||||
|
"css",
|
||||||
|
"js",
|
||||||
|
"less",
|
||||||
|
"mobile-first",
|
||||||
|
"responsive",
|
||||||
|
"front-end",
|
||||||
|
"framework",
|
||||||
|
"web"
|
||||||
|
],
|
||||||
|
"homepage": "http://getbootstrap.com",
|
||||||
|
"license": "MIT",
|
||||||
|
"moduleType": "globals",
|
||||||
|
"main": [
|
||||||
|
"less/bootstrap.less",
|
||||||
|
"dist/js/bootstrap.js"
|
||||||
|
],
|
||||||
|
"ignore": [
|
||||||
|
"/.*",
|
||||||
|
"_config.yml",
|
||||||
|
"CNAME",
|
||||||
|
"composer.json",
|
||||||
|
"CONTRIBUTING.md",
|
||||||
|
"docs",
|
||||||
|
"js/tests",
|
||||||
|
"test-infra"
|
||||||
|
],
|
||||||
|
"dependencies": {
|
||||||
|
"jquery": "1.9.1 - 3"
|
||||||
|
}
|
||||||
|
}
|
37
lib/bootstrap/composer.json
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
{
|
||||||
|
"name": "twbs/bootstrap",
|
||||||
|
"description": "The most popular front-end framework for developing responsive, mobile first projects on the web.",
|
||||||
|
"keywords": [
|
||||||
|
"css",
|
||||||
|
"js",
|
||||||
|
"less",
|
||||||
|
"mobile-first",
|
||||||
|
"responsive",
|
||||||
|
"front-end",
|
||||||
|
"framework",
|
||||||
|
"web"
|
||||||
|
],
|
||||||
|
"homepage": "http://getbootstrap.com",
|
||||||
|
"authors": [
|
||||||
|
{
|
||||||
|
"name": "Mark Otto",
|
||||||
|
"email": "markdotto@gmail.com"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Jacob Thornton",
|
||||||
|
"email": "jacobthornton@gmail.com"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"support": {
|
||||||
|
"issues": "https://github.com/twbs/bootstrap/issues"
|
||||||
|
},
|
||||||
|
"license": "MIT",
|
||||||
|
"extra": {
|
||||||
|
"branch-alias": {
|
||||||
|
"dev-master": "3.3.x-dev"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"replace": {
|
||||||
|
"twitter/bootstrap": "self.version"
|
||||||
|
}
|
||||||
|
}
|
Before Width: | Height: | Size: 106 KiB After Width: | Height: | Size: 106 KiB |
319
lib/bootstrap/docs/LICENSE
Normal file
@ -0,0 +1,319 @@
|
|||||||
|
Creative Commons Legal Code
|
||||||
|
|
||||||
|
Attribution 3.0 Unported
|
||||||
|
|
||||||
|
CREATIVE COMMONS CORPORATION IS NOT A LAW FIRM AND DOES NOT PROVIDE
|
||||||
|
LEGAL SERVICES. DISTRIBUTION OF THIS LICENSE DOES NOT CREATE AN
|
||||||
|
ATTORNEY-CLIENT RELATIONSHIP. CREATIVE COMMONS PROVIDES THIS
|
||||||
|
INFORMATION ON AN "AS-IS" BASIS. CREATIVE COMMONS MAKES NO WARRANTIES
|
||||||
|
REGARDING THE INFORMATION PROVIDED, AND DISCLAIMS LIABILITY FOR
|
||||||
|
DAMAGES RESULTING FROM ITS USE.
|
||||||
|
|
||||||
|
License
|
||||||
|
|
||||||
|
THE WORK (AS DEFINED BELOW) IS PROVIDED UNDER THE TERMS OF THIS CREATIVE
|
||||||
|
COMMONS PUBLIC LICENSE ("CCPL" OR "LICENSE"). THE WORK IS PROTECTED BY
|
||||||
|
COPYRIGHT AND/OR OTHER APPLICABLE LAW. ANY USE OF THE WORK OTHER THAN AS
|
||||||
|
AUTHORIZED UNDER THIS LICENSE OR COPYRIGHT LAW IS PROHIBITED.
|
||||||
|
|
||||||
|
BY EXERCISING ANY RIGHTS TO THE WORK PROVIDED HERE, YOU ACCEPT AND AGREE
|
||||||
|
TO BE BOUND BY THE TERMS OF THIS LICENSE. TO THE EXTENT THIS LICENSE MAY
|
||||||
|
BE CONSIDERED TO BE A CONTRACT, THE LICENSOR GRANTS YOU THE RIGHTS
|
||||||
|
CONTAINED HERE IN CONSIDERATION OF YOUR ACCEPTANCE OF SUCH TERMS AND
|
||||||
|
CONDITIONS.
|
||||||
|
|
||||||
|
1. Definitions
|
||||||
|
|
||||||
|
a. "Adaptation" means a work based upon the Work, or upon the Work and
|
||||||
|
other pre-existing works, such as a translation, adaptation,
|
||||||
|
derivative work, arrangement of music or other alterations of a
|
||||||
|
literary or artistic work, or phonogram or performance and includes
|
||||||
|
cinematographic adaptations or any other form in which the Work may be
|
||||||
|
recast, transformed, or adapted including in any form recognizably
|
||||||
|
derived from the original, except that a work that constitutes a
|
||||||
|
Collection will not be considered an Adaptation for the purpose of
|
||||||
|
this License. For the avoidance of doubt, where the Work is a musical
|
||||||
|
work, performance or phonogram, the synchronization of the Work in
|
||||||
|
timed-relation with a moving image ("synching") will be considered an
|
||||||
|
Adaptation for the purpose of this License.
|
||||||
|
b. "Collection" means a collection of literary or artistic works, such as
|
||||||
|
encyclopedias and anthologies, or performances, phonograms or
|
||||||
|
broadcasts, or other works or subject matter other than works listed
|
||||||
|
in Section 1(f) below, which, by reason of the selection and
|
||||||
|
arrangement of their contents, constitute intellectual creations, in
|
||||||
|
which the Work is included in its entirety in unmodified form along
|
||||||
|
with one or more other contributions, each constituting separate and
|
||||||
|
independent works in themselves, which together are assembled into a
|
||||||
|
collective whole. A work that constitutes a Collection will not be
|
||||||
|
considered an Adaptation (as defined above) for the purposes of this
|
||||||
|
License.
|
||||||
|
c. "Distribute" means to make available to the public the original and
|
||||||
|
copies of the Work or Adaptation, as appropriate, through sale or
|
||||||
|
other transfer of ownership.
|
||||||
|
d. "Licensor" means the individual, individuals, entity or entities that
|
||||||
|
offer(s) the Work under the terms of this License.
|
||||||
|
e. "Original Author" means, in the case of a literary or artistic work,
|
||||||
|
the individual, individuals, entity or entities who created the Work
|
||||||
|
or if no individual or entity can be identified, the publisher; and in
|
||||||
|
addition (i) in the case of a performance the actors, singers,
|
||||||
|
musicians, dancers, and other persons who act, sing, deliver, declaim,
|
||||||
|
play in, interpret or otherwise perform literary or artistic works or
|
||||||
|
expressions of folklore; (ii) in the case of a phonogram the producer
|
||||||
|
being the person or legal entity who first fixes the sounds of a
|
||||||
|
performance or other sounds; and, (iii) in the case of broadcasts, the
|
||||||
|
organization that transmits the broadcast.
|
||||||
|
f. "Work" means the literary and/or artistic work offered under the terms
|
||||||
|
of this License including without limitation any production in the
|
||||||
|
literary, scientific and artistic domain, whatever may be the mode or
|
||||||
|
form of its expression including digital form, such as a book,
|
||||||
|
pamphlet and other writing; a lecture, address, sermon or other work
|
||||||
|
of the same nature; a dramatic or dramatico-musical work; a
|
||||||
|
choreographic work or entertainment in dumb show; a musical
|
||||||
|
composition with or without words; a cinematographic work to which are
|
||||||
|
assimilated works expressed by a process analogous to cinematography;
|
||||||
|
a work of drawing, painting, architecture, sculpture, engraving or
|
||||||
|
lithography; a photographic work to which are assimilated works
|
||||||
|
expressed by a process analogous to photography; a work of applied
|
||||||
|
art; an illustration, map, plan, sketch or three-dimensional work
|
||||||
|
relative to geography, topography, architecture or science; a
|
||||||
|
performance; a broadcast; a phonogram; a compilation of data to the
|
||||||
|
extent it is protected as a copyrightable work; or a work performed by
|
||||||
|
a variety or circus performer to the extent it is not otherwise
|
||||||
|
considered a literary or artistic work.
|
||||||
|
g. "You" means an individual or entity exercising rights under this
|
||||||
|
License who has not previously violated the terms of this License with
|
||||||
|
respect to the Work, or who has received express permission from the
|
||||||
|
Licensor to exercise rights under this License despite a previous
|
||||||
|
violation.
|
||||||
|
h. "Publicly Perform" means to perform public recitations of the Work and
|
||||||
|
to communicate to the public those public recitations, by any means or
|
||||||
|
process, including by wire or wireless means or public digital
|
||||||
|
performances; to make available to the public Works in such a way that
|
||||||
|
members of the public may access these Works from a place and at a
|
||||||
|
place individually chosen by them; to perform the Work to the public
|
||||||
|
by any means or process and the communication to the public of the
|
||||||
|
performances of the Work, including by public digital performance; to
|
||||||
|
broadcast and rebroadcast the Work by any means including signs,
|
||||||
|
sounds or images.
|
||||||
|
i. "Reproduce" means to make copies of the Work by any means including
|
||||||
|
without limitation by sound or visual recordings and the right of
|
||||||
|
fixation and reproducing fixations of the Work, including storage of a
|
||||||
|
protected performance or phonogram in digital form or other electronic
|
||||||
|
medium.
|
||||||
|
|
||||||
|
2. Fair Dealing Rights. Nothing in this License is intended to reduce,
|
||||||
|
limit, or restrict any uses free from copyright or rights arising from
|
||||||
|
limitations or exceptions that are provided for in connection with the
|
||||||
|
copyright protection under copyright law or other applicable laws.
|
||||||
|
|
||||||
|
3. License Grant. Subject to the terms and conditions of this License,
|
||||||
|
Licensor hereby grants You a worldwide, royalty-free, non-exclusive,
|
||||||
|
perpetual (for the duration of the applicable copyright) license to
|
||||||
|
exercise the rights in the Work as stated below:
|
||||||
|
|
||||||
|
a. to Reproduce the Work, to incorporate the Work into one or more
|
||||||
|
Collections, and to Reproduce the Work as incorporated in the
|
||||||
|
Collections;
|
||||||
|
b. to create and Reproduce Adaptations provided that any such Adaptation,
|
||||||
|
including any translation in any medium, takes reasonable steps to
|
||||||
|
clearly label, demarcate or otherwise identify that changes were made
|
||||||
|
to the original Work. For example, a translation could be marked "The
|
||||||
|
original work was translated from English to Spanish," or a
|
||||||
|
modification could indicate "The original work has been modified.";
|
||||||
|
c. to Distribute and Publicly Perform the Work including as incorporated
|
||||||
|
in Collections; and,
|
||||||
|
d. to Distribute and Publicly Perform Adaptations.
|
||||||
|
e. For the avoidance of doubt:
|
||||||
|
|
||||||
|
i. Non-waivable Compulsory License Schemes. In those jurisdictions in
|
||||||
|
which the right to collect royalties through any statutory or
|
||||||
|
compulsory licensing scheme cannot be waived, the Licensor
|
||||||
|
reserves the exclusive right to collect such royalties for any
|
||||||
|
exercise by You of the rights granted under this License;
|
||||||
|
ii. Waivable Compulsory License Schemes. In those jurisdictions in
|
||||||
|
which the right to collect royalties through any statutory or
|
||||||
|
compulsory licensing scheme can be waived, the Licensor waives the
|
||||||
|
exclusive right to collect such royalties for any exercise by You
|
||||||
|
of the rights granted under this License; and,
|
||||||
|
iii. Voluntary License Schemes. The Licensor waives the right to
|
||||||
|
collect royalties, whether individually or, in the event that the
|
||||||
|
Licensor is a member of a collecting society that administers
|
||||||
|
voluntary licensing schemes, via that society, from any exercise
|
||||||
|
by You of the rights granted under this License.
|
||||||
|
|
||||||
|
The above rights may be exercised in all media and formats whether now
|
||||||
|
known or hereafter devised. The above rights include the right to make
|
||||||
|
such modifications as are technically necessary to exercise the rights in
|
||||||
|
other media and formats. Subject to Section 8(f), all rights not expressly
|
||||||
|
granted by Licensor are hereby reserved.
|
||||||
|
|
||||||
|
4. Restrictions. The license granted in Section 3 above is expressly made
|
||||||
|
subject to and limited by the following restrictions:
|
||||||
|
|
||||||
|
a. You may Distribute or Publicly Perform the Work only under the terms
|
||||||
|
of this License. You must include a copy of, or the Uniform Resource
|
||||||
|
Identifier (URI) for, this License with every copy of the Work You
|
||||||
|
Distribute or Publicly Perform. You may not offer or impose any terms
|
||||||
|
on the Work that restrict the terms of this License or the ability of
|
||||||
|
the recipient of the Work to exercise the rights granted to that
|
||||||
|
recipient under the terms of the License. You may not sublicense the
|
||||||
|
Work. You must keep intact all notices that refer to this License and
|
||||||
|
to the disclaimer of warranties with every copy of the Work You
|
||||||
|
Distribute or Publicly Perform. When You Distribute or Publicly
|
||||||
|
Perform the Work, You may not impose any effective technological
|
||||||
|
measures on the Work that restrict the ability of a recipient of the
|
||||||
|
Work from You to exercise the rights granted to that recipient under
|
||||||
|
the terms of the License. This Section 4(a) applies to the Work as
|
||||||
|
incorporated in a Collection, but this does not require the Collection
|
||||||
|
apart from the Work itself to be made subject to the terms of this
|
||||||
|
License. If You create a Collection, upon notice from any Licensor You
|
||||||
|
must, to the extent practicable, remove from the Collection any credit
|
||||||
|
as required by Section 4(b), as requested. If You create an
|
||||||
|
Adaptation, upon notice from any Licensor You must, to the extent
|
||||||
|
practicable, remove from the Adaptation any credit as required by
|
||||||
|
Section 4(b), as requested.
|
||||||
|
b. If You Distribute, or Publicly Perform the Work or any Adaptations or
|
||||||
|
Collections, You must, unless a request has been made pursuant to
|
||||||
|
Section 4(a), keep intact all copyright notices for the Work and
|
||||||
|
provide, reasonable to the medium or means You are utilizing: (i) the
|
||||||
|
name of the Original Author (or pseudonym, if applicable) if supplied,
|
||||||
|
and/or if the Original Author and/or Licensor designate another party
|
||||||
|
or parties (e.g., a sponsor institute, publishing entity, journal) for
|
||||||
|
attribution ("Attribution Parties") in Licensor's copyright notice,
|
||||||
|
terms of service or by other reasonable means, the name of such party
|
||||||
|
or parties; (ii) the title of the Work if supplied; (iii) to the
|
||||||
|
extent reasonably practicable, the URI, if any, that Licensor
|
||||||
|
specifies to be associated with the Work, unless such URI does not
|
||||||
|
refer to the copyright notice or licensing information for the Work;
|
||||||
|
and (iv) , consistent with Section 3(b), in the case of an Adaptation,
|
||||||
|
a credit identifying the use of the Work in the Adaptation (e.g.,
|
||||||
|
"French translation of the Work by Original Author," or "Screenplay
|
||||||
|
based on original Work by Original Author"). The credit required by
|
||||||
|
this Section 4 (b) may be implemented in any reasonable manner;
|
||||||
|
provided, however, that in the case of a Adaptation or Collection, at
|
||||||
|
a minimum such credit will appear, if a credit for all contributing
|
||||||
|
authors of the Adaptation or Collection appears, then as part of these
|
||||||
|
credits and in a manner at least as prominent as the credits for the
|
||||||
|
other contributing authors. For the avoidance of doubt, You may only
|
||||||
|
use the credit required by this Section for the purpose of attribution
|
||||||
|
in the manner set out above and, by exercising Your rights under this
|
||||||
|
License, You may not implicitly or explicitly assert or imply any
|
||||||
|
connection with, sponsorship or endorsement by the Original Author,
|
||||||
|
Licensor and/or Attribution Parties, as appropriate, of You or Your
|
||||||
|
use of the Work, without the separate, express prior written
|
||||||
|
permission of the Original Author, Licensor and/or Attribution
|
||||||
|
Parties.
|
||||||
|
c. Except as otherwise agreed in writing by the Licensor or as may be
|
||||||
|
otherwise permitted by applicable law, if You Reproduce, Distribute or
|
||||||
|
Publicly Perform the Work either by itself or as part of any
|
||||||
|
Adaptations or Collections, You must not distort, mutilate, modify or
|
||||||
|
take other derogatory action in relation to the Work which would be
|
||||||
|
prejudicial to the Original Author's honor or reputation. Licensor
|
||||||
|
agrees that in those jurisdictions (e.g. Japan), in which any exercise
|
||||||
|
of the right granted in Section 3(b) of this License (the right to
|
||||||
|
make Adaptations) would be deemed to be a distortion, mutilation,
|
||||||
|
modification or other derogatory action prejudicial to the Original
|
||||||
|
Author's honor and reputation, the Licensor will waive or not assert,
|
||||||
|
as appropriate, this Section, to the fullest extent permitted by the
|
||||||
|
applicable national law, to enable You to reasonably exercise Your
|
||||||
|
right under Section 3(b) of this License (right to make Adaptations)
|
||||||
|
but not otherwise.
|
||||||
|
|
||||||
|
5. Representations, Warranties and Disclaimer
|
||||||
|
|
||||||
|
UNLESS OTHERWISE MUTUALLY AGREED TO BY THE PARTIES IN WRITING, LICENSOR
|
||||||
|
OFFERS THE WORK AS-IS AND MAKES NO REPRESENTATIONS OR WARRANTIES OF ANY
|
||||||
|
KIND CONCERNING THE WORK, EXPRESS, IMPLIED, STATUTORY OR OTHERWISE,
|
||||||
|
INCLUDING, WITHOUT LIMITATION, WARRANTIES OF TITLE, MERCHANTIBILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE, NONINFRINGEMENT, OR THE ABSENCE OF
|
||||||
|
LATENT OR OTHER DEFECTS, ACCURACY, OR THE PRESENCE OF ABSENCE OF ERRORS,
|
||||||
|
WHETHER OR NOT DISCOVERABLE. SOME JURISDICTIONS DO NOT ALLOW THE EXCLUSION
|
||||||
|
OF IMPLIED WARRANTIES, SO SUCH EXCLUSION MAY NOT APPLY TO YOU.
|
||||||
|
|
||||||
|
6. Limitation on Liability. EXCEPT TO THE EXTENT REQUIRED BY APPLICABLE
|
||||||
|
LAW, IN NO EVENT WILL LICENSOR BE LIABLE TO YOU ON ANY LEGAL THEORY FOR
|
||||||
|
ANY SPECIAL, INCIDENTAL, CONSEQUENTIAL, PUNITIVE OR EXEMPLARY DAMAGES
|
||||||
|
ARISING OUT OF THIS LICENSE OR THE USE OF THE WORK, EVEN IF LICENSOR HAS
|
||||||
|
BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.
|
||||||
|
|
||||||
|
7. Termination
|
||||||
|
|
||||||
|
a. This License and the rights granted hereunder will terminate
|
||||||
|
automatically upon any breach by You of the terms of this License.
|
||||||
|
Individuals or entities who have received Adaptations or Collections
|
||||||
|
from You under this License, however, will not have their licenses
|
||||||
|
terminated provided such individuals or entities remain in full
|
||||||
|
compliance with those licenses. Sections 1, 2, 5, 6, 7, and 8 will
|
||||||
|
survive any termination of this License.
|
||||||
|
b. Subject to the above terms and conditions, the license granted here is
|
||||||
|
perpetual (for the duration of the applicable copyright in the Work).
|
||||||
|
Notwithstanding the above, Licensor reserves the right to release the
|
||||||
|
Work under different license terms or to stop distributing the Work at
|
||||||
|
any time; provided, however that any such election will not serve to
|
||||||
|
withdraw this License (or any other license that has been, or is
|
||||||
|
required to be, granted under the terms of this License), and this
|
||||||
|
License will continue in full force and effect unless terminated as
|
||||||
|
stated above.
|
||||||
|
|
||||||
|
8. Miscellaneous
|
||||||
|
|
||||||
|
a. Each time You Distribute or Publicly Perform the Work or a Collection,
|
||||||
|
the Licensor offers to the recipient a license to the Work on the same
|
||||||
|
terms and conditions as the license granted to You under this License.
|
||||||
|
b. Each time You Distribute or Publicly Perform an Adaptation, Licensor
|
||||||
|
offers to the recipient a license to the original Work on the same
|
||||||
|
terms and conditions as the license granted to You under this License.
|
||||||
|
c. If any provision of this License is invalid or unenforceable under
|
||||||
|
applicable law, it shall not affect the validity or enforceability of
|
||||||
|
the remainder of the terms of this License, and without further action
|
||||||
|
by the parties to this agreement, such provision shall be reformed to
|
||||||
|
the minimum extent necessary to make such provision valid and
|
||||||
|
enforceable.
|
||||||
|
d. No term or provision of this License shall be deemed waived and no
|
||||||
|
breach consented to unless such waiver or consent shall be in writing
|
||||||
|
and signed by the party to be charged with such waiver or consent.
|
||||||
|
e. This License constitutes the entire agreement between the parties with
|
||||||
|
respect to the Work licensed here. There are no understandings,
|
||||||
|
agreements or representations with respect to the Work not specified
|
||||||
|
here. Licensor shall not be bound by any additional provisions that
|
||||||
|
may appear in any communication from You. This License may not be
|
||||||
|
modified without the mutual written agreement of the Licensor and You.
|
||||||
|
f. The rights granted under, and the subject matter referenced, in this
|
||||||
|
License were drafted utilizing the terminology of the Berne Convention
|
||||||
|
for the Protection of Literary and Artistic Works (as amended on
|
||||||
|
September 28, 1979), the Rome Convention of 1961, the WIPO Copyright
|
||||||
|
Treaty of 1996, the WIPO Performances and Phonograms Treaty of 1996
|
||||||
|
and the Universal Copyright Convention (as revised on July 24, 1971).
|
||||||
|
These rights and subject matter take effect in the relevant
|
||||||
|
jurisdiction in which the License terms are sought to be enforced
|
||||||
|
according to the corresponding provisions of the implementation of
|
||||||
|
those treaty provisions in the applicable national law. If the
|
||||||
|
standard suite of rights granted under applicable copyright law
|
||||||
|
includes additional rights not granted under this License, such
|
||||||
|
additional rights are deemed to be included in the License; this
|
||||||
|
License is not intended to restrict the license of any rights under
|
||||||
|
applicable law.
|
||||||
|
|
||||||
|
|
||||||
|
Creative Commons Notice
|
||||||
|
|
||||||
|
Creative Commons is not a party to this License, and makes no warranty
|
||||||
|
whatsoever in connection with the Work. Creative Commons will not be
|
||||||
|
liable to You or any party on any legal theory for any damages
|
||||||
|
whatsoever, including without limitation any general, special,
|
||||||
|
incidental or consequential damages arising in connection to this
|
||||||
|
license. Notwithstanding the foregoing two (2) sentences, if Creative
|
||||||
|
Commons has expressly identified itself as the Licensor hereunder, it
|
||||||
|
shall have all rights and obligations of Licensor.
|
||||||
|
|
||||||
|
Except for the limited purpose of indicating to the public that the
|
||||||
|
Work is licensed under the CCPL, Creative Commons does not authorize
|
||||||
|
the use by either party of the trademark "Creative Commons" or any
|
||||||
|
related trademark or logo of Creative Commons without the prior
|
||||||
|
written consent of Creative Commons. Any permitted use will be in
|
||||||
|
compliance with Creative Commons' then-current trademark usage
|
||||||
|
guidelines, as may be published on its website or otherwise made
|
||||||
|
available upon request from time to time. For the avoidance of doubt,
|
||||||
|
this trademark restriction does not form part of this License.
|
||||||
|
|
||||||
|
Creative Commons may be contacted at http://creativecommons.org/.
|
423
lib/bootstrap/docs/_data/browser-bugs.yml
Normal file
@ -0,0 +1,423 @@
|
|||||||
|
-
|
||||||
|
browser: >
|
||||||
|
Microsoft Edge
|
||||||
|
summary: >
|
||||||
|
Native browser tooltip for `title` shows on first keyboard focus (in addition to custom tooltip component)
|
||||||
|
upstream_bug: >
|
||||||
|
Edge#6793560
|
||||||
|
origin: >
|
||||||
|
Bootstrap#18692
|
||||||
|
|
||||||
|
-
|
||||||
|
browser: >
|
||||||
|
Microsoft Edge
|
||||||
|
summary: >
|
||||||
|
Hovered element still remains in `:hover` state after scrolling away.
|
||||||
|
upstream_bug: >
|
||||||
|
Edge#5381673
|
||||||
|
origin: >
|
||||||
|
Bootstrap#14211
|
||||||
|
|
||||||
|
-
|
||||||
|
browser: >
|
||||||
|
Microsoft Edge
|
||||||
|
summary: >
|
||||||
|
When hovering over a `<select>` menu item, the cursor for the element underneath the menu is displayed.
|
||||||
|
upstream_bug: >
|
||||||
|
Edge#817822
|
||||||
|
origin: >
|
||||||
|
Bootstrap#14528
|
||||||
|
|
||||||
|
-
|
||||||
|
browser: >
|
||||||
|
Microsoft Edge
|
||||||
|
summary: >
|
||||||
|
CSS `border-radius` sometimes causes lines of bleed-through of the `background-color` of the parent element.
|
||||||
|
upstream_bug: >
|
||||||
|
Edge#3342037
|
||||||
|
origin: >
|
||||||
|
Bootstrap#16671
|
||||||
|
|
||||||
|
-
|
||||||
|
browser: >
|
||||||
|
Microsoft Edge
|
||||||
|
summary: >
|
||||||
|
`background` of `<tr>` is only applied to first child cell instead of all cells in the row
|
||||||
|
upstream_bug: >
|
||||||
|
Edge#5865620
|
||||||
|
origin: >
|
||||||
|
Bootstrap#18504
|
||||||
|
|
||||||
|
-
|
||||||
|
browser: >
|
||||||
|
Microsoft Edge
|
||||||
|
summary: >
|
||||||
|
`@-ms-viewport{width: device-width;}` has side-effect of making scrollbars auto-hide
|
||||||
|
upstream_bug: >
|
||||||
|
Edge#7165383
|
||||||
|
origin: >
|
||||||
|
Bootstrap#18543
|
||||||
|
|
||||||
|
-
|
||||||
|
browser: >
|
||||||
|
Microsoft Edge
|
||||||
|
summary: >
|
||||||
|
Background color from lower layer bleeds through transparent border in some cases
|
||||||
|
upstream_bug: >
|
||||||
|
Edge#6274505
|
||||||
|
origin: >
|
||||||
|
Bootstrap#18228
|
||||||
|
|
||||||
|
-
|
||||||
|
browser: >
|
||||||
|
Microsoft Edge
|
||||||
|
summary: >
|
||||||
|
Hovering over descendant SVG element fires `mouseleave` event at ancestor
|
||||||
|
upstream_bug: >
|
||||||
|
Edge#7787318
|
||||||
|
origin: >
|
||||||
|
Bootstrap#19670
|
||||||
|
|
||||||
|
-
|
||||||
|
browser: >
|
||||||
|
Firefox
|
||||||
|
summary: >
|
||||||
|
`.table-bordered` with an empty `<tbody>` is missing borders.
|
||||||
|
upstream_bug: >
|
||||||
|
Mozilla#1023761
|
||||||
|
origin: >
|
||||||
|
Bootstrap#13453
|
||||||
|
|
||||||
|
-
|
||||||
|
browser: >
|
||||||
|
Firefox
|
||||||
|
summary: >
|
||||||
|
If the disabled state of a form control is changed via JavaScript, the normal state doesn't return after refreshing the page.
|
||||||
|
upstream_bug: >
|
||||||
|
Mozilla#654072
|
||||||
|
origin: >
|
||||||
|
Bootstrap#793
|
||||||
|
|
||||||
|
-
|
||||||
|
browser: >
|
||||||
|
Firefox
|
||||||
|
summary: >
|
||||||
|
`focus` events should not be fired at the `document` object
|
||||||
|
upstream_bug: >
|
||||||
|
Mozilla#1228802
|
||||||
|
origin: >
|
||||||
|
Bootstrap#18365
|
||||||
|
|
||||||
|
-
|
||||||
|
browser: >
|
||||||
|
Firefox
|
||||||
|
summary: >
|
||||||
|
Wide floated table doesn't wrap onto new line
|
||||||
|
upstream_bug: >
|
||||||
|
Mozilla#1277782
|
||||||
|
origin: >
|
||||||
|
Bootstrap#19839
|
||||||
|
|
||||||
|
-
|
||||||
|
browser: >
|
||||||
|
Firefox
|
||||||
|
summary: >
|
||||||
|
Mouse sometimes not within element for purposes of `mouseenter`/`mouseleave` when it's within SVG elements
|
||||||
|
upstream_bug: >
|
||||||
|
Mozilla#577785
|
||||||
|
origin: >
|
||||||
|
Bootstrap#19670
|
||||||
|
|
||||||
|
-
|
||||||
|
browser: >
|
||||||
|
Firefox
|
||||||
|
summary: >
|
||||||
|
`position: absolute` element that's wider than its column renders differently than other browsers
|
||||||
|
upstream_bug: >
|
||||||
|
Mozilla#1282363
|
||||||
|
origin: >
|
||||||
|
Bootstrap#20161
|
||||||
|
|
||||||
|
-
|
||||||
|
browser: >
|
||||||
|
Firefox (Windows)
|
||||||
|
summary: >
|
||||||
|
Right border of `<select>` menu is sometimes missing when screen is set to uncommon resolution
|
||||||
|
upstream_bug: >
|
||||||
|
Mozilla#545685
|
||||||
|
origin: >
|
||||||
|
Bootstrap#15990
|
||||||
|
|
||||||
|
-
|
||||||
|
browser: >
|
||||||
|
Firefox (OS X & Linux)
|
||||||
|
summary: >
|
||||||
|
Badge widget causes bottom border of Tabs widget to unexpectedly not overlap
|
||||||
|
upstream_bug: >
|
||||||
|
Mozilla#1259972
|
||||||
|
origin: >
|
||||||
|
Bootstrap#19626
|
||||||
|
|
||||||
|
-
|
||||||
|
browser: >
|
||||||
|
Chrome (Android)
|
||||||
|
summary: >
|
||||||
|
Tapping on an `<input>` in a scrollable overlay doesn't scroll the `<input>` into view
|
||||||
|
upstream_bug: >
|
||||||
|
Chromium#595210
|
||||||
|
origin: >
|
||||||
|
Bootstrap#17338
|
||||||
|
|
||||||
|
-
|
||||||
|
browser: >
|
||||||
|
Chrome (OS X)
|
||||||
|
summary: >
|
||||||
|
Clicking above `<input type="number">` increment button flashes the decrement button.
|
||||||
|
upstream_bug: >
|
||||||
|
Chromium#419108
|
||||||
|
origin: >
|
||||||
|
Offshoot of Bootstrap#8350 & Chromium#337668
|
||||||
|
|
||||||
|
-
|
||||||
|
browser: >
|
||||||
|
Chrome
|
||||||
|
summary: >
|
||||||
|
CSS infinite linear animation with alpha transparency leaks memory.
|
||||||
|
upstream_bug: >
|
||||||
|
Chromium#429375
|
||||||
|
origin: >
|
||||||
|
Bootstrap#14409
|
||||||
|
|
||||||
|
-
|
||||||
|
browser: >
|
||||||
|
Chrome
|
||||||
|
summary: >
|
||||||
|
`:focus` `outline` style causes cursor to not be displayed when toggling a `readonly` `<input>` to read-write.
|
||||||
|
upstream_bug: >
|
||||||
|
Chromium#465274
|
||||||
|
origin: >
|
||||||
|
Bootstrap#16022
|
||||||
|
|
||||||
|
-
|
||||||
|
browser: >
|
||||||
|
Chrome
|
||||||
|
summary: >
|
||||||
|
`table-cell` borders not overlapping despite `margin-right: -1px`
|
||||||
|
upstream_bug: >
|
||||||
|
Chromium#534750
|
||||||
|
origin: >
|
||||||
|
Bootstrap#17438, Bootstrap#14237
|
||||||
|
|
||||||
|
-
|
||||||
|
browser: >
|
||||||
|
Chrome
|
||||||
|
summary: >
|
||||||
|
Clicking scrollbar in `<select multiple>` with overflowed options will select nearby `<option>`
|
||||||
|
upstream_bug: >
|
||||||
|
Chromium#597642
|
||||||
|
origin: >
|
||||||
|
Bootstrap#19810
|
||||||
|
|
||||||
|
-
|
||||||
|
browser: >
|
||||||
|
Chrome
|
||||||
|
summary: >
|
||||||
|
Don't make `:hover` sticky on touch-friendly webpages
|
||||||
|
upstream_bug: >
|
||||||
|
Chromium#370155
|
||||||
|
origin: >
|
||||||
|
Bootstrap#12832
|
||||||
|
|
||||||
|
-
|
||||||
|
browser: >
|
||||||
|
Chrome (Windows & Linux)
|
||||||
|
summary: >
|
||||||
|
Animation glitch when returning to inactive tab after animations occurred while tab was hidden.
|
||||||
|
upstream_bug: >
|
||||||
|
Chromium#449180
|
||||||
|
origin: >
|
||||||
|
Bootstrap#15298
|
||||||
|
|
||||||
|
-
|
||||||
|
browser: >
|
||||||
|
Safari
|
||||||
|
summary: >
|
||||||
|
Safari
|
||||||
|
summary: >
|
||||||
|
`rem` units in media queries should be calculated using `font-size: initial`, not the root element's `font-size`
|
||||||
|
upstream_bug: >
|
||||||
|
WebKit#156684
|
||||||
|
origin: >
|
||||||
|
Bootstrap#17403
|
||||||
|
|
||||||
|
-
|
||||||
|
browser: >
|
||||||
|
Safari (OS X)
|
||||||
|
summary: >
|
||||||
|
`px`, `em`, and `rem` should all behave the same in media queries when page zoom is applied
|
||||||
|
upstream_bug: >
|
||||||
|
WebKit#156687
|
||||||
|
origin: >
|
||||||
|
Bootstrap#17403
|
||||||
|
|
||||||
|
-
|
||||||
|
browser: >
|
||||||
|
Safari (OS X)
|
||||||
|
summary: >
|
||||||
|
Weird button behavior with some `<input type="number">` elements.
|
||||||
|
upstream_bug: >
|
||||||
|
WebKit#137269, Safari#18834768
|
||||||
|
origin: >
|
||||||
|
Bootstrap#8350,
|
||||||
|
Normalize#283,
|
||||||
|
Chromium#337668
|
||||||
|
|
||||||
|
-
|
||||||
|
browser: >
|
||||||
|
Safari (OS X)
|
||||||
|
summary: >
|
||||||
|
Small font size when printing webpage with fixed-width `.container`.
|
||||||
|
upstream_bug: >
|
||||||
|
WebKit#138192, Safari#19435018
|
||||||
|
origin: >
|
||||||
|
Bootstrap#14868
|
||||||
|
|
||||||
|
-
|
||||||
|
browser: >
|
||||||
|
Safari (iPad)
|
||||||
|
summary: >
|
||||||
|
`<select>` menu on iPad causes shifting of hit-testing areas
|
||||||
|
upstream_bug: >
|
||||||
|
WebKit#150079, Safari#23082521
|
||||||
|
origin: >
|
||||||
|
Bootstrap#14975
|
||||||
|
|
||||||
|
-
|
||||||
|
browser: >
|
||||||
|
Safari (iOS)
|
||||||
|
summary: >
|
||||||
|
`transform: translate3d(0,0,0);` rendering bug.
|
||||||
|
upstream_bug: >
|
||||||
|
WebKit#138162, Safari#18804973
|
||||||
|
origin: >
|
||||||
|
Bootstrap#14603
|
||||||
|
|
||||||
|
-
|
||||||
|
browser: >
|
||||||
|
Safari (iOS)
|
||||||
|
summary: >
|
||||||
|
Text input's cursor doesn't move while scrolling the page.
|
||||||
|
upstream_bug: >
|
||||||
|
WebKit#138201, Safari#18819624
|
||||||
|
origin: >
|
||||||
|
Bootstrap#14708
|
||||||
|
|
||||||
|
-
|
||||||
|
browser: >
|
||||||
|
Safari (iOS)
|
||||||
|
summary: >
|
||||||
|
Can't move cursor to start of text after entering long string of text into `<input type="text">`
|
||||||
|
upstream_bug: >
|
||||||
|
WebKit#148061, Safari#22299624
|
||||||
|
origin: >
|
||||||
|
Bootstrap#16988
|
||||||
|
|
||||||
|
-
|
||||||
|
browser: >
|
||||||
|
Safari (iOS)
|
||||||
|
summary: >
|
||||||
|
`display: block` causes text of temporal `<input>`s to become vertically misaligned
|
||||||
|
upstream_bug: >
|
||||||
|
WebKit#139848, Safari#19434878
|
||||||
|
origin: >
|
||||||
|
Bootstrap#11266, Bootstrap#13098
|
||||||
|
|
||||||
|
-
|
||||||
|
browser: >
|
||||||
|
Safari (iOS)
|
||||||
|
summary: >
|
||||||
|
Tapping on `<body>` doesn't fire `click` events
|
||||||
|
upstream_bug: >
|
||||||
|
WebKit#151933
|
||||||
|
origin: >
|
||||||
|
Bootstrap#16028
|
||||||
|
|
||||||
|
-
|
||||||
|
browser: >
|
||||||
|
Safari (iOS)
|
||||||
|
summary: >
|
||||||
|
`position:fixed` is incorrectly positioned when tab bar is visible on iPhone 6S+ Safari
|
||||||
|
upstream_bug: >
|
||||||
|
WebKit#153056
|
||||||
|
origin: >
|
||||||
|
Bootstrap#18859
|
||||||
|
|
||||||
|
-
|
||||||
|
browser: >
|
||||||
|
Safari (iOS)
|
||||||
|
summary: >
|
||||||
|
Tapping into an `<input>` within a `position:fixed` element scrolls to the top of the page
|
||||||
|
upstream_bug: >
|
||||||
|
WebKit#153224, Safari#24235301
|
||||||
|
origin: >
|
||||||
|
Bootstrap#17497
|
||||||
|
|
||||||
|
-
|
||||||
|
browser: >
|
||||||
|
Safari (iOS)
|
||||||
|
summary: >
|
||||||
|
`<body>` with `overflow:hidden` CSS is scrollable on iOS
|
||||||
|
upstream_bug: >
|
||||||
|
WebKit#153852
|
||||||
|
origin: >
|
||||||
|
Bootstrap#14839
|
||||||
|
|
||||||
|
-
|
||||||
|
browser: >
|
||||||
|
Safari (iOS)
|
||||||
|
summary: >
|
||||||
|
Scroll gesture in text field in `position:fixed` element sometimes scrolls `<body>` instead of scrollable ancestor
|
||||||
|
upstream_bug: >
|
||||||
|
WebKit#153856
|
||||||
|
origin: >
|
||||||
|
Bootstrap#14839
|
||||||
|
|
||||||
|
-
|
||||||
|
browser: >
|
||||||
|
Safari (iOS)
|
||||||
|
summary: >
|
||||||
|
Tapping from one `<input>` to another in an overlay can cause shaking/jiggling effect
|
||||||
|
upstream_bug: >
|
||||||
|
WebKit#158276
|
||||||
|
origin: >
|
||||||
|
Bootstrap#19927
|
||||||
|
|
||||||
|
-
|
||||||
|
browser: >
|
||||||
|
Safari (iOS)
|
||||||
|
summary: >
|
||||||
|
Modal with `-webkit-overflow-scrolling: touch` doesn't become scrollable after added text makes it taller
|
||||||
|
upstream_bug: >
|
||||||
|
WebKit#158342
|
||||||
|
origin: >
|
||||||
|
Bootstrap#17695
|
||||||
|
|
||||||
|
-
|
||||||
|
browser: >
|
||||||
|
Safari (iOS)
|
||||||
|
summary: >
|
||||||
|
Don't make `:hover` sticky on touch-friendly webpages
|
||||||
|
upstream_bug: >
|
||||||
|
WebKit#158517
|
||||||
|
origin: >
|
||||||
|
Bootstrap#12832
|
||||||
|
|
||||||
|
-
|
||||||
|
browser: >
|
||||||
|
Safari (iPad Pro)
|
||||||
|
summary: >
|
||||||
|
Rendering of descendants of `position: fixed` element gets clipped on iPad Pro in Landscape orientation
|
||||||
|
upstream_bug: >
|
||||||
|
WebKit#152637, Safari#24030853
|
||||||
|
origin: >
|
||||||
|
Bootstrap#18738
|
99
lib/bootstrap/docs/_data/browser-features.yml
Normal file
@ -0,0 +1,99 @@
|
|||||||
|
-
|
||||||
|
browser: >
|
||||||
|
Microsoft Edge
|
||||||
|
summary: >
|
||||||
|
Implement the [`:dir()` pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:dir) from Selectors Level 4
|
||||||
|
upstream_bug: >
|
||||||
|
UserVoice#12299532
|
||||||
|
origin: >
|
||||||
|
Bootstrap#19984
|
||||||
|
|
||||||
|
-
|
||||||
|
browser: >
|
||||||
|
Microsoft Edge
|
||||||
|
summary: >
|
||||||
|
Implement [sticky positioning](http://html5please.com/#position:sticky) from CSS Positioned Layout Level 3
|
||||||
|
upstream_bug: >
|
||||||
|
UserVoice#6263621
|
||||||
|
origin: >
|
||||||
|
Bootstrap#17021
|
||||||
|
|
||||||
|
-
|
||||||
|
browser: >
|
||||||
|
Firefox
|
||||||
|
summary: >
|
||||||
|
Fire a [`transitioncancel` event](https://developer.mozilla.org/en-US/docs/Web/Events/transitioncancel) when a CSS transition is canceled
|
||||||
|
upstream_bug: >
|
||||||
|
Mozilla#1264125
|
||||||
|
origin: >
|
||||||
|
Mozilla#1182856
|
||||||
|
|
||||||
|
-
|
||||||
|
browser: >
|
||||||
|
Firefox
|
||||||
|
summary: >
|
||||||
|
Implement the [`of <selector-list>` clause](http://caniuse.com/#feat=css-nth-child-of) of the `:nth-child()` pseudo-class
|
||||||
|
upstream_bug: >
|
||||||
|
Mozilla#854148
|
||||||
|
origin: >
|
||||||
|
Bootstrap#20143
|
||||||
|
|
||||||
|
-
|
||||||
|
browser: >
|
||||||
|
Firefox
|
||||||
|
summary: >
|
||||||
|
Implement the HTML5 [`<dialog>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog)
|
||||||
|
upstream_bug: >
|
||||||
|
Mozilla#840640
|
||||||
|
origin: >
|
||||||
|
Bootstrap#20175
|
||||||
|
|
||||||
|
-
|
||||||
|
browser: >
|
||||||
|
Chrome
|
||||||
|
summary: >
|
||||||
|
Implement the [`of <selector-list>` clause](http://caniuse.com/#feat=css-nth-child-of) of the `:nth-child()` pseudo-class
|
||||||
|
upstream_bug: >
|
||||||
|
Chromium#304163
|
||||||
|
origin: >
|
||||||
|
Bootstrap#20143
|
||||||
|
|
||||||
|
-
|
||||||
|
browser: >
|
||||||
|
Chrome
|
||||||
|
summary: >
|
||||||
|
Implement the [`:dir()` pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:dir) from Selectors Level 4
|
||||||
|
upstream_bug: >
|
||||||
|
Chromium#576815
|
||||||
|
origin: >
|
||||||
|
Bootstrap#19984
|
||||||
|
|
||||||
|
-
|
||||||
|
browser: >
|
||||||
|
Chrome
|
||||||
|
summary: >
|
||||||
|
Implement [sticky positioning](http://html5please.com/#position:sticky) from CSS Positioned Layout Level 3
|
||||||
|
upstream_bug: >
|
||||||
|
Chromium#231752
|
||||||
|
origin: >
|
||||||
|
Bootstrap#17021
|
||||||
|
|
||||||
|
-
|
||||||
|
browser: >
|
||||||
|
Safari
|
||||||
|
summary: >
|
||||||
|
Implement the [`:dir()` pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:dir) from Selectors Level 4
|
||||||
|
upstream_bug: >
|
||||||
|
WebKit#64861
|
||||||
|
origin: >
|
||||||
|
Bootstrap#19984
|
||||||
|
|
||||||
|
-
|
||||||
|
browser: >
|
||||||
|
Safari
|
||||||
|
summary: >
|
||||||
|
Implement the HTML5 [`<dialog>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog)
|
||||||
|
upstream_bug: >
|
||||||
|
WebKit#84635
|
||||||
|
origin: >
|
||||||
|
Bootstrap#20175
|
27
lib/bootstrap/docs/_data/core-team.yml
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
- name: Mark Otto
|
||||||
|
user: mdo
|
||||||
|
gravatar: bc4ab438f7a4ce1c406aadc688427f2c
|
||||||
|
|
||||||
|
- name: Jacob Thornton
|
||||||
|
user: fat
|
||||||
|
gravatar: a98244cbdacaf1c0b55499466002f7a8
|
||||||
|
|
||||||
|
- name: Chris Rebert
|
||||||
|
user: cvrebert
|
||||||
|
gravatar: edec428c425453955f770095a7d26c50
|
||||||
|
|
||||||
|
- name: Julian Thilo
|
||||||
|
user: juthilo
|
||||||
|
gravatar: 0f7dd3ce58a416be5685ea6194f82b11
|
||||||
|
|
||||||
|
- name: XhmikosR
|
||||||
|
user: xhmikosr
|
||||||
|
gravatar: e37759b1ea0125d4e97b1e00b5eed26f
|
||||||
|
|
||||||
|
- name: Heinrich Fenkart
|
||||||
|
user: hnrch02
|
||||||
|
gravatar: 0d53f5d3d3d28bd470f394d98f7ef48f
|
||||||
|
|
||||||
|
- name: Patrick H. Lauke
|
||||||
|
user: patrickhlauke
|
||||||
|
gravatar: 357f279672db832fc41a5a2f36559fcb
|
266
lib/bootstrap/docs/_data/glyphicons.yml
Normal file
@ -0,0 +1,266 @@
|
|||||||
|
# This file is generated via Grunt task. **Do not edit directly.**
|
||||||
|
# See the 'build-glyphicons-data' task in Gruntfile.js.
|
||||||
|
|
||||||
|
- glyphicon-asterisk
|
||||||
|
- glyphicon-plus
|
||||||
|
- glyphicon-euro
|
||||||
|
- glyphicon-eur
|
||||||
|
- glyphicon-minus
|
||||||
|
- glyphicon-cloud
|
||||||
|
- glyphicon-envelope
|
||||||
|
- glyphicon-pencil
|
||||||
|
- glyphicon-glass
|
||||||
|
- glyphicon-music
|
||||||
|
- glyphicon-search
|
||||||
|
- glyphicon-heart
|
||||||
|
- glyphicon-star
|
||||||
|
- glyphicon-star-empty
|
||||||
|
- glyphicon-user
|
||||||
|
- glyphicon-film
|
||||||
|
- glyphicon-th-large
|
||||||
|
- glyphicon-th
|
||||||
|
- glyphicon-th-list
|
||||||
|
- glyphicon-ok
|
||||||
|
- glyphicon-remove
|
||||||
|
- glyphicon-zoom-in
|
||||||
|
- glyphicon-zoom-out
|
||||||
|
- glyphicon-off
|
||||||
|
- glyphicon-signal
|
||||||
|
- glyphicon-cog
|
||||||
|
- glyphicon-trash
|
||||||
|
- glyphicon-home
|
||||||
|
- glyphicon-file
|
||||||
|
- glyphicon-time
|
||||||
|
- glyphicon-road
|
||||||
|
- glyphicon-download-alt
|
||||||
|
- glyphicon-download
|
||||||
|
- glyphicon-upload
|
||||||
|
- glyphicon-inbox
|
||||||
|
- glyphicon-play-circle
|
||||||
|
- glyphicon-repeat
|
||||||
|
- glyphicon-refresh
|
||||||
|
- glyphicon-list-alt
|
||||||
|
- glyphicon-lock
|
||||||
|
- glyphicon-flag
|
||||||
|
- glyphicon-headphones
|
||||||
|
- glyphicon-volume-off
|
||||||
|
- glyphicon-volume-down
|
||||||
|
- glyphicon-volume-up
|
||||||
|
- glyphicon-qrcode
|
||||||
|
- glyphicon-barcode
|
||||||
|
- glyphicon-tag
|
||||||
|
- glyphicon-tags
|
||||||
|
- glyphicon-book
|
||||||
|
- glyphicon-bookmark
|
||||||
|
- glyphicon-print
|
||||||
|
- glyphicon-camera
|
||||||
|
- glyphicon-font
|
||||||
|
- glyphicon-bold
|
||||||
|
- glyphicon-italic
|
||||||
|
- glyphicon-text-height
|
||||||
|
- glyphicon-text-width
|
||||||
|
- glyphicon-align-left
|
||||||
|
- glyphicon-align-center
|
||||||
|
- glyphicon-align-right
|
||||||
|
- glyphicon-align-justify
|
||||||
|
- glyphicon-list
|
||||||
|
- glyphicon-indent-left
|
||||||
|
- glyphicon-indent-right
|
||||||
|
- glyphicon-facetime-video
|
||||||
|
- glyphicon-picture
|
||||||
|
- glyphicon-map-marker
|
||||||
|
- glyphicon-adjust
|
||||||
|
- glyphicon-tint
|
||||||
|
- glyphicon-edit
|
||||||
|
- glyphicon-share
|
||||||
|
- glyphicon-check
|
||||||
|
- glyphicon-move
|
||||||
|
- glyphicon-step-backward
|
||||||
|
- glyphicon-fast-backward
|
||||||
|
- glyphicon-backward
|
||||||
|
- glyphicon-play
|
||||||
|
- glyphicon-pause
|
||||||
|
- glyphicon-stop
|
||||||
|
- glyphicon-forward
|
||||||
|
- glyphicon-fast-forward
|
||||||
|
- glyphicon-step-forward
|
||||||
|
- glyphicon-eject
|
||||||
|
- glyphicon-chevron-left
|
||||||
|
- glyphicon-chevron-right
|
||||||
|
- glyphicon-plus-sign
|
||||||
|
- glyphicon-minus-sign
|
||||||
|
- glyphicon-remove-sign
|
||||||
|
- glyphicon-ok-sign
|
||||||
|
- glyphicon-question-sign
|
||||||
|
- glyphicon-info-sign
|
||||||
|
- glyphicon-screenshot
|
||||||
|
- glyphicon-remove-circle
|
||||||
|
- glyphicon-ok-circle
|
||||||
|
- glyphicon-ban-circle
|
||||||
|
- glyphicon-arrow-left
|
||||||
|
- glyphicon-arrow-right
|
||||||
|
- glyphicon-arrow-up
|
||||||
|
- glyphicon-arrow-down
|
||||||
|
- glyphicon-share-alt
|
||||||
|
- glyphicon-resize-full
|
||||||
|
- glyphicon-resize-small
|
||||||
|
- glyphicon-exclamation-sign
|
||||||
|
- glyphicon-gift
|
||||||
|
- glyphicon-leaf
|
||||||
|
- glyphicon-fire
|
||||||
|
- glyphicon-eye-open
|
||||||
|
- glyphicon-eye-close
|
||||||
|
- glyphicon-warning-sign
|
||||||
|
- glyphicon-plane
|
||||||
|
- glyphicon-calendar
|
||||||
|
- glyphicon-random
|
||||||
|
- glyphicon-comment
|
||||||
|
- glyphicon-magnet
|
||||||
|
- glyphicon-chevron-up
|
||||||
|
- glyphicon-chevron-down
|
||||||
|
- glyphicon-retweet
|
||||||
|
- glyphicon-shopping-cart
|
||||||
|
- glyphicon-folder-close
|
||||||
|
- glyphicon-folder-open
|
||||||
|
- glyphicon-resize-vertical
|
||||||
|
- glyphicon-resize-horizontal
|
||||||
|
- glyphicon-hdd
|
||||||
|
- glyphicon-bullhorn
|
||||||
|
- glyphicon-bell
|
||||||
|
- glyphicon-certificate
|
||||||
|
- glyphicon-thumbs-up
|
||||||
|
- glyphicon-thumbs-down
|
||||||
|
- glyphicon-hand-right
|
||||||
|
- glyphicon-hand-left
|
||||||
|
- glyphicon-hand-up
|
||||||
|
- glyphicon-hand-down
|
||||||
|
- glyphicon-circle-arrow-right
|
||||||
|
- glyphicon-circle-arrow-left
|
||||||
|
- glyphicon-circle-arrow-up
|
||||||
|
- glyphicon-circle-arrow-down
|
||||||
|
- glyphicon-globe
|
||||||
|
- glyphicon-wrench
|
||||||
|
- glyphicon-tasks
|
||||||
|
- glyphicon-filter
|
||||||
|
- glyphicon-briefcase
|
||||||
|
- glyphicon-fullscreen
|
||||||
|
- glyphicon-dashboard
|
||||||
|
- glyphicon-paperclip
|
||||||
|
- glyphicon-heart-empty
|
||||||
|
- glyphicon-link
|
||||||
|
- glyphicon-phone
|
||||||
|
- glyphicon-pushpin
|
||||||
|
- glyphicon-usd
|
||||||
|
- glyphicon-gbp
|
||||||
|
- glyphicon-sort
|
||||||
|
- glyphicon-sort-by-alphabet
|
||||||
|
- glyphicon-sort-by-alphabet-alt
|
||||||
|
- glyphicon-sort-by-order
|
||||||
|
- glyphicon-sort-by-order-alt
|
||||||
|
- glyphicon-sort-by-attributes
|
||||||
|
- glyphicon-sort-by-attributes-alt
|
||||||
|
- glyphicon-unchecked
|
||||||
|
- glyphicon-expand
|
||||||
|
- glyphicon-collapse-down
|
||||||
|
- glyphicon-collapse-up
|
||||||
|
- glyphicon-log-in
|
||||||
|
- glyphicon-flash
|
||||||
|
- glyphicon-log-out
|
||||||
|
- glyphicon-new-window
|
||||||
|
- glyphicon-record
|
||||||
|
- glyphicon-save
|
||||||
|
- glyphicon-open
|
||||||
|
- glyphicon-saved
|
||||||
|
- glyphicon-import
|
||||||
|
- glyphicon-export
|
||||||
|
- glyphicon-send
|
||||||
|
- glyphicon-floppy-disk
|
||||||
|
- glyphicon-floppy-saved
|
||||||
|
- glyphicon-floppy-remove
|
||||||
|
- glyphicon-floppy-save
|
||||||
|
- glyphicon-floppy-open
|
||||||
|
- glyphicon-credit-card
|
||||||
|
- glyphicon-transfer
|
||||||
|
- glyphicon-cutlery
|
||||||
|
- glyphicon-header
|
||||||
|
- glyphicon-compressed
|
||||||
|
- glyphicon-earphone
|
||||||
|
- glyphicon-phone-alt
|
||||||
|
- glyphicon-tower
|
||||||
|
- glyphicon-stats
|
||||||
|
- glyphicon-sd-video
|
||||||
|
- glyphicon-hd-video
|
||||||
|
- glyphicon-subtitles
|
||||||
|
- glyphicon-sound-stereo
|
||||||
|
- glyphicon-sound-dolby
|
||||||
|
- glyphicon-sound-5-1
|
||||||
|
- glyphicon-sound-6-1
|
||||||
|
- glyphicon-sound-7-1
|
||||||
|
- glyphicon-copyright-mark
|
||||||
|
- glyphicon-registration-mark
|
||||||
|
- glyphicon-cloud-download
|
||||||
|
- glyphicon-cloud-upload
|
||||||
|
- glyphicon-tree-conifer
|
||||||
|
- glyphicon-tree-deciduous
|
||||||
|
- glyphicon-cd
|
||||||
|
- glyphicon-save-file
|
||||||
|
- glyphicon-open-file
|
||||||
|
- glyphicon-level-up
|
||||||
|
- glyphicon-copy
|
||||||
|
- glyphicon-paste
|
||||||
|
- glyphicon-alert
|
||||||
|
- glyphicon-equalizer
|
||||||
|
- glyphicon-king
|
||||||
|
- glyphicon-queen
|
||||||
|
- glyphicon-pawn
|
||||||
|
- glyphicon-bishop
|
||||||
|
- glyphicon-knight
|
||||||
|
- glyphicon-baby-formula
|
||||||
|
- glyphicon-tent
|
||||||
|
- glyphicon-blackboard
|
||||||
|
- glyphicon-bed
|
||||||
|
- glyphicon-apple
|
||||||
|
- glyphicon-erase
|
||||||
|
- glyphicon-hourglass
|
||||||
|
- glyphicon-lamp
|
||||||
|
- glyphicon-duplicate
|
||||||
|
- glyphicon-piggy-bank
|
||||||
|
- glyphicon-scissors
|
||||||
|
- glyphicon-bitcoin
|
||||||
|
- glyphicon-btc
|
||||||
|
- glyphicon-xbt
|
||||||
|
- glyphicon-yen
|
||||||
|
- glyphicon-jpy
|
||||||
|
- glyphicon-ruble
|
||||||
|
- glyphicon-rub
|
||||||
|
- glyphicon-scale
|
||||||
|
- glyphicon-ice-lolly
|
||||||
|
- glyphicon-ice-lolly-tasted
|
||||||
|
- glyphicon-education
|
||||||
|
- glyphicon-option-horizontal
|
||||||
|
- glyphicon-option-vertical
|
||||||
|
- glyphicon-menu-hamburger
|
||||||
|
- glyphicon-modal-window
|
||||||
|
- glyphicon-oil
|
||||||
|
- glyphicon-grain
|
||||||
|
- glyphicon-sunglasses
|
||||||
|
- glyphicon-text-size
|
||||||
|
- glyphicon-text-color
|
||||||
|
- glyphicon-text-background
|
||||||
|
- glyphicon-object-align-top
|
||||||
|
- glyphicon-object-align-bottom
|
||||||
|
- glyphicon-object-align-horizontal
|
||||||
|
- glyphicon-object-align-left
|
||||||
|
- glyphicon-object-align-vertical
|
||||||
|
- glyphicon-object-align-right
|
||||||
|
- glyphicon-triangle-right
|
||||||
|
- glyphicon-triangle-left
|
||||||
|
- glyphicon-triangle-bottom
|
||||||
|
- glyphicon-triangle-top
|
||||||
|
- glyphicon-console
|
||||||
|
- glyphicon-superscript
|
||||||
|
- glyphicon-subscript
|
||||||
|
- glyphicon-menu-left
|
||||||
|
- glyphicon-menu-right
|
||||||
|
- glyphicon-menu-down
|
||||||
|
- glyphicon-menu-up
|
7
lib/bootstrap/docs/_data/sass-team.yml
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
- name: Thomas McDonald
|
||||||
|
user: thomas-mcdonald
|
||||||
|
gravatar: 24cd55ab1a62ffb113ab8c02f64c9301
|
||||||
|
|
||||||
|
- name: Gleb Mazovetskiy
|
||||||
|
user: glebm
|
||||||
|
gravatar: 729f685b8e8d7e9feed18c177c82e59b
|
19
lib/bootstrap/docs/_data/showcase.yml
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
- name: Lyft
|
||||||
|
url: https://www.lyft.com
|
||||||
|
expo_url: http://expo.getbootstrap.com/2014/10/29/lyft/
|
||||||
|
img: lyft
|
||||||
|
|
||||||
|
- name: Vogue
|
||||||
|
url: http://www.vogue.com
|
||||||
|
expo_url: http://expo.getbootstrap.com/2014/09/30/vogue/
|
||||||
|
img: vogue
|
||||||
|
|
||||||
|
- name: Riot Design
|
||||||
|
url: http://riotdesign.eu/en/
|
||||||
|
expo_url: http://expo.getbootstrap.com/2014/03/13/riot-design/
|
||||||
|
img: riot
|
||||||
|
|
||||||
|
- name: Newsweek
|
||||||
|
url: http://www.newsweek.com/
|
||||||
|
expo_url: http://expo.getbootstrap.com/2014/02/12/newsweek/
|
||||||
|
img: newsweek
|
64
lib/bootstrap/docs/_data/translations.yml
Normal file
@ -0,0 +1,64 @@
|
|||||||
|
- name: Chinese
|
||||||
|
code: zh
|
||||||
|
description: Bootstrap 中文文档
|
||||||
|
url: http://v3.bootcss.com/
|
||||||
|
|
||||||
|
- name: Chinese (Traditional)
|
||||||
|
code: zh-TW
|
||||||
|
description: Bootstrap 3 中文手冊
|
||||||
|
url: https://kkbruce.tw/bs3/
|
||||||
|
|
||||||
|
- name: Danish
|
||||||
|
code: da
|
||||||
|
description: Bootstrap på Dansk
|
||||||
|
url: http://getbootstrap.dk/
|
||||||
|
|
||||||
|
- name: French
|
||||||
|
code: fr
|
||||||
|
description: Bootstrap en Français
|
||||||
|
url: http://www.oneskyapp.com/fr/docs/bootstrap/getting-started/
|
||||||
|
|
||||||
|
- name: German
|
||||||
|
code: de
|
||||||
|
description: Bootstrap auf Deutsch
|
||||||
|
url: http://holdirbootstrap.de/
|
||||||
|
|
||||||
|
- name: Italian
|
||||||
|
code: it
|
||||||
|
description: Bootstrap in Italiano
|
||||||
|
url: http://www.hackerstribe.com/guide/IT-bootstrap-3.1.1/
|
||||||
|
|
||||||
|
- name: Korean
|
||||||
|
code: ko
|
||||||
|
description: Bootstrap 한국어
|
||||||
|
url: http://bootstrapk.com/
|
||||||
|
|
||||||
|
- name: Brazilian Portuguese
|
||||||
|
code: pt-BR
|
||||||
|
description: Bootstrap em Português do Brasil
|
||||||
|
url: http://bootstrapbrasil.github.io/
|
||||||
|
|
||||||
|
- name: Russian
|
||||||
|
code: ru
|
||||||
|
description: Bootstrap по-русски
|
||||||
|
url: http://www.oneskyapp.com/ru/docs/bootstrap/
|
||||||
|
|
||||||
|
- name: Spanish
|
||||||
|
code: es
|
||||||
|
description: Bootstrap en Español
|
||||||
|
url: http://www.oneskyapp.com/es/docs/bootstrap/
|
||||||
|
|
||||||
|
- name: Turkish
|
||||||
|
code: tr
|
||||||
|
description: Türkçe Bootstrap
|
||||||
|
url: http://www.trbootstrap.com
|
||||||
|
|
||||||
|
- name: Ukrainian
|
||||||
|
code: uk
|
||||||
|
description: Bootstrap українською
|
||||||
|
url: http://twbs.docs.org.ua
|
||||||
|
|
||||||
|
- name: Vietnamese
|
||||||
|
code: vi
|
||||||
|
description: Bootstrap bằng tiếng Việt
|
||||||
|
url: http://getbootstrap.com.vn
|
1
lib/bootstrap/docs/_includes/ads.html
Normal file
@ -0,0 +1 @@
|
|||||||
|
<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script>var z = document.createElement("script"); z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
|
89
lib/bootstrap/docs/_includes/components/alerts.html
Normal file
@ -0,0 +1,89 @@
|
|||||||
|
<div class="bs-docs-section">
|
||||||
|
<h1 id="alerts" class="page-header">Alerts</h1>
|
||||||
|
|
||||||
|
<p class="lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.</p>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<div class="bs-callout bs-callout-info" id="callout-alerts-no-default">
|
||||||
|
<h4>No default class</h4>
|
||||||
|
<p>Alerts don't have default classes, only base and modifier classes. A default gray alert doesn't make too much sense, so you're required to specify a type via contextual class. Choose from success, info, warning, or danger.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bs-example" data-example-id="simple-alerts">
|
||||||
|
<div class="alert alert-success" role="alert">
|
||||||
|
<strong>Well done!</strong> You successfully read this important alert message.
|
||||||
|
</div>
|
||||||
|
<div class="alert alert-info" role="alert">
|
||||||
|
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
|
||||||
|
</div>
|
||||||
|
<div class="alert alert-warning" role="alert">
|
||||||
|
<strong>Warning!</strong> Better check yourself, you're not looking too good.
|
||||||
|
</div>
|
||||||
|
<div class="alert alert-danger" role="alert">
|
||||||
|
<strong>Oh snap!</strong> Change a few things up and try submitting again.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="alert alert-success" role="alert">...</div>
|
||||||
|
<div class="alert alert-info" role="alert">...</div>
|
||||||
|
<div class="alert alert-warning" role="alert">...</div>
|
||||||
|
<div class="alert alert-danger" role="alert">...</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h2 id="alerts-dismissible">Dismissible alerts</h2>
|
||||||
|
<p>Build on any alert by adding an optional <code>.alert-dismissible</code> and close button.</p>
|
||||||
|
<div class="bs-callout bs-callout-info" id="callout-alerts-dismiss-plugin">
|
||||||
|
<h4>Requires JavaScript alert plugin</h4>
|
||||||
|
<p>For fully functioning, dismissible alerts, you must use the <a href="../javascript/#alerts">alerts JavaScript plugin</a>.</p>
|
||||||
|
</div>
|
||||||
|
<div class="bs-example" data-example-id="dismissible-alert-css">
|
||||||
|
<div class="alert alert-warning alert-dismissible" role="alert">
|
||||||
|
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||||
|
<strong>Warning!</strong> Better check yourself, you're not looking too good.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="alert alert-warning alert-dismissible" role="alert">
|
||||||
|
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||||
|
<strong>Warning!</strong> Better check yourself, you're not looking too good.
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<div class="bs-callout bs-callout-warning" id="callout-alerts-dismiss-use-button">
|
||||||
|
<h4>Ensure proper behavior across all devices</h4>
|
||||||
|
<p>Be sure to use the <code><button></code> element with the <code>data-dismiss="alert"</code> data attribute.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 id="alerts-links">Links in alerts</h2>
|
||||||
|
<p>Use the <code>.alert-link</code> utility class to quickly provide matching colored links within any alert.</p>
|
||||||
|
<div class="bs-example" data-example-id="alerts-with-links">
|
||||||
|
<div class="alert alert-success" role="alert">
|
||||||
|
<strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
|
||||||
|
</div>
|
||||||
|
<div class="alert alert-info" role="alert">
|
||||||
|
<strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
|
||||||
|
</div>
|
||||||
|
<div class="alert alert-warning" role="alert">
|
||||||
|
<strong>Warning!</strong> Better check yourself, you're <a href="#" class="alert-link">not looking too good</a>.
|
||||||
|
</div>
|
||||||
|
<div class="alert alert-danger" role="alert">
|
||||||
|
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="alert alert-success" role="alert">
|
||||||
|
<a href="#" class="alert-link">...</a>
|
||||||
|
</div>
|
||||||
|
<div class="alert alert-info" role="alert">
|
||||||
|
<a href="#" class="alert-link">...</a>
|
||||||
|
</div>
|
||||||
|
<div class="alert alert-warning" role="alert">
|
||||||
|
<a href="#" class="alert-link">...</a>
|
||||||
|
</div>
|
||||||
|
<div class="alert alert-danger" role="alert">
|
||||||
|
<a href="#" class="alert-link">...</a>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
45
lib/bootstrap/docs/_includes/components/badges.html
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
<div class="bs-docs-section">
|
||||||
|
<h1 id="badges" class="page-header">Badges</h1>
|
||||||
|
|
||||||
|
<p class="lead">Easily highlight new or unread items by adding a <code><span class="badge"></code> to links, Bootstrap navs, and more.</p>
|
||||||
|
|
||||||
|
<div class="bs-example" data-example-id="simple-badges">
|
||||||
|
<a href="#">Inbox <span class="badge">42</span></a>
|
||||||
|
<br><br>
|
||||||
|
<button class="btn btn-primary" type="button">
|
||||||
|
Messages <span class="badge">4</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<a href="#">Inbox <span class="badge">42</span></a>
|
||||||
|
|
||||||
|
<button class="btn btn-primary" type="button">
|
||||||
|
Messages <span class="badge">4</span>
|
||||||
|
</button>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h4>Self collapsing</h4>
|
||||||
|
<p>When there are no new or unread items, badges will simply collapse (via CSS's <code>:empty</code> selector) provided no content exists within.</p>
|
||||||
|
|
||||||
|
<div class="bs-callout bs-callout-danger" id="callout-badges-ie8-empty">
|
||||||
|
<h4>Cross-browser compatibility</h4>
|
||||||
|
<p>Badges won't self collapse in Internet Explorer 8 because it lacks support for the <code>:empty</code> selector.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h4>Adapts to active nav states</h4>
|
||||||
|
<p>Built-in styles are included for placing badges in active states in pill navigations.</p>
|
||||||
|
<div class="bs-example" data-example-id="badges-in-pills">
|
||||||
|
<ul class="nav nav-pills" role="tablist">
|
||||||
|
<li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
|
||||||
|
<li role="presentation"><a href="#">Profile</a></li>
|
||||||
|
<li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<ul class="nav nav-pills" role="tablist">
|
||||||
|
<li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
|
||||||
|
<li role="presentation"><a href="#">Profile</a></li>
|
||||||
|
<li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
|
||||||
|
</ul>
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
27
lib/bootstrap/docs/_includes/components/breadcrumbs.html
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
<div class="bs-docs-section">
|
||||||
|
<h1 id="breadcrumbs" class="page-header">Breadcrumbs</h1>
|
||||||
|
|
||||||
|
<p class="lead">Indicate the current page's location within a navigational hierarchy.</p>
|
||||||
|
<p>Separators are automatically added in CSS through <code>:before</code> and <code>content</code>.</p>
|
||||||
|
<div class="bs-example" data-example-id="simple-breadcrumbs">
|
||||||
|
<ol class="breadcrumb">
|
||||||
|
<li class="active">Home</li>
|
||||||
|
</ol>
|
||||||
|
<ol class="breadcrumb">
|
||||||
|
<li><a href="#">Home</a></li>
|
||||||
|
<li class="active">Library</li>
|
||||||
|
</ol>
|
||||||
|
<ol class="breadcrumb">
|
||||||
|
<li><a href="#">Home</a></li>
|
||||||
|
<li><a href="#">Library</a></li>
|
||||||
|
<li class="active">Data</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<ol class="breadcrumb">
|
||||||
|
<li><a href="#">Home</a></li>
|
||||||
|
<li><a href="#">Library</a></li>
|
||||||
|
<li class="active">Data</li>
|
||||||
|
</ol>
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
321
lib/bootstrap/docs/_includes/components/button-dropdowns.html
Normal file
@ -0,0 +1,321 @@
|
|||||||
|
<div class="bs-docs-section">
|
||||||
|
<h1 id="btn-dropdowns" class="page-header">Button dropdowns</h1>
|
||||||
|
|
||||||
|
<p class="lead">Use any button to trigger a dropdown menu by placing it within a <code>.btn-group</code> and providing the proper menu markup.</p>
|
||||||
|
|
||||||
|
<div class="bs-callout bs-callout-danger" id="callout-btndropdown-dependency">
|
||||||
|
<h4>Plugin dependency</h4>
|
||||||
|
<p>Button dropdowns require the <a href="../javascript/#dropdowns">dropdown plugin</a> to be included in your version of Bootstrap.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 id="btn-dropdowns-single">Single button dropdowns</h2>
|
||||||
|
<p>Turn a button into a dropdown toggle with some basic markup changes.</p>
|
||||||
|
<div class="bs-example" data-example-id="single-button-dropdown">
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Default <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 role="separator" class="divider"></li>
|
||||||
|
<li><a href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div><!-- /btn-group -->
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary <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 role="separator" class="divider"></li>
|
||||||
|
<li><a href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div><!-- /btn-group -->
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success <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 role="separator" class="divider"></li>
|
||||||
|
<li><a href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div><!-- /btn-group -->
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info <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 role="separator" class="divider"></li>
|
||||||
|
<li><a href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div><!-- /btn-group -->
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning <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 role="separator" class="divider"></li>
|
||||||
|
<li><a href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div><!-- /btn-group -->
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger <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 role="separator" class="divider"></li>
|
||||||
|
<li><a href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div><!-- /btn-group -->
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<!-- Single button -->
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
Action <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 role="separator" class="divider"></li>
|
||||||
|
<li><a href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h2 id="btn-dropdowns-split">Split button dropdowns</h2>
|
||||||
|
<p>Similarly, create split button dropdowns with the same markup changes, only with a separate button.</p>
|
||||||
|
<div class="bs-example" data-example-id="split-button-dropdown">
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="button" class="btn btn-default">Default</button>
|
||||||
|
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<span class="caret"></span>
|
||||||
|
<span class="sr-only">Toggle Dropdown</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 role="separator" class="divider"></li>
|
||||||
|
<li><a href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div><!-- /btn-group -->
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="button" class="btn btn-primary">Primary</button>
|
||||||
|
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<span class="caret"></span>
|
||||||
|
<span class="sr-only">Toggle Dropdown</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 role="separator" class="divider"></li>
|
||||||
|
<li><a href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div><!-- /btn-group -->
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="button" class="btn btn-success">Success</button>
|
||||||
|
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<span class="caret"></span>
|
||||||
|
<span class="sr-only">Toggle Dropdown</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 role="separator" class="divider"></li>
|
||||||
|
<li><a href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div><!-- /btn-group -->
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="button" class="btn btn-info">Info</button>
|
||||||
|
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<span class="caret"></span>
|
||||||
|
<span class="sr-only">Toggle Dropdown</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 role="separator" class="divider"></li>
|
||||||
|
<li><a href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div><!-- /btn-group -->
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="button" class="btn btn-warning">Warning</button>
|
||||||
|
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<span class="caret"></span>
|
||||||
|
<span class="sr-only">Toggle Dropdown</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 role="separator" class="divider"></li>
|
||||||
|
<li><a href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div><!-- /btn-group -->
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="button" class="btn btn-danger">Danger</button>
|
||||||
|
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<span class="caret"></span>
|
||||||
|
<span class="sr-only">Toggle Dropdown</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 role="separator" class="divider"></li>
|
||||||
|
<li><a href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div><!-- /btn-group -->
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<!-- Split button -->
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="button" class="btn btn-danger">Action</button>
|
||||||
|
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<span class="caret"></span>
|
||||||
|
<span class="sr-only">Toggle Dropdown</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 role="separator" class="divider"></li>
|
||||||
|
<li><a href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h2 id="btn-dropdowns-sizing">Sizing</h2>
|
||||||
|
<p>Button dropdowns work with buttons of all sizes.</p>
|
||||||
|
<div class="bs-example" data-example-id="button-dropdown-sizing">
|
||||||
|
<div class="btn-toolbar" role="toolbar">
|
||||||
|
<div class="btn-group">
|
||||||
|
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
Large button <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 role="separator" class="divider"></li>
|
||||||
|
<li><a href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div><!-- /btn-group -->
|
||||||
|
</div><!-- /btn-toolbar -->
|
||||||
|
<div class="btn-toolbar" role="toolbar">
|
||||||
|
<div class="btn-group">
|
||||||
|
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
Small button <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 role="separator" class="divider"></li>
|
||||||
|
<li><a href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div><!-- /btn-group -->
|
||||||
|
</div><!-- /btn-toolbar -->
|
||||||
|
<div class="btn-toolbar" role="toolbar">
|
||||||
|
<div class="btn-group">
|
||||||
|
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
Extra small button <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 role="separator" class="divider"></li>
|
||||||
|
<li><a href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div><!-- /btn-group -->
|
||||||
|
</div><!-- /btn-toolbar -->
|
||||||
|
</div><!-- /example -->
|
||||||
|
{% highlight html %}
|
||||||
|
<!-- Large button group -->
|
||||||
|
<div class="btn-group">
|
||||||
|
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
Large button <span class="caret"></span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
...
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Small button group -->
|
||||||
|
<div class="btn-group">
|
||||||
|
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
Small button <span class="caret"></span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
...
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Extra small button group -->
|
||||||
|
<div class="btn-group">
|
||||||
|
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
Extra small button <span class="caret"></span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
...
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h2 id="btn-dropdowns-dropup">Dropup variation</h2>
|
||||||
|
<p>Trigger dropdown menus above elements by adding <code>.dropup</code> to the parent.</p>
|
||||||
|
<div class="bs-example" data-example-id="button-dropdown-dropup">
|
||||||
|
<div class="btn-toolbar" role="toolbar">
|
||||||
|
<div class="btn-group dropup">
|
||||||
|
<button type="button" class="btn btn-default">Dropup</button>
|
||||||
|
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<span class="caret"></span>
|
||||||
|
<span class="sr-only">Toggle Dropdown</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 role="separator" class="divider"></li>
|
||||||
|
<li><a href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div><!-- /btn-group -->
|
||||||
|
<div class="btn-group dropup">
|
||||||
|
<button type="button" class="btn btn-primary">Right dropup</button>
|
||||||
|
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<span class="caret"></span>
|
||||||
|
<span class="sr-only">Toggle Dropdown</span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu dropdown-menu-right">
|
||||||
|
<li><a href="#">Action</a></li>
|
||||||
|
<li><a href="#">Another action</a></li>
|
||||||
|
<li><a href="#">Something else here</a></li>
|
||||||
|
<li role="separator" class="divider"></li>
|
||||||
|
<li><a href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div><!-- /btn-group -->
|
||||||
|
</div>
|
||||||
|
</div><!-- /example -->
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="btn-group dropup">
|
||||||
|
<button type="button" class="btn btn-default">Dropup</button>
|
||||||
|
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<span class="caret"></span>
|
||||||
|
<span class="sr-only">Toggle Dropdown</span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<!-- Dropdown menu links -->
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
268
lib/bootstrap/docs/_includes/components/button-groups.html
Normal file
@ -0,0 +1,268 @@
|
|||||||
|
<div class="bs-docs-section">
|
||||||
|
<h1 id="btn-groups" class="page-header">Button groups</h1>
|
||||||
|
|
||||||
|
<p class="lead">Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with <a href="../javascript/#buttons">our buttons plugin</a>.</p>
|
||||||
|
|
||||||
|
<div class="bs-callout bs-callout-warning" id="callout-btn-group-tooltips">
|
||||||
|
<h4>Tooltips & popovers in button groups require special setting</h4>
|
||||||
|
<p>When using tooltips or popovers on elements within a <code>.btn-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bs-callout bs-callout-warning" id="callout-btn-group-accessibility">
|
||||||
|
<h4>Ensure correct <code>role</code> and provide a label</h4>
|
||||||
|
<p>In order for assistive technologies – such as screen readers – to convey that a series of buttons is grouped, an appropriate <code>role</code> attribute needs to be provided. For button groups, this would be <code>role="group"</code>, while toolbars should have a <code>role="toolbar"</code>.</p>
|
||||||
|
<p>One exception are groups which only contain a single control (for instance the <a href="#btn-groups-justified">justified button groups</a> with <code><button></code> elements) or a dropdown.</p>
|
||||||
|
<p>In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct <code>role</code> attribute. In the examples provided here, we use <code>aria-label</code>, but alternatives such as <code>aria-labelledby</code> can also be used.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 id="btn-groups-single">Basic example</h2>
|
||||||
|
<p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
|
||||||
|
<div class="bs-example" data-example-id="simple-button-group">
|
||||||
|
<div class="btn-group" role="group" aria-label="Basic example">
|
||||||
|
<button type="button" class="btn btn-default">Left</button>
|
||||||
|
<button type="button" class="btn btn-default">Middle</button>
|
||||||
|
<button type="button" class="btn btn-default">Right</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="btn-group" role="group" aria-label="...">
|
||||||
|
<button type="button" class="btn btn-default">Left</button>
|
||||||
|
<button type="button" class="btn btn-default">Middle</button>
|
||||||
|
<button type="button" class="btn btn-default">Right</button>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h2 id="btn-groups-toolbar">Button toolbar</h2>
|
||||||
|
<p>Combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex components.</p>
|
||||||
|
<div class="bs-example" data-example-id="simple-button-toolbar">
|
||||||
|
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
|
||||||
|
<div class="btn-group" role="group" aria-label="First group">
|
||||||
|
<button type="button" class="btn btn-default">1</button>
|
||||||
|
<button type="button" class="btn btn-default">2</button>
|
||||||
|
<button type="button" class="btn btn-default">3</button>
|
||||||
|
<button type="button" class="btn btn-default">4</button>
|
||||||
|
</div>
|
||||||
|
<div class="btn-group" role="group" aria-label="Second group">
|
||||||
|
<button type="button" class="btn btn-default">5</button>
|
||||||
|
<button type="button" class="btn btn-default">6</button>
|
||||||
|
<button type="button" class="btn btn-default">7</button>
|
||||||
|
</div>
|
||||||
|
<div class="btn-group" role="group" aria-label="Third group">
|
||||||
|
<button type="button" class="btn btn-default">8</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="btn-toolbar" role="toolbar" aria-label="...">
|
||||||
|
<div class="btn-group" role="group" aria-label="...">...</div>
|
||||||
|
<div class="btn-group" role="group" aria-label="...">...</div>
|
||||||
|
<div class="btn-group" role="group" aria-label="...">...</div>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h2 id="btn-groups-sizing">Sizing</h2>
|
||||||
|
<p>Instead of applying button sizing classes to every button in a group, just add <code>.btn-group-*</code> to each <code>.btn-group</code>, including when nesting multiple groups.</p>
|
||||||
|
<div class="bs-example" data-example-id="button-group-sizing">
|
||||||
|
<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
|
||||||
|
<button type="button" class="btn btn-default">Left</button>
|
||||||
|
<button type="button" class="btn btn-default">Middle</button>
|
||||||
|
<button type="button" class="btn btn-default">Right</button>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<div class="btn-group" role="group" aria-label="Default button group">
|
||||||
|
<button type="button" class="btn btn-default">Left</button>
|
||||||
|
<button type="button" class="btn btn-default">Middle</button>
|
||||||
|
<button type="button" class="btn btn-default">Right</button>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
|
||||||
|
<button type="button" class="btn btn-default">Left</button>
|
||||||
|
<button type="button" class="btn btn-default">Middle</button>
|
||||||
|
<button type="button" class="btn btn-default">Right</button>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<div class="btn-group btn-group-xs" role="group" aria-label="Extra-small button group">
|
||||||
|
<button type="button" class="btn btn-default">Left</button>
|
||||||
|
<button type="button" class="btn btn-default">Middle</button>
|
||||||
|
<button type="button" class="btn btn-default">Right</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
|
||||||
|
<div class="btn-group" role="group" aria-label="...">...</div>
|
||||||
|
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
|
||||||
|
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h2 id="btn-groups-nested">Nesting</h2>
|
||||||
|
<p>Place a <code>.btn-group</code> within another <code>.btn-group</code> when you want dropdown menus mixed with a series of buttons.</p>
|
||||||
|
<div class="bs-example" data-example-id="button-group-nesting">
|
||||||
|
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
|
||||||
|
<button type="button" class="btn btn-default">1</button>
|
||||||
|
<button type="button" class="btn btn-default">2</button>
|
||||||
|
|
||||||
|
<div class="btn-group" role="group">
|
||||||
|
<button id="btnGroupDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
Dropdown
|
||||||
|
<span class="caret"></span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
|
||||||
|
<li><a href="#">Dropdown link</a></li>
|
||||||
|
<li><a href="#">Dropdown link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="btn-group" role="group" aria-label="...">
|
||||||
|
<button type="button" class="btn btn-default">1</button>
|
||||||
|
<button type="button" class="btn btn-default">2</button>
|
||||||
|
|
||||||
|
<div class="btn-group" role="group">
|
||||||
|
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
Dropdown
|
||||||
|
<span class="caret"></span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a href="#">Dropdown link</a></li>
|
||||||
|
<li><a href="#">Dropdown link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h2 id="btn-groups-vertical">Vertical variation</h2>
|
||||||
|
<p>Make a set of buttons appear vertically stacked rather than horizontally. <strong class="text-danger">Split button dropdowns are not supported here.</strong></p>
|
||||||
|
<div class="bs-example" data-example-id="vertical-button-group">
|
||||||
|
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
|
||||||
|
<button type="button" class="btn btn-default">Button</button>
|
||||||
|
<button type="button" class="btn btn-default">Button</button>
|
||||||
|
<div class="btn-group" role="group">
|
||||||
|
<button id="btnGroupVerticalDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
Dropdown
|
||||||
|
<span class="caret"></span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
|
||||||
|
<li><a href="#">Dropdown link</a></li>
|
||||||
|
<li><a href="#">Dropdown link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="btn btn-default">Button</button>
|
||||||
|
<button type="button" class="btn btn-default">Button</button>
|
||||||
|
<div class="btn-group" role="group">
|
||||||
|
<button id="btnGroupVerticalDrop2" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
Dropdown
|
||||||
|
<span class="caret"></span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2">
|
||||||
|
<li><a href="#">Dropdown link</a></li>
|
||||||
|
<li><a href="#">Dropdown link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="btn-group" role="group">
|
||||||
|
<button id="btnGroupVerticalDrop3" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
Dropdown
|
||||||
|
<span class="caret"></span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3">
|
||||||
|
<li><a href="#">Dropdown link</a></li>
|
||||||
|
<li><a href="#">Dropdown link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="btn-group" role="group">
|
||||||
|
<button id="btnGroupVerticalDrop4" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
Dropdown
|
||||||
|
<span class="caret"></span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop4">
|
||||||
|
<li><a href="#">Dropdown link</a></li>
|
||||||
|
<li><a href="#">Dropdown link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="btn-group-vertical" role="group" aria-label="...">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h2 id="btn-groups-justified">Justified button groups</h2>
|
||||||
|
<p>Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.</p>
|
||||||
|
|
||||||
|
<div class="bs-callout bs-callout-warning" id="callout-btn-group-justified-dbl-border">
|
||||||
|
<h4>Handling borders</h4>
|
||||||
|
<p>Due to the specific HTML and CSS used to justify buttons (namely <code>display: table-cell</code>), the borders between them are doubled. In regular button groups, <code>margin-left: -1px</code> is used to stack the borders instead of removing them. However, <code>margin</code> doesn't work with <code>display: table-cell</code>. As a result, depending on your customizations to Bootstrap, you may wish to remove or re-color the borders.</p>
|
||||||
|
</div>
|
||||||
|
<div class="bs-callout bs-callout-warning" id="callout-btn-group-ie8-border">
|
||||||
|
<h4>IE8 and borders</h4>
|
||||||
|
<p>Internet Explorer 8 doesn't render borders on buttons in a justified button group, whether it's on <code><a></code> or <code><button></code> elements. To get around that, wrap each button in another <code>.btn-group</code>.</p>
|
||||||
|
<p>See <a href="https://github.com/twbs/bootstrap/issues/12476">#12476</a> for more information.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h4>With <code><a></code> elements</h4>
|
||||||
|
<p>Just wrap a series of <code>.btn</code>s in <code>.btn-group.btn-group-justified</code>.</p>
|
||||||
|
<div class="bs-example" data-example-id="simple-justified-button-group">
|
||||||
|
<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
|
||||||
|
<a href="#" class="btn btn-default" role="button">Left</a>
|
||||||
|
<a href="#" class="btn btn-default" role="button">Middle</a>
|
||||||
|
<a href="#" class="btn btn-default" role="button">Right</a>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group with nested dropdown">
|
||||||
|
<a href="#" class="btn btn-default" role="button">Left</a>
|
||||||
|
<a href="#" class="btn btn-default" role="button">Middle</a>
|
||||||
|
<div class="btn-group" role="group">
|
||||||
|
<a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
|
||||||
|
Dropdown <span class="caret"></span>
|
||||||
|
</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 role="separator" class="divider"></li>
|
||||||
|
<li><a href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="btn-group btn-group-justified" role="group" aria-label="...">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<div class="bs-callout bs-callout-warning" id="callout-btn-group-anchor-btn">
|
||||||
|
<h4>Links acting as buttons</h4>
|
||||||
|
<p>If the <code><a></code> elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate <code>role="button"</code>.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h4>With <code><button></code> elements</h4>
|
||||||
|
<p>To use justified button groups with <code><button></code> elements, <strong class="text-danger">you must wrap each button in a button group</strong>. Most browsers don't properly apply our CSS for justification to <code><button></code> elements, but since we support button dropdowns, we can work around that.</p>
|
||||||
|
<div class="bs-example" data-example-id="button-tag-button-group-justified">
|
||||||
|
<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
|
||||||
|
<div class="btn-group" role="group">
|
||||||
|
<button type="button" class="btn btn-default">Left</button>
|
||||||
|
</div>
|
||||||
|
<div class="btn-group" role="group">
|
||||||
|
<button type="button" class="btn btn-default">Middle</button>
|
||||||
|
</div>
|
||||||
|
<div class="btn-group" role="group">
|
||||||
|
<button type="button" class="btn btn-default">Right</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="btn-group btn-group-justified" role="group" aria-label="...">
|
||||||
|
<div class="btn-group" role="group">
|
||||||
|
<button type="button" class="btn btn-default">Left</button>
|
||||||
|
</div>
|
||||||
|
<div class="btn-group" role="group">
|
||||||
|
<button type="button" class="btn btn-default">Middle</button>
|
||||||
|
</div>
|
||||||
|
<div class="btn-group" role="group">
|
||||||
|
<button type="button" class="btn btn-default">Right</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
156
lib/bootstrap/docs/_includes/components/dropdowns.html
Normal file
@ -0,0 +1,156 @@
|
|||||||
|
<div class="bs-docs-section">
|
||||||
|
<h1 id="dropdowns" class="page-header">Dropdowns</h1>
|
||||||
|
|
||||||
|
<p class="lead">Toggleable, contextual menu for displaying lists of links. Made interactive with the <a href="../javascript/#dropdowns">dropdown JavaScript plugin</a>.</p>
|
||||||
|
|
||||||
|
<h2 id="dropdowns-example">Example</h2>
|
||||||
|
<p>Wrap the dropdown's trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Then add the menu's HTML.</p>
|
||||||
|
<div class="bs-example" data-example-id="static-dropdown">
|
||||||
|
<div class="dropdown clearfix">
|
||||||
|
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||||||
|
Dropdown
|
||||||
|
<span class="caret"></span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
|
||||||
|
<li><a href="#">Action</a></li>
|
||||||
|
<li><a href="#">Another action</a></li>
|
||||||
|
<li><a href="#">Something else here</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div><!-- /example -->
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="dropdown">
|
||||||
|
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||||||
|
Dropdown
|
||||||
|
<span class="caret"></span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
|
||||||
|
<li><a href="#">Action</a></li>
|
||||||
|
<li><a href="#">Another action</a></li>
|
||||||
|
<li><a href="#">Something else here</a></li>
|
||||||
|
<li role="separator" class="divider"></li>
|
||||||
|
<li><a href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<p>Dropdown menus can be changed to expand upwards (instead of downwards) by adding <code>.dropup</code> to the parent.</p>
|
||||||
|
<div class="bs-example" data-example-id="static-dropup">
|
||||||
|
<div class="dropup clearfix">
|
||||||
|
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
Dropup
|
||||||
|
<span class="caret"></span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
|
||||||
|
<li><a href="#">Action</a></li>
|
||||||
|
<li><a href="#">Another action</a></li>
|
||||||
|
<li><a href="#">Something else here</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div><!-- /example -->
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="dropup">
|
||||||
|
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
Dropup
|
||||||
|
<span class="caret"></span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
|
||||||
|
<li><a href="#">Action</a></li>
|
||||||
|
<li><a href="#">Another action</a></li>
|
||||||
|
<li><a href="#">Something else here</a></li>
|
||||||
|
<li role="separator" class="divider"></li>
|
||||||
|
<li><a href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h2 id="dropdowns-alignment">Alignment</h2>
|
||||||
|
<p>By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add <code>.dropdown-menu-right</code> to a <code>.dropdown-menu</code> to right align the dropdown menu.</p>
|
||||||
|
<div class="bs-callout bs-callout-warning" id="callout-dropdown-positioning">
|
||||||
|
<h4>May require additional positioning</h4>
|
||||||
|
<p>Dropdowns are automatically positioned via CSS within the normal flow of the document. This means dropdowns may be cropped by parents with certain <code>overflow</code> properties or appear out of bounds of the viewport. Address these issues on your own as they arise.</p>
|
||||||
|
</div>
|
||||||
|
<div class="bs-callout bs-callout-warning" id="callout-dropdown-pull-right">
|
||||||
|
<h4>Deprecated <code>.pull-right</code> alignment</h4>
|
||||||
|
<p>As of v3.1.0, we've deprecated <code>.pull-right</code> on dropdown menus. To right-align a menu, use <code>.dropdown-menu-right</code>. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu. To override it, use <code>.dropdown-menu-left</code>.</p>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
|
||||||
|
...
|
||||||
|
</ul>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h2 id="dropdowns-headers">Headers</h2>
|
||||||
|
<p>Add a header to label sections of actions in any dropdown menu.</p>
|
||||||
|
<div class="bs-example">
|
||||||
|
<div class="dropdown clearfix">
|
||||||
|
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||||||
|
Dropdown
|
||||||
|
<span class="caret"></span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
|
||||||
|
<li class="dropdown-header">Dropdown header</li>
|
||||||
|
<li><a href="#">Action</a></li>
|
||||||
|
<li><a href="#">Another action</a></li>
|
||||||
|
<li><a href="#">Something else here</a></li>
|
||||||
|
<li class="dropdown-header">Dropdown header</li>
|
||||||
|
<li><a href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div><!-- /example -->
|
||||||
|
{% highlight html %}
|
||||||
|
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
|
||||||
|
...
|
||||||
|
<li class="dropdown-header">Dropdown header</li>
|
||||||
|
...
|
||||||
|
</ul>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h2 id="dropdowns-divider">Divider</h2>
|
||||||
|
<p>Add a divider to separate series of links in a dropdown menu.</p>
|
||||||
|
<div class="bs-example">
|
||||||
|
<div class="dropdown clearfix">
|
||||||
|
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuDivider" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||||||
|
Dropdown
|
||||||
|
<span class="caret"></span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
|
||||||
|
<li><a href="#">Action</a></li>
|
||||||
|
<li><a href="#">Another action</a></li>
|
||||||
|
<li><a href="#">Something else here</a></li>
|
||||||
|
<li role="separator" class="divider"></li>
|
||||||
|
<li><a href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div><!-- /example -->
|
||||||
|
{% highlight html %}
|
||||||
|
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
|
||||||
|
...
|
||||||
|
<li role="separator" class="divider"></li>
|
||||||
|
...
|
||||||
|
</ul>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h2 id="dropdowns-disabled">Disabled menu items</h2>
|
||||||
|
<p>Add <code>.disabled</code> to a <code><li></code> in the dropdown to disable the link.</p>
|
||||||
|
<div class="bs-example">
|
||||||
|
<div class="dropdown clearfix">
|
||||||
|
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||||||
|
Dropdown
|
||||||
|
<span class="caret"></span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
|
||||||
|
<li><a href="#">Regular link</a></li>
|
||||||
|
<li class="disabled"><a href="#">Disabled link</a></li>
|
||||||
|
<li><a href="#">Another link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div><!-- /example -->
|
||||||
|
{% highlight html %}
|
||||||
|
<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
|
||||||
|
<li><a href="#">Regular link</a></li>
|
||||||
|
<li class="disabled"><a href="#">Disabled link</a></li>
|
||||||
|
<li><a href="#">Another link</a></li>
|
||||||
|
</ul>
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
91
lib/bootstrap/docs/_includes/components/glyphicons.html
Normal file
@ -0,0 +1,91 @@
|
|||||||
|
<div class="bs-docs-section">
|
||||||
|
<h1 id="glyphicons" class="page-header">Glyphicons</h1>
|
||||||
|
|
||||||
|
<h2 id="glyphicons-glyphs">Available glyphs</h2>
|
||||||
|
<p>Includes over 250 glyphs in font format from the Glyphicon Halflings set. <a href="http://glyphicons.com/">Glyphicons</a> Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you include a link back to <a href="http://glyphicons.com/">Glyphicons</a> whenever possible.</p>
|
||||||
|
<div class="bs-glyphicons">
|
||||||
|
<ul class="bs-glyphicons-list">
|
||||||
|
{% for iconClassName in site.data.glyphicons %}
|
||||||
|
<li>
|
||||||
|
<span class="glyphicon {{ iconClassName }}" aria-hidden="true"></span>
|
||||||
|
<span class="glyphicon-class">glyphicon {{ iconClassName }}</span>
|
||||||
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<h2 id="glyphicons-how-to-use">How to use</h2>
|
||||||
|
<p>For performance reasons, all icons require a base class and individual icon class. To use, place the following code just about anywhere. Be sure to leave a space between the icon and text for proper padding.</p>
|
||||||
|
<div class="bs-callout bs-callout-danger" id="callout-glyphicons-dont-mix">
|
||||||
|
<h4>Don't mix with other components</h4>
|
||||||
|
<p>Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested <code><span></code> and apply the icon classes to the <code><span></code>.</p>
|
||||||
|
</div>
|
||||||
|
<div class="bs-callout bs-callout-danger" id="callout-glyphicons-empty-only">
|
||||||
|
<h4>Only for use on empty elements</h4>
|
||||||
|
<p>Icon classes should only be used on elements that contain no text content and have no child elements.</p>
|
||||||
|
</div>
|
||||||
|
<div class="bs-callout bs-callout-info" id="callout-glyphicons-location">
|
||||||
|
<h4>Changing the icon font location</h4>
|
||||||
|
<p>Bootstrap assumes icon font files will be located in the <code>../fonts/</code> directory, relative to the compiled CSS files. Moving or renaming those font files means updating the CSS in one of three ways:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Change the <code>@icon-font-path</code> and/or <code>@icon-font-name</code> variables in the source Less files.</li>
|
||||||
|
<li>Utilize the <a href="http://lesscss.org/usage/#command-line-usage-relative-urls">relative URLs option</a> provided by the Less compiler.</li>
|
||||||
|
<li>Change the <code>url()</code> paths in the compiled CSS.</li>
|
||||||
|
</ul>
|
||||||
|
<p>Use whatever option best suits your specific development setup.</p>
|
||||||
|
</div>
|
||||||
|
<div class="bs-callout bs-callout-warning" id="callout-glyphicons-accessibility">
|
||||||
|
<h4>Accessible icons</h4>
|
||||||
|
<p>Modern versions of assistive technologies will announce CSS generated content, as well as specific Unicode characters. To avoid unintended and confusing output in screen readers (particularly when icons are used purely for decoration), we hide them with the <code>aria-hidden="true"</code> attribute.</p>
|
||||||
|
<p>If you're using an icon to convey meaning (rather than only as a decorative element), ensure that this meaning is also conveyed to assistive technologies – for instance, include additional content, visually hidden with the <code>.sr-only</code> class.</p>
|
||||||
|
<p>If you're creating controls with no other text (such as a <code><button></code> that only contains an icon), you should always provide alternative content to identify the purpose of the control, so that it will make sense to users of assistive technologies. In this case, you could add an <code>aria-label</code> attribute on the control itself.</p>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
|
||||||
|
<h2 id="glyphicons-examples">Examples</h2>
|
||||||
|
<p>Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.</p>
|
||||||
|
<div class="bs-example" data-example-id="glyphicons-general">
|
||||||
|
<div class="btn-toolbar" role="toolbar">
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="button" class="btn btn-default" aria-label="Left Align"><span class="glyphicon glyphicon-align-left" aria-hidden="true"></span></button>
|
||||||
|
<button type="button" class="btn btn-default" aria-label="Center Align"><span class="glyphicon glyphicon-align-center" aria-hidden="true"></span></button>
|
||||||
|
<button type="button" class="btn btn-default" aria-label="Right Align"><span class="glyphicon glyphicon-align-right" aria-hidden="true"></span></button>
|
||||||
|
<button type="button" class="btn btn-default" aria-label="Justify"><span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="btn-toolbar" role="toolbar">
|
||||||
|
<button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star</button>
|
||||||
|
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star</button>
|
||||||
|
<button type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star</button>
|
||||||
|
<button type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<button type="button" class="btn btn-default" aria-label="Left Align">
|
||||||
|
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button type="button" class="btn btn-default btn-lg">
|
||||||
|
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
|
||||||
|
</button>
|
||||||
|
{% endhighlight %}
|
||||||
|
<p>An icon used in an <a href="#alerts">alert</a> to convey that it's an error message, with additional <code>.sr-only</code> text to convey this hint to users of assistive technologies.</p>
|
||||||
|
<div class="bs-example" data-example-id="glyphicons-accessibility">
|
||||||
|
<div class="alert alert-danger" role="alert">
|
||||||
|
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
|
||||||
|
<span class="sr-only">Error:</span>
|
||||||
|
Enter a valid email address
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="alert alert-danger" role="alert">
|
||||||
|
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
|
||||||
|
<span class="sr-only">Error:</span>
|
||||||
|
Enter a valid email address
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
365
lib/bootstrap/docs/_includes/components/input-groups.html
Normal file
@ -0,0 +1,365 @@
|
|||||||
|
<div class="bs-docs-section">
|
||||||
|
<h1 id="input-groups" class="page-header">Input groups</h1>
|
||||||
|
|
||||||
|
<p class="lead">Extend form controls by adding text or buttons before, after, or on both sides of any text-based <code><input></code>. Use <code>.input-group</code> with an <code>.input-group-addon</code> or <code>.input-group-btn</code> to prepend or append elements to a single <code>.form-control</code>.</p>
|
||||||
|
|
||||||
|
<div class="bs-callout bs-callout-danger" id="callout-inputgroup-text-input-only">
|
||||||
|
<h4>Textual <code><input></code>s only</h4>
|
||||||
|
<p>Avoid using <code><select></code> elements here as they cannot be fully styled in WebKit browsers.</p>
|
||||||
|
<p>Avoid using <code><textarea></code> elements here as their <code>rows</code> attribute will not be respected in some cases.</p>
|
||||||
|
</div>
|
||||||
|
<div class="bs-callout bs-callout-warning" id="callout-inputgroup-container-body">
|
||||||
|
<h4>Tooltips & popovers in input groups require special setting</h4>
|
||||||
|
<p>When using tooltips or popovers on elements within an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p>
|
||||||
|
</div>
|
||||||
|
<div class="bs-callout bs-callout-warning" id="callout-inputgroup-dont-mix">
|
||||||
|
<h4>Don't mix with other components</h4>
|
||||||
|
<p>Do not mix form groups or grid column classes directly with input groups. Instead, nest the input group inside of the form group or grid-related element.</p>
|
||||||
|
</div>
|
||||||
|
<div class="bs-callout bs-callout-warning" id="callout-inputgroup-form-labels">
|
||||||
|
<h4>Always add labels</h4>
|
||||||
|
<p>Screen readers will have trouble with your forms if you don't include a label for every input. For these input groups, ensure that any additional label or functionality is conveyed to assistive technologies.</p>
|
||||||
|
<p>The exact technique to be used (visible <code><label></code> elements, <code><label></code> elements hidden using the <code>.sr-only</code> class, or use of the <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-describedby</code>, <code>title</code> or <code>placeholder</code> attribute) and what additional information will need to be conveyed will vary depending on the exact type of interface widget you're implementing. The examples in this section provide a few suggested, case-specific approaches.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 id="input-groups-basic">Basic example</h2>
|
||||||
|
<p>Place one add-on or button on either side of an input. You may also place one on both sides of an input.</p>
|
||||||
|
<p><strong class="text-danger">We do not support multiple add-ons (<code>.input-group-addon</code> or <code>.input-group-btn</code>) on a single side.</strong></p>
|
||||||
|
<p><strong class="text-danger">We do not support multiple form-controls in a single input group.</strong></p>
|
||||||
|
<form class="bs-example bs-example-form" data-example-id="simple-input-groups">
|
||||||
|
<div class="input-group">
|
||||||
|
<span class="input-group-addon" id="basic-addon1">@</span>
|
||||||
|
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
|
||||||
|
<span class="input-group-addon" id="basic-addon2">@example.com</span>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<div class="input-group">
|
||||||
|
<span class="input-group-addon">$</span>
|
||||||
|
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
|
||||||
|
<span class="input-group-addon">.00</span>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<label for="basic-url">Your vanity URL</label>
|
||||||
|
<div class="input-group">
|
||||||
|
<span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
|
||||||
|
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="input-group">
|
||||||
|
<span class="input-group-addon" id="basic-addon1">@</span>
|
||||||
|
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
|
||||||
|
<span class="input-group-addon" id="basic-addon2">@example.com</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<span class="input-group-addon">$</span>
|
||||||
|
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
|
||||||
|
<span class="input-group-addon">.00</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<label for="basic-url">Your vanity URL</label>
|
||||||
|
<div class="input-group">
|
||||||
|
<span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
|
||||||
|
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h2 id="input-groups-sizing">Sizing</h2>
|
||||||
|
<p>Add the relative form sizing classes to the <code>.input-group</code> itself and contents within will automatically resize—no need for repeating the form control size classes on each element.</p>
|
||||||
|
<form class="bs-example bs-example-form" data-example-id="input-group-sizing">
|
||||||
|
<div class="input-group input-group-lg">
|
||||||
|
<span class="input-group-addon" id="sizing-addon1">@</span>
|
||||||
|
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<div class="input-group">
|
||||||
|
<span class="input-group-addon" id="sizing-addon2">@</span>
|
||||||
|
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<div class="input-group input-group-sm">
|
||||||
|
<span class="input-group-addon" id="sizing-addon3">@</span>
|
||||||
|
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="input-group input-group-lg">
|
||||||
|
<span class="input-group-addon" id="sizing-addon1">@</span>
|
||||||
|
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<span class="input-group-addon" id="sizing-addon2">@</span>
|
||||||
|
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group input-group-sm">
|
||||||
|
<span class="input-group-addon" id="sizing-addon3">@</span>
|
||||||
|
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h2 id="input-groups-checkboxes-radios">Checkboxes and radio addons</h2>
|
||||||
|
<p>Place any checkbox or radio option within an input group's addon instead of text.</p>
|
||||||
|
<form class="bs-example bs-example-form" data-example-id="input-group-with-checkbox-radio">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<div class="input-group">
|
||||||
|
<span class="input-group-addon">
|
||||||
|
<input type="checkbox" aria-label="Checkbox for following text input">
|
||||||
|
</span>
|
||||||
|
<input type="text" class="form-control" aria-label="Text input with checkbox">
|
||||||
|
</div><!-- /input-group -->
|
||||||
|
</div><!-- /.col-lg-6 -->
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<div class="input-group">
|
||||||
|
<span class="input-group-addon">
|
||||||
|
<input type="radio" aria-label="Radio button for following text input">
|
||||||
|
</span>
|
||||||
|
<input type="text" class="form-control" aria-label="Text input with radio button">
|
||||||
|
</div><!-- /input-group -->
|
||||||
|
</div><!-- /.col-lg-6 -->
|
||||||
|
</div><!-- /.row -->
|
||||||
|
</form>
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<div class="input-group">
|
||||||
|
<span class="input-group-addon">
|
||||||
|
<input type="checkbox" aria-label="...">
|
||||||
|
</span>
|
||||||
|
<input type="text" class="form-control" aria-label="...">
|
||||||
|
</div><!-- /input-group -->
|
||||||
|
</div><!-- /.col-lg-6 -->
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<div class="input-group">
|
||||||
|
<span class="input-group-addon">
|
||||||
|
<input type="radio" aria-label="...">
|
||||||
|
</span>
|
||||||
|
<input type="text" class="form-control" aria-label="...">
|
||||||
|
</div><!-- /input-group -->
|
||||||
|
</div><!-- /.col-lg-6 -->
|
||||||
|
</div><!-- /.row -->
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h2 id="input-groups-buttons">Button addons</h2>
|
||||||
|
<p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
|
||||||
|
<form class="bs-example bs-example-form" data-example-id="input-group-with-button">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<div class="input-group">
|
||||||
|
<span class="input-group-btn">
|
||||||
|
<button class="btn btn-default" type="button">Go!</button>
|
||||||
|
</span>
|
||||||
|
<input type="text" class="form-control" placeholder="Search for...">
|
||||||
|
</div><!-- /input-group -->
|
||||||
|
</div><!-- /.col-lg-6 -->
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="text" class="form-control" placeholder="Search for...">
|
||||||
|
<span class="input-group-btn">
|
||||||
|
<button class="btn btn-default" type="button">Go!</button>
|
||||||
|
</span>
|
||||||
|
</div><!-- /input-group -->
|
||||||
|
</div><!-- /.col-lg-6 -->
|
||||||
|
</div><!-- /.row -->
|
||||||
|
</form>
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<div class="input-group">
|
||||||
|
<span class="input-group-btn">
|
||||||
|
<button class="btn btn-default" type="button">Go!</button>
|
||||||
|
</span>
|
||||||
|
<input type="text" class="form-control" placeholder="Search for...">
|
||||||
|
</div><!-- /input-group -->
|
||||||
|
</div><!-- /.col-lg-6 -->
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="text" class="form-control" placeholder="Search for...">
|
||||||
|
<span class="input-group-btn">
|
||||||
|
<button class="btn btn-default" type="button">Go!</button>
|
||||||
|
</span>
|
||||||
|
</div><!-- /input-group -->
|
||||||
|
</div><!-- /.col-lg-6 -->
|
||||||
|
</div><!-- /.row -->
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h2 id="input-groups-buttons-dropdowns">Buttons with dropdowns</h2>
|
||||||
|
<form class="bs-example bs-example-form" data-example-id="input-group-dropdowns">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<div class="input-group">
|
||||||
|
<div class="input-group-btn">
|
||||||
|
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <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 role="separator" class="divider"></li>
|
||||||
|
<li><a href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div><!-- /btn-group -->
|
||||||
|
<input type="text" class="form-control" aria-label="Text input with dropdown button">
|
||||||
|
</div><!-- /input-group -->
|
||||||
|
</div><!-- /.col-lg-6 -->
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="text" class="form-control" aria-label="Text input with dropdown button">
|
||||||
|
<div class="input-group-btn">
|
||||||
|
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
|
||||||
|
<ul class="dropdown-menu dropdown-menu-right">
|
||||||
|
<li><a href="#">Action</a></li>
|
||||||
|
<li><a href="#">Another action</a></li>
|
||||||
|
<li><a href="#">Something else here</a></li>
|
||||||
|
<li role="separator" class="divider"></li>
|
||||||
|
<li><a href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div><!-- /btn-group -->
|
||||||
|
</div><!-- /input-group -->
|
||||||
|
</div><!-- /.col-lg-6 -->
|
||||||
|
</div><!-- /.row -->
|
||||||
|
</form>
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<div class="input-group">
|
||||||
|
<div class="input-group-btn">
|
||||||
|
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <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 role="separator" class="divider"></li>
|
||||||
|
<li><a href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div><!-- /btn-group -->
|
||||||
|
<input type="text" class="form-control" aria-label="...">
|
||||||
|
</div><!-- /input-group -->
|
||||||
|
</div><!-- /.col-lg-6 -->
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="text" class="form-control" aria-label="...">
|
||||||
|
<div class="input-group-btn">
|
||||||
|
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
|
||||||
|
<ul class="dropdown-menu dropdown-menu-right">
|
||||||
|
<li><a href="#">Action</a></li>
|
||||||
|
<li><a href="#">Another action</a></li>
|
||||||
|
<li><a href="#">Something else here</a></li>
|
||||||
|
<li role="separator" class="divider"></li>
|
||||||
|
<li><a href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div><!-- /btn-group -->
|
||||||
|
</div><!-- /input-group -->
|
||||||
|
</div><!-- /.col-lg-6 -->
|
||||||
|
</div><!-- /.row -->
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h2 id="input-groups-buttons-segmented">Segmented buttons</h2>
|
||||||
|
<form class="bs-example bs-example-form" data-example-id="input-group-segmented-buttons">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<div class="input-group">
|
||||||
|
<div class="input-group-btn">
|
||||||
|
<button type="button" class="btn btn-default">Action</button>
|
||||||
|
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<span class="caret"></span>
|
||||||
|
<span class="sr-only">Toggle Dropdown</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 role="separator" class="divider"></li>
|
||||||
|
<li><a href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<input type="text" class="form-control" aria-label="Text input with segmented button dropdown">
|
||||||
|
</div><!-- /.input-group -->
|
||||||
|
</div><!-- /.col-lg-6 -->
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="text" class="form-control" aria-label="Text input with segmented button dropdown">
|
||||||
|
<div class="input-group-btn">
|
||||||
|
<button type="button" class="btn btn-default">Action</button>
|
||||||
|
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<span class="caret"></span>
|
||||||
|
<span class="sr-only">Toggle Dropdown</span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu dropdown-menu-right">
|
||||||
|
<li><a href="#">Action</a></li>
|
||||||
|
<li><a href="#">Another action</a></li>
|
||||||
|
<li><a href="#">Something else here</a></li>
|
||||||
|
<li role="separator" class="divider"></li>
|
||||||
|
<li><a href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div><!-- /.input-group -->
|
||||||
|
</div><!-- /.col-lg-6 -->
|
||||||
|
</div><!-- /.row -->
|
||||||
|
</form>
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="input-group">
|
||||||
|
<div class="input-group-btn">
|
||||||
|
<!-- Button and dropdown menu -->
|
||||||
|
</div>
|
||||||
|
<input type="text" class="form-control" aria-label="...">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="text" class="form-control" aria-label="...">
|
||||||
|
<div class="input-group-btn">
|
||||||
|
<!-- Button and dropdown menu -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h2 id="input-groups-buttons-multiple">Multiple buttons</h2>
|
||||||
|
<p>While you can only have one add-on per side, you can have multiple buttons inside a single <code>.input-group-btn</code>.</p>
|
||||||
|
<form class="bs-example bs-example-form" data-example-id="input-group-multiple-buttons">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<div class="input-group">
|
||||||
|
<div class="input-group-btn">
|
||||||
|
<button type="button" class="btn btn-default" aria-label="Bold"><span class="glyphicon glyphicon-bold"></span></button>
|
||||||
|
<button type="button" class="btn btn-default" aria-label="Italic"><span class="glyphicon glyphicon-italic"></span></button>
|
||||||
|
</div>
|
||||||
|
<input type="text" class="form-control" aria-label="Text input with multiple buttons">
|
||||||
|
</div><!-- /.input-group -->
|
||||||
|
</div><!-- /.col-lg-6 -->
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="text" class="form-control" aria-label="Text input with multiple buttons">
|
||||||
|
<div class="input-group-btn">
|
||||||
|
<button type="button" class="btn btn-default" aria-label="Help"><span class="glyphicon glyphicon-question-sign"></span></button>
|
||||||
|
<button type="button" class="btn btn-default">Action</button>
|
||||||
|
</div>
|
||||||
|
</div><!-- /.input-group -->
|
||||||
|
</div><!-- /.col-lg-6 -->
|
||||||
|
</div><!-- /.row -->
|
||||||
|
</form>
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="input-group">
|
||||||
|
<div class="input-group-btn">
|
||||||
|
<!-- Buttons -->
|
||||||
|
</div>
|
||||||
|
<input type="text" class="form-control" aria-label="...">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="text" class="form-control" aria-label="...">
|
||||||
|
<div class="input-group-btn">
|
||||||
|
<!-- Buttons -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
27
lib/bootstrap/docs/_includes/components/jumbotron.html
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
<div class="bs-docs-section">
|
||||||
|
<h1 id="jumbotron" class="page-header">Jumbotron</h1>
|
||||||
|
|
||||||
|
<p>A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.</p>
|
||||||
|
<div class="bs-example" data-example-id="simple-jumbotron">
|
||||||
|
<div class="jumbotron">
|
||||||
|
<h1>Hello, world!</h1>
|
||||||
|
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
|
||||||
|
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="jumbotron">
|
||||||
|
<h1>Hello, world!</h1>
|
||||||
|
<p>...</p>
|
||||||
|
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
<p>To make the jumbotron full width, and without rounded corners, place it outside all <code>.container</code>s and instead add a <code>.container</code> within.</p>
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="jumbotron">
|
||||||
|
<div class="container">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
40
lib/bootstrap/docs/_includes/components/labels.html
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
<div class="bs-docs-section">
|
||||||
|
<h1 id="labels" class="page-header">Labels</h1>
|
||||||
|
|
||||||
|
<h2>Example</h2>
|
||||||
|
<div class="bs-example" data-example-id="labels-in-headings">
|
||||||
|
<h1>Example heading <span class="label label-default">New</span></h1>
|
||||||
|
<h2>Example heading <span class="label label-default">New</span></h2>
|
||||||
|
<h3>Example heading <span class="label label-default">New</span></h3>
|
||||||
|
<h4>Example heading <span class="label label-default">New</span></h4>
|
||||||
|
<h5>Example heading <span class="label label-default">New</span></h5>
|
||||||
|
<h6>Example heading <span class="label label-default">New</span></h6>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<h3>Example heading <span class="label label-default">New</span></h3>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h2>Available variations</h2>
|
||||||
|
<p>Add any of the below mentioned modifier classes to change the appearance of a label.</p>
|
||||||
|
<div class="bs-example" data-example-id="label-variants">
|
||||||
|
<span class="label label-default">Default</span>
|
||||||
|
<span class="label label-primary">Primary</span>
|
||||||
|
<span class="label label-success">Success</span>
|
||||||
|
<span class="label label-info">Info</span>
|
||||||
|
<span class="label label-warning">Warning</span>
|
||||||
|
<span class="label label-danger">Danger</span>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<span class="label label-default">Default</span>
|
||||||
|
<span class="label label-primary">Primary</span>
|
||||||
|
<span class="label label-success">Success</span>
|
||||||
|
<span class="label label-info">Info</span>
|
||||||
|
<span class="label label-warning">Warning</span>
|
||||||
|
<span class="label label-danger">Danger</span>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<div class="bs-callout bs-callout-info" id="callout-labels-inline-block">
|
||||||
|
<h4>Have tons of labels?</h4>
|
||||||
|
<p>Rendering problems can arise when you have dozens of inline labels within a narrow container, each containing its own <code>inline-block</code> element (like an icon). The way around this is setting <code>display: inline-block;</code>. For context and an example, <a href="https://github.com/twbs/bootstrap/issues/13219">see #13219</a>.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
188
lib/bootstrap/docs/_includes/components/list-group.html
Normal file
@ -0,0 +1,188 @@
|
|||||||
|
<div class="bs-docs-section">
|
||||||
|
<h1 id="list-group" class="page-header">List group</h1>
|
||||||
|
|
||||||
|
<p class="lead">List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.</p>
|
||||||
|
|
||||||
|
<h2 id="list-group-basic">Basic example</h2>
|
||||||
|
<p>The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.</p>
|
||||||
|
<div class="bs-example" data-example-id="simple-list-group">
|
||||||
|
<ul class="list-group">
|
||||||
|
<li class="list-group-item">Cras justo odio</li>
|
||||||
|
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||||
|
<li class="list-group-item">Morbi leo risus</li>
|
||||||
|
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||||
|
<li class="list-group-item">Vestibulum at eros</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<ul class="list-group">
|
||||||
|
<li class="list-group-item">Cras justo odio</li>
|
||||||
|
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||||
|
<li class="list-group-item">Morbi leo risus</li>
|
||||||
|
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||||
|
<li class="list-group-item">Vestibulum at eros</li>
|
||||||
|
</ul>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h2 id="list-group-badges">Badges</h2>
|
||||||
|
<p>Add the badges component to any list group item and it will automatically be positioned on the right.</p>
|
||||||
|
<div class="bs-example" data-example-id="list-group-badges">
|
||||||
|
<ul class="list-group">
|
||||||
|
<li class="list-group-item">
|
||||||
|
<span class="badge">14</span>
|
||||||
|
Cras justo odio
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item">
|
||||||
|
<span class="badge">2</span>
|
||||||
|
Dapibus ac facilisis in
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item">
|
||||||
|
<span class="badge">1</span>
|
||||||
|
Morbi leo risus
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<ul class="list-group">
|
||||||
|
<li class="list-group-item">
|
||||||
|
<span class="badge">14</span>
|
||||||
|
Cras justo odio
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h2 id="list-group-linked">Linked items</h2>
|
||||||
|
<p>Linkify list group items by using anchor tags instead of list items (that also means a parent <code><div></code> instead of an <code><ul></code>). No need for individual parents around each element.</p>
|
||||||
|
<div class="bs-example" data-example-id="list-group-anchors">
|
||||||
|
<div class="list-group">
|
||||||
|
<a href="#" class="list-group-item active">
|
||||||
|
Cras justo odio
|
||||||
|
</a>
|
||||||
|
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
|
||||||
|
<a href="#" class="list-group-item">Morbi leo risus</a>
|
||||||
|
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
|
||||||
|
<a href="#" class="list-group-item">Vestibulum at eros</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="list-group">
|
||||||
|
<a href="#" class="list-group-item active">
|
||||||
|
Cras justo odio
|
||||||
|
</a>
|
||||||
|
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
|
||||||
|
<a href="#" class="list-group-item">Morbi leo risus</a>
|
||||||
|
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
|
||||||
|
<a href="#" class="list-group-item">Vestibulum at eros</a>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h2 id="list-group-buttons">Button items</h2>
|
||||||
|
<p>List group items may be buttons instead of list items (that also means a parent <code><div></code> instead of an <code><ul></code>). No need for individual parents around each element. <strong class="text-danger">Don't use the standard <code>.btn</code> classes here.</strong></p>
|
||||||
|
<div class="bs-example" data-example-id="list-group-btns">
|
||||||
|
<div class="list-group">
|
||||||
|
<button type="button" class="list-group-item">Cras justo odio</button>
|
||||||
|
<button type="button" class="list-group-item">Dapibus ac facilisis in</button>
|
||||||
|
<button type="button" class="list-group-item">Morbi leo risus</button>
|
||||||
|
<button type="button" class="list-group-item">Porta ac consectetur ac</button>
|
||||||
|
<button type="button" class="list-group-item">Vestibulum at eros</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="list-group">
|
||||||
|
<button type="button" class="list-group-item">Cras justo odio</button>
|
||||||
|
<button type="button" class="list-group-item">Dapibus ac facilisis in</button>
|
||||||
|
<button type="button" class="list-group-item">Morbi leo risus</button>
|
||||||
|
<button type="button" class="list-group-item">Porta ac consectetur ac</button>
|
||||||
|
<button type="button" class="list-group-item">Vestibulum at eros</button>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h2 id="list-group-disabled">Disabled items</h2>
|
||||||
|
<p>Add <code>.disabled</code> to a <code>.list-group-item</code> to gray it out to appear disabled.</p>
|
||||||
|
<div class="bs-example" data-example-id="list-group-disabled">
|
||||||
|
<div class="list-group">
|
||||||
|
<a href="#" class="list-group-item disabled">
|
||||||
|
Cras justo odio
|
||||||
|
</a>
|
||||||
|
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
|
||||||
|
<a href="#" class="list-group-item">Morbi leo risus</a>
|
||||||
|
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
|
||||||
|
<a href="#" class="list-group-item">Vestibulum at eros</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="list-group">
|
||||||
|
<a href="#" class="list-group-item disabled">
|
||||||
|
Cras justo odio
|
||||||
|
</a>
|
||||||
|
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
|
||||||
|
<a href="#" class="list-group-item">Morbi leo risus</a>
|
||||||
|
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
|
||||||
|
<a href="#" class="list-group-item">Vestibulum at eros</a>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h2 id="list-group-contextual-classes">Contextual classes</h2>
|
||||||
|
<p>Use contextual classes to style list items, default or linked. Also includes <code>.active</code> state.</p>
|
||||||
|
<div class="bs-example" data-example-id="list-group-variants">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-6">
|
||||||
|
<ul class="list-group">
|
||||||
|
<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
|
||||||
|
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
|
||||||
|
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
|
||||||
|
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-6">
|
||||||
|
<div class="list-group">
|
||||||
|
<a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
|
||||||
|
<a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
|
||||||
|
<a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
|
||||||
|
<a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<ul class="list-group">
|
||||||
|
<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
|
||||||
|
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
|
||||||
|
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
|
||||||
|
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
|
||||||
|
</ul>
|
||||||
|
<div class="list-group">
|
||||||
|
<a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
|
||||||
|
<a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
|
||||||
|
<a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
|
||||||
|
<a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h2 id="list-group-custom-content">Custom content</h2>
|
||||||
|
<p>Add nearly any HTML within, even for linked list groups like the one below.</p>
|
||||||
|
<div class="bs-example" data-example-id="list-group-custom-content">
|
||||||
|
<div class="list-group">
|
||||||
|
<a href="#" class="list-group-item active">
|
||||||
|
<h4 class="list-group-item-heading">List group item heading</h4>
|
||||||
|
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="list-group-item">
|
||||||
|
<h4 class="list-group-item-heading">List group item heading</h4>
|
||||||
|
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="list-group-item">
|
||||||
|
<h4 class="list-group-item-heading">List group item heading</h4>
|
||||||
|
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="list-group">
|
||||||
|
<a href="#" class="list-group-item active">
|
||||||
|
<h4 class="list-group-item-heading">List group item heading</h4>
|
||||||
|
<p class="list-group-item-text">...</p>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
207
lib/bootstrap/docs/_includes/components/media.html
Normal file
@ -0,0 +1,207 @@
|
|||||||
|
<div class="bs-docs-section">
|
||||||
|
<h1 id="media" class="page-header">Media object</h1>
|
||||||
|
|
||||||
|
<p class="lead">Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.</p>
|
||||||
|
|
||||||
|
<h2 id="media-default">Default media</h2>
|
||||||
|
<p>The default media displays a media object (images, video, audio) to the left or right of a content block.</p>
|
||||||
|
<div class="bs-example" data-example-id="default-media">
|
||||||
|
<div class="media">
|
||||||
|
<div class="media-left">
|
||||||
|
<a href="#">
|
||||||
|
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="media-body">
|
||||||
|
<h4 class="media-heading">Media heading</h4>
|
||||||
|
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="media">
|
||||||
|
<div class="media-left">
|
||||||
|
<a href="#">
|
||||||
|
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="media-body">
|
||||||
|
<h4 class="media-heading">Media heading</h4>
|
||||||
|
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||||
|
<div class="media">
|
||||||
|
<div class="media-left">
|
||||||
|
<a href="#">
|
||||||
|
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="media-body">
|
||||||
|
<h4 class="media-heading">Nested media heading</h4>
|
||||||
|
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="media">
|
||||||
|
<div class="media-body">
|
||||||
|
<h4 class="media-heading">Media heading</h4>
|
||||||
|
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
|
||||||
|
</div>
|
||||||
|
<div class="media-right">
|
||||||
|
<a href="#">
|
||||||
|
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="media">
|
||||||
|
<div class="media-left">
|
||||||
|
<a href="#">
|
||||||
|
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="media-body">
|
||||||
|
<h4 class="media-heading">Media heading</h4>
|
||||||
|
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
|
||||||
|
</div>
|
||||||
|
<div class="media-right">
|
||||||
|
<a href="#">
|
||||||
|
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div><!-- /.bs-example -->
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="media">
|
||||||
|
<div class="media-left">
|
||||||
|
<a href="#">
|
||||||
|
<img class="media-object" src="..." alt="...">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="media-body">
|
||||||
|
<h4 class="media-heading">Media heading</h4>
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<p>The classes <code>.pull-left</code> and <code>.pull-right</code> also exist and were previously used as part of the media component, but are deprecated for that use as of v3.3.0. They are approximately equivalent to <code>.media-left</code> and <code>.media-right</code>, except that <code>.media-right</code> should be placed after the <code>.media-body</code> in the html.</p>
|
||||||
|
<h2 id="media-alignment">Media alignment</h2>
|
||||||
|
<p>The images or other media can be aligned top, middle, or bottom. The default is top aligned.</p>
|
||||||
|
<div class="bs-example" data-example-id="media-alignment">
|
||||||
|
<div class="media">
|
||||||
|
<div class="media-left">
|
||||||
|
<a href="#">
|
||||||
|
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="media-body">
|
||||||
|
<h4 class="media-heading">Top aligned media</h4>
|
||||||
|
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
|
||||||
|
<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="media">
|
||||||
|
<div class="media-left media-middle">
|
||||||
|
<a href="#">
|
||||||
|
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="media-body">
|
||||||
|
<h4 class="media-heading">Middle aligned media</h4>
|
||||||
|
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
|
||||||
|
<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="media">
|
||||||
|
<div class="media-left media-bottom">
|
||||||
|
<a href="#">
|
||||||
|
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="media-body">
|
||||||
|
<h4 class="media-heading">Bottom aligned media</h4>
|
||||||
|
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
|
||||||
|
<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="media">
|
||||||
|
<div class="media-left media-middle">
|
||||||
|
<a href="#">
|
||||||
|
<img class="media-object" src="..." alt="...">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="media-body">
|
||||||
|
<h4 class="media-heading">Middle aligned media</h4>
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h2 id="media-list">Media list</h2>
|
||||||
|
<p>With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).</p>
|
||||||
|
<div class="bs-example" data-example-id="media-list">
|
||||||
|
<ul class="media-list">
|
||||||
|
<li class="media">
|
||||||
|
<div class="media-left">
|
||||||
|
<a href="#">
|
||||||
|
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="media-body">
|
||||||
|
<h4 class="media-heading">Media heading</h4>
|
||||||
|
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
|
||||||
|
<!-- Nested media object -->
|
||||||
|
<div class="media">
|
||||||
|
<div class="media-left">
|
||||||
|
<a href="#">
|
||||||
|
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="media-body">
|
||||||
|
<h4 class="media-heading">Nested media heading</h4>
|
||||||
|
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
|
||||||
|
<!-- Nested media object -->
|
||||||
|
<div class="media">
|
||||||
|
<div class="media-left">
|
||||||
|
<a href="#">
|
||||||
|
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="media-body">
|
||||||
|
<h4 class="media-heading">Nested media heading</h4>
|
||||||
|
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Nested media object -->
|
||||||
|
<div class="media">
|
||||||
|
<div class="media-left">
|
||||||
|
<a href="#">
|
||||||
|
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="media-body">
|
||||||
|
<h4 class="media-heading">Nested media heading</h4>
|
||||||
|
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<ul class="media-list">
|
||||||
|
<li class="media">
|
||||||
|
<div class="media-left">
|
||||||
|
<a href="#">
|
||||||
|
<img class="media-object" src="..." alt="...">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="media-body">
|
||||||
|
<h4 class="media-heading">Media heading</h4>
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
461
lib/bootstrap/docs/_includes/components/navbar.html
Normal file
@ -0,0 +1,461 @@
|
|||||||
|
<div class="bs-docs-section">
|
||||||
|
<h1 id="navbar" class="page-header">Navbar</h1>
|
||||||
|
|
||||||
|
<h2 id="navbar-default">Default navbar</h2>
|
||||||
|
<p>Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases.</p>
|
||||||
|
<p><strong class="text-danger">Justified navbar nav links are currently not supported.</strong></p>
|
||||||
|
|
||||||
|
<div class="bs-callout bs-callout-warning" id="callout-navbar-overflow">
|
||||||
|
<h4>Overflowing content</h4>
|
||||||
|
<p>Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:</p>
|
||||||
|
<ol type="a">
|
||||||
|
<li>Reduce the amount or width of navbar items.</li>
|
||||||
|
<li>Hide certain navbar items at certain screen sizes using <a href="../css/#responsive-utilities">responsive utility classes</a>.</li>
|
||||||
|
<li>Change the point at which your navbar switches between collapsed and horizontal mode. Customize the <code>@grid-float-breakpoint</code> variable or add your own media query.</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
<div class="bs-callout bs-callout-danger" id="callout-navbar-js">
|
||||||
|
<h4>Requires JavaScript plugin</h4>
|
||||||
|
<p>If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the <code>.navbar-collapse</code>.</p>
|
||||||
|
<p>The responsive navbar requires the <a href="../javascript/#collapse">collapse plugin</a> to be included in your version of Bootstrap.</p>
|
||||||
|
</div>
|
||||||
|
<div class="bs-callout bs-callout-info" id="callout-navbar-breakpoint">
|
||||||
|
<h4>Changing the collapsed mobile navbar breakpoint</h4>
|
||||||
|
<p>The navbar collapses into its vertical mobile view when the viewport is narrower than <code>@grid-float-breakpoint</code>, and expands into its horizontal non-mobile view when the viewport is at least <code>@grid-float-breakpoint</code> in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is <code>768px</code> (the smallest "small" or "tablet" screen).</p>
|
||||||
|
</div>
|
||||||
|
<div class="bs-callout bs-callout-warning" id="callout-navbar-role">
|
||||||
|
<h4>Make navbars accessible</h4>
|
||||||
|
<p>Be sure to use a <code><nav></code> element or, if using a more generic element such as a <code><div></code>, add a <code>role="navigation"</code> to every navbar to explicitly identify it as a landmark region for users of assistive technologies.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bs-example" data-example-id="default-navbar">
|
||||||
|
<nav class="navbar navbar-default">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<!-- Brand and toggle get grouped for better mobile display -->
|
||||||
|
<div class="navbar-header">
|
||||||
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
|
||||||
|
<span class="sr-only">Toggle navigation</span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
</button>
|
||||||
|
<a class="navbar-brand" href="#">Brand</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Collect the nav links, forms, and other content for toggling -->
|
||||||
|
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
|
||||||
|
<ul class="nav navbar-nav">
|
||||||
|
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
|
||||||
|
<li><a href="#">Link</a></li>
|
||||||
|
<li class="dropdown">
|
||||||
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></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 role="separator" class="divider"></li>
|
||||||
|
<li><a href="#">Separated link</a></li>
|
||||||
|
<li role="separator" class="divider"></li>
|
||||||
|
<li><a href="#">One more separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<form class="navbar-form navbar-left">
|
||||||
|
<div class="form-group">
|
||||||
|
<input type="text" class="form-control" placeholder="Search">
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="btn btn-default">Submit</button>
|
||||||
|
</form>
|
||||||
|
<ul class="nav navbar-nav navbar-right">
|
||||||
|
<li><a href="#">Link</a></li>
|
||||||
|
<li class="dropdown">
|
||||||
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></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 role="separator" class="divider"></li>
|
||||||
|
<li><a href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div><!-- /.navbar-collapse -->
|
||||||
|
</div><!-- /.container-fluid -->
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<nav class="navbar navbar-default">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<!-- Brand and toggle get grouped for better mobile display -->
|
||||||
|
<div class="navbar-header">
|
||||||
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
|
||||||
|
<span class="sr-only">Toggle navigation</span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
</button>
|
||||||
|
<a class="navbar-brand" href="#">Brand</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Collect the nav links, forms, and other content for toggling -->
|
||||||
|
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
|
||||||
|
<ul class="nav navbar-nav">
|
||||||
|
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
|
||||||
|
<li><a href="#">Link</a></li>
|
||||||
|
<li class="dropdown">
|
||||||
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></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 role="separator" class="divider"></li>
|
||||||
|
<li><a href="#">Separated link</a></li>
|
||||||
|
<li role="separator" class="divider"></li>
|
||||||
|
<li><a href="#">One more separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<form class="navbar-form navbar-left">
|
||||||
|
<div class="form-group">
|
||||||
|
<input type="text" class="form-control" placeholder="Search">
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="btn btn-default">Submit</button>
|
||||||
|
</form>
|
||||||
|
<ul class="nav navbar-nav navbar-right">
|
||||||
|
<li><a href="#">Link</a></li>
|
||||||
|
<li class="dropdown">
|
||||||
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></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 role="separator" class="divider"></li>
|
||||||
|
<li><a href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div><!-- /.navbar-collapse -->
|
||||||
|
</div><!-- /.container-fluid -->
|
||||||
|
</nav>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
|
||||||
|
<h2 id="navbar-brand-image">Brand image</h2>
|
||||||
|
<p>Replace the navbar brand with your own image by swapping the text for an <code><img></code>. Since the <code>.navbar-brand</code> has its own padding and height, you may need to override some CSS depending on your image.</p>
|
||||||
|
<div class="bs-example" data-example-id="navbar-with-image-brand">
|
||||||
|
<nav class="navbar navbar-default">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="navbar-header">
|
||||||
|
<a class="navbar-brand" href="#">
|
||||||
|
<img alt="Brand" width="20" height="20" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAB+0lEQVR4AcyYg5LkUBhG+1X2PdZGaW3btm3btm3bHttWrPomd1r/2Jn/VJ02TpxcH4CQ/dsuazWgzbIdrm9dZVd4pBz4zx2igTaFHrhvjneVXNHCSqIlFEjiwMyyyOBilRgGSqLNF1jnwNQdIvAt48C3IlBmHCiLQHC2zoHDu6zG1iXn6+y62ScxY9AODO6w0pvAqf23oSE4joOfH6OxfMoRnoGUm+de8wykbFt6wZtA07QwtNOqKh3ZbS3Wzz2F+1c/QJY0UCJ/J3kXWJfv7VhxCRRV1jGw7XI+gcO7rEFFRvdYxydwcPsVsC0bQdKScngt4iUTD4Fy/8p7PoHzRu1DclwmgmiqgUXjD3oTKHbAt869qdJ7l98jNTEblPTkXMwetpvnftA0LLHb4X8kiY9Kx6Q+W7wJtG0HR7fdrtYz+x7iya0vkEtUULIzCjC21wY+W/GYXusRH5kGytWTLxgEEhePPwhKYb7EK3BQuxWwTBuUkd3X8goUn6fMHLyTT+DCsQdAEXNzSMeVPAJHdF2DmH8poCREp3uwm7HsGq9J9q69iuunX6EgrwQVObjpBt8z6rdPfvE8kiiyhsvHnomrQx6BxYUyYiNS8f75H1w4/ISepDZLoDhNJ9cdNUquhRsv+6EP9oNH7Iff2A9g8h8CLt1gH0Qf9NMQAFnO60BJFQe0AAAAAElFTkSuQmCC">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<nav class="navbar navbar-default">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="navbar-header">
|
||||||
|
<a class="navbar-brand" href="#">
|
||||||
|
<img alt="Brand" src="...">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
|
||||||
|
<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>As a heads up, <code>.navbar-form</code> shares much of its code with <code>.form-inline</code> via mixin. <strong class="text-danger">Some form controls, like input groups, may require fixed widths to be show up properly within a navbar.</strong></p>
|
||||||
|
<div class="bs-example" data-example-id="navbar-form">
|
||||||
|
<nav class="navbar navbar-default">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="navbar-header">
|
||||||
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2" aria-expanded="false">
|
||||||
|
<span class="sr-only">Toggle navigation</span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
</button>
|
||||||
|
<a class="navbar-brand" href="#">Brand</a>
|
||||||
|
</div>
|
||||||
|
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
|
||||||
|
<form class="navbar-form navbar-left">
|
||||||
|
<div class="form-group">
|
||||||
|
<input type="text" class="form-control" placeholder="Search">
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="btn btn-default">Submit</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<form class="navbar-form navbar-left" role="search">
|
||||||
|
<div class="form-group">
|
||||||
|
<input type="text" class="form-control" placeholder="Search">
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="btn btn-default">Submit</button>
|
||||||
|
</form>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<div class="bs-callout bs-callout-warning" id="callout-navbar-mobile-caveats">
|
||||||
|
<h4>Mobile device caveats</h4>
|
||||||
|
<p>There are some caveats regarding using form controls within fixed elements on mobile devices. <a href="../getting-started/#support-fixed-position-keyboards">See our browser support docs</a> for details.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bs-callout bs-callout-warning" id="callout-navbar-form-labels">
|
||||||
|
<h4>Always add labels</h4>
|
||||||
|
<p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the <code>.sr-only</code> class. There are further alternative methods of providing a label for assistive technologies, such as the <code>aria-label</code>, <code>aria-labelledby</code> or <code>title</code> attribute. If none of these is present, screen readers may resort to using the <code>placeholder</code> attribute, if present, but note that use of <code>placeholder</code> as a replacement for other labelling methods is not advised.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<h2 id="navbar-buttons">Buttons</h2>
|
||||||
|
<p>Add the <code>.navbar-btn</code> class to <code><button></code> elements not residing in a <code><form></code> to vertically center them in the navbar.</p>
|
||||||
|
<div class="bs-example" data-example-id="navbar-button">
|
||||||
|
<nav class="navbar navbar-default">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="navbar-header">
|
||||||
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-3" aria-expanded="false">
|
||||||
|
<span class="sr-only">Toggle navigation</span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
</button>
|
||||||
|
<a class="navbar-brand" href="#">Brand</a>
|
||||||
|
</div>
|
||||||
|
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-3">
|
||||||
|
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<div class="bs-callout bs-callout-warning" id="callout-navbar-btn-context">
|
||||||
|
<h4>Context-specific usage</h4>
|
||||||
|
<p>Like the standard <a href="../css/#buttons">button classes</a>, <code>.navbar-btn</code> can be used on <code><a></code> and <code><input></code> elements. However, neither <code>.navbar-btn</code> nor the standard button classes should be used on <code><a></code> elements within <code>.navbar-nav</code>.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 id="navbar-text">Text</h2>
|
||||||
|
<p>Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code><p></code> tag for proper leading and color.</p>
|
||||||
|
<div class="bs-example" data-example-id="navbar-text">
|
||||||
|
<nav class="navbar navbar-default">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="navbar-header">
|
||||||
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-4" aria-expanded="false">
|
||||||
|
<span class="sr-only">Toggle navigation</span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
</button>
|
||||||
|
<a class="navbar-brand" href="#">Brand</a>
|
||||||
|
</div>
|
||||||
|
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-4">
|
||||||
|
<p class="navbar-text">Signed in as Mark Otto</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<p class="navbar-text">Signed in as Mark Otto</p>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
|
||||||
|
<h2 id="navbar-links">Non-nav links</h2>
|
||||||
|
<p>For folks using standard links that are not within the regular navbar navigation component, use the <code>.navbar-link</code> class to add the proper colors for the default and inverse navbar options.</p>
|
||||||
|
<div class="bs-example" data-example-id="navbar-link">
|
||||||
|
<nav class="navbar navbar-default">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="navbar-header">
|
||||||
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-5" aria-expanded="false">
|
||||||
|
<span class="sr-only">Toggle navigation</span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
</button>
|
||||||
|
<a class="navbar-brand" href="#">Brand</a>
|
||||||
|
</div>
|
||||||
|
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-5">
|
||||||
|
<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
|
||||||
|
<h2 id="navbar-component-alignment">Component alignment</h2>
|
||||||
|
<p>Align nav links, forms, buttons, or text, using the <code>.navbar-left</code> or <code>.navbar-right</code> utility classes. Both classes will add a CSS float in the specified direction. For example, to align nav links, put them in a separate <code><ul></code> with the respective utility class applied.</p>
|
||||||
|
<p>These classes are mixin-ed versions of <code>.pull-left</code> and <code>.pull-right</code>, but they're scoped to media queries for easier handling of navbar components across device sizes.</p>
|
||||||
|
<div class="bs-callout bs-callout-warning" id="callout-navbar-right-align">
|
||||||
|
<h4>Right aligning multiple components</h4>
|
||||||
|
<p>Navbars currently have a limitation with multiple <code>.navbar-right</code> classes. To properly space content, we use negative margin on the last <code>.navbar-right</code> element. When there are multiple elements using that class, these margins don't work as intended.</p>
|
||||||
|
<p>We'll revisit this when we can rewrite that component in v4.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<h2 id="navbar-fixed-top">Fixed to top</h2>
|
||||||
|
<p>Add <code>.navbar-fixed-top</code> and include a <code>.container</code> or <code>.container-fluid</code> to center and pad navbar content.</p>
|
||||||
|
<div class="bs-example bs-navbar-top-example" data-example-id="navbar-fixed-to-top">
|
||||||
|
<nav class="navbar navbar-default navbar-fixed-top">
|
||||||
|
<!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. -->
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="navbar-header">
|
||||||
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-6" aria-expanded="false">
|
||||||
|
<span class="sr-only">Toggle navigation</span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
</button>
|
||||||
|
<a class="navbar-brand" href="#">Brand</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-6">
|
||||||
|
<ul class="nav navbar-nav">
|
||||||
|
<li class="active"><a href="#">Home</a></li>
|
||||||
|
<li><a href="#">Link</a></li>
|
||||||
|
<li><a href="#">Link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div><!-- /.navbar-collapse -->
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div><!-- /example -->
|
||||||
|
{% highlight html %}
|
||||||
|
<nav class="navbar navbar-default navbar-fixed-top">
|
||||||
|
<div class="container">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<div class="bs-callout bs-callout-danger" id="callout-navbar-fixed-top-padding">
|
||||||
|
<h4>Body padding required</h4>
|
||||||
|
<p>The fixed navbar will overlay your other content, unless you add <code>padding</code> to the top of the <code><body></code>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.</p>
|
||||||
|
{% highlight scss %}
|
||||||
|
body { padding-top: 70px; }
|
||||||
|
{% endhighlight %}
|
||||||
|
<p>Make sure to include this <strong>after</strong> the core Bootstrap CSS.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<h2 id="navbar-fixed-bottom">Fixed to bottom</h2>
|
||||||
|
<p>Add <code>.navbar-fixed-bottom</code> and include a <code>.container</code> or <code>.container-fluid</code> to center and pad navbar content.</p>
|
||||||
|
<div class="bs-example bs-navbar-bottom-example" data-example-id="navbar-fixed-to-bottom">
|
||||||
|
<nav class="navbar navbar-default navbar-fixed-bottom">
|
||||||
|
<!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. -->
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="navbar-header">
|
||||||
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-7" aria-expanded="false">
|
||||||
|
<span class="sr-only">Toggle navigation</span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
</button>
|
||||||
|
<a class="navbar-brand" href="#">Brand</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-7">
|
||||||
|
<ul class="nav navbar-nav">
|
||||||
|
<li class="active"><a href="#">Home</a></li>
|
||||||
|
<li><a href="#">Link</a></li>
|
||||||
|
<li><a href="#">Link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div><!-- /.navbar-collapse -->
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div><!-- /example -->
|
||||||
|
{% highlight html %}
|
||||||
|
<nav class="navbar navbar-default navbar-fixed-bottom">
|
||||||
|
<div class="container">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<div class="bs-callout bs-callout-danger" id="callout-navbar-fixed-bottom-padding">
|
||||||
|
<h4>Body padding required</h4>
|
||||||
|
<p>The fixed navbar will overlay your other content, unless you add <code>padding</code> to the bottom of the <code><body></code>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.</p>
|
||||||
|
{% highlight scss %}
|
||||||
|
body { padding-bottom: 70px; }
|
||||||
|
{% endhighlight %}
|
||||||
|
<p>Make sure to include this <strong>after</strong> the core Bootstrap CSS.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<h2 id="navbar-static-top">Static top</h2>
|
||||||
|
<p>Create a full-width navbar that scrolls away with the page by adding <code>.navbar-static-top</code> and include a <code>.container</code> or <code>.container-fluid</code> to center and pad navbar content.</p>
|
||||||
|
<p>Unlike the <code>.navbar-fixed-*</code> classes, you do not need to change any padding on the <code>body</code>.</p>
|
||||||
|
<div class="bs-example bs-navbar-top-example" data-example-id="navbar-static-top">
|
||||||
|
<nav class="navbar navbar-default navbar-static-top">
|
||||||
|
<!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. -->
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="navbar-header">
|
||||||
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-8" aria-expanded="false">
|
||||||
|
<span class="sr-only">Toggle navigation</span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
</button>
|
||||||
|
<a class="navbar-brand" href="#">Brand</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Collect the nav links, forms, and other content for toggling -->
|
||||||
|
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-8">
|
||||||
|
<ul class="nav navbar-nav">
|
||||||
|
<li class="active"><a href="#">Home</a></li>
|
||||||
|
<li><a href="#">Link</a></li>
|
||||||
|
<li><a href="#">Link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div><!-- /.navbar-collapse -->
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div><!-- /example -->
|
||||||
|
{% highlight html %}
|
||||||
|
<nav class="navbar navbar-default navbar-static-top">
|
||||||
|
<div class="container">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
|
||||||
|
<h2 id="navbar-inverted">Inverted navbar</h2>
|
||||||
|
<p>Modify the look of the navbar by adding <code>.navbar-inverse</code>.</p>
|
||||||
|
<div class="bs-example" data-example-id="inverted-navbar">
|
||||||
|
<nav class="navbar navbar-inverse">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<!-- Brand and toggle get grouped for better mobile display -->
|
||||||
|
<div class="navbar-header">
|
||||||
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-9" aria-expanded="false">
|
||||||
|
<span class="sr-only">Toggle navigation</span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
</button>
|
||||||
|
<a class="navbar-brand" href="#">Brand</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Collect the nav links, forms, and other content for toggling -->
|
||||||
|
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-9">
|
||||||
|
<ul class="nav navbar-nav">
|
||||||
|
<li class="active"><a href="#">Home</a></li>
|
||||||
|
<li><a href="#">Link</a></li>
|
||||||
|
<li><a href="#">Link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div><!-- /.navbar-collapse -->
|
||||||
|
</div><!-- /.container-fluid -->
|
||||||
|
</nav>
|
||||||
|
</div><!-- /example -->
|
||||||
|
{% highlight html %}
|
||||||
|
<nav class="navbar navbar-inverse">
|
||||||
|
...
|
||||||
|
</nav>
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
189
lib/bootstrap/docs/_includes/components/navs.html
Normal file
@ -0,0 +1,189 @@
|
|||||||
|
<div class="bs-docs-section">
|
||||||
|
<h1 id="nav" class="page-header">Navs</h1>
|
||||||
|
|
||||||
|
<p class="lead">Navs available in Bootstrap have shared markup, starting with the base <code>.nav</code> class, as well as shared states. Swap modifier classes to switch between each style.</p>
|
||||||
|
|
||||||
|
<div class="bs-callout bs-callout-info" id="callout-navs-tabs-plugin">
|
||||||
|
<h4>Using navs for tab panels requires JavaScript tabs plugin</h4>
|
||||||
|
<p>For tabs with tabbable areas, you must use the <a href="../javascript/#tabs">tabs JavaScript plugin</a>. The markup will also require additional <code>role</code> and ARIA attributes – see the plugin's <a href="../javascript/#tabs-usage">example markup</a> for further details.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bs-callout bs-callout-warning" id="callout-navs-accessibility">
|
||||||
|
<h4>Make navs used as navigation accessible</h4>
|
||||||
|
<p>If you are using navs to provide a navigation bar, be sure to add a <code>role="navigation"</code> to the most logical parent container of the <code><ul></code>, or wrap a <code><nav></code> element around the whole navigation. Do not add the role to the <code><ul></code> itself, as this would prevent it from being announced as an actual list by assistive technologies.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 id="nav-tabs">Tabs</h2>
|
||||||
|
<p>Note the <code>.nav-tabs</code> class requires the <code>.nav</code> base class.</p>
|
||||||
|
<div class="bs-example" data-example-id="simple-nav-tabs">
|
||||||
|
<ul class="nav nav-tabs">
|
||||||
|
<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>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<ul class="nav nav-tabs">
|
||||||
|
<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>
|
||||||
|
</ul>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
|
||||||
|
<h2 id="nav-pills">Pills</h2>
|
||||||
|
<p>Take that same HTML, but use <code>.nav-pills</code> instead:</p>
|
||||||
|
<div class="bs-example" data-example-id="simple-nav-pills">
|
||||||
|
<ul class="nav nav-pills">
|
||||||
|
<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>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<ul class="nav nav-pills">
|
||||||
|
<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>
|
||||||
|
</ul>
|
||||||
|
{% 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 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>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<ul class="nav nav-pills nav-stacked">
|
||||||
|
...
|
||||||
|
</ul>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
|
||||||
|
<h2 id="nav-justified">Justified</h2>
|
||||||
|
<p>Easily make tabs or pills equal widths of their parent at screens wider than 768px with <code>.nav-justified</code>. On smaller screens, the nav links are stacked.</p>
|
||||||
|
<p><strong class="text-danger">Justified navbar nav links are currently not supported.</strong></p>
|
||||||
|
<div class="bs-callout bs-callout-warning" id="callout-navs-justified-safari">
|
||||||
|
<h4>Safari and responsive justified navs</h4>
|
||||||
|
<p>As of v9.1.2, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the <a href="../examples/justified-nav/">justified nav example</a>.</p>
|
||||||
|
</div>
|
||||||
|
<div class="bs-example" data-example-id="simple-nav-justified">
|
||||||
|
<ul class="nav nav-tabs nav-justified">
|
||||||
|
<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>
|
||||||
|
</ul>
|
||||||
|
<br>
|
||||||
|
<ul class="nav nav-pills nav-justified">
|
||||||
|
<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>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<ul class="nav nav-tabs nav-justified">
|
||||||
|
...
|
||||||
|
</ul>
|
||||||
|
<ul class="nav nav-pills nav-justified">
|
||||||
|
...
|
||||||
|
</ul>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
|
||||||
|
<h2 id="nav-disabled-links">Disabled links</h2>
|
||||||
|
<p>For any nav component (tabs or pills), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>.</p>
|
||||||
|
|
||||||
|
<div class="bs-callout bs-callout-warning" id="callout-navs-anchor-disabled">
|
||||||
|
<h4>Link functionality not impacted</h4>
|
||||||
|
<p>This class will only change the <code><a></code>'s appearance, not its functionality. Use custom JavaScript to disable links here.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bs-example" data-example-id="disabled-nav-link">
|
||||||
|
<ul class="nav nav-pills">
|
||||||
|
<li role="presentation"><a href="#">Clickable link</a></li>
|
||||||
|
<li role="presentation"><a href="#">Clickable link</a></li>
|
||||||
|
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<ul class="nav nav-pills">
|
||||||
|
...
|
||||||
|
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
|
||||||
|
...
|
||||||
|
</ul>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
|
||||||
|
<h2 id="nav-dropdowns">Using dropdowns</h2>
|
||||||
|
<p>Add dropdown menus with a little extra HTML and the <a href="../javascript/#dropdowns">dropdowns JavaScript plugin</a>.</p>
|
||||||
|
|
||||||
|
<h3>Tabs with dropdowns</h3>
|
||||||
|
<div class="bs-example" data-example-id="nav-tabs-with-dropdown">
|
||||||
|
<ul class="nav nav-tabs">
|
||||||
|
<li role="presentation" class="active"><a href="#">Home</a></li>
|
||||||
|
<li role="presentation"><a href="#">Help</a></li>
|
||||||
|
<li role="presentation" class="dropdown">
|
||||||
|
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
|
||||||
|
Dropdown <span class="caret"></span>
|
||||||
|
</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 role="separator" class="divider"></li>
|
||||||
|
<li><a href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<ul class="nav nav-tabs">
|
||||||
|
...
|
||||||
|
<li role="presentation" class="dropdown">
|
||||||
|
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
|
||||||
|
Dropdown <span class="caret"></span>
|
||||||
|
</a>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
...
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
...
|
||||||
|
</ul>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h3>Pills with dropdowns</h3>
|
||||||
|
<div class="bs-example" data-example-id="nav-pills-with-dropdown">
|
||||||
|
<ul class="nav nav-pills">
|
||||||
|
<li role="presentation" class="active"><a href="#">Home</a></li>
|
||||||
|
<li role="presentation"><a href="#">Help</a></li>
|
||||||
|
<li role="presentation" class="dropdown">
|
||||||
|
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
|
||||||
|
Dropdown <span class="caret"></span>
|
||||||
|
</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 role="separator" class="divider"></li>
|
||||||
|
<li><a href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div><!-- /example -->
|
||||||
|
{% highlight html %}
|
||||||
|
<ul class="nav nav-pills">
|
||||||
|
...
|
||||||
|
<li role="presentation" class="dropdown">
|
||||||
|
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
|
||||||
|
Dropdown <span class="caret"></span>
|
||||||
|
</a>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
...
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
...
|
||||||
|
</ul>
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
15
lib/bootstrap/docs/_includes/components/page-header.html
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
<div class="bs-docs-section">
|
||||||
|
<h1 id="page-header" class="page-header">Page header</h1>
|
||||||
|
|
||||||
|
<p>A simple shell for an <code>h1</code> to appropriately space out and segment sections of content on a page. It can utilize the <code>h1</code>'s default <code>small</code> element, as well as most other components (with additional styles).</p>
|
||||||
|
<div class="bs-example" data-example-id="simple-page-header">
|
||||||
|
<div class="page-header">
|
||||||
|
<h1>Example page header <small>Subtext for header</small></h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="page-header">
|
||||||
|
<h1>Example page header <small>Subtext for header</small></h1>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|