bootstrap下载:http://v3.bootcss.com/getting-started/
为姑苏等地区用户提供了全套网页设计制作服务,及姑苏网站建设行业解决方案。主营业务为成都做网站、网站设计、姑苏网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!
bootstrap中文文档:http://www.bootcss.com/
jquery下载:http://jquery.com/download/
工具:HBuilder
下载地址:http://www.dcloud.io/
下面是我刚学习的例子,主要是熟悉bootstrap自带的class.
login.html内容如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css/bootstrap.min.css" /> <link rel="stylesheet" type="text/css" href="css/mybs.css"/> <script type="text/javascript" src="js/jquery-2.1.4.min.js" ></script> <!-- 使用bootstrap.min.js必须先引入jquery.min.js,可以到jquery官网下载最新的 --> <script type="text/javascript" src="js/bootstrap.min.js" ></script> </head> <body> <!-- 导航栏 navbar-fixed-top: 上下滚动的时候,永远显示在顶部 --> <nav class="nav navbar-inverse navbar-fixed-top" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <!-- 设置隐藏按钮,跟下面的隐藏内容对应,当像素小于768px,会触发这个隐藏按钮 --> <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="" class="navbar-brand"> <!-- 导航航默认高度是50px,所以注意图片的height --> <img src="img/logo.png" /> </a> </div> <!-- 当浏览器窗口缩小的时候,隐藏这部分内容 --> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="">首页</a></li> <li><a href="">笑话</a></li> <li><a href="">文章</a></li> <!-- 下拉菜单 --> <li class="dropdown"> <a href="" class="dropdown-toggle" data-toggle="dropdown"> 编程 <span class="caret"></span> </a> <ul class="dropdown-menu"> <li class="dropdown-submenu"> <a href="">Python</a> <ul class="dropdown-menu"> <li><a href="">python_1</a></li> <li class="divider"></li> <li><a href="">python_2</a></li> </ul> </li> <li class="divider"></li> <li><a href="">C++</a></li> </ul> </li> </ul> <div class="navbar-form navbar-right"> <div class="form-group"> <div class="input-group"> <input type="text" class="form-control" placeholder="请输入关键字" /> <div class="input-group-btn"> <button class="btn btn-block"> <span class="glyphicon glyphicon-search">搜索</span> </button> </div> </div> </div> <div class="form-group"> <a href="" class="navbar-link">登录</a> <span >|</span> <a href="" class="navbar-link">注册</a> </div> </div> </div> </div> </nav> <div ></div> <!-- 用户登录表单 --> <div class="container" > <h2 class="page-header"><span class="glyphicon glyphicon-user">用户登录</span></h2> <form class="form-horizontal"> <div class="form-group"> <div class="col-md-4"> <input type="text" class="form-control" placeholder="用户名/Email" /> </div> </div> <div class="form-group"> <div class="col-md-4"> <input type="password" class="form-control" placeholder="密码" /> </div> </div> <div class="form-group"> <div class="col-md-4"> <button class="btn-primary">登录</button> </div> </div> </form> </div> <div ></div> <div class="container"> <!-- Tab标签 --> <div class="row"> <div class="col-md-6"> <ul id="mytab" class="nav nav-tabs"> <li class="active"> <!-- 两个tab标签--> <a href="#xw1" data-toggle='tab'>新闻1</a> </li> <li> <a href="#xw2" data-toggle='tab'>新闻2</a> </li> </ul> <div class="tab-content"> <div class="tab-pane fade in active" id='xw1'> <p><a href="">openstack百花争鸣</a><span class="pull-right">2015-10-1</span></p> <p><a href="">openstack百花争鸣</a><span class="pull-right">2015-10-1</span></p> <p><a href="">openstack百花争鸣</a><span class="pull-right">2015-10-1</span></p> <p><a href="">openstack百花争鸣</a><span class="pull-right">2015-10-1</span></p> <p><a href="">openstack百花争鸣</a><span class="pull-right">2015-10-1</span></p> <p><a href="">openstack百花争鸣</a><span class="pull-right">2015-10-1</span></p> </div> <div class="tab-pane fade" id='xw2'> <p><a href="">openstack百花争鸣</a><span class="pull-right">2015-10-2</span></p> <p><a href="">openstack百花争鸣</a><span class="pull-right">2015-10-2</span></p> <p><a href="">openstack百花争鸣</a><span class="pull-right">2015-10-2</span></p> <p><a href="">openstack百花争鸣</a><span class="pull-right">2015-10-2</span></p> <p><a href="">openstack百花争鸣</a><span class="pull-right">2015-10-2</span></p> <p><a href="">openstack百花争鸣</a><span class="pull-right">2015-10-2</span></p> </div> </div> </div> </div> <!-- 面包屑导航 --> <div class="row"> <div class="col-md-12"> <ul class="breadcrumb"> <li><a href="">开发语言</a></li> <li><a href="" class="text-muted">web应用</a></li> </ul> </div> </div> </div> <!-- 缩略图 --> <div ></div> <div class="container"> <div class="row"> <!-- bootstrap中一行只能包含12个列,多余的列会另起一行 --> <div class="col-md-4"> <div class="thumbnail"> <img src="img/logo.png"/> <div class="caption"> <h4><a href="http://www.cloud.net">云官网</a></h4> <p>创业公司</p> </div> </div> </div> <!-- 网格系统 --> <div class="col-md-4"> <div class="thumbnail"> <img src="img/logo.png"/> <div class="caption"> <h4><a href="http://www.cloud.net">云官网</a></h4> <p>创业公司</p> </div> </div> </div> <div class="col-md-4"> <div class="thumbnail"> <img src="img/logo.png"/> <div class="caption"> <h4><a href="http://www.cloud.net">云官网</a></h4> <p>创业公司</p> </div> </div> </div> <div class="col-md-4"> <div class="thumbnail"> <img src="img/logo.png"/> <div class="caption"> <h4><a href="http://www.cloud.net">云官网</a></h4> <p>创业公司</p> </div> </div> </div> <div class="col-md-4"> <div class="thumbnail"> <img src="img/logo.png"/> <div class="caption"> <h4><a href="http://www.cloud.net">云官网</a></h4> <p>创业公司</p> </div> </div> </div> <div class="col-md-4"> <!-- 嵌套网格 --> <div class="col-md-6"> <div class="thumbnail"> <img src="img/logo.png"/> <div class="caption"> <h4><a href="http://www.cloud.net">云官网</a></h4> <p>创业公司</p> </div> </div> </div> <div class="col-md-6"> <div class="page-header"> <h3>openstack介绍</h3> </div> <p>openstack介绍</p> </div> </div> </div> </div> <!-- 使用列表组 --> <div class="container-fluid"> <div class="col-md-9"> <div class="list-group" > <div class="list-group-item" > <a href=""><h5>openstack org</h5></a> <small>发布时间:2015-2-11</small> <small class="pull-right"> 点击量:<span class="badge">20</span> </small> <p class="text-muted"> ******************************************** ******************************************** ******************************************** ******************************************** </p> <p> <span class="badge">奇犽</span> <span class="badge">小杰</span> </p> </div> <div > </div> <div class="list-group-item" > <a href=""><h5>openstack org</h5></a> <small>发布时间:2015-2-11</small> <small class="pull-right"> 点击量:<span class="badge">20</span> </small> <p class="text-muted"> ******************************************** ******************************************** ******************************************** ******************************************** </p> <p> <span class="badge">奇犽</span> <span class="badge">小杰</span> </p> </div> <div > </div> <!-- 分页显示 --> <div class="text-center"> <ul class="pagination"> <!-- 向前箭头 --> <li><a href="">«</a></li> <li><a href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> <li><a href="">4</a></li> <li><a href="">5</a></li> <!-- 向后箭头 --> <li><a href="">»</a></li> </ul> </div> </div> </div> </div> <!-- tab触发切换 --> <script type="text/javascript"> //$('#mytab a[href="#xw2"]').tab('show'); //$('#mytab a:last').tab('show'); //$('#mytab li:eq(0) a').tab('show'); $('#mytab').on('shown.bs.tab',function(e){ var txt=$(e.target).attr('href'); var pretxt=$(e.relatedTarget).attr('href'); $(txt).html($(pretxt).html()); //$('#xw2').html('yao'); }) </script> </body> </html>
当前名称:Bootstrap前端框架入门
文章转载:https://www.cdcxhl.com/article18/peisgp.html
成都网站建设公司_创新互联,为您提供网站收录、虚拟主机、网站策划、手机网站建设、关键词优化、移动网站建设
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联