又爱又恨的BOOTSTRAP
搞本书，看了一天，确实，，UIKIT比它好用。。。
但，艺多不压身吧。
今天自己抄了个大概的，不用其它插件，，但那手风琴，真的找了很多，没有中意的。。。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<style type='text/css'>
.footcolor {
background-color: #CCC;
}
.glyphicon { margin-right:10px; }
.panel-body { padding:0px; }
.panel-body table tr td { padding-left: 15px }
.panel-body .table {margin-bottom: 0px; }
</style>
<body>
<div class="container">
<nav class="navbar navbar-default navbar-inverse ">
<!-- 此部分不论在任何宽度下都一直存在，常用来展开或收起导航 -->
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target="#navbar1">
<i class="icon-bar"></i>
<i class="icon-bar"></i>
<i class="icon-bar"></i>
</button>
<a href="#" class="navbar-brand">brand</a>
</div>
<!-- 这部分才是真正的导航主体部分 -->
<div id="navbar1" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<a href="#">菜单</a>
</li>
<li>
<a href="#">菜单</a>
</li>
<li>
<a href="#">菜单</a>
</li>
<li>
<a href="#">菜单</a>
</li>
<li>
<a href="#">菜单</a>
</li>
<li>
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="download">Sandstone <span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="download">
<li><a href="http://jsfiddle.net/bootswatch/m0nv7a0o/">Open Sandbox</a></li>
<li class="divider"></li>
<li><a href="./bootstrap.min.css">bootstrap.min.css</a></li>
<li><a href="./bootstrap.css">bootstrap.css</a></li>
<li class="divider"></li>
<li><a href="./variables.less">variables.less</a></li>
<li><a href="./bootswatch.less">bootswatch.less</a></li>
<li class="divider"></li>
<li><a href="./_variables.scss">_variables.scss</a></li>
<li><a href="./_bootswatch.scss">_bootswatch.scss</a></li>
</ul>
</li>
</nav>
</div>
<div class="container">
<div class="row">
<div class="col-md-2">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-folder-close">
</span>Content</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
<table class="table">
<tr>
<td>
<span class="glyphicon glyphicon-pencil text-primary"></span><a href="http://www.jquery2dotnet.com">Articles</a>
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-flash text-success"></span><a href="http://www.jquery2dotnet.com">News</a>
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-file text-info"></span><a href="http://www.jquery2dotnet.com">Newsletters</a>
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-comment text-success"></span><a href="http://www.jquery2dotnet.com">Comments</a>
<span class="badge">42</span>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><span class="glyphicon glyphicon-th">
</span>Modules</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<table class="table">
<tr>
<td>
<a href="http://www.jquery2dotnet.com">Orders</a> <span class="label label-success">$ 320</span>
</td>
</tr>
<tr>
<td>
<a href="http://www.jquery2dotnet.com">Invoices</a>
</td>
</tr>
<tr>
<td>
<a href="http://www.jquery2dotnet.com">Shipments</a>
</td>
</tr>
<tr>
<td>
<a href="http://www.jquery2dotnet.com">Tex</a>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><span class="glyphicon glyphicon-user">
</span>Account</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<table class="table">
<tr>
<td>
<a href="http://www.jquery2dotnet.com">Change Password</a>
</td>
</tr>
<tr>
<td>
<a href="http://www.jquery2dotnet.com">Notifications</a> <span class="label label-info">5</span>
</td>
</tr>
<tr>
<td>
<a href="http://www.jquery2dotnet.com">Import/Export</a>
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-trash text-danger"></span><a href="http://www.jquery2dotnet.com" class="text-danger">
Delete Account</a>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseFour"><span class="glyphicon glyphicon-file">
</span>Reports</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
<table class="table">
<tr>
<td>
<span class="glyphicon glyphicon-usd"></span><a href="http://www.jquery2dotnet.com">Sales</a>
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-user"></span><a href="http://www.jquery2dotnet.com">Customers</a>
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-tasks"></span><a href="http://www.jquery2dotnet.com">Products</a>
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-shopping-cart"></span><a href="http://www.jquery2dotnet.com">Shopping Cart</a>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-10">
<div class="bs-component">
<h3>Heading 3</h3>
<ul class="nav nav-list">
<li class="divider"></li>
</ul>
<table class="table table-striped table-hover table-bordered">
<thead>
<tr>
<th>#</th>
<th>Column heading</th>
<th>Column heading</th>
<th>Column heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<td>2</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="info">
<td>3</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="success">
<td>4</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="danger">
<td>5</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="warning">
<td>6</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<td>7</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
</tbody>
</table>
</div><!-- /example -->
<div class="bs-component text-center">
<ul class="pagination">
<li class="disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
</div>
</div>
</div>
<footer class="footer ">
<div class="container text-center footcolor" >
<p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
<p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p><a href="http://glyphicons.com">Glyphicons Free</a> licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<ul class="list-inline">
<li><a href="http://blog.getbootstrap.com">Blog</a></li>
<li class="muted">·</li>
<li><a href="https://github.com/twbs/bootstrap/issues?state=open">Issues</a></li>
<li class="muted">·</li>
<li><a href="https://github.com/twbs/bootstrap/releases">Changelog</a></li>
</ul>
</div>
</footer>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
又爱又恨的BOOTSTRAP的更多相关文章
- 又爱又恨系列之枚举enum
其实枚举挺简单的,只不过以前没好好学,所以不知道这个东西,恩,现在梳理一下 整体而言,首先枚举是一个数据类型,这个数据类型和结构体有点像 可以分为三个层次 1.枚举数据类型定义 第一种:enum 枚举 ...
- 谈谈Nancy中让人又爱又恨的Diagnostics【上篇】
前言 在Nancy中有个十分不错的功能-Diagnostics,可以说这个功能让人又爱又恨. 或许我们都做过下面这样的一些尝试: 记录某一个功能用到的相关技术信息 记录下网站的访问记录 全局配置某些框 ...
- Lambda-让人又爱又恨的“->"
写在前边 聊到Java8新特性,我们第一反应想到的肯定是Lambda表达式和函数式接口的出现.要说ta到底有没有在一定程度上"优化"了代码的简洁性呢?抑或是ta在一定程度上给程序员 ...
- 爱与恨的抉择：ASP.NET 5＋EntityFramework 7
EF7 的纠缠 ASP.NET 5 的无助 忘不了你的好 一开始列出的这个博文大纲,让我想到了很久之前的一篇博文:恋爱虽易,相处不易:当EntityFramework爱上AutoMapper,只不过这 ...
- 让人又爱又恨的char(字符型)
今天来总结一下char型,平常写算法的时候对这个东西感觉都有一点绕着走,说到底还是对这部分的知识不熟悉所以有点怕他,不过以后不要怕,今天来总结一下 首先,说到字符型数据类型,char型,恩它是一种数据 ...
- 一直又爱又恨的jqueryValidate，看到一个还不错的laber.error样式
默认样式,不是很好看 修改之后就高大上多了 功臣如下: label.error { position: absolute; right: 18px; top: 5px; colo ...
- 搞不懂为什么开发人员爱iOS恨Android？
导读:很多网站发表文章大同小异.唯有这个不同点,给大家分享. Android和iOS的较量一直都是人们津津乐道的话题.两个平台各有各的优势所在,同时也都力图能在各个方面赶超对手.对于用户来说,青菜萝卜 ...
- 技术谈 | SDN 和 NFV 之间的爱与恨
部分开发者经常混淆 SDN 和 NFV,无法看清他们的关系.今天,小编搬出华为技术专家的一篇大稿,给大家掰扯掰扯:SDN 和 NFV 究竟是什么关系. ----文/闫长江 什么是 SDN 回到基本的概 ...
- 让人又爱又恨的this
this是个神奇的东西, 既可以帮助我们把模拟的类实例化. 又可以在事件绑定里准确指向触发元素. 还可以帮助我们在对象方法中操作对象的其他属性或方法. 甚至可以在使用apply.call.bing.f ...
随机推荐
- python--class test
# !usr/bin/env python3#-*- coding:utf-8 -*- 'a test class'class Student(object): def __init__(se ...
- msql 按值排序
ORDER BY find_in_set(status,'705,710,706,1027,707,709,708'),create_time desc
- Centos如何设置静态IP地址,LINUX怎么修改IP地址
1.登陆连接centos系统,输入 ifconfig 可以查看到当前本机的IP地址信息 2.临时设置IP地址: 输入 ifconfig eth0 (默认是第一个网卡) 后面接IP地址, 网络掩码和 网 ...
- Environment variable:"PATH" 状态 失败
问题截图: 问题内容: 未能满足某些最低安装要求.请复查并修复下表中列出的问题,然后重新检查系统. Checks Environment Variable: "PATH" ...
- 万网免费主机wordpress快速建站教程-万网主机申请
很多小伙伴在万网的免费主机申请活动中建立起了自己的个人网站,但还是还有许多小伙伴现在想建站,却发现官网找不到免费主机的申请地址了,以为活动结束了?其实还是可以继续申请免费主机的,接下来小编给大家介绍如 ...
- 错误编码 = 10022 错误消息 = SDK 组件 Qupaisdk 启动出错，错误消息为 [Qupaisdk], the android stack error message is Fail to start the plugin, which is caused by No implem
so没有load到.几个可能,1.缺少so--在群共享下载拷贝到armeabi-v7a 2.so没有打入apk--检查打出来的apk.解压打开看下libs下面有没有so. 3.abi平台问题.检查平 ...
- 从两个集合里排除重复的写法（适用：DB表和字段都很多，表间有关联的情况）
获取其中一张表bulletinred为1的内容: public IList<BRShow> GetBulInfo() { var result = from a in ((Entities ...
- LevelDB windows vs2013 c++编译和测试
引用: (src1) :http://download.csdn.net/detail/flyfish1986/8881263(这里有下载地址) (src2) :http://blog.csdn.ne ...
- foreach的一点理解
首先什么样的数据才能实现foreach 1 实现IEnumerable这个接口 2 有GetEnumerable()这个方法 然后为啥实现这个接口或者有这个方法就可以实现foreach遍历 首先我先用 ...
- 《sed的流艺术之四》-linux命令五分钟系列之二十四
本原创文章属于<Linux大棚>博客,博客地址为http://roclinux.cn.文章作者为rocrocket. 为了防止某些网站的恶性转载,特在每篇文章前加入此信息,还望读者体谅. ...