2016年5月19日
Bootstrap-缩略图
摘要： 效果图： 代码： <div class="container"> <ul class="media-list"> <li class="media"> <div class="media-left"> <a href="#"> <img src="1.jpg" style="width:64px;h 阅读全文
posted @ 2016-05-19 21:52 夜未央leo 阅读(224) 评论(0) 推荐(0) 编辑
Bootstrap-进度条
摘要： 效果： 代码： 阅读全文
posted @ 2016-05-19 21:46 夜未央leo 阅读(131) 评论(0) 推荐(0) 编辑
Bootstrap-点击“&#215;”，可以关闭页面
摘要： 效果： 代码： <div class="container"> <div class="alert alert-danger alert-dismissible" role="alert"> <strong>危险！</strong>这是一个危险动作，请关闭。 <button type="button 阅读全文
posted @ 2016-05-19 21:42 夜未央leo 阅读(483) 评论(0) 推荐(0) 编辑
Bootstrap页头
摘要： 效果图： 代码： <div class="container"> <div class="page-header"> <h1>Bootstrop的学习<small>今天主要介绍页头</small></h1> </div> <div class="row"> <div class="col-md-3 阅读全文
posted @ 2016-05-19 21:27 夜未央leo 阅读(1116) 评论(0) 推荐(0) 编辑
Bootstrap分页
摘要： 效果图 代码： <div class="container"> <nav> <ul class="pagination"> <li class="disabled"> <a href="#" aria-label="Previous"> <span aria-hidden="true">&laquo 阅读全文
posted @ 2016-05-19 20:28 夜未央leo 阅读(145) 评论(0) 推荐(0) 编辑
Bootstrap--面包屑路径导航
摘要： 效果图： 代码： <div class="container"> <ol class="breadcrumb"> <li><a href="#">极客学院</a></li> <li><a href="#">HTML</a></li> <li><a href="#">Bootstrop</a></li 阅读全文
posted @ 2016-05-19 20:24 夜未央leo 阅读(1932) 评论(0) 推荐(0) 编辑
Bootstrap--标签和徽章<新闻后面的new hot等>
摘要： 直接看效果吧！ 代码： <div class="container"> <h2>最近气温将会大幅上升<span class="label label-info">最新</span></h2> <h3>房价下跌了 <span class="label label-danger">hot</span>< 阅读全文
posted @ 2016-05-19 20:15 夜未央leo 阅读(533) 评论(0) 推荐(0) 编辑
Bootstrap-各式导航栏和下拉菜单
摘要： 1，最简单的下拉菜单 文件组成： 效果图： HTML代码： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="A 阅读全文
posted @ 2016-05-19 13:03 夜未央leo 阅读(1716) 评论(0) 推荐(0) 编辑
照片自动滑动，Bootstrap和js实现
摘要： 1.Bootstrap实现 包含的文件 HTML代码： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <titl 阅读全文
posted @ 2016-05-19 12:24 夜未央leo 阅读(369) 评论(0) 推荐(0) 编辑