一、Bootstrap演示
使用bootstrap,首先将bootstrap的css样式引入到文件当中
在html的head中引用css样式
<link rel="stylesheet" href="bootstrap.min.css">
例子:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Bootstrap</title> <link rel="stylesheet" href="bootstrap.min.css"> <style> body{ padding-top: 50px; } .starter{ padding: 40px 15px; text-align: center; } </style> </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <a href="#" class="navbar-brand">Project Name</a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About</a> </li> <li><a href="#">Contact</a> </li> </ul> </div> </div> </nav> <div class="container"> <div class="starter"> <h1>Bootstrap starter template</h1> <p class="lead">欢迎来到极客学院</p> </div> </div> </body> </html>
效果:
二、全局CSS样式-排版
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap.min.css"> </head> <body> <div class="container"> <h1>极客学院</h1> <h2>极客学院</h2> <h3>极客学院</h3> <h4>极客学院<small>欢迎您的到来</small></h4> <!--small标签为副标题--> <p>HELLO!</p> <p class="lead">Hello!<abbr title="attribute">hello</abbr></p> <!--lead属性为凸出显示--> <!--abbr的为缩略语--> <p>Hello World:欢迎来到<mark>极客学院</mark></p> <!--mark标签中有背景效果--> <!--文本的位置--> <p class="text-left">你好么?</p> <!--文本居左--> <p class="text-right">你好么?</p> <!--文本居右--> <p class="text-center">你好么?</p> <!--文本居中--> <!--改变字母的大小写--> <p class="text-lowercase">DDFAER</p> <!--指定字母小写--> <p class="text-uppercase">fafeafr</p> <!--指定字母大写--> <p class="text-capitalize">fdjidfjal</p> <!--指定首字母大写--> <!--联系方式--> <address> <strong>极客学院</strong> 北京市,海淀区<br/> 上地三街,嘉华大厦:1008 <br/> <abbr title="Phone">P:8888 8888</abbr> </address> <!--无样式列表--> <ul class="list-unstyled"> <li>1</li> <li>2</li> <li>3</li> </ul> </div> </body> </html>
效果:
三、Bootstrap栅格(重要)
使用时一定要包裹一个容器
<div class=”container”>...</div>
栅格所针对各个显示器不同的属性
Class:(1)col-xs-:针对设备(<768px)
(2)col-sm-:针对类似于ipad的显示器(>=768px)
(3)col-md-:针对小型的显示器(>=992px)
(4)col-lg-:针对大型的显示器(>=1200px)
例子:
<body> <div class="container"> <div class="row"> <div class="col-md-1">col-md-1</div> <div class="col-md-1">col-md-1</div> <div class="col-md-1">col-md-1</div> <div class="col-md-1">col-md-1</div> <div class="col-md-1">col-md-1</div> <div class="col-md-1">col-md-1</div> <div class="col-md-1">col-md-1</div> <div class="col-md-1">col-md-1</div> <div class="col-md-1">col-md-1</div> <div class="col-md-1">col-md-1</div> <div class="col-md-1">col-md-1</div> <div class="col-md-1">col-md-1</div> <div class="col-md-1">col-md-1</div> <!--这是第13个栅格--> </div> </div> </body>
一行只能承载12个栅格,所以第13个栅格就另起一行了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap.min.css"> <style> .row{ margin-bottom: 20px; } .row .row{ margin-top: 10px; margin-bottom: 0; } [class*="col-"]{ /*设置单元格边框样式*/ padding-top: 15px; padding-bottom: 15px; background-color: #eee; background-color: rgba(86,61,124,.15); border: 1px solid #ddd; border: 1px solid rgba(86,61,124,.2); } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-1">col-md-1</div> <div class="col-md-1">col-md-1</div> <div class="col-md-1">col-md-1</div> <div class="col-md-1">col-md-1</div> <div class="col-md-1">col-md-1</div> <div class="col-md-1">col-md-1</div> <div class="col-md-1">col-md-1</div> <div class="col-md-1">col-md-1</div> <div class="col-md-1">col-md-1</div> <div class="col-md-1">col-md-1</div> <div class="col-md-1">col-md-1</div> <div class="col-md-1">col-md-1</div> <div class="col-md-1">col-md-1</div> <!--这是第13个栅格--> </div> <div class="row"> <div class="col-md-3">col-md-1</div> <div class="col-md-3">col-md-1</div> <div class="col-md-3">col-md-1</div> <div class="col-md-3">col-md-1</div> </div> <div class="row"> <div class="col-md-3">col-md-1col-md-1col-md-1col-md-1col-md-1col-md-1col-md-1col-md-1col-md-1col-md-1</div> <div class="col-md-3">col-md-1</div> <div class="col-md-3">col-md-1</div> </div> <!--操作偏移[col-md-offset-4(偏移四格)]--> <div class="row"> <div class="col-md-4 col-md-offset-4">col-md-4</div> </div> <!--栅格中可进行嵌套使用--> <div class="row"> <div class="col-sm-9"> one <div class="row"> <div class="col-xs-8"> first </div> <div class="col-xs-4"> two </div> </div> </div> </div> <!--对列进行排序--> <div class="row"> <!--要将col-md-3排在col-md-9的前面--> <div class="col-md-9 col-md-push-3">col-md-9</div> <div class="col-md-3 col-md-pull-9">col-md-3</div> </div> </div> </body> </html>
效果:
四、CSS代码
显示代码编写的样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap.min.css"> </head> <body> <div class="container"> For example <code><section></code> as inline; 我希望现在能键入<kbd>cmd</kbd>命令 <pre> <!--代码段--> Sample text here.... </pre> <var>x</var> = <var>y</var> + <var>z</var> <!--斜体效果--><br/> <samp>hello world</samp> <!--程序输出--> </div> </body> </html>
效果:
五、CSS表格
<table class="table table-striped table-bordered table-hover"> .... </table>
Table-striped:斑马线效果
Table-bordered:表格边框
Table-hover:鼠标悬停(鼠标停在表格中会出现一点效果)
<table class="table table-condensed"> ... </table>
Table-condensed:紧凑型表格
给单元格指定颜色
<thead> <tr class="active"> <th>表格标题</th> <th>表格标题</th> <th>表格标题</th> </tr> </thead> <tbody> <tr class="success"> <td>表格单元格</td> <td>表格单元格</td> <td>表格单元格</td> </tr> <tr class="info"> <td>表格单元格</td> <td>表格单元格</td> <td>表格单元格</td> </tr> <tr class="warning"> <td>表格单元格</td> <td>表格单元格</td> <td>表格单元格</td> </tr> </tbody>
效果:
表格占满整个浏览器的宽:
<div class="table-responsive"> <table class="table table-bordered"> ..... </table> </div>
效果:
六、CSS表单
日期表单:
<form role="form"> <div class="form-group"> <label>日期</label> <input type="date" class="form-control" placeholder="user"> </div> </form>
效果:
Email表单
<form role="form"> <div class="form-group"> <label>Email</label> <input type="email" class="form-control" placeholder="user"> </div> </form>
效果:
Placeholder属性的作用就是输入框中的默认数据
选择文件:
<div class="form-group"> <label>选择文件</label> <input type="file"> <p class="help-block">选择你需要的文件</p> </div>
效果:
内联表单:
<form role="form" class="form-inline"> ... </form>
Class属性中加上form-inline就编程了内联表单
必须要用到<label>
可以对label进行隐藏:
<label class="sr-only">...</label>
效果:
水平排列的表单:
<body> <form class="form-horizontal" role="form"> <div class="form-group"> <label class="col-sm-2 control-label">Email</label> <div class="col-sm-10"><input type="email" placeholder="Email" class="form-control"></div> </div> <div class="form-group"> <label class="col-sm-2 control-label">password</label> <div class="col-sm-10"><input type="password" placeholder="password" class="form-control"></div> </div> <div class="form-group"> <div class="col-sm-10 col-sm-offset-2"> <div class="checkbox"> <label> <input type="checkbox">记住密码 </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">登录</button> </div> </div> </form> </body>
效果:
表单所支持的控件:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap.min.css"> </head> <body> <form role="form"> <input type="text" class="form-control"> <!--支持输入框--> <textarea class="form-control" rows="5">Hello</textarea> <!--支持文本域textarea--> <div class="checkbox"> <!--复选按钮--> <label> <input type="checkbox" value=""> 吃橘子 <input type="checkbox" value=""> 吃苹果 </label> </div> <div class="radio"> <!--单选框--> <label> <input type="radio" name="optionRadios" checked> 男 </label> <label> <input type="radio" name="optionRadios" checked> 女 </label> </div> <select class="form-control"> <!--下拉选项框,若在select标签中加入multiple,则可全见--> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> <p class="form-control-static">请按照我的格式输入:[email protected]</p> <input class="form-control" type="text" placeholder="hello" disabled><br/> <input class="form-control" type="text" readonly> </form> </body> </html>
效果: