一、Bootstrap介绍
几个常用的网站：
- 下载插件：http://www.bootcdn.cn
- 图标：http://fontawesome.com/v4.7.0
- Bootstrap使用：http://www.bootcss.com/
二、基本使用的方法
-
支持移动端
head标签加：<meta name="viewport" content="width=device-width, initial-scale=1">
-
Normalize.css（初始化页面）
为了增强跨浏览器表现的一致性，我们使用了Normalize.css，这是由Nicolas Gallagher和Jonathan Neal维护的一个CSS 重置样式库。 -
样式类
1、栅格系统（必须包含在container中）1.每一行均分十二列 2.每一个人标签可以自定义占的列数 ：`col-x-xx`（x代表不同设备[lg,md,sm,xs] xx代表占的列[1~12]） 3.只有列能作为行的直接子元素（列和行搭配着用）2、常用的样式
表单等 -
常用的几个模板
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Bootstrap</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"> <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"> <style> .c{ height:100px; width:100px; } body{ background-color:#eee; } .c1{ background-color:red; } @media screen and (max-width:400px)/*在移动端进行修改样式*/ { .c1{ background-color:green; } } </style> </head> <body> <div class="container"> <div class="row">第一行 <!--col-xs-4:支持iPhonex的 占四列--> <div class="col-md-1 col-xs-4">占一列</div> <div class="col-md-10 col-xs-4">占十列</div> <div class="col-md-1 col-xs-4">占一列</div> <div class="col-md-5 col-md-offset-2">第二行左边空两列</div> <div class="col-md-5 col-md-push-3">推3列</div> </div> <div class="row">第二行</div> <div class="row">第三行</div> <div class="c1 c"></div> <h1>h1. Bootstrap heading <small>Secondary text</small> </h1> <h2>h2. Bootstrap heading <small>Secondary text</small> </h2> <h3>h3. Bootstrap heading <small>Secondary text</small> </h3> <h4>h4. Bootstrap heading <small>Secondary text</small> </h4> <h5>h5. Bootstrap heading <small>Secondary text</small> </h5> <h6>h6. Bootstrap heading <small>Secondary text</small> </h6> <!--字体突出--> <p class="lead"> 字体突出 </p> <!--高亮显示--> <p> <!--高亮显示--> 高亮 <mark>显示</mark> <!--删除线--> <del>原价：110</del> <!--插入文本--> <ins>插入文本</ins> <!--下画线--> <u>下画线</u> <!--重点强调--> <strong>重点强调</strong> <!--斜体--> <em>斜体</em> </p> <!--对齐--> <p class="text-left">Left aligned text.</p> <p class="text-center">Center aligned text.</p> <p class="text-right">Right aligned text.</p> <p class="text-justify">Justified text.</p> <p class="text-nowrap">No wrap text.</p> <!--登陆注册示例--> <div class="row"> <div class="col-md-4 col-md-offset-4"> <h1 class="text-center">请登陆</h1> <form class="form-horizontal"> <div class="form-group"> <label for="inputEmail3" class="col-sm-3 control-label">邮箱</label> <div class="col-sm-9"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-3 control-label">密码</label> <div class="col-sm-9"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <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-primary btn-block">Sign in</button> </div> </div> </form> </div> </div> <!--作业 信息采样一--> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">基本信息 <span class="glyphicon glyphicon-pushpin pull-right"></span></h3> </div> <div class="panel-body"> <form class="form-horizontal"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Email</label> <div class="col-sm-4"> <input type="email" class="form-control" id="inputEmail4" placeholder="Email"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">Password</label> <div class="col-sm-4"> <input type="password" class="form-control" id="inputPassword5" placeholder="Password"> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Email</label> <div class="col-sm-4"> <input type="email" class="form-control" id="inputEmail6" placeholder="Email"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">Password</label> <div class="col-sm-4"> <input type="password" class="form-control" id="inputPassword4" placeholder="Password"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> </div> </div> <div class="form-group"> <input type="file" id="exampleInputFile" class="col-sm-offset-2 col-sm-10"> <p class="help-block col-sm-offset-2 col-sm-10">Example block-level help text here.</p> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">属性</label> <div class="col-sm-10"> <div class="radio"> <label> <input type="radio" name="inlineRadioOptions">Option one is this and that—be sure to include why it's great </label> </div> <div class="radio"> <label> <input type="radio" name="inlineRadioOptions">Option one is this and that—be sure to include why it's great </label> </div> <div class="radio"> <label> <input type="radio" name="inlineRadioOptions" id="inlineRadio3">Option one is this and that—be sure to include why it's great </label> </div> </div> </div> </form> </div> <button class="btn btn-success pull-right">下一步</button> </div> <!--进度条--> <div class="progress"> <div id="myBar" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"> <span class="sr-only">45% Complete</span> </div> </div> <!--轮播图--> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="7c9f6a94f234b83a0af2315d92170e2b (1).jpeg" alt="..."> <div class="carousel-caption"> </div> </div> <div class="item"> <img src="7c9f6a94f234b83a0af2315d92170e2b (1).jpeg" alt="..."> <div class="carousel-caption"> ... </div> </div> ... </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <!--模态框--> <!-- Button trigger modal --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> <form class="form-horizontal"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Sign in</button> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> </div> <script src="jquery-3.2.1.min.js"></script> <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> <script> <!--进度条--> var width = 0; var t; function changWith(){ if(width<100) { width++; $("#myBar").css("width",width+"%").text(width+"%"); } else{ clearInterval(t); } } t = setInterval(changWith,200); </script> </body> </html>
登录页面展示
信息采取页面展示
模态框弹出页面展示
2155
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
