2 Star 10 Fork 9

沁心轩墨 / hadmin

Create your Gitee Account
Explore and code with more than 12 million developers,Free private repositories !:)
Sign up
This repository doesn't specify license. Please pay attention to the specific project description and its upstream code dependency when using it.
Clone or Download
typography.html 24.26 KB
Copy Edit Raw Blame History
沁心轩墨 authored 2018-03-26 09:31 . hadmin
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> - 排版</title>
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="shortcut icon" href="favicon.ico"> <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link href="css/style.css?v=4.1.0" rel="stylesheet">
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-sm-6">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>标题</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="typography.html#">
<i class="fa fa-wrench"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><a href="typography.html#">选项1</a>
</li>
<li><a href="typography.html#">选项2</a>
</li>
</ul>
<a class="close-link">
<i class="fa fa-times"></i>
</a>
</div>
</div>
<div class="ibox-content">
<h1>标题 1
<small>二级标题</small>
</h1>
<h2>标题 2
<small>二级标题</small>
</h2>
<h3>标题 3
<small>二级标题</small>
</h3>
<h4>标题 4
<small>二级标题</small>
</h4>
<h5>标题 5
<small>二级标题</small>
</h5>
<h6>标题 6
<small>二级标题</small>
</h6>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>段落文本</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="typography.html#">
<i class="fa fa-wrench"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><a href="typography.html#">选项1</a>
</li>
<li><a href="typography.html#">选项2</a>
</li>
</ul>
<a class="close-link">
<i class="fa fa-times"></i>
</a>
</div>
</div>
<div class="ibox-content">
<p>Bootstrap中文网携手猎聘网共同为码农打造的高薪工作直达频道。好工作都在这里啦!</p>
<p>Bootstrap中文网联合又拍云存储共同推出了开放CDN服务,我们对广泛的前端开源库提供了稳定的存储和带宽的支持,例如Bootstrap、jQuery等。</p>
<p>
Bootstrap优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。
</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>无样式列表</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="typography.html#">
<i class="fa fa-wrench"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><a href="typography.html#">选项1</a>
</li>
<li><a href="typography.html#">选项2</a>
</li>
</ul>
<a class="close-link">
<i class="fa fa-times"></i>
</a>
</div>
</div>
<div class="ibox-content">
<ul class="unstyled">
<li>每个人都有一个死角, 自己走不出来,别人也闯不进去。</li>
<li>我把最深沉的秘密放在那里。</li>
<li>你不懂我,我不怪你。</li>
<li>每个人都有一道伤口, 或深或浅,盖上布,以为不存在。</li>
<li>每个人都有一个死角, 自己走不出来,别人也闯不进去。
<ul>
<li>每个人都有一个死角, 自己走不出来,别人也闯不进去。</li>
<li>我把最深沉的秘密放在那里。</li>
<li>你不懂我,我不怪你。</li>
<li>每个人都有一道伤口, 或深或浅,盖上布,以为不存在。</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>无序列表</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="typography.html#">
<i class="fa fa-wrench"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><a href="typography.html#">选项1</a>
</li>
<li><a href="typography.html#">选项2</a>
</li>
</ul>
<a class="close-link">
<i class="fa fa-times"></i>
</a>
</div>
</div>
<div class="ibox-content">
<ul>
<li>每个人都有一个死角, 自己走不出来,别人也闯不进去。</li>
<li>我把最深沉的秘密放在那里。</li>
<li>你不懂我,我不怪你。</li>
<li>每个人都有一道伤口, 或深或浅,盖上布,以为不存在。</li>
<li>每个人都有一个死角, 自己走不出来,别人也闯不进去。
<ul>
<li>每个人都有一个死角, 自己走不出来,别人也闯不进去。</li>
<li>我把最深沉的秘密放在那里。</li>
<li>你不懂我,我不怪你。</li>
<li>每个人都有一道伤口, 或深或浅,盖上布,以为不存在。</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>有序列表</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="typography.html#">
<i class="fa fa-wrench"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><a href="typography.html#">选项1</a>
</li>
<li><a href="typography.html#">选项2</a>
</li>
</ul>
<a class="close-link">
<i class="fa fa-times"></i>
</a>
</div>
</div>
<div class="ibox-content">
<ol>
<li>每个人都有一个死角, 自己走不出来,别人也闯不进去。</li>
<li>我把最深沉的秘密放在那里。</li>
<li>你不懂我,我不怪你。</li>
<li>每个人都有一道伤口, 或深或浅,盖上布,以为不存在。</li>
<li>每个人都有一个死角, 自己走不出来,别人也闯不进去。
<ul>
<li>每个人都有一个死角, 自己走不出来,别人也闯不进去。</li>
<li>我把最深沉的秘密放在那里。</li>
<li>你不懂我,我不怪你。</li>
<li>每个人都有一道伤口, 或深或浅,盖上布,以为不存在。</li>
</ul>
</li>
</ol>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>强调</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="typography.html#">
<i class="fa fa-wrench"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><a href="typography.html#">选项1</a>
</li>
<li><a href="typography.html#">选项2</a>
</li>
</ul>
<a class="close-link">
<i class="fa fa-times"></i>
</a>
</div>
</div>
<div class="ibox-content">
<p class="text-muted">每个人都有一个死角, 自己走不出来,别人也闯不进去。</p>
<p class="text-primary">每个人都有一个死角, 自己走不出来,别人也闯不进去。</p>
<p class="text-success">每个人都有一个死角, 自己走不出来,别人也闯不进去。</p>
<p class="text-info">每个人都有一个死角, 自己走不出来,别人也闯不进去。</p>
<p class="text-warning">每个人都有一个死角, 自己走不出来,别人也闯不进去。</p>
<p class="text-danger">每个人都有一个死角, 自己走不出来,别人也闯不进去。</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>引用</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="typography.html#">
<i class="fa fa-wrench"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><a href="typography.html#">选项1</a>
</li>
<li><a href="typography.html#">选项2</a>
</li>
</ul>
<a class="close-link">
<i class="fa fa-times"></i>
</a>
</div>
</div>
<div class="ibox-content">
<blockquote>
<p>大弦嘈嘈如急雨,小弦切切如私雨。二十四桥明月夜,玉人何处教吹箫。</p>
<small><strong>杜牧</strong>-<cite title="" data-original-title="">《寄扬州韩绰判官》</cite></small>
</blockquote>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>对齐</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="typography.html#">
<i class="fa fa-wrench"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><a href="typography.html#">选项1</a>
</li>
<li><a href="typography.html#">选项2</a>
</li>
</ul>
<a class="close-link">
<i class="fa fa-times"></i>
</a>
</div>
</div>
<div class="ibox-content">
<p class="text-left">左对齐文本</p>
<p class="text-center">居中文本</p>
<p class="text-right">右对齐文本</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>地址</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="typography.html#">
<i class="fa fa-wrench"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><a href="typography.html#">选项1</a>
</li>
<li><a href="typography.html#">选项2</a>
</li>
</ul>
<a class="close-link">
<i class="fa fa-times"></i>
</a>
</div>
</div>
<div class="ibox-content">
<address>
<strong>阿里巴巴集团.</strong><br>
上海市闵行区绿地科技岛广场A座2606室<br>
<abbr title="Phone">Tel:</abbr> (123) 456-7890
</address>
<address>
<strong>上海市</strong><br>
<a href="mailto:#">497915773@qq.com</a>
</address>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>分组列表</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="typography.html#">
<i class="fa fa-wrench"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><a href="typography.html#">选项1</a>
</li>
<li><a href="typography.html#">选项2</a>
</li>
</ul>
<a class="close-link">
<i class="fa fa-times"></i>
</a>
</div>
</div>
<div class="ibox-content no-padding">
<ul class="list-group">
<li class="list-group-item">
<span class="badge badge-primary">16</span> 每个人都有一个死角, 自己走不出来,别人也闯不进去。
</li>
<li class="list-group-item ">
<span class="badge badge-info">12</span> 我把最深沉的秘密放在那里。
</li>
<li class="list-group-item">
<span class="badge badge-danger">10</span> 你不懂我,我不怪你。
</li>
<li class="list-group-item">
<span class="badge badge-success">10</span> 每个人都有一道伤口, 或深或浅,盖上布,以为不存在。
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>分组列表</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="typography.html#">
<i class="fa fa-wrench"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><a href="typography.html#">选项1</a>
</li>
<li><a href="typography.html#">选项2</a>
</li>
</ul>
<a class="close-link">
<i class="fa fa-times"></i>
</a>
</div>
</div>
<div class="ibox-content">
<div class="list-group">
<a class="list-group-item active" href="typography.html#">
<h3 class="list-group-item-heading">广西白龙洞题壁诗</h3>
<p class="list-group-item-text">挺身登峻岭,举目照遥空。毁佛崇天帝,移民复古风。临军称将勇,玩洞羡诗雄。剑气冲星斗,文光射日虹。</p>
</a>
<a class="list-group-item" href="typography.html#">
<h3 class="list-group-item-heading">丑奴儿</h3>
<p class="list-group-item-text">沉思十五年中事,才也纵横,泪也纵横,双负箫心与剑名。春来没个关心梦,自忏飘零,不信飘零,请看床头金字经。</p>
</a>
<a class="list-group-item" href="typography.html#">
<h3 class="list-group-item-heading">夜登金山</h3>
<p class="list-group-item-text">楼台两岸水相连,江北江南镜里天。芦管玉箫齐送夜,一声飞断月如烟。</p>
</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Wells</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="typography.html#">
<i class="fa fa-wrench"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><a href="typography.html#">选项1</a>
</li>
<li><a href="typography.html#">选项2</a>
</li>
</ul>
<a class="close-link">
<i class="fa fa-times"></i>
</a>
</div>
</div>
<div class="ibox-content">
<div class="well">
<h3>
默认效果
</h3> 把 Well 用在元素上,能有嵌入(inset)的的简单效果。
</div>
<div class="well well-lg">
<h3>
可选类
</h3> 通过.well-lg,.well-sm可选修饰类,可以控制此组件的内补(padding)和圆角的设置。
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 全局js -->
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.6"></script>
<!-- 自定义js -->
<script src="js/content.js?v=1.0.0"></script>
</body>
</html>
HTML
1
https://gitee.com/zc520yzy/hadmin.git
git@gitee.com:zc520yzy/hadmin.git
zc520yzy
hadmin
hadmin
master

Search