bootstrap教程，SQL_ZenDei技術網路在線

版權聲明：未經博主允許不得轉載 SQL DDL數據定義語言 TPL事務處理語言 DCL數據控制語言 DML數據操作語言 DML SELECT INSERT UPDATE DELETE Join從句 Join: 內連接INNER 全外連接FULL OUTER 左外連接LEFT OUTER 右外連接RI ...

版權聲明：未經博主允許不得轉載

標題圖

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

<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

SQL

DML