bootstrap

来源：互联网发布：阿里云服务器 yum 编辑：程序博客网时间：2024/06/11 22:41

1、什么是bootstrap?

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

2、为什么使用 Bootstrap？

移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。

浏览器支持：所有的主流浏览器都支持 Bootstrap。

响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。

3、简单的登录例子（bootstrap、不含验证码）

<script  language="javascript">//判断用户名、密码是否为空function doLogin(){var username=document.getElementById("username").value;var pwd=document.getElementById("pwd").value;var inter=document.getElementById("inner");var inter1=document.getElementById("inner1");if(username==""){inter.innerHTML="用户名不能为空";return false;}else{inter.innerHTML="";}if (pwd=="") {inter1.innerHTML="密码不能为空";return false;}else{inter1.innerHTML="";}}</script>

<body  data-spy="scroll" data-target=".navbar-example" style="height:300px;overflow:auto">  <div class="container a ">    <div class="row center-vertical">      <div class="col-sm-4 col-sm-offset-4 ">        <form action="" method="post"  >   <div class="input-control" align="center" style="margin-bottom: 10px"><h1>登录</h1>  </div>    <div class="input-group">      <span class="input-group-addon"> <a class="glyphicon glyphicon-user"></a>    </span><input class="form-control" type="text" name="username" id="username">    </div>    <div id="inner"></div>    <br>    <div class="input-group">      <span class="input-group-addon">  <a class="glyphicon glyphicon-lock"></a></span>                                                 <input class="form-control" type="password" name="password" id="pwd">    </div>    <div id="inner1"></div>    <br>    <div><p align="center"><button type="submit" id="submit" class="btn  btn-md btn-primary" onclick="return doLogin();">login</button></p><br><br><br>    </div>       </form>    </div>   </div> </div></body>

0 0