Bootstrap
erdouzhang
这个作者很懒,什么都没留下…
展开
-
Bootstrap笔记5—关闭图标、浮动
Bootstrap中文网1.关闭、向下箭头1.1关闭如下button标签或者a标签都可以添加关闭类。用的时候直接选一个就可以。<button type="button" class="close" >×</button><a href="#" class="close">×</a>1.2 向下箭头(一般用于下拉框)<span class="caret"></span>2.内原创 2017-03-10 10:05:30 · 4244 阅读 · 0 评论 -
Bootstrap笔记4—表单
1.默认表单样式class="form-control"是宽度100%占满整个容器class="form-control"是两个表单之间相距15px;<div class="col-md-4"> <form action="#" method="post"> <fieldset> <legend>用户登录</legend> <原创 2017-03-08 13:43:28 · 1737 阅读 · 0 评论 -
Bootstrap笔记13—进度条、媒体对象
1.基础进度条 要写在<div class="progress"></div>里面。<div class="col-md-6"> <div class="progress"> <div class="progress-bar" style="width:30%;"></div> </div></div>2.多彩进度条<div class="col-md-6">原创 2017-03-09 11:08:55 · 328 阅读 · 0 评论 -
Bootstrap笔记11—标签、徽章、大屏展播、页面标题
1.标签标签添加class="label"<h1>我们学习<span class="label label-default">Bootstrap</span></h1><h1>我们学习<span class="label label-danger">Bootstrap</span></h1><h1>我们学习<span class="label label-info">Bootstrap</spa原创 2017-03-09 10:30:12 · 397 阅读 · 0 评论 -
Bootstrap笔记8--选项卡+面板
<body> <div class="container"> <!-- tab选项卡 --> <ul class="nav nav-tabs"> <li class="active"><a href="#pan1" data-toggle="tab">发现</a></li> <li><a href="#pan2"原创 2017-02-13 11:53:52 · 2203 阅读 · 0 评论 -
Bootstrap笔记6—下拉菜单
1.普通下拉菜单<div class="dropdown"> <button type="button" class="btn btn-danger" data-toggle="dropdown" ><!--data-toggle="dropdown"使点击展示下拉菜单--> 下拉菜单 <span class="caret"></span> </but原创 2017-03-08 17:16:55 · 386 阅读 · 0 评论 -
Bootstrap笔记3—表格table
表格具体参考Bootstrap中文网手册。1.基础样式class="table"<table class="table"> <tr> <th>序号</th><th>姓名</th><th>年龄</th> </tr> <tr> <td>1</td><td>张三</td><td>18</td> </tr>原创 2017-03-08 12:36:54 · 567 阅读 · 0 评论 -
Bootstrap笔记12—缩略图、警告框
1. 基础缩略图给a标签添加类class="thumbnail"如下:<div class="row"> <div class="col-md-3 col-sm-6"> <a href="#" class="thumbnail"><img src="img/01.png" alt="图片"></a> </div> <div class="col-md-3 co原创 2017-03-09 10:38:52 · 393 阅读 · 0 评论 -
Bootstrap笔记10—导航条
1. 基础导航条给<nav>标签添加类class="navbar navbar-default"如下:<nav class="navbar navbar-default"> <div class="navbar-header"> <a href="#" class="navbar-brand">导航</a> </div> <ul class="nav navb原创 2017-03-08 18:57:41 · 441 阅读 · 0 评论 -
Bootstrap笔记9—导航
1.选项卡导航添加类nav-tabs如下:<h1>选项卡式导航</h1><ul class="nav nav-tabs"> <li class="active"><a href="#">首页</a></li> <li><a href="#">首页</a></li> <li><a href="#">首页</a></li> <li><a href="#">首页</a><原创 2017-03-08 18:55:36 · 352 阅读 · 0 评论 -
Bootstrap笔记7—折叠
折叠基础代码 <body> <div class="container"> <!-- 按钮 --> <button class="btn btn-default" data-toggle="collapse" data-target="#shows">按钮</button> <!-- 折叠内容 --> <div id="s原创 2017-02-13 14:38:46 · 1002 阅读 · 1 评论 -
Bootstrap笔记1--准备工作
1.准备库 Bootstrap库下载:http://download.csdn.net/detail/erdouzhang/9775679我把下面用到的库都统一放在lib目录下,便于引用。2.准备项目各个文件3.准备sass我是使用sass来编写css,如果你直接使用css那么第三步省略。如果也使用sass来编写css,请参考sass安装、sass编译成css(你也可以用gulp来自动生成,我原创 2017-03-08 10:03:17 · 400 阅读 · 0 评论 -
Bootsrtap笔记14—工具提示框、弹出框
1. 工具提示框工具提示框需要用js来实现,如下: 更改data-placement="left"中的值可改变提示方向”right”、”top”、”bottom”、”left”。html:<button type="button" class="btn btn-danger" title="向左显示" data-toggle="tooltip" data-placement="left">向左</原创 2017-03-09 13:27:02 · 308 阅读 · 0 评论 -
Bootstrap笔记2—禁止响应、清除浮动、图片响应式、媒体查询
1.禁止响应式1.移除<head>头标签里的下面这行meta标签<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no" >2.,class="container"改为id或其他类名并添加宽度#container { width: 960px; margin: 0 auto原创 2017-03-08 10:53:14 · 1655 阅读 · 0 评论