随笔分类 -  bootstrap

bootstrap总结
摘要：1，相关链接： bootstrap中文网： http://v3.bootcss.com CDN加速服务： <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <!-- HTML5 shim and Respond.js for IE8 support of HTML 阅读全文
posted @ 2016-08-31 18:20 夜未央leo 阅读(184) 评论(0) 推荐(0)
分页浏览的导航栏Bootstrap和js两种方法
摘要：1，Bootstrap写法： 效果图： 代码： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" 阅读全文
posted @ 2016-05-20 12:35 夜未央leo 阅读(484) 评论(0) 推荐(0)
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 阅读(254) 评论(0) 推荐(0)
Bootstrap-进度条
摘要：效果： 代码： 阅读全文
posted @ 2016-05-19 21:46 夜未央leo 阅读(144) 评论(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 阅读(502) 评论(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 阅读(1128) 评论(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 阅读(162) 评论(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 阅读(1951) 评论(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 阅读(556) 评论(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 阅读(1736) 评论(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 阅读(386) 评论(0) 推荐(0)