de.bund.bfr.knime.js/components.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>RAKIP WEB Landing Page</title>
<link rel="stylesheet" href="assets/css/styles.css" type="text/css">
</head>
<body>
<!-- vendors js -->
<script src="assets/js/lib/jquery.3.4.1.min.js" ></script>
<!-- bfr app js -->
<script src="assets/js/app.js"></script>
<div class="page">
<div class="container-fluid">
<header class="page-header">
<nav class="navbar navbar-light navbar-expand">
<div class="navbar-brand">
<span class="brand-logo"><img src="assets/img/bfr_logo.gif" alt="" /></span>
<span class="brand-divider"></span>
<span class="brand-typo">FSK-Web Landingpage</span>
</div>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<div class="dropdown">
<button id="menuToggle" class="action action-pure action-lg" data-toggle="dropdown" aria-expanded="false" role="button">
<i class="feather icon-menu"></i>
</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="menuToggle">
<a href="#" class="dropdown-item">Infos</a>
<a href="#" class="dropdown-item">Imprint</a>
<a href="#" class="dropdown-item">Privacy Policy</a>
<div class="dropdown-divider"></div>
<a href="index.html" class="dropdown-item">Landingpage</a>
<a href="components.html" class="dropdown-item active">Components</a>
</div>
</div>
</li>
</ul>
</nav>
</header>
<div class="card">
<div class="card-header">
<h1>Buttons</h1>
</div>
<div class="card-body border-bottom">
<h2>Basics</h2>
<p>The BfR bootstrap theme use only following predefined button styles</p>
<ul>
<li><code>.btn-primary</code><br>Main call-to-actions</li>
<li><code>.btn-outline-secondary</code><br>Secondary actions</li>
<li><code>.btn-outline-light</code><br>Secondary actions on dark backgrounds</li>
</ul>
<div class="row">
<div class="col-sm-6 col-md-4 pt-2 pb-2">
<ul class="pl-0 list-unstyled">
<li class="mb-3">
<button type="button" class="btn btn-primary">Primary</button>
</li>
<li class="mb-1">
<div class="row">
<div class="col-auto">
<div class="color-box bg-primary"></div>
</div>
<div class="col">
<span class="d-block"><small>Normal</small></span>
</div>
</div>
</li>
<li class="mb-1">
<div class="row">
<div class="col-auto">
<div class="color-box" style="background-color:#D1EDF4;"></div>
</div>
<div class="col">
<span class="d-block"><small>Hover</small></span>
</div>
</div>
</li>
<li class="mb-1">
<div class="row">
<div class="col-auto">
<div class="color-box" style="background-color:#D1EDF4;"></div>
</div>
<div class="col">
<span class="d-block"><small>Active</small></span>
</div>
</div>
</li>
<li class="mb-1">
<div class="row">
<div class="col-auto">
<div class="bg-primary btn disabled color-box"></div>
</div>
<div class="col">
<span class="d-block"><small>Disabled</small></span>
</div>
</div>
</li>
</ul>
</div>
<div class="col-sm-6 col-md-4 pt-2 pb-2">
<ul class="pl-0 list-unstyled">
<li class="mb-3">
<button type="button" class="btn btn-outline-secondary">Secondary (Outline)</button>
</li>
<li class="mb-1">
<div class="row">
<div class="col-auto">
<div class="color-box" style="background-color: transparent; border:1px solid #ACB0B6;"></div>
</div>
<div class="col">
<span class="d-block"><small>Normal</small></span>
</div>
</div>
</li>
<li class="mb-1">
<div class="row">
<div class="col-auto">
<div class="color-box" style="background-color: #D1EDF4;border-color: #D1EDF4;"></div>
</div>
<div class="col">
<span class="d-block"><small>Hover</small></span>
</div>
</div>
</li>
<li class="mb-1">
<div class="row">
<div class="col-auto">
<div class="color-box" style="background-color: #D1EDF4; border-color: #D1EDF4;"></div>
</div>
<div class="col">
<span class="d-block"><small>Active</small></span>
</div>
</div>
</li>
<li class="mb-1">
<div class="row">
<div class="col-auto">
<div class="btn-secondary disabled btn color-box" style="background-color: transparent; border:1px solid #ACB0B6; opacity: 0.5"></div>
</div>
<div class="col">
<span class="d-block"><small>Disabled</small></span>
</div>
</div>
</li>
</ul>
</div>
<div class="col-sm-6 col-md-4 pt-2 pb-2 bg-info">
<ul class="pl-0 list-unstyled text-white">
<li class="mb-3">
<button type="button" class="btn btn-outline-light">Light (Outline)</button>
</li>
<li class="mb-1">
<div class="row">
<div class="col-auto">
<div class="color-box" style="background-color: transparent; border:1px solid rgba(255,255,255,0.5);"></div>
</div>
<div class="col">
<span class="d-block"><small>Normal</small></span>
</div>
</div>
</li>
<li class="mb-1">
<div class="row">
<div class="col-auto">
<div class="color-box" style="background-color:#D1EDF4;"></div>
</div>
<div class="col">
<span class="d-block"><small>Hover</small></span>
</div>
</div>
</li>
<li class="mb-1">
<div class="row">
<div class="col-auto">
<div class="color-box" style="background-color:#D1EDF4;"></div>
</div>
<div class="col">
<span class="d-block"><small>Active</small></span>
</div>
</div>
</li>
<li class="mb-1">
<div class="row">
<div class="col-auto">
<div class="color-box" style="background-color: transparent; border:1px solid #ACB0B6; opacity: 0.5"></div>
</div>
<div class="col">
<span class="d-block"><small>Disabled</small></span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="card-body border-bottom">
<h2>Sizes</h2>
<p>Add <code>.btn-sm</code> for smaller Buttons</p>
<div class="row mt-3">
<div class="col-sm-6">
<div class="form-group">
<button type="button" class="btn mr-1 mb-1 btn-primary">Primary Normal</button>
<button type="button" class="btn mr-1 mb-1 btn-outline-secondary">Secondary Normal</button>
</div>
<div class="form-group">
<button type="button" class="btn mr-1 mb-1 btn-primary btn-sm">Primary small</button>
<button type="button" class="btn mr-1 mb-1 btn-outline-secondary btn-sm">Secondary small</button>
</div>
</div>
</div>
</div>
<div class="card-body border-bottom">
<h2>Icon Buttons</h2>
<p>Simple Icon Button + Tooltips</p>
<div class="row mt-3">
<div class="col-12">
<div class="form-group">
<button class="btn btn-primary btn-icon mr-1 mb-1" data-tooltip title="Execute">
<i class="feather icon-play"></i>
</button>
<button class="btn btn-outline-secondary btn-icon mr-1 mb-1" data-tooltip title="Remove">
<i class="feather icon-trash-2"></i>
</button>
</div>
<div class="form-group">
<button class="btn btn-primary btn-icon btn-sm mr-1 mb-1" data-tooltip title="Execute">
<i class="feather icon-play"></i>
</button>
<button class="btn btn-outline-secondary btn-icon btn-sm mr-1 mb-1" data-tooltip title="Remove">
<i class="feather icon-trash-2"></i>
</button>
</div>
</div>
</div>
</div>
<div class="card-body border-bottom">
<h2>Buttons with Icons</h2>
<p>Simple Icon Button</p>
<div class="row mt-3">
<div class="col-6">
<div class="form-group">
<button type="button" class="btn btn-primary mr-1 mb-1"><span class="btn-label">Primary</span><i class="feather icon-play"></i></button>
<button type="button" class="btn btn-outline-secondary mr-1 mb-1"><span class="btn-label">Secondary</span><i class="feather icon-download"></i></button>
</div>
<div class="form-group">
<button type="button" class="btn btn-primary btn-sm mr-1 mb-1"><span class="btn-label">Primary</span><i class="feather icon-play"></i></button>
<button type="button" class="btn btn-outline-secondary btn-sm mr-1 mb-1"><span class="btn-label">Secondary</span><i class="feather icon-download"></i></button>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<button type="button" class="btn btn-primary mr-1 mb-1"><i class="feather icon-log-in"></i><span class="btn-label">Primary</span></button>
<button type="button" class="btn btn-outline-secondary mr-1 mb-1"><i class="feather icon-corner-up-left"></i><span class="btn-label">Secondary</span></button>
</div>
<div class="form-group">
<button type="button" class="btn btn-primary btn-sm mr-1 mb-1" title="Log in"><i class="feather icon-log-in"></i><span class="btn-label">Primary small</span></button>
<button type="button" class="btn btn-outline-secondary btn-sm mr-1 mb-1"><i class="feather icon-corner-up-left"></i><span class="btn-label">Secondary small</span></button>
</div>
</div>
</div>
</div>
<div class="card-body border-bottom">
<h2>Single Buttons Dropdowns</h2>
<div class="row mt-3">
<div class="col-sm-6">
<div class="form-group">
<button type="button" class="btn mr-1 mb-1 btn-primary dropdown-toggle">Primary Normal</button>
<button type="button" class="btn mr-1 mb-1 btn-outline-secondary dropdown-toggle">Secondary Normal</button>
</div>
<div class="form-group">
<button type="button" class="btn mr-1 mb-1 btn-primary btn-sm dropdown-toggle">Primary small</button>
<button type="button" class="btn mr-1 mb-1 btn-outline-secondary btn-sm dropdown-toggle">Secondary small</button>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<button type="button" class="btn btn-primary mr-1 mb-1 dropdown-toggle"><i class="feather icon-settings"></i><span class="btn-label">Primary normal</span></button>
<button type="button" class="btn btn-outline-secondary mr-1 mb-1 dropdown-toggle"><i class="feather icon-settings"></i><span class="btn-label">Secondary normal</span></button>
</div>
<div class="form-group">
<button type="button" class="btn btn-primary btn-sm mr-1 mb-1 dropdown-toggle"><i class="feather icon-settings"></i><span class="btn-label">Primary small</span></button>
<button type="button" class="btn btn-outline-secondary btn-sm mr-1 mb-1 dropdown-toggle"><i class="feather icon-settings"></i><span class="btn-label">Secondary small</span></button>
</div>
</div>
</div>
</div>
</div>
<div class="card mt-3">
<div class="card-header">
<h1>Actions</h1>
</div>
<div class="card-body border-bottom">
<h2>Single Action</h2>
<p>Actions <code>.action</code> have two classes for size option</p>
<ul>
<li>small <code>.action-sm</code></li>
<li>large <code>.action-lg</code></li>
</ul>
<div class="row mt-3">
<div class="col-12">
<div class="form-group">
<button class="action action-pure action-lg mb-1 mr-1"><i class="feather icon-x"></i></button>
</div>
<div class="form-group">
<button class="action action-pure mb-1 mr-1"><i class="feather icon-info"></i></button>
<button class="action action-pure mb-1 mr-1"><i class="feather icon-x"></i></button>
<button class="action action-primary mb-1 mr-1"><i class="feather icon-play"></i></button>
<button class="action action-outline-secondary mb-1 mr-1"><i class="feather icon-download"></i></button>
</div>
<div class="form-group">
<button class="action action-pure action-sm mb-1 mr-1"><i class="feather icon-info"></i></button>
<button class="action action-pure action-sm mb-1 mr-1"><i class="feather icon-x"></i></button>
<button class="action action-sm action-primary mb-1 mr-1"><i class="feather icon-play"></i></button>
<button class="action action-sm action-outline-secondary mb-1 mr-1"><i class="feather icon-download"></i></button>
</div>
</div>
</div>
</div>
<div class="card-body border-bottom">
<h2>Actions Dropdown</h2>
<div class="row mt-3">
<div class="col-sm-6 mb-3">
<div class="form-group">
<div class="dropdown mr-1">
<button class="action action-pure action-lg" data-toggle="dropdown" aria-expanded="false">
<i class="feather icon-menu"></i>
</button>
<div class="dropdown-menu dropdown-menu-left" aria-labelledby="dropdownMenuLink">
<a href="#" class="dropdown-item">Info</a>
<a href="#" class="dropdown-item">Imprint</a>
<a href="#" class="dropdown-item active">Privacy Policy</a>
</div>
</div>
</div>
<div class="form-group">
<div class="dropdown mr-1">
<button class="action action-pure action" data-toggle="dropdown" aria-expanded="false">
<i class="feather icon-menu"></i>
</button>
<div class="dropdown-menu dropdown-menu-left" aria-labelledby="dropdownMenuLink">
<a href="#" class="dropdown-item">Info</a>
<a href="#" class="dropdown-item">Imprint</a>
<a href="#" class="dropdown-item active">Privacy Policy</a>
</div>
</div>
</div>
<div class="form-group">
<div class="dropdown dropdown mr-1">
<button class="action action-pure action-sm" data-toggle="dropdown" aria-expanded="false">
<i class="feather icon-menu"></i>
</button>
<div class="dropdown-menu dropdown-menu-left dropdown-menu-sm" aria-labelledby="dropdownMenuLink">
<a href="#" class="dropdown-item">Info</a>
<a href="#" class="dropdown-item">Imprint</a>
<a href="#" class="dropdown-item active">Privacy Policy</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card mt-3">
<div class="card-header">
<h1>Form Items</h1>
</div>
<div class="card-body border-bottom">
<h2>Basics</h2>
<div class="row">
<div class="col-sm-4 pt-2 pb-2">
<ul class="pl-0 list-unstyled">
<li class="mb-3">
<div class="input-group">
<input class="form-control" type="text" placeholder="Placeholder" />
</div>
</li>
<li class="mb-1">
<div class="row">
<div class="col-auto">
<div class="color-box" style="background-color:transparent; border: 1px solid #ACB0B6;"></div>
</div>
<div class="col">
<span class="d-block"><small>Normal</small></span>
</div>
</div>
</li>
<li class="mb-1">
<div class="row">
<div class="col-auto">
<div class="color-box" style="background-color:transparent; border: 1px solid #ACB0B6;"></div>
</div>
<div class="col">
<span class="d-block"><small>Hover</small></span>
</div>
</div>
</li>
<li class="mb-1">
<div class="row">
<div class="col-auto">
<div class="color-box" style="background-color:transparent; border: 1px solid #ACB0B6; box-shadow:0 0 0 3px rgba(17, 160, 204, 0.2);"></div>
</div>
<div class="col">
<span class="d-block"><small>Focus</small></span>
</div>
</div>
</li>
<li class="mb-1">
<div class="row">
<div class="col-auto">
<input class="form-control" type="text" placeholder="Disabled" value="" disabled />
</div>
<div class="col">
<span class="d-block"><small>Disabled</small></span>
</div>
</div>
</li>
<li class="mb-1">
<div class="row">
<div class="col-auto">
<input class="form-control" type="text" placeholder="Input readonly" value="Readonly" readonly />
</div>
<div class="col">
<span class="d-block"><small>Readonly</small></span>
</div>
</div>
</li>
</ul>
<div class="form-group mt-3">
<label class="form-label" for="inputBasicS1">Label</label>
<div id="inputBasicS1" class="input-group mb-1 mr-1">
<input class="form-control" type="text" placeholder="Placeholder" />
</div>
<small class="form-text text-muted">Optional text to provide more information about the field</small>
</div>
</div>
<div class="col-sm-4 pt-2 pb-2">
</div>
</div>
</div>
<div class="card-body border-bottom">
<h2>Sizes</h2>
<p>Add <code>.form-control-sm</code> for smaller inputs</p>
<div class="row mt-3">
<div class="col-sm-4">
<div class="form-group">
<label class="form-label" for="inputBasicExampleS1">Input</label>
<div id="inputBasicExampleS1" class="input-group mb-1 mr-1">
<input class="form-control" type="text" placeholder="Placeholder" />
</div>
</div>
<div class="form-group">
<label class="form-label" for="inputBasicExampleS2">Input small</label>
<div id="inputBasicExampleS2" class="input-group mb-1 mr-1">
<input class="form-control form-control-sm" type="text" placeholder="Placeholder" />
</div>
</div>
</div>
</div>
</div>
<div class="card-body border-bottom">
<h2>Inputs</h2>
<div class="row mt-3">
<div class="col-sm-4">
<div class="form-group">
<label class="form-label" for="inputTextS1">Input</label>
<div id="inputTextS1" class="input-group mb-1 mr-1">
<input class="form-control" type="text" placeholder="Placeholder" />
</div>
</div>
<div class="form-group">
<label class="form-label" for="inputTextS2">Input small</label>
<div id="inputTextS2" class="input-group mb-1 mr-1">
<input class="form-control form-control-sm" type="text" placeholder="Placeholder" />
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label class="form-label" for="inputEmailS1">Input with Prefix</label>
<div id="inputEmailS1" class="input-group mb-1 mr-1">
<div class="input-group-prepend">
<div class="input-group-text">https://</div>
</div>
<input class="form-control" type="text" placeholder="Placeholder" />
</div>
</div>
<div class="form-group">
<label class="form-label" for="inputEmailS2">Input with Prefix small</label>
<div id="inputEmailS2" class="input-group input-group-sm mb-1 mr-1">
<div class="input-group-prepend">
<div class="input-group-text">https://</div>
</div>
<input class="form-control form-control-sm" type="text" placeholder="Placeholder" />
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label class="form-label" for="inputEmailS1">Input with Postfix</label>
<div id="inputEmailS1" class="input-group mb-1 mr-1">
<input class="form-control" type="text" placeholder="Placeholder" />
<div class="input-group-append">
<div class="input-group-text">.00</div>
</div>
</div>
</div>
<div class="form-group">
<label class="form-label" for="inputEmailS2">Input with Postfix small</label>
<div id="inputEmailS2" class="input-group input-group-sm mb-1 mr-1">
<input class="form-control form-control-sm" type="text" placeholder="Placeholder" />
<div class="input-group-append">
<div class="input-group-text">.00</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-body border-bottom">
<h2>Single Select</h2>
<div class="row mt-3">
<div class="col-sm-4">
<div class="form-group">
<label class="form-label" for="selectBasicExampleS1">Select Basic Single with native Option Dropdown</label>
<div class="input-group mr-1 mb-1">
<select id="selectBasicExampleS1" class="custom-control custom-select">
<option value="all">Select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
</div>
<div class="form-group">
<label class="form-label" for="selectBasicExampleS2">Select Basic Single small with native Option Dropdown</label>
<div class="input-group mr-1 mb-1">
<select id="selectBasicExampleS2" class="custom-control custom-select custom-select-sm">
<option value="all">Select sm</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<div class="input-group mr-1 mb-1">
<label class="form-label" for="select2ExampleS1">Select2 Single with Search</label>
<select id="select2ExampleS1" class="form-control form-control" style="width: 100%;" data-sel2 data-placeholder="Select…">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3 with very long title lorem ipsum dolor sit amet</option>
</select>
</div>
</div>
<div class="form-group">
<div class="input-group mr-1 mb-1">
<label class="form-label" for="select2ExampleS2">Select2 Single sm with Search</label>
<select id="select2ExampleS2" class="form-control form-control-sm" style="width: 100%;" data-sel2 data-placeholder="Select…">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3 with very long title lorem ipsum dolor sit amet</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="card-body border-bottom">
<h2>Multi Select</h2>
<p><a href="https://select2.org/" target="_blank">Select2</a> required.<br>
Following attributes can be set on select element:</p>
<ul>
<li><code>data-sel2-max-height</code><br>Maximum height for multiselect container</li>
<li><code>data-sel2-choice-single-row</code><br>Forces single line for selection pills with overflow ellipses (…)</li>
<li><code>data-allow-clear</code><br>shows clear all selects button</li>
<li><code>data-maximum-selection-length="1"</code><br>set maximum selection length to 1 and forces single line for all (no space below last selection pill)</li>
</ul>
<div class="row mt-3">
<div class="col-sm-4">
<div class="form-group">
<div class="input-group mr-1 mb-1">
<label class="form-label" for="select2ExampleM1">Select2 Multiple (max 1 Item)</label>
<select id="select2ExampleM1" class="form-control" multiple="multiple" style="width: 100%;" data-sel2 data-placeholder="Select…" data-maximum-selection-length="1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3 with very long title lorem ipsum dolor sit amet and much longer</option>
<option value="4">Option 4</option>
<option value="5">Option 5 with very long title lorem ipsum dolor sit amet</option>
<option value="6">Option 6</option>
<option value="7">Option 7 with very long title lorem ipsum dolor sit amet</option>
</select>
</div>
</div>
<div class="form-group">
<div class="input-group mr-1 mb-1">
<label class="form-label" for="select2ExampleM2">Select2 Multiple small (max 1 Item)</label>
<select id="select2ExampleM2" class="form-control form-control-sm" multiple="multiple" style="width: 100%;" data-sel2 data-placeholder="Select…" data-maximum-selection-length="1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3 with very long title lorem ipsum dolor sit amet and much longer</option>
<option value="4">Option 4</option>
<option value="5">Option 5 with very long title lorem ipsum dolor sit amet</option>
<option value="6">Option 6</option>
<option value="7">Option 7 with very long title lorem ipsum dolor sit amet</option>
</select>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<div class="input-group mr-1 mb-1">
<label class="form-label" for="select2ExampleM3">Select2 Multiple (max n Items)</label>
<select id="select2ExampleM3" class="form-control" multiple="multiple" style="width: 100%;" data-sel2 data-placeholder="Select…" data-allow-clear="true">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3 with very long title lorem ipsum dolor sit amet and much longer</option>
<option value="4">Option 4</option>
<option value="5">Option 5 with very long title lorem ipsum dolor sit amet</option>
<option value="6">Option 6</option>
<option value="7">Option 7 with very long title lorem ipsum dolor sit amet</option>
</select>
</div>
</div>
<div class="form-group">
<div class="input-group mr-1 mb-1">
<label class="form-label" for="select2ExampleM4">Select2 small Multiple (max n Items)</label>
<select id="select2ExampleM4" class="form-control form-control-sm" multiple="multiple" style="width: 100%;" data-sel2 data-placeholder="Select…" data-allow-clear="true">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3 with very long title lorem ipsum dolor sit amet and much longer</option>
<option value="4">Option 4</option>
<option value="5">Option 5 with very long title lorem ipsum dolor sit amet</option>
<option value="6">Option 6</option>
<option value="7">Option 7 with very long title lorem ipsum dolor sit amet</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="card-body border-bottom">
<h2>Textarea</h2>
<div class="row mt-3">
<div class="col-sm-4">
<div class="form-group">
<label class="form-label" for="textareaExample1">Textarea</label>
<textarea id="textareaExample1" class="form-control" rows="6"></textarea>
</div>
<div class="form-group">
<label class="form-label" for="textareaExample2">Textarea small</label>
<textarea id="textareaExample2" class="form-control form-control-sm" rows="6"></textarea>
</div>
</div>
</div>
</div>
<div class="card-body border-bottom">
<h2>Checkboxes</h2>
<div class="row mt-3">
<div class="col-sm-4">
<div class="form-group">
<label class="form-label">Checkboxes</label>
<div class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox" value="" id="defaultCheck1" />
<label class="custom-control-label" for="defaultCheck1">
Default
</label>
</div>
<div class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox" value="" id="defaultCheck2" checked />
<label class="custom-control-label" for="defaultCheck2">
Selected
</label>
</div>
<div class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox" value="" id="defaultCheck3" disabled />
<label class="custom-control-label" for="defaultCheck3">
Disabled
</label>
</div>
</div>
<div class="form-group">
<label class="form-label">Checkboxes small</label>
<div class="custom-control custom-checkbox custom-checkbox-sm">
<input class="custom-control-input" type="checkbox" value="" id="defaultCheckSm1" />
<label class="custom-control-label" for="defaultCheckSm1">
Default
</label>
</div>
<div class="custom-control custom-checkbox custom-checkbox-sm">
<input class="custom-control-input" type="checkbox" value="" id="defaultCheckSm2" checked />
<label class="custom-control-label" for="defaultCheckSm2">
Selected
</label>
</div>
<div class="custom-control custom-checkbox custom-checkbox-sm">
<input class="custom-control-input" type="checkbox" value="" id="defaultCheckSmSm3" disabled />
<label class="custom-control-label" for="defaultCheckSm3">
Disabled
</label>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label class="form-label">Checkboxes Inline</label>
<div class="custom-control custom-checkbox custom-control-inline">
<input class="custom-control-input" type="checkbox" value="" id="defaultCheckInline1" />
<label class="custom-control-label" for="defaultCheckInline1">
Default
</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
<input class="custom-control-input" type="checkbox" value="" id="defaultCheckInline2" checked />
<label class="custom-control-label" for="defaultCheckInline2">
Selected
</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
<input class="custom-control-input" type="checkbox" value="" id="defaultCheckInline3" disabled />
<label class="custom-control-label" for="defaultCheckInline3">
Disabled
</label>
</div>
</div>
<div class="form-group">
<label class="form-label">Checkboxes Inline small</label>
<div class="custom-control custom-checkbox custom-checkbox-sm custom-control-inline">
<input class="custom-control-input" type="checkbox" value="" id="defaultCheckInlineSm1" />
<label class="custom-control-label" for="defaultCheckInlineSm1">
Default
</label>
</div>
<div class="custom-control custom-checkbox custom-checkbox-sm custom-control-inline">
<input class="custom-control-input" type="checkbox" value="" id="defaultCheckInlineSm2" checked />
<label class="custom-control-label" for="defaultCheckInlineSm2">
Selected
</label>
</div>
<div class="custom-control custom-checkbox custom-checkbox-sm custom-control-inline">
<input class="custom-control-input" type="checkbox" value="" id="defaultCheckInlineSm3" disabled />
<label class="custom-control-label" for="defaultCheckInlineSm3">
Disabled
</label>
</div>
</div>
</div>
</div>
</div>
<div class="card-body border-bottom">
<h2>Radiobuttons</h2>
<div class="row mt-3">
<div class="col-sm-4">
<div class="form-group">
<label class="form-label">Radiobuttons</label>
<div class="custom-control custom-radio">
<input class="custom-control-input" name="defaultRadioGroup1" type="radio" value="" id="defaultRadio1" />
<label class="custom-control-label" for="defaultRadio1">
Default
</label>
</div>
<div class="custom-control custom-radio">
<input class="custom-control-input" name="defaultRadioGroup1" type="radio" value="" id="defaultRadio2" checked />
<label class="custom-control-label" for="defaultRadio2">
Selected
</label>
</div>
<div class="custom-control custom-radio">
<input class="custom-control-input" name="defaultRadioGroup1" type="radio" value="" id="defaultRadio3" disabled />
<label class="custom-control-label" for="defaultRadio3">
Disabled
</label>
</div>
</div>
<div class="form-group">
<label class="form-label">Radiobuttons small</label>
<div class="custom-control custom-radio custom-radio-sm">
<input class="custom-control-input" name="defaultRadioSmGroup1" type="radio" value="" id="defaultRadioSm1" />
<label class="custom-control-label" for="defaultRadioSm1">
Default
</label>
</div>
<div class="custom-control custom-radio custom-radio-sm">
<input class="custom-control-input" name="defaultRadioSmGroup1" type="radio" value="" id="defaultRadioSm2" checked />
<label class="custom-control-label" for="defaultRadioSm2">
Selected
</label>
</div>
<div class="custom-control custom-radio custom-radio-sm">
<input class="custom-control-input" name="defaultRadioSmGroup1" type="radio" value="" id="defaultRadioSmSm3" disabled />
<label class="custom-control-label" for="defaultRadioSm3">
Disabled
</label>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label class="form-label">Radiobuttons Inline</label>
<div class="custom-control custom-radio custom-control-inline">
<input class="custom-control-input" name="defaultRadioGroup2" type="radio" value="" id="defaultRadioInline1" />
<label class="custom-control-label" for="defaultRadioInline1">
Default
</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input class="custom-control-input" name="defaultRadioGroup2" type="radio" value="" id="defaultRadioInline2" checked />
<label class="custom-control-label" for="defaultRadioInline2">
Selected
</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input class="custom-control-input" name="defaultRadioGroup2" type="radio" value="" id="defaultRadioInline3" disabled />
<label class="custom-control-label" for="defaultRadioInline3">
Disabled
</label>
</div>
</div>
<div class="form-group">
<label class="form-label">Radiobuttons Inline small</label>
<div class="custom-control custom-radio custom-radio-sm custom-control-inline">
<input class="custom-control-input" name="defaultRadioSmGroup2" type="radio" value="" id="defaultRadioInlineSm1" />
<label class="custom-control-label" for="defaultRadioInlineSm1">
Default
</label>
</div>
<div class="custom-control custom-radio custom-radio-sm custom-control-inline">
<input class="custom-control-input" name="defaultRadioSmGroup2" type="radio" value="" id="defaultRadioInlineSm2" checked />
<label class="custom-control-label" for="defaultRadioInlineSm2">
Selected
</label>
</div>
<div class="custom-control custom-radio custom-radio-sm custom-control-inline">
<input class="custom-control-input" name="defaultRadioSmGroup2" type="radio" value="" id="defaultRadioInlineSm3" disabled />
<label class="custom-control-label" for="defaultRadioInlineSm3">
Disabled
</label>
</div>
</div>
</div>
</div>
</div>
<div class="card-body border-bottom">
<h2>File Browser</h2>
<div class="row mt-3">
<div class="col-sm-4">
<div class="form-group">
<label class="form-label" for="customFile1">File Browser</label>
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile1">
<label class="custom-file-label" for="customFile1">Choose file</label>
</div>
</div>
<div class="form-group">
<label class="form-label" for="customFile1">File Browser small</label>
<div class="custom-file custom-file-sm">
<input type="file" class="custom-file-input" id="customFile1">
<label class="custom-file-label" for="customFile1">Choose file</label>
</div>
</div>
</div>
</div>
</div>
<div class="card-body border-bottom">
<h2>Number</h2>
<p>Touchspin required. Following attributes can be set on input element:</p>
<ul>
<li><code>data-touchspin-initval</code><br>Initial value</li>
<li><code>data-touchspin-min</code><br>Minimum value</li>
<li><code>data-touchspin-max</code><br>Maximum value</li>
<li><code>data-touchspin-step</code><br>Incremental/decremental step on up/down change.</li>
<li><code>data-touchspin-prefix</code><br>Text before the input.</li>
<li><code>data-touchspin-postfix</code><br>Text after the input.</li>
</ul>
<div class="row mt-3">
<div class="col-sm-4">
<div class="form-group">
<label class="form-label" for="numberExample1">Number</label>
<div class="input-group">
<input id="numberExample1" type="text" class="form-control" required aria-invalid="false" data-touchspin />
</div>
</div>
<div class="form-group">
<label class="form-label" for="numberExampleSm1">Number small</label>
<div class="input-group input-group-sm">
<input id="numberExampleSm1" type="text" class="form-control input-sm" required aria-invalid="false" data-touchspin />
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label class="form-label" for="numberExample2">Number with prefix and 2 decimals</label>
<div class="input-group">
<input id="numberExample2" type="text" class="form-control" required aria-invalid="false" data-touchspin data-touchspin-prefix="$" data-touchspin-min="-10" data-touchspin-max="10" data-touchspin-step="0.01" data-touchspin-decimals="2" />
</div>
</div>
<div class="form-group">
<label class="form-label" for="numberExampleSm2">Number small with prefix and 2 decimals</label>
<div class="input-group input-group-sm">
<input id="numberExampleSm2" type="text" class="form-control input-sm" required aria-invalid="false" data-touchspin data-touchspin-prefix="$" data-touchspin-min="-10" data-touchspin-max="10" data-touchspin-step="0.01" data-touchspin-decimals="2" />
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label class="form-label" for="numberExample3">Number with postfix and 1 decimals</label>
<div class="input-group">
<input id="numberExample3" type="text" class="form-control" required aria-invalid="false" data-touchspin data-touchspin-postfix="%" data-touchspin-initval="50" data-touchspin-min="0" data-touchspin-max="100" data-touchspin-step="0.1" data-touchspin-decimals="1" />
</div>
</div>
<div class="form-group">
<label class="form-label" for="numberExampleSm3">Number small with postfix and 1 decimals</label>
<div class="input-group input-group-sm">
<input id="numberExampleSm3" type="text" class="form-control input-sm" required aria-invalid="false" data-touchspin data-touchspin-postfix="%" data-touchspin-initval="50" data-touchspin-min="0" data-touchspin-max="100" data-touchspin-step="0.1" data-touchspin-decimals="1" />
</div>
</div>
</div>
</div>
</div>
<div class="card-body border-bottom">
<h2>Switch</h2>
<div class="row mt-3">
<div class="col-sm-6">
<div class="form-group">
<label class="form-label">Switch</label>
<div class="custom-control custom-switch">
<input class="custom-control-input" type="checkbox" id="switchExample1" name="switchExample1" checked />
<label class="custom-control-label" for="switchExample1">Active</label>
</div>
</div>
<div class="form-group">
<div class="custom-control custom-switch">
<input class="custom-control-input" type="checkbox" id="switchExample2" name="switchExample2" />
<label class="custom-control-label" for="switchExample2">Inactive</label>
</div>
</div>
<div class="form-group">
<div class="custom-control custom-switch custom-switch">
<input class="custom-control-input" type="checkbox" id="switchExample3" name="switchExample3" disabled />
<label class="custom-control-label" for="switchExample3">Disabled</label>
</div>
</div>
<div class="form-group">
<label class="form-label">Switch small</label>
<div class="custom-control custom-switch custom-switch-sm">
<input class="custom-control-input" type="checkbox" id="switchExample4" name="switchExample4" checked />
<label class="custom-control-label" for="switchExample4">Active</label>
</div>
</div>
</div>
</div>
</div>
<div class="card-body border-bottom">
<h2>Date</h2>
<div class="row mt-3">
<div class="col-sm-4">
<div class="form-group">
<label class="form-label" for="dateExample1">Date</label>
<div class="input-group date">
<input type="text" class="form-control" id="dateExample1" name="dateExample1" placeholder="YYYY-MM-DD" data-datepicker />
</div>
</div>
<div class="form-group">
<label class="form-label" for="dateExample2">Date small</label>
<div class="input-group input-group-sm date">
<input type="text" class="form-control" id="dateExample2" name="dateExample1" placeholder="YYYY-MM-DD" data-datepicker />
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label class="form-label" for="dateRangeExample1">Date Range</label>
<div class="input-group input-daterange date" data-datepicker id="dateRangeExample1">
<input type="text" class="form-control" name="start" placeholder="YYYY-MM-DD">
<div class="input-group-append"><span class="input-group-text">to</span></div>
<input type="text" class="form-control input-group-append" name="end" placeholder="YYYY-MM-DD">
</div>
</div>
<div class="form-group">
<label class="form-label" for="dateRangeExampleSm1">Date Range small</label>
<div class="input-group input-group-sm input-daterange date" data-datepicker id="dateRangeExampleSm1">
<input type="text" class="form-control" name="start" placeholder="YYYY-MM-DD">
<div class="input-group-append"><span class="input-group-text">to</span></div>
<input type="text" class="form-control input-group-append" name="end" placeholder="YYYY-MM-DD">
</div>
</div>
</div>
</div>
</div>
<div class="card-body border-bottom">
<h2>Range Slider</h2>
<p><a href="http://ionden.com/a/plugins/ion.rangeSlider/start.html" target="_blank">ionRangeSlider</a> required.<br>
Following attributes can be set on input element:</p>
<ul>
<li><code>data-min</code><br>Min value</li>
<li><code>data-max</code><br>Max value</li>
<li><code>data-type</code><br>"single" or "double" Slider</li>
<li><code>data-from</code><br>Start value from for double slider</li>
<li><code>data-to</code><br>End value from for double slider</li>
</ul>
<div class="row mt-3">
<div class="col-sm-4">
<label class="form-label" for="rangesliderExample1">Range Slider</label>
<input type="text" class="custom-range" min="0" max="5" id="rangesliderExample1" data-rangeslider data-min="0" data-max="1000" />
</div>
<div class="col-sm-4">
<label class="form-label" for="rangesliderExample2">Range Slider Double</label>
<input type="text" class="custom-range" min="0" max="5" id="rangesliderExample2" data-rangeslider data-min="-100" data-max="100" data-from="-50" data-to="50" data-type="double" />
</div>
</div>
</div>
<!-- <div class="card-body border-bottom">
<h2>Validation</h2>
<div class="row mt-3">
<div class="col-sm-4">
<form novalidate data-validate>
<div class="form-group validate-me">
<label class="form-label" for="validateTextS1">Input</label>
<div id="validateTextS1" class="input-group mb-1 mr-1">
<input class="form-control" type="text" placeholder="Placeholder" required />
<div class="invalid-feedback">Example invalid feedback text</div>
</div>
</div>
<div class="form-group validate-me">
<label class="form-label">Checkboxes</label>
<div class="custom-control custom-checkbox">
<input id="validateCheck2" class="custom-control-input" type="checkbox" value="" required />
<label class="custom-control-label" for="validateCheck2">Checkbox 2</label>
<div class="invalid-feedback">Example invalid feedback text</div>
</div>
</div>
<div class="form-group validate-me">
<label class="form-label" for="validateFile1">File Browser</label>
<div class="custom-file">
<input type="file" class="custom-file-input" id="validateFile1" required>
<label class="custom-file-label" for="validateFile1">Choose file</label>
<div class="invalid-feedback">Example invalid feedback text</div>
</div>
</div>
<div class="form-group validate-me">
<button class="btn btn-primary" type="submit">Submit form</button>
</div>
</form>
</div>
</div>
</div> -->
</div>
<div class="card mt-3">
<div class="card-header">
<h1>Navs & Navbars</h1>
</div>
<div class="card-body border-bottom">
<h2>Default</h2>
</div>
<div class="card-body card-nav border-bottom">
<ul class="nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="card-body border-bottom">
<h2>Nav + Pointer</h2>
<p>Add <code>.nav-pointer</code> to <code>.nav</code></p>
</div>
<div class="card-body card-nav">
<nav class="navbar navbar-expand-sm row justify-content-start justify-content-md-between">
<div class="col-auto navbar-toggler order-1 modal-nav-toggler">
<button class="action action-pure mt-1 mb-1" type="button" data-toggle="collapse" data-target="#modalDetailsNav" aria-controls="modalDetailsNav" aria-expanded="false" aria-label="Toggle navigation">
<i class="feather icon-list"></i>
</button>
</div>
<div class="col-12 col-md-auto order-3 order-md-1 pt-1 pt-md-0 modal-nav-menu order-4">
<div class="collapse navbar-collapse" id="modalDetailsNav">
<ul class="nav nav-pointer">
<li class="nav-item dropdown">
<a id="navbarDropdown1" class="nav-link active dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">General information</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1">
<a class="dropdown-item" href="#generalInformation" aria-controls="#generalInformation" role="button" data-toggle="tab">General</a>
<a class="dropdown-item" href="#modelCategory" aria-controls="#modelCategory" role="button" data-toggle="tab">Model category</a>
<a class="dropdown-item" href="#author" aria-controls="#author" role="button" data-toggle="tab">Author</a>
<a class="dropdown-item" href="#creator" aria-controls="#creator" role="button" data-toggle="tab">Creator</a>
<a class="dropdown-item" href="#reference" aria-controls="#reference" role="button" data-toggle="tab">Reference</a>
</div>
</li>
<li class="nav-item dropdown">
<a id="navbarDropdown2" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Scope</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown2">
<a class="dropdown-item" href="#scopeGeneral" aria-controls="#scopeGeneral" role="button" data-toggle="tab">General</a>
<a class="dropdown-item" href="#product" aria-controls="#product" role="button" data-toggle="tab">Product</a>
<a class="dropdown-item" href="#hazard" aria-controls="#hazard" role="button" data-toggle="tab">Hazard</a>
<a class="dropdown-item" href="#population" aria-controls="#population" role="button" data-toggle="tab">Population group</a>
</div>
</li>
<li class="nav-item dropdown">
<a id="navbarDropdown3" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Data Background</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown3">
<a class="dropdown-item" href="#study" aria-controls="#study" role="button" data-toggle="tab">Study</a>
<a class="dropdown-item" href="#studySample" aria-controls="#studySample" role="button" data-toggle="tab">Study sample</a>
<a class="dropdown-item" href="#dietaryAssessmentMethod" aria-controls="#dietaryAssessmentMethod" role="button" data-toggle="tab">Dietary assessment method</a>
<a class="dropdown-item" href="#laboratory" aria-controls="#laboratory" role="button" data-toggle="tab">Laboratory</a>
<a class="dropdown-item" href="#assay" aria-controls="#assay" role="button" data-toggle="tab">Assay</a>
</div>
</li>
<li class="nav-item dropdown">
<a id="navbarDropdown4" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Model math</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown4">
<a class="dropdown-item" href="#modelMath" aria-controls="#modelMath" role="button" data-toggle="tab">General</a>
<a class="dropdown-item" href="#parameter" aria-controls="#parameter" role="button" data-toggle="tab">Parameter</a>
<a class="dropdown-item" href="#qualityMeasures" aria-controls="#qualityMeasures" role="button" data-toggle="tab">Quality measures</a>
<a class="dropdown-item" href="#modelEquation" aria-controls="#modelEquation" role="button" data-toggle="tab">Model equation</a>
<a class="dropdown-item" href="#exposure" aria-controls="#exposure" role="button" data-toggle="tab">Exposure</a>
</div>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="plot-tab" href="#plot" aria-controls="plot" role="tab" data-toggle="tab">Model Plot</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="card-body bg-info">
</div>
<div class="card-body border-bottom">
<h2>Navbar + Search</h2>
</div>
<div class="card-body card-nav">
<nav class="navbar navbar-expand-sm row justify-content-start justify-content-md-between">
<div class="col-auto navbar-toggler order-1 modal-nav-toggler">
<button class="action action-pure mt-1 mb-1" type="button" data-toggle="collapse" data-target="#modalDetailsNav" aria-controls="modalDetailsNav" aria-expanded="false" aria-label="Toggle navigation">
<i class="feather icon-list"></i>
</button>
</div>
<div class="col-divider order-2 d-block d-sm-none d-md-block"></div>
<div class="col-auto order-2 modal-nav-search">
<div class="search">
<input class="form-control form-control-plaintext search-input" type="search" placeholder="Search Details" aria-label="Search Details" />
</div>
</div>
<div class="col-12 col-md-auto order-3 order-md-1 pt-1 pt-md-0 modal-nav-menu order-4">
<div class="collapse navbar-collapse" id="modalDetailsNav">
<ul class="nav nav-pointer">
<li class="nav-item dropdown">
<a id="navbarDropdown1" class="nav-link active dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">General information</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1">
<a class="dropdown-item" href="#generalInformation" aria-controls="#generalInformation" role="button" data-toggle="tab">General</a>
<a class="dropdown-item" href="#modelCategory" aria-controls="#modelCategory" role="button" data-toggle="tab">Model category</a>
<a class="dropdown-item" href="#author" aria-controls="#author" role="button" data-toggle="tab">Author</a>
<a class="dropdown-item" href="#creator" aria-controls="#creator" role="button" data-toggle="tab">Creator</a>
<a class="dropdown-item" href="#reference" aria-controls="#reference" role="button" data-toggle="tab">Reference</a>
</div>
</li>
<li class="nav-item dropdown">
<a id="navbarDropdown2" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Scope</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown2">
<a class="dropdown-item" href="#scopeGeneral" aria-controls="#scopeGeneral" role="button" data-toggle="tab">General</a>
<a class="dropdown-item" href="#product" aria-controls="#product" role="button" data-toggle="tab">Product</a>
<a class="dropdown-item" href="#hazard" aria-controls="#hazard" role="button" data-toggle="tab">Hazard</a>
<a class="dropdown-item" href="#population" aria-controls="#population" role="button" data-toggle="tab">Population group</a>
</div>
</li>
<li class="nav-item dropdown">
<a id="navbarDropdown3" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Data Background</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown3">
<a class="dropdown-item" href="#study" aria-controls="#study" role="button" data-toggle="tab">Study</a>
<a class="dropdown-item" href="#studySample" aria-controls="#studySample" role="button" data-toggle="tab">Study sample</a>
<a class="dropdown-item" href="#dietaryAssessmentMethod" aria-controls="#dietaryAssessmentMethod" role="button" data-toggle="tab">Dietary assessment method</a>
<a class="dropdown-item" href="#laboratory" aria-controls="#laboratory" role="button" data-toggle="tab">Laboratory</a>
<a class="dropdown-item" href="#assay" aria-controls="#assay" role="button" data-toggle="tab">Assay</a>
</div>
</li>
<li class="nav-item dropdown">
<a id="navbarDropdown4" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Model math</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown4">
<a class="dropdown-item" href="#modelMath" aria-controls="#modelMath" role="button" data-toggle="tab">General</a>
<a class="dropdown-item" href="#parameter" aria-controls="#parameter" role="button" data-toggle="tab">Parameter</a>
<a class="dropdown-item" href="#qualityMeasures" aria-controls="#qualityMeasures" role="button" data-toggle="tab">Quality measures</a>
<a class="dropdown-item" href="#modelEquation" aria-controls="#modelEquation" role="button" data-toggle="tab">Model equation</a>
<a class="dropdown-item" href="#exposure" aria-controls="#exposure" role="button" data-toggle="tab">Exposure</a>
</div>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="plot-tab" href="#plot" aria-controls="plot" role="tab" data-toggle="tab">Model Plot</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="card-body bg-info">
</div>
</div>
<div class="card mt-3">
<div class="card-header">
<h1>Tables</h1>
</div>
<div class="card-body">
<h2>Main</h2>
<p>Add <code>.table-main</code> for blue table head.</p>
</div>
<div class="card-table border-bottom">
<div class="table-responsive">
<table class="table table-main table-hover table-striped">
<thead>
<tr>
<th class="sortable" scope="col"><span>Is reference</span></th>
<th class="sortable" scope="col"><span>Type</span></th>
<th class="sortable" scope="col"><span>Date</span></th>
<th class="sortable" scope="col"><span>PubMed</span></th>
<th class="sortable" scope="col"><span>DOI</span></th>
<th class="sortable" scope="col"><span>Author list</span></th>
<th class="sortable" scope="col"><span>Title</span></th>
<th class="sortable" scope="col"><span>Abstract</span></th>
<th class="sortable" scope="col"><span>Journal</span></th>
<th class="sortable" scope="col"><span>Volume</span></th>
<th class="sortable" scope="col"><span>Issue</span></th>
<th class="sortable" scope="col"><span>Status</span></th>
<th class="sortable" scope="col"><span>Website</span></th>
<th class="sortable" scope="col"><span>Comment</span></th>
</tr>
</thead>
<tbody>
<tr>
<td title="true">true</td>
<td title="JOUR">JOUR</td>
<td title="3911,4,22">3911,4,22</td>
<td title=""></td>
<td title="https://doi.org/10.1016/j.ijfoodmicro.2011.04.018">https://doi.org/10.1016/...</td>
<td title="Pires, S.M., Vieira, A.R., Perez, E., Wong, D.L.F., & Hald, T.">Pires, S.M., Vieira, A.R...</td>
<td title="Attributing human foodborne illness to food sources and water in Latin America and the Caribbean using data from outbreak investigations">Attributing human foodbo...</td>
<td title="Foodborne pathogens are responsible for an increasing burden of disease worldwide. Knowledge on the contribution of different food sources and water for disease is essential to prioritize food safety interventions and implement appropriate control measures. Source attribution using outbreak data utilizes readily available data from outbreak surveillance to estimate the contribution of different sources to human disease. We developed a probabilistic model based on outbreak data that attributes human foodborne disease by various bacterial pathogens to sources in Latin America and the Caribbean (LA&C). Foods implicated in outbreaks were classified by their ingredients as simple foods (i.e. belonging to one single food category), or complex foods (i.e. belonging to multiple food categories). For each agent, the data from simple-food outbreaks were summarized, and the proportion of outbreaks caused by each category was used to define the probability that an outbreak was caused by a source. For the calculation of the number of outbreaks attributed to each source, simple-food outbreaks were attributed to the single food category in question, and complex-food outbreaks were partitioned to each category proportionally to the estimated probability. We analysed all bacterial pathogens together, focused on important bacterial pathogens separately, and, when data were sufficient, performed analyses by country, decade and location. Between 1993 and 2010, 6313 bacterial outbreaks were reported by 20 countries. In general, the most important sources of bacterial disease were meat, dairy roducts, water and vegetables in the 1990s, and eggs, vegetables, and grains and beans in the 2000s. We observed fluctuations of the most important sources of disease for each pathogen between decades and countries, whichmay be a consequence of changes in the control of zoonotic disease over the years, of changes in food consumption habits, or of changes in public health focus and availability of data of different pathogens. This study identified data gaps in the region and highlighted the importance of effective surveillance systems to identify sources of disease. Still, the application of this method for source attribution in the LA&C region was successful, and we concluded that this approach can be used to attribute disease to food sources and water in other regions, including developing regions with limited data on the public health impact of foodborne diseases.">Foodborne pathogens are ...</td>
<td title=""></td>
<td title="0">0</td>
<td title="0">0</td>
<td title="Published">Published</td>
<td title="https://www.sciencedirect.com/science/article/pii/S0168160511002418">https://www.sciencedirec...</td>
<td title=""></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="card-body mt-2">
<h2>Default</h2>
<p>Default Table with class <code>.table-default</code> and leading <code>.table-heading</code></p>
</div>
<div class="card-table">
<div class="table-heading">
<h1>General</h1>
</div>
<div class="table-responsive">
<table class="table table-default table-striped table-hover">
<thead>
<tr>
<th scope="col">Property</th>
<th scope="col">Value</th>
</tr>
</thead>
<tbody>
<tr>
<td class="td-label">Name</td>
<td>Attributing Salmonellosis to food sources and water in Latin America and the Caribbean using data from outbreak investigations (Salmonella)</td>
</tr>
<tr>
<td class="td-label">Source</td>
<td>PUBLISHED SCIENTIFIC STUDIES</td>
</tr>
<tr>
<td class="td-label">Identifier</td>
<td>PiresOutbLA2011-Salmonella</td>
</tr>
<tr>
<td class="td-label">Creation date</td>
<td>2019,6,25</td>
</tr>
<tr>
<td class="td-label">Language written in</td>
<td>R</td>
</tr>
<tr>
<td class="td-label">Description</td>
<td>Source attribution using outbreak data utilizes readily available data from outbreak surveillance to estimate the contribution of different sources to human disease. A probabilistic model was developed based on outbreak data that attributes Salmonellosis to sources in Latin America and the Caribbean (LA&C). Foods implicated in outbreaks were classified by their ingredients as simple foods (i.e. belonging to one single food category), or complex foods (i.e. belonging to multiple food categories). For each agent, the data from simple-food outbreaks were summarized, and the proportion of outbreaks caused by each category was used to define the probability that an outbreak was caused by a source. For the calculation of the number of outbreaks attributed to each source, simple-food outbreaks were attributed to the single food category in question, and complex-food outbreaks were partitioned to each category proportionally to the estimated probability. We analysed Salmonella and performed analyses by decade.</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="card mt-3">
<div class="card-header">
<h1>Alerts</h1>
</div>
<div class="card-body border-bottom">
<h2>Basic</h2>
<div class="row mt-3">
<div class="col-sm-6">
<div class="alert alert-primary" role="alert">
A simple primary alert with <a href="#" class="alert-link">an example link</a>
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert with <a href="#" class="alert-link">an example link</a>
</div>
<div class="alert alert-success" role="alert">
A simple success alert with <a href="#" class="alert-link">an example link</a>
</div>
<div class="alert alert-danger" role="alert">
A simple danger alert with <a href="#" class="alert-link">an example link</a>
</div>
<div class="alert alert-warning" role="alert">
A simple warning alert with <a href="#" class="alert-link">an example link</a>
</div>
<div class="alert alert-info" role="alert">
A simple info alert with <a href="#" class="alert-link">an example link</a>
</div>
</div>
</div>
</div>
<div class="card-body border-bottom">
<h2>Dismissable</h2>
<div class="row mt-3">
<div class="col-sm-6">
<div class="alert alert-primary alert-dismissible fade show" role="alert">
A dismissable primary alert with <a href="#" class="alert-link">an example link</a>
<button type="button" class="close close-sm" data-dismiss="alert" aria-label="Close">
<i class="feather icon-x" aria-hidden="true"></i>
</button>
</div>
<div class="alert alert-secondary alert-dismissible fade show" role="alert">
A dismissable secondary alert with <a href="#" class="alert-link">an example link</a>
<button type="button" class="close close-sm" data-dismiss="alert" aria-label="Close">
<i class="feather icon-x" aria-hidden="true"></i>
</button>
</div>
<div class="alert alert-success alert-dismissible fade show" role="alert">
A dismissable success alert with <a href="#" class="alert-link">an example link</a>
<button type="button" class="close close-sm" data-dismiss="alert" aria-label="Close">
<i class="feather icon-x" aria-hidden="true"></i>
</button>
</div>
<div class="alert alert-danger alert-dismissible fade show" role="alert">
A dismissable danger alert with <a href="#" class="alert-link">an example link</a>
<button type="button" class="close close-sm" data-dismiss="alert" aria-label="Close">
<i class="feather icon-x" aria-hidden="true"></i>
</button>
</div>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
A dismissable warning alert with <a href="#" class="alert-link">an example link</a>
<button type="button" class="close close-sm" data-dismiss="alert" aria-label="Close">
<i class="feather icon-x" aria-hidden="true"></i>
</button>
</div>
<div class="alert alert-info alert-dismissible fade show" role="alert">
A dismissable info alert with <a href="#" class="alert-link">an example link</a>
<button type="button" class="close close-sm" data-dismiss="alert" aria-label="Close">
<i class="feather icon-x" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
/**
* app
* initialization of all components
*/
$( document ).ready( () => {
_debug = true;
_app = new APPUI();
_app._initAll();
} );
</script>
</body>
</html>