bootstrap教程，SQL

落日映苍穹つ 2021-09-15 17:16 389阅读 0赞

![标题图][1240]

## 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][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/][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属性 ##

## 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][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][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>

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

[1240]: /images/20210724/057bbadcf6084bdaa716df58ed949997.png
[http_getbootstrap.com]: http://getbootstrap.com
[https_v3.bootcss.com_components]: https://v3.bootcss.com/components/
[http_cdn.bootcss.com_jquery_1.11.1_jquery.min.js]: http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js
[http_cdn.bootcss.com_bootstrap_3.2.0_js_bootstrap.min.js]: http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js