bootstrap教程,SQL
版权声明:未经博主允许不得转载
SQL
DDL数据定义语言
TPL事务处理语言
DCL数据控制语言
DML数据操作语言
DML
SELECT
INSERT
UPDATE
DELETE
Join从句
Join:
内连接INNER
全外连接FULL OUTER
左外连接LEFT OUTER
右外连接RIGHT OUTER
交叉连接CROSS
Bootstrap开发工具
Bootstrap开发工具:Jetstrap
下载地址:jetstrap.com
Bootstrap下载地址
官方:http://getbootstrap.com
中文:www.bootcss.com
Bootstrap可以排版,表格,表单,图片
标题
标题h1-h6
副标题small
h1:36px;h2:30px;h3:24px;
h4:18px;h5:14px;h6:12px;
<span class="h1"></span>
<small>小标题
文本
<p>
.text-left
.text-center
.text-lowercase
.text-capitalize
<mark></mark>黄色的标记
<del></del>
<ins></ins>
<u></u>
<strong></strong>
<p class="text-left"></p>
<p class="text-lowercase"></p>
表格
.table-bordered
.table-striped
.table-hover
.table-condensed
表单
<from class="form-inline" has-warning>
<div class="form-group">
<label for=""></label>
<input class="form-control" type="text"></input>
</div>
</from>
<button class="btn btn-default"></button>
btn-default
btn-success
btn-primary
btn-info
btn-warning
btn-danger
btn-link
btn-lg
btn-sm
btn-active
btn-block
disabled="disabled"
Bootstrap图片
.img-rounded
.img-circle
viewport
<meta>
width,height,
user-scalable,initial-scale
maximum-scale,minimun-scale
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no">
<link rel="stylesheet" href="css/bootstrap.min.css">
文字单位
px em
网页开发的单位
rem
图标
https://v3.bootcss.com/components/
组件
字体图标,下拉菜单等。
role
aria-label
tabIndex
data
glyphicon
glyphicon-star
<button class="btn btn-default">
<span class="glyphicon glyphicon-star"></span>
</button>
.dropdown
.dropdown-menu-right
divider
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
</button>
<ul class="dropdown-menu">
<li>
</li>
</ul>
<span class="caret"></span>
</div>
.input-group
.input-group-addon
<div class="input-group">
<span class="input-group-addon"></span>
<input type="text" class="form-control">
</div>
导航
.nav-tabs
.nav-pills
.nav-justified
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.1.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<ul class="nav nav-tabs">
<li></li>
</ul>
<ul class="nav nav-pills">
</ul>
<ul class="nav nav-pills nav-stacked">
</ul>
分页
.pagination
.pager
.previous
<nav>
<ul class="pagination">
<li class="active">
<a></a>
</li>
</ul>
</nav>
<ul class="pager">
</ul>
<nav>
<ul class="pager">
<li class="previous">
<a href="http:...">
</a>
</li>
<li class="next">
<a href="##">
</a>
</li>
</nav>
进度条
.progress
.progress-bar-striped
<div class="progress">
<div class="progress-bar" style="width:60%">
</div>
</div>
列表
.list-group
.badge
.active
<ul class="list-group">
<li class="list-group-item" active>
<span class="badge">
</span>
</li>
</ul>
面板
.panel
.panel-body
.panel-footer
<div class="panel panel-default">
<div class="panel-heading">
</div>
<div class="panel-body">
</div>
<div class="panel-footer">
</div>
</div>
插件
Bootstrap.js
JQuery
学习data属性
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.1.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary btn-lg"
data-toggle="modal" data-target="#myModal">
</button>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span>×</span><span class="sr-only"></span></button>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<button class="btn btn-danger btn-lg" data-toggle="modal" data-target="#danger>
</button>
<div id="danger">
</div>
css的position
标准流,定位和参数,实现网页布局,层级
标准流,浮动,定位
块级元素,内联元素
<a><span><img><input><div>
position-relative
static
relative 相对
absolute 绝对
fixed 固定
inherit 继承
top right left bottom
z-index
css3
CSS3是CSS2的升级版本,3只是版本号
-webkit chrome和safari
-moz firefox
-ms IE
-o opera
border-radius添加圆角边框
border-radius的值能用px单位还可以用百分比或者em
/*任务部分*/
div.semi-circle{
height:100px;
width:100px;
background:#9da;
border-radius:50px 0 0 50px;
}
阴影 box-shadow
设置内阴影 inset;
添加多个阴影
box-shadow:4px 2px 6px #f00, -4px -2px 6px #000;
阴影模糊半径值只能是为正值
阴影扩展半径可以是正负值
box-shadow:-4px 4px 6px #666;
border-image
round平铺
repeat重复
stretch拉伸
RGB是一种色彩标准
增加了控制alpha透明度的参数
color:rgba(R,G,B,A)
0.5的白色
background-color:rgba(255,255,255,0.5);
Gradient 分为线性渐变(linear)和径向渐变(radial)
background-image:linear-gradient(to left, red, orange,blue);
text-overflow 与 word-wrap
text-overflow一个省略标记
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
嵌入字体@font-face
文本阴影text-shadow
text-shadow: X-Offset Y-Offset blur color;
背景
background-origin
background-origin : border-box | padding-box | content-box;
background-clip裁剪
background-clip : border-box | padding-box | content-box | no-clip
background-size背景图片的大小
background-size: auto | <长度值> | <百分比> | cover | contain
auto:默认值,cover:顾名思义为覆盖
multiple backgrounds
multiple backgrounds
root
:root {
background:orange;
}
:root{background:orange}
html {background:orange;}
not
:not选择器称为否定选择器
input:not([type="submit"]){
border:1px solid red;
}
p:empty {
display: none;
}
target
first-child
ol > li:first-child{
color: red;
}
last-child
.post p:last-child {
margin-bottom:0;
}
nth-child(n)
ol > li:nth-child(2n){
background: orange;
}
nth-last-child(n)
ol > li:nth-last-child(5){
background: orange;
}
first-of-type选择器
.wrapper > p:first-of-type {
background: orange;
}
enabled选择器
CSS3-Meddia Query
device-width,device-height
width,height
orientation
resolution
bootstrap框架: //netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css
jquery库: http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js
bootstrap.min.js:http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js
navbar
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only"></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>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#"></a></li>
</ul>
</div>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li></li>
</ul>
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
</ol>
.carousel{
height:500px;
background-color:#000;
}
.carousel .item{
height: 500px;
background-color:#000;
}
.carousel img{
width:100%;
}
<style>
.carousel {
height: 500px;
}
.carousel .item {
height: 500px;
}
.carousel .item img {
width: 100%;
}
</style>
<div class="container">
<div class="row">
<div class="col-md-4"></div>
</div>
</div>
如果觉得不错,那就点个赞吧!❤️
我的目标是——每天不断更
bootstrap教程,SQL的更多相关文章
- Bootstrap 教程
Bootstrap,来自 Twitter,是基于 HTML.CSS.JAVASCRIPT 的简介灵活的流行前段框架及交互组件集. 内容列表 Bootstrap 教程 Bootstrap 教程 Boot ...
- Bootstrap教程
Bootstrap 教程 Bootstrap 教程
- bootstrap 教程分享
Bootstrap 教程 Bootstrap 简介 Bootstrap 环境安装 Bootstrap CSS 概览 Bootstrap 网格系统 Bootstrap 排版 Bootstrap 代码 B ...
- 更全的bootstrap教程连接
更全的bootstrap教程: http://www.jb51.net/article/84087.htm
- PostgreSQL(一)教程 -----SQL语言
一.概念 PostgreSQL是一种关系型数据库管理系统 (RDBMS).这意味着它是一种用于管理存储在关系中的数据的系统.关系实际上是表的数学术语. 今天,把数据存储在表里的概念已经快成了固有的常识 ...
- 教程-(SQL DBE、ADO连接)+(Firebird火鸟+DbExpress)+(VF DBF数据库)+(DB Paradox)
DBE 连接SQL Server显然用ADO或DBEXPRESS更有优势,起码连接起来比较方便. BDE的话可以用如下方法:(以下以Delphi7为例,其它版本的DELPHI请自己摸索一下,不过基本相 ...
- BootStrap教程完整版
http://www.runoob.com/bootstrap/bootstrap-navbar.html
- bootStrap 教程 文档
参考1: https://www.w3schools.com/bootstrap/default.asp 参考1:http://www.runoob.com/bootstrap/bootstrap-i ...
- Bootstrap教程目录
1.Bootstrap 简介(Web前端CSS框架) 2.Bootstrap 学习资料 3.Bootstrap 入门 4.Bootstrap 概览 5.Bootstrap 栅格系统 6.Bootstr ...
随机推荐
- html背景图星际导航图练习
html <body> <div class="box1"> <div></div> ...
- html迪士尼网页实现代码
html body> <div> <!-- 导航设置 --> <header> <nav ...
- 记账本,C,Github,service
package service; import java.util.Collections; import java.util.List; import dao.CategoryDAO; import ...
- elasticsearch template
# curl -XPUT localhost:9200/_template/template_1 -d '{"template" : "te*","s ...
- 配置Java运行环境
变量名:JAVA_HOME 变量值:D:\Program Files\Java\jdk1.8.0_151(java安装目录) 变量名:Path 变量值:.;%J ...
- EasyUI datagrid单元格文本超出显示省略号,鼠标移动到单元格显示文本
nowrap : true; 是前提 $('#×××').datagrid({ nowrap : true,//设置为true,当数据长度超出列宽时将会自动截取 }); 省略号样式: <sty ...
- Jstack定位CPU使用最多的线程及代码
jstack可以定位到线程堆栈,根据堆栈信息我们可以定位到具体代码,所以它在JVM性能调优中使用得非常多.下面我们来一个实例找出某个Java进程中最耗费CPU的Java线程并定位堆栈信息,用到的命令有 ...
- Mysql 提升大数据表的拷贝效率
工作上会经常遇到量级比较大的数据表 :场景: 该数据表需要进行alter操作 比如增加一个字段,减少一个字段. 这个在一个几万级别数据量的数据表可以直接进行alter表操作,但是要在一个接近1000 ...
- node.js中使用zlib模块进行数据压缩和解压
我们可以使用 zlib 模块来对数据进行压缩和解压处理,减小数据体积,加快传输速度. 一.通过创建转换流,对文件进行压缩和解压 const fs = require('fs'); const zlib ...
- c++ stl源码剖析学习笔记(二)iterator
ITERATOR 迭代器 template<class InputIterator,class T> InputIterator find(InputIterator first,Inpu ...