Bootstrap
Bulma
Foundation
Material Design for Bootstrap 4
Materialize
Semantic UI
Siimple
Skeleton
Topcoat
UIkit
W3.CSS
Wing
Categories
Tag: css
Categories
Material UI
Bootstrap themes
https://bootswatch.com/
https://fezvrasta.github.io/bootstrap-material-design/
Material Design for Bootstrap
UI Frameworks
https://www.polymer-project.org
http://materializecss.com/
http://www.material-ui.com/
https://github.com/kkortes/leaf
https://www.muicss.com/
Categories
Sasstructure
Categories
Bootstrap nav-tabs
echo '<ul class="nav nav-tabs">';
foreach($invoiceTypes as $invoiceTypeId => $invoiceTypeData){
echo '<li';
if($invoiceTypeId == $invoiceType) echo ' class="active"';
echo '><a href="#' . $invoiceTypeId . '" data-toggle="tab">' .
$invoiceTypeData['description'] . '</a></li>';
}
echo '</ul>';
echo '<div class="tab-content">';
foreach($invoiceTypes as $invoiceTypeId => $invoiceTypeData){
echo '<div class="tab-pane';
if($invoiceTypeId == $invoiceType) echo ' active';
echo '" id="' . $invoiceTypeId . '">';
...
echo '</div>'; //tab-pane
}
echo '</div>'; //tab-content
Categories
Bootstrap modal
<a href="details.php" data-remote="false" data-toggle="modal" data-target="#myModal" class="btn btn-default">Show modal</a>
<div class="modal fade"
id="myModal"
tabindex="-1"
role="dialog"
aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button"
class="close"
data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel"></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button"
class="btn btn-default"
data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$("#myModal").on("show.bs.modal", function(e) {
var link = $(e.relatedTarget);
$(this).find(".modal-body").load(link.attr("href"));
});
</script>
Categories
Bootstrap tabs
<!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">
<title>Bootstrap CSS</title>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container" style="width:100%;">
<ul class="nav nav-tabs">
<li class="active">
<a href="#item1" data-toggle="tab">Prvi</a>
</li>
<li>
<a href="#item2" data-toggle="tab">Drugi</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="item1">Tekst 1</div>
<div class="tab-pane" id="item2">Tekst 2</div>
</div>
</div>
</body>
</html>