day01-01-bootstrap基础
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta http-equiv = " X-UA-Compatible" content = " IE=edge" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Document</ title>
< link rel = " stylesheet" href = " css/bootstrap.css" >
</ head>
< body>
< p> 段落01</ p>
< p> 段落02</ p>
< p> 段落03</ p>
< h1> Bootstrap 框架--字体大小是36px</ h1>
< div class = " h1" > Bootstrap</ div>
< span class = " h1" > Bootstrap</ span>
< h2> Bootstrap 框架--字体大小是30px < small> 副标题</ small> </ h2>
< h3> Bootstrap 框架--字体大小是24px</ h3>
< h4> Bootstrap 框架--字体大小是18px</ h4>
< h5> Bootstrap 框架--字体大小是14px</ h5>
< h6> Bootstrap 框架--字体大小是12px</ h6>
</ body>
</ html>
day01-02-内敛文本元素
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta http-equiv = " X-UA-Compatible" content = " IE=edge" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Document</ title>
< link rel = " stylesheet" href = " css/bootstrap.css" >
</ head>
< body>
< strong> 加粗</ strong>
< b> 加粗</ b>
< em> 字体倾斜</ em>
< i> 字体倾斜</ i>
< del> 删除线</ del>
< s> 删除线标签</ s>
< ins> 插入标签</ ins>
< u> 下划线</ u>
< span> 正常的</ span>
< small> 小的</ small>
< mark> 标记标签</ mark>
</ body>
</ html>
day01-03-对齐
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta http-equiv = " X-UA-Compatible" content = " IE=edge" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Document</ title>
< link rel = " stylesheet" href = " css/bootstrap.css" >
</ head>
< body>
< p class = " text-left" > 左对齐</ p>
< p class = " text-right" > 右对齐</ p>
< p class = " text-center" > 居中对齐</ p>
< p class = " text-justify" > 疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控</ p>
< p class = " text-nowrap" > 疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控</ p>
< p style = " white-space : nowrap; " > 疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控疫情防控</ p>
</ body>
</ html>
day01-04-大小写
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta http-equiv = " X-UA-Compatible" content = " IE=edge" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Document</ title>
< style>
.text-uppercase {
text-transform : uppercase;
}
.text-lowercase {
text-transform : lowercase;
}
.text-capitalize {
text-transform : capitalize;
}
</ style>
</ head>
< body>
< p class = " text-uppercase" > welcome come to shanghai</ p>
< p class = " text-lowercase" > welcome COME TO shanghai</ p>
< p class = " text-capitalize" > welcome come to shanghai</ p>
Bootstrap< abbr title = " Bootstrap" > 框架</ abbr>
</ body>
</ html>
day01-05-排版样式
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta http-equiv = " X-UA-Compatible" content = " IE=edge" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Document</ title>
< link rel = " stylesheet" href = " css/bootstrap.css" >
</ head>
< body>
< address>
< strong> Twitter, Inc.</ strong> < br> 795 Folsom Ave, Suite 600< br>
San Francisco, CA 94107< br>
< abbr title = " Phone" > P:</ abbr> (123) 456-7890
</ address>
< blockquote>
引用
</ blockquote>
< blockquote class = " blockquote-reverse" >
反向引用
</ blockquote>
< ul class = " list-unstyled" >
< li> 列表1</ li>
< li> 列表2</ li>
< li> 列表3</ li>
</ ul>
< ul class = " list-inline" >
< li> 列表1</ li>
< li> 列表2</ li>
< li> 列表3</ li>
</ ul>
< dl class = " dl-horizontal" >
< dt> Bootstrap</ dt>
< dd> Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。</ dd>
</ dl>
< dl>
< dt> Bootstrap</ dt>
< dd> Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。</ dd>
</ dl>
< code> < div> </ code>
< kbd> ctrl+s</ kbd>
< pre> < p> Please input...< /p> </ pre>
</ body>
</ html>
day01-06-表格
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta http-equiv = " X-UA-Compatible" content = " IE=edge" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Document</ title>
< link rel = " stylesheet" href = " css/bootstrap.css" >
</ head>
< body class = " table-responsive" >
< table class = " table table-striped table-hover" >
< tr>
< th> 课程名称</ th>
< th> 学员姓名</ th>
< th> 操作</ th>
</ tr>
< tr class = " success" >
< td> HTML+CSS</ td>
< td> 二哥</ td>
< td>
< button> 修改</ button>
< button> 删除</ button>
</ td>
</ tr>
< tr class = " info" >
< td> HTML5+CSS3</ td>
< td> 二哥</ td>
< td>
< button> 修改</ button>
< button> 删除</ button>
</ td>
</ tr>
< tr class = " warning" >
< td> JavaScript</ td>
< td> 二哥</ td>
< td>
< button> 修改</ button>
< button> 删除</ button>
</ td>
</ tr>
< tr class = " danger sr-only" >
< td> jQuery</ td>
< td> 二哥</ td>
< td>
< button> 修改</ button>
< button> 删除</ button>
</ td>
</ tr>
< tr class = " active" >
< td> jQuery</ td>
< td> 二哥</ td>
< td>
< button> 修改</ button>
< button> 删除</ button>
</ td>
</ tr>
</ table>
</ body>
</ html>
day01-07-按钮
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta http-equiv = " X-UA-Compatible" content = " IE=edge" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Document</ title>
< link rel = " stylesheet" href = " css/bootstrap.css" >
</ head>
< body>
< button class = " btn btn-default" > 普通按钮</ button>
< button class = " btn btn-success" > 成功按钮</ button>
< button class = " btn btn-warning" > 警告按钮</ button>
< button class = " btn btn-danger" > 危险按钮</ button>
< button class = " btn btn-info" > 信息按钮</ button>
< button class = " btn btn-primary" > 主要按钮</ button>
< button class = " btn btn-link" > 链接按钮</ button>
< a href = " " class = " btn btn-success" role = " button" > 成功</ a>
< input type = " button" class = " btn btn-danger" value = " 危险按钮" >
< div>
< button class = " btn btn-success btn-lg" > 大的按钮btn-lg</ button>
< button class = " btn btn-success" > 正常大小的按钮</ button>
< button class = " btn btn-success btn-sm" > 小的按钮btn-sm</ button>
< button class = " btn btn-success btn-xs" > 超小的按钮btn-xs</ button>
</ div>
< div>
< button class = " btn btn-success btn-block" > 自适应屏幕宽度btn-block</ button>
</ div>
< div>
< button class = " btn btn-primary active" > 按钮激活状态</ button>
< button class = " btn btn-primary disabled" > 按钮禁用状态</ button>
</ div>
</ body>
</ html>
day01-08-表单
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta http-equiv = " X-UA-Compatible" content = " IE=edge" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Document</ title>
< link rel = " stylesheet" href = " css/bootstrap.css" >
< style>
.login {
width : 500px;
height : 300px;
margin : 100px auto;
}
</ style>
</ head>
< body>
< div class = " login" >
< form action = " " class = " form-block" >
< div class = " form-group" >
< label for = " " > 用户名</ label>
< input type = " text" class = " form-control" placeholder = " 用户名" >
</ div>
< div class = " form-group" >
< label for = " " > 密码</ label>
< input type = " password" class = " form-control" placeholder = " 密码" >
</ div>
< div class = " form-group input-group" >
< input type = " text" class = " form-control" >
< div class = " input-group-addon" >
###
</ div>
</ div>
< div class = " form-group input-group" >
< div class = " input-group-addon" >
< input type = " checkbox" >
</ div>
< input type = " text" class = " form-control" >
< div class = " input-group-addon" >
###
</ div>
</ div>
< div class = " form-group input-group" >
< div class = " input-group-addon" >
< input type = " checkbox" >
</ div>
< input type = " text" class = " form-control" >
</ div>
< div class = " form-group" >
< div class = " checkbox" >
< label>
< input type = " checkbox" > 敲代码
</ label>
< label>
< input type = " checkbox" > 打豆豆
</ label>
</ div>
</ div>
< div class = " form-group" >
< div class = " radio" >
< label>
< input type = " radio" name = " sex" > 男
</ label>
< label>
< input type = " radio" name = " sex" > 女
</ label>
</ div>
</ div>
< div class = " form-group" >
< select name = " " id = " " class = " form-control" >
< option value = " " > 郑州</ option>
< option value = " " > 杭州</ option>
< option value = " " > 广州</ option>
< option value = " " > 其他</ option>
</ select>
</ div>
< div class = " form-group" >
< button class = " btn btn-primary btn-block" > 登录</ button>
</ div>
</ form>
</ div>
</ body>
</ html>
day01-09-表单-登录
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta http-equiv = " X-UA-Compatible" content = " IE=edge" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Document</ title>
< link rel = " stylesheet" href = " css/bootstrap.css" >
< script src = " js/jquery-1.7.2.min.js" > </ script>
< style>
.login {
width : 500px;
height : 300px;
margin : 100px auto;
}
</ style>
</ head>
< body>
< div class = " login" >
< form action = " " >
< div class = " form-group" style = " position : relative; " >
< input type = " text" id = " username" required name = " username" class = " form-control input-lg"
autocomplete = " off" placeholder = " 手机号/邮箱" >
< span class = " glyphicon glyphicon-ok form-control-feedback hide" > </ span>
< span class = " glyphicon glyphicon-remove form-control-feedback hide" style = " top : 6px" > </ span>
</ div>
< div class = " form-group" style = " position : relative; " >
< input type = " password" id = " password" required name = " password" class = " form-control input-lg"
placeholder = " 密码" >
< span class = " glyphicon glyphicon-ok form-control-feedback hide" > </ span>
< span class = " glyphicon glyphicon-remove form-control-feedback hide" style = " top : 6px" > </ span>
</ div>
< div class = " form-group" >
< button class = " btn btn-primary btn-block btn-lg" id = " login" > 登录</ button>
</ div>
</ form>
</ div>
< script>
var regPhone = / ^1[358][0-9]{9}$ /
var regEmail = / ^[0-9a-zA-Z_]{6,20}@[0-9a-zA-Z]+\.[a-zA-Z]{2,6}$ /
var regPassword = / ^[A-Z][0-9a-zA-Z]{5,19}$ /
$ ( "#username" ) . blur ( function ( ) {
var username = $ ( this ) . val ( )
var isUsername = regPhone. test ( username)
var isEmail = regEmail. test ( username)
console. log ( isUsername) ;
console. log ( isEmail) ;
if ( isUsername || isEmail) {
$ ( this ) . parent ( ) . removeClass ( "has-error" )
$ ( this ) . parent ( ) . addClass ( "has-success" )
$ ( this ) . parent ( ) . find ( ".glyphicon-ok" ) . removeClass ( "hide" )
$ ( this ) . parent ( ) . find ( ".glyphicon-remove" ) . addClass ( "hide" )
} else {
$ ( this ) . parent ( ) . removeClass ( "has-success" )
$ ( this ) . parent ( ) . addClass ( "has-error" )
$ ( this ) . parent ( ) . find ( ".glyphicon-ok" ) . addClass ( "hide" )
$ ( this ) . parent ( ) . find ( ".glyphicon-remove" ) . removeClass ( "hide" )
}
} )
$ ( "#password" ) . blur ( function ( ) {
if ( regPassword. test ( $ ( "#password" ) . val ( ) ) ) {
$ ( this ) . parent ( ) . removeClass ( "has-error" )
$ ( this ) . parent ( ) . addClass ( "has-success" )
$ ( this ) . parent ( ) . find ( ".glyphicon-ok" ) . removeClass ( "hide" )
$ ( this ) . parent ( ) . find ( ".glyphicon-remove" ) . addClass ( "hide" )
} else {
$ ( this ) . parent ( ) . removeClass ( "has-success" )
$ ( this ) . parent ( ) . addClass ( "has-error" )
$ ( this ) . parent ( ) . find ( ".glyphicon-ok" ) . addClass ( "hide" )
$ ( this ) . parent ( ) . find ( ".glyphicon-remove" ) . removeClass ( "hide" )
}
} )
</ script>
</ body>
</ html>