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 ...
随机推荐
- VS错误：#error 指令: Please use the /MD switch for _AFXDLL builds
我在做MFC时遇到过这个问题,解决方法如下: 修改设置:工程(Project)-> 属性(Properties)-> 配置属性(Configuration Properties)-> ...
- MySQL Innodb数据库误删ibdata1后MySQL数据库的恢复案例
上周,以前公司的同事朋友找我帮忙,看看能否帮忙恢复一个MySQL 数据库,具体情况为:数据库版本为MySQL 5.6(具体版本不清楚),也不清楚具体的数据库引擎; 没有数据库备份,只剩下数据库下面 ...
- java一个数分解的质因数java
import java.util.Scanner; /** * Created by Admin on 2017/3/18. */ public class Test01 { public stati ...
- [20180904]工作中一个错误.txt
[20180904]工作中一个错误.txt --//昨天看我提交一份修改建议,发现自己写的sql语句存在错误.--//链接:http://blog.itpub.net/267265/viewspace ...
- sql server 通用修改表数据存储过程
ALTER PROC [dbo].[UpdateTableData] ), ), ), ), ) AS BEGIN ) SET @sql ='UPDATE '+@TableName; --获取SqlS ...
- The operation could not be performed because OLE DB provider "SQLNCLI11" for linked server "SDSSDFCC...
The operation could not be performed because OLE DB provider "SQLNCLI11" for linked server ...
- LeetCode算法题-Balanced Binary Tree（Java实现）
这是悦乐书的第167次更新,第169篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第26题(顺位题号是110).给定二叉树,判断它是否是高度平衡的.对于此问题,高度平衡二 ...
- PXE 自动安装物理机 (DHCP服务由路由提供, 不能再配置)
目录 1. PXE 自动安装物理机 (DHCP服务由路由提供, 不能再配置) 1.1. 需要的软件 1.2. 启动 proxy dhcp 服务 1.3. 关键的几个配置文件 PXE 自动安装物理机 ( ...
- 《生命》第一集：Chanllenge of Life （生命的挑战）
开篇讲的是弗罗里达海岸的海豚用尾巴荡起浑水圈批量捕鱼,肯尼亚的猎豹用集体战术捕猎体积大于自己的鸵鸟,马达加斯加的变色龙用伪装的方式来偷袭昆虫,紧接着讲的是南极洲的食蟹海豹如何从天敌虎鲸的围捕中惊险逃脱 ...
- 解决：Vue刷新/载入页面，出现双括号闪现后消失
https://cn.vuejs.org/v2/api/#v-cloak v-cloak 不需要表达式 用法: 这个指令保持在元素上直到关联实例结束编译.和 CSS 规则如 [v-cloak] { d ...