mirror of https://github.com/ColorlibHQ/AdminLTE
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
252 lines
15 KiB
252 lines
15 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>AdminLTE - Typography</title>
|
|
<meta charset="UTF-8">
|
|
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
|
|
<!-- bootstrap 3.0.2 -->
|
|
<link href="css/bootstrap.min.css" rel="stylesheet" />
|
|
<!-- font Awesome -->
|
|
<link href="css/font-awesome.min.css" rel="stylesheet" />
|
|
<!-- Theme style -->
|
|
<link href="theme/theme.css" rel="stylesheet" />
|
|
<!-- Google font Signika -->
|
|
<link href='http://fonts.googleapis.com/css?family=Signika+Negative' rel='stylesheet' type='text/css'>
|
|
</head>
|
|
<body>
|
|
<nav class="navbar navbar-theme bg-purple navbar-static-top" role="navigation">
|
|
|
|
<!-- Brand and toggle get grouped for better mobile display -->
|
|
<div class="navbar-header">
|
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
|
|
<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="index.html"><span class="fa fa-shield"></span> AdminLTE</a>
|
|
<a href="#" class='lte-menu-sm visible-xs navbar-brand'>
|
|
<span class="fa fa-list"></span>
|
|
</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 navbar-right">
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-gears"></i></a>
|
|
<ul class="dropdown-menu navbar-selector">
|
|
<li role="presentation" class="dropdown-header font-primary noClick">Navbar Color</li>
|
|
<li class="font-primary" data-color="bg-primary"><a href="#"><i class="fa fa-gear"></i> Primary</a></li>
|
|
<li class="font-blue" data-color="bg-blue"><a href="#"><i class="fa fa-gear"></i> Blue <small class="text-muted">(default)</small></a></li>
|
|
<li class="font-light-blue" data-color="bg-light-blue"><a href="#"><i class="fa fa-gear"></i> Light Blue</a></li>
|
|
<li class="font-green" data-color="bg-green"><a href="#"><i class="fa fa-gear"></i> Green</a></li>
|
|
<li class="font-yellow" data-color="bg-yellow"><a href="#"><i class="fa fa-gear"></i> Yellow</a></li>
|
|
<li class="font-purple" data-color="bg-purple"><a href="#"><i class="fa fa-gear"></i> Purple</a></li>
|
|
<li class="font-red" data-color="bg-red"><a href="#"><i class="fa fa-gear"></i> Red</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#"><i class="fa fa-bullhorn"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-envelope"></i></a></li>
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i></a>
|
|
<ul class="dropdown-menu">
|
|
<li><a href="#">Profile</a></li>
|
|
<li><a href="#">Friends</a></li>
|
|
<li><a href="#">Settings</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="#">Privacy</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<form class="navbar-form navbar-right">
|
|
<div class="form-group">
|
|
<input type="text" name="search" class="form-control" placeholder="..."/>
|
|
</div>
|
|
</form>
|
|
</div><!-- /.navbar-collapse -->
|
|
</nav>
|
|
<div class="lte-main-content">
|
|
<!-- side bar -->
|
|
<div class="lte-sidebar col-md-2 col-sm-3 hidden-xs">
|
|
<ul class="lte-sidebar-menu">
|
|
<li><a href="index.html"><i class="fa fa-dashboard"></i> Dashboard</a></li>
|
|
<li class="lte-tree">
|
|
<a href="#"><i class="fa fa-bar-chart-o"></i> Charts<i class="pull-right fa fa-angle-right"></i></a>
|
|
<ul class="lte-tree-menu">
|
|
<li><a href="charts/flot.html"><i class="fa fa-bar-chart-o"></i> Flot</a></li>
|
|
<li><a href="charts/jqplot.html"><i class="fa fa-bar-chart-o"></i> JQplot</a></li>
|
|
<li><a href="charts/xcharts.html"><i class="fa fa-bar-chart-o"></i> xCharts</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="ui.html"><i class="fa fa-tint"></i> User Interface </a></li>
|
|
<!--<li><a href="widgets.html"><i class="fa fa-gear"></i> Widgets</a></li>-->
|
|
<li class="lte-tree">
|
|
<a href="#"><i class="fa fa-pagelines"></i> Example Pages <i class="pull-right fa fa-angle-right"></i></a>
|
|
<ul class="lte-tree-menu">
|
|
<li><a href="examples/invoice.html"><i class="fa fa-money"></i> Invoice</a></li>
|
|
<li><a href="examples/login.html"><i class="fa fa-sign-in"></i> Login</a></li>
|
|
<li><a href="examples/register.html"><i class="fa fa-lock"></i> Register</a></li>
|
|
<li><a href="examples/blank_page.html"><i class="fa fa-paperclip"></i> Blank Page</a></li>
|
|
<li><a href="examples/404.html"><i class="fa fa-unlink"></i> 404 Error Page</a></li>
|
|
<li><a href="examples/500.html"><i class="fa fa-unlink"></i> 500 Error Page</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="forms.html"><i class="fa fa-edit"></i> Forms</a></li>
|
|
<li class="active"><a href="typography.html"><i class="fa fa-text-width"></i> Typography</a></li>
|
|
<li><a href="calendar.html"><i class="fa fa-calendar"></i> Calendar</a></li>
|
|
|
|
<li class="lte-tree">
|
|
<a href="#"><i class="fa fa-pagelines"></i> Multilevel Dropdown<i class="pull-right fa fa-angle-right"></i></a>
|
|
<ul class="lte-tree-menu">
|
|
<li class="lte-tree">
|
|
<a href="#"><i class="fa fa-pagelines"></i> Level 1<i class="pull-right fa fa-angle-right"></i></a>
|
|
<ul class="lte-tree-menu">
|
|
<li class="lte-tree">
|
|
<a href="#"><i class="fa fa-pagelines"></i> Level 2<i class="pull-right fa fa-angle-right"></i></a>
|
|
<ul class="lte-tree-menu">
|
|
<li><a href="#"><i class="fa fa-pagelines"></i> Level 3</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
<!-- /.side-bar-->
|
|
|
|
<div class="lte-main-container col-md-10 col-sm-9">
|
|
<!-- main content -->
|
|
<div class="page-header">
|
|
<i class="fa fa-text-width"></i> Typography <small>Writing & Content</small>
|
|
</div>
|
|
<!-- /.page-header -->
|
|
<div class="lte-dashboard">
|
|
<div class="row">
|
|
<div class="col-sm-6 col-xs-12">
|
|
<div class="box box-default">
|
|
<div class="box-header">
|
|
<h3 class="box-title"><i class="fa fa-text-width"></i> H1 - H6</h3>
|
|
<div class="box-tools">
|
|
<i class="fa fa-gear"></i>
|
|
<i class="fa fa-angle-down lte-hider"></i>
|
|
<i class="off fa fa-times"></i>
|
|
</div>
|
|
</div>
|
|
<div class="box-body">
|
|
<h1>h1. Bootstrap heading</h1>
|
|
<h2>h2. Bootstrap heading</h2>
|
|
<h3>h3. Bootstrap heading</h3>
|
|
<h4>h4. Bootstrap heading</h4>
|
|
<h5>h5. Bootstrap heading</h5>
|
|
<h6>h6. Bootstrap heading</h6>
|
|
</div>
|
|
</div>
|
|
</div><!-- /.col -->
|
|
<div class="col-sm-6 col-xs-12">
|
|
<div class="box box-default">
|
|
<div class="box-header">
|
|
<h3 class="box-title"><i class="fa fa-text-width"></i> Google Font - Signika</h3>
|
|
<div class="box-tools">
|
|
<i class="fa fa-gear"></i>
|
|
<i class="fa fa-angle-down lte-hider"></i>
|
|
<i class="off fa fa-times"></i>
|
|
</div>
|
|
</div>
|
|
<div class="box-body">
|
|
<h1 class="signika">h1. Bootstrap heading</h1>
|
|
<h2 class="signika">h2. Bootstrap heading</h2>
|
|
<h3 class="signika">h3. Bootstrap heading</h3>
|
|
<h4 class="signika">h4. Bootstrap heading</h4>
|
|
<h5 class="signika">h5. Bootstrap heading</h5>
|
|
<h6 class="signika">h6. Bootstrap heading</h6>
|
|
</div>
|
|
</div>
|
|
</div><!-- /.col -->
|
|
</div><!-- row -->
|
|
|
|
<div class="row">
|
|
<div class="col-sm-6 col-xs-12">
|
|
<div class="box box-default">
|
|
<div class="box-header">
|
|
<h3 class="box-title"><i class="fa fa-text-width"></i> H1 - H6 Colored</h3>
|
|
<div class="box-tools">
|
|
<i class="fa fa-gear"></i>
|
|
<i class="fa fa-angle-down lte-hider"></i>
|
|
<i class="off fa fa-times"></i>
|
|
</div>
|
|
</div>
|
|
<div class="box-body">
|
|
<h1 class="font-purple">h1. Bootstrap heading</h1>
|
|
<h2 class="font-blue">h2. Bootstrap heading</h2>
|
|
<h3 class="font-green">h3. Bootstrap heading</h3>
|
|
<h4 class="font-light-blue">h4. Bootstrap heading</h4>
|
|
<h5 class="font-yellow">h5. Bootstrap heading</h5>
|
|
<h6 class="font-red">h6. Bootstrap heading</h6>
|
|
</div>
|
|
</div>
|
|
</div><!-- /.col -->
|
|
<div class="col-sm-6 col-xs-12">
|
|
<div class="box box-default">
|
|
<div class="box-header">
|
|
<h3 class="box-title"><i class="fa fa-text-width"></i> Lead & Paragraph</h3>
|
|
<div class="box-tools">
|
|
<i class="fa fa-gear"></i>
|
|
<i class="fa fa-angle-down lte-hider"></i>
|
|
<i class="off fa fa-times"></i>
|
|
</div>
|
|
</div>
|
|
<div class="box-body">
|
|
<p class="lead signika">Paragraph</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales at. Nulla tellus elit, varius non commodo eget, mattis vel eros. In sed ornare nulla. Donec consectetur, velit a pharetra ultricies, diam lorem lacinia risus, ac commodo orci erat eu massa. Sed sit amet nulla ipsum. Donec felis mauris, vulputate sed tempor at, aliquam a ligula. Pellentesque non pulvinar nisi.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div><!-- /.col -->
|
|
</div><!-- row -->
|
|
|
|
<div class="row">
|
|
<div class="col-xs-12">
|
|
<div class="box box-default">
|
|
<div class="box-header">
|
|
<h3 class="box-title"><i class="fa fa-text-width"></i> Quote</h3>
|
|
<div class="box-tools">
|
|
<i class="fa fa-gear"></i>
|
|
<i class="fa fa-angle-down lte-hider"></i>
|
|
<i class="off fa fa-times"></i>
|
|
</div>
|
|
</div>
|
|
<div class="box-body">
|
|
<blockquote>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
|
<small>Someone famous in <cite title="Source Title">Source Title</cite></small>
|
|
</blockquote>
|
|
</div>
|
|
</div>
|
|
</div><!-- /.col -->
|
|
</div><!-- row -->
|
|
</div><!-- /.lte-dashboard -->
|
|
</div><!-- lte-main-container -->
|
|
</div>
|
|
<!-- ./.lte-main-content -->
|
|
<footer>
|
|
Copyright © 2013 - <a>Preview</a> - <a>Purchase</a> - Built with <a target="blank" href="http://getbootstrap.com">Bootstrap 3</a>
|
|
</footer>
|
|
|
|
|
|
<!-- JQuery 1.10.2 -->
|
|
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
|
<!-- Bootstrap -->
|
|
<script src="js/bootstrap.min.js" type="text/javascript"></script>
|
|
<!-- LTE Tree -->
|
|
<script src="js/lteTree.js" type="text/javascript"></script>
|
|
<!-- LTE App -->
|
|
<script src="js/lteApp.js" type="text/javascript"></script>
|
|
<script type="text/javascript">
|
|
//Nav color changer controler
|
|
current_nav_color = "bg-purple";
|
|
</script>
|
|
</body>
|
|
</html> |