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;



小标题

文本



.text-left

.text-center

.text-lowercase

.text-capitalize

黄色的标记

表格

.table-bordered

.table-striped

.table-hover

.table-condensed

表单



 
 





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


width,height,
user-scalable,initial-scale
maximum-scale,minimun-scale

文字单位

px em

网页开发的单位

rem

图标

https://v3.bootcss.com/components/

组件

字体图标，下拉菜单等。

role

aria-label

tabIndex

data

glyphicon

glyphicon-star




.dropdown
.dropdown-menu-right
divider


 
 
   
   
 
 


.input-group
.input-group-addon

分页

.pagination
.pager
.previous

进度条

.progress
.progress-bar-striped


 
 


列表

.list-group

.badge

.active


 
  
  
 


面板

.panel
.panel-body
.panel-footer

插件

Bootstrap.js

JQuery

学习data属性

css的position

标准流，定位和参数，实现网页布局，层级

标准流，浮动，定位

块级元素，内联元素



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







Brand




Link








 






.carousel{
height:500px;
background-color:#000;
}

.carousel .item{
height: 500px;
background-color:#000;
}

.carousel img{
width:100%;
}

如果觉得不错，那就点个赞吧！❤️
我的目标是——每天不断更