bootstrap教程，SQL

2018-07-15 本文已影响8人魔王哪吒

版权声明：未经博主允许不得转载

标题图

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>&times;</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>

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