Bootstrap 栅格 样式 组件 插件
-----------------------------起先是我们造成习惯，后来是习惯造成我们。
day 51
Bootstrap 官方网站: bootcss.com/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<style>
.item {
border: 1px solid red;
}
</style>
</head>
<body>
<div class="container-fluid">
<h3>栅格系统</h3> <div class="row"> <div class="col-md-1 item">.col-md-1</div>
<div class="col-md-1 item">.col-md-1</div>
<div class="col-md-1 item">.col-md-1</div>
<div class="col-md-1 item">.col-md-1</div>
<div class="col-md-1 item">.col-md-1</div>
<div class="col-md-1 item">.col-md-1</div>
<div class="col-md-1 item">.col-md-1</div>
<div class="col-md-1 item">.col-md-1</div>
<div class="col-md-1 item">.col-md-1</div>
<div class="col-md-1 item">.col-md-1</div>
<div class="col-md-1 item">.col-md-1</div>
<div class="col-md-1 item">.col-md-1</div> </div> <div class="row">
<div class="col-md-8 item">.col-md-8</div>
<div class="col-md-4 item">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4 item">.col-md-4</div>
<div class="col-md-4 item">.col-md-4</div>
<div class="col-md-4 item">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-8 item">.col-md-6</div>
<div class="col-md-6 col-sm-4 item">.col-md-6</div>
</div> </div> <hr> <h4> 列偏移</h4> <div class="row ">
<div class="col-md-3 item col-md-offset-3">Yuan</div>
</div> <h4>嵌套列</h4>
<div class="row">
<div class="col-md-6 item">666</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-6 item">123</div>
<div class="col-md-6 item">234</div>
</div>
</div>
</div> <h4>列排序</h4>
<div class="row">
<div class="col-md-9 item col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 item col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div> <hr>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<button class="btn btn-primary add_btn"> 添加</button>
<table class="table table-hover table-striped table-bordered">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>部门</th>
<th>薪水</th>
<th>操作</th>
</tr>
</thead>
<tbody class="tbody">
<tr class="danger">
<td>1</td>
<td>张三</td>
<td>23</td>
<td>保安</td>
<td>20000</td>
<td>
<button class="del btn btn-danger btn-sm">删除</button>
<button class="edit btn btn-info btn-sm">编辑</button>
</td>
</tr>
<tr class="success">
<td>2</td>
<td>李四</td>
<td>23</td>
<td>保安</td>
<td>20000</td>
<td>
<button class="del btn btn-danger btn-sm">删除</button>
<button class="edit btn btn-info btn-sm">编辑</button>
</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>24</td>
<td>销售</td>
<td>20000</td>
<td>
<button class="del btn btn-danger btn-sm">删除</button>
<button class="edit btn btn-info btn-sm">编辑</button>
</td>
</tr> </tbody>
</table>
</div> </div>
</div> </body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<script src="bootstrap/js/bootstrap.js"></script> </head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div> <!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul> <ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav> <div class="container"> <!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button> <!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<h1 class="text-center">Yuan先生!</h1>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<form>
<div class="form-group">
<label for="user">姓名</label>
<input type="text" class="form-control" id="user" placeholder="user">
</div>
<div class="form-group">
<label for="age">年龄</label>
<input type="text" class="form-control" id="age" placeholder="age">
</div>
<div class="form-group">
<label for="dep">部门</label>
<input type="text" class="form-control" id="dep" placeholder="dep">
</div>
<div class="form-group">
<label for="salary">薪水</label>
<input type="text" class="form-control" id="salary" placeholder="salary">
</div>
</form>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div> <span class="glyphicon glyphicon-shopping-cart"></span>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.left{
width: 15%;
height: 600px;
float: left;
background-color: wheat;
} .right{
float: left;
width: 85%;
height: 600px;
background-color: lightgray; } .title{
text-align: center;
line-height: 30px;
background-color: #0e90d2;
color: white;
}
.item{
padding: 10px;
} .hide{
display: none;
}
</style> <script src="jquery-3.3.1.js"></script>
</head>
<body> <div class="outer">
<div class="left">
<div class="item">
<div class="title">菜单一</div>
<ul class="con hide">
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
</div>
<div class="item">
<div class="title">菜单二</div>
<ul class="con hide">
<li>222</li>
<li>222</li>
<li>222</li>
</ul>
</div>
<div class="item">
<div class="title">菜单三</div>
<ul class="con hide">
<li>333</li>
<li>333</li>
<li>333</li>
</ul>
</div>
</div>
<div class="right"></div>
</div> <script> $(".title").click(function () { // $(this).next().removeClass("hide");
// $(this).parent().siblings().children(".con").addClass("hide")
// jquery 的链式操作
$(this).next().removeClass("hide").parent().siblings().children(".con").addClass("hide")
}) </script>
</body>
</html>
Bootstrap 栅格 样式 组件 插件的更多相关文章
- BootStrap一页通（样式+组件+插件）
bootstrap是一种前端框架,实现美观的页面效果.使用BootStrap的前期工作(注意顺序): <!DOCTYPT html>:因为Bootstrap用到了h5的特性,所以需要此步. ...
- Sweetalert模态对话框与Swiper轮播插件、Bootstrap样式组件、AdminLTE后台管理模板地址
Sweetalert纯JS模态对话框插件地址:http://mishengqiang.com/sweetalert/ AdminLTE后台管理模板系统地址(基于Bootstrap):https://a ...
- bootstrap风格的multiselect插件——类似邮箱收件人样式
在开发颗粒云邮箱的过程中,遇到了一个前端的问题,就是邮箱收件人的那个multiselect的input输入框.不仅能够多选,还要能够支持ajax搜索,把联系人搜索出来.就是类似下面的这个东西: 网上找 ...
- 巧用 BootStrap --- 栅格系统（布局）轻松搞定网页响应式布局！
摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Boots ...
- 第124天：移动web端-Bootstrap轮播图插件使用
Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中> 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Car ...
- 基于Metronic的Bootstrap开发框架经验总结（5）--Bootstrap文件上传插件File Input的使用
Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadi ...
- Bootstrap文件上传插件File Input的使用
基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用 Bootstrap文件上传插件File Input是一个不错的文件上传控件, ...
- bootstrap学习以及其插件
Bootstrap中文网地址,里面有bootstrap组件的下载与使用说明,现在使用bootstrap3: http://www.bootcss.com/ W3CSchool.CC里面有学习boots ...
- 前端组件库 - 搭建web app常用的样式/组件等收集列表(移动优先)
0. 前端自动化(Workflow) 前端构建工具 Webpack - module bundler Yeoman - a set of tools for automating developmen ...
随机推荐
- Spark操作parquet文件
package code.parquet import java.net.URI import org.apache.hadoop.conf.Configuration import org.apac ...
- Spring（mvc）思维导图
spring mvc简介与运行原理 Spring的模型-视图-控制器(MVC)框架是围绕一个DispatcherServlet来设计的,这个Servlet会把请求分发给各个处理器,并支持可配置的处理器 ...
- 记一次zookeeper单机伪集群分布
zookeeper的各版本(历史版本)下载地址:http://apache.org/dist/zookeeper/ 环境>:linux 下载的zookeeper解压成3个
- [20181130]control file sequential read.txt
[20181130]control file sequential read.txt --//昨天上午探究了大量控制文件读的情况,链接:http://blog.itpub.net/267265/vie ...
- web前端（10）—— 浮动，清除默认样式
文档流 web页面和ps等设计软件有本质的区别,web 网页的制作,是个“流”,从上而下 ,像 “织毛衣”,就跟编程语言一样,都是由上而下 而设计软件 ,想往哪里画东西,就去哪里画 文档流带来的最明显 ...
- Lua不显示小数点0的部分
我的环境:Unity3D 5.3.7p4 XLua版本v2.1.6 基于Lua5.3 (https://github.com/Tencent/xLua) 在Lua中数字不区分整型或浮点型,所有都是nu ...
- Windows安装paramiko和PyCharm工程导入
借鉴了CSDN博主Liam_Fang的paramiko安装 原文链接:https://blog.csdn.net/weixin_39912556/article/details/80543829 前提 ...
- n2
"express-ws": "^3.0.0", "devDependencies": { "socket.io": ...
- cookie 处理 以及模拟登陆
cookie的处理 1.手动处理: cookie封装到headers 2.自动处理: 1.获取一个session对象 2.使用session对象进行请求的发送 3.作用:在使用session进行请求发 ...
- 如何生成git ssh key
公司有自己的git版本控制,自己注册账号后,管理员同意,就可以查看项目代码了,但是要克隆的话需要在本地生成git ssh key 一.进入.ssh文件夹. cd ~/.ssh 若没有.ssh文件夹,则 ...