Bootstrap前端框架入门

2025-01-11 技术教程

bootstrap下载：http://v3.bootcss.com/getting-started/

bootstrap中文文档：http://www.bootcss.com/

jquery下载：http://jquery.com/download/

工具：HBuilder

下载地址：http://www.dcloud.io/

下面是我刚学习的例子，主要是熟悉bootstrap自带的class.

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><linkrel="stylesheet"href="css/bootstrap.min.css"/><linkrel="stylesheet"type="text/css"href="css/mybs.css"/><scripttype="text/javascript"src="js/jquery-2.1.4.min.js"></script><scripttype="text/javascript"src="js/bootstrap.min.js"></script></head><body><navclass="navnavbar-inversenavbar-fixed-top"role="navigation"><divclass="container-fluid"><divclass="navbar-header"><buttonclass="navbar-toggle"data-toggle="collapse"data-target=".navbar-collapse"><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button><ahref=""class="navbar-brand"><imgsrc="img/logo.png"/></a></div><divclass="collapsenavbar-collapse"><ulclass="navnavbar-nav"><liclass="active"><ahref="">首页</a></li><li><ahref="">笑话</a></li><li><ahref="">文章</a></li><liclass="dropdown"><ahref=""class="dropdown-toggle"data-toggle="dropdown">编程<spanclass="caret"></span></a><ulclass="dropdown-menu"><liclass="dropdown-submenu"><ahref="">Python</a><ulclass="dropdown-menu"><li><ahref="">python_1</a></li><liclass="divider"></li><li><ahref="">python_2</a></li></ul></li><liclass="divider"></li><li><ahref="">C++</a></li></ul></li></ul><divclass="navbar-formnavbar-right"><divclass="form-group"><divclass="input-group"><inputtype="text"class="form-control"placeholder="请输入关键字"/><divclass="input-group-btn"><buttonclass="btnbtn-block"><spanclass="glyphiconglyphicon-search">搜索</span></button></div></div></div><divclass="form-group"><ahref=""class="navbar-link">登录</a><span>|</span><ahref=""class="navbar-link">注册</a></div></div></div></div></nav><div></div><divclass="container"><h2class="page-header"><spanclass="glyphiconglyphicon-user">用户登录</span></h2><formclass="form-horizontal"><divclass="form-group"><divclass="col-md-4"><inputtype="text"class="form-control"placeholder="用户名/Email"/></div></div><divclass="form-group"><divclass="col-md-4"><inputtype="password"class="form-control"placeholder="密码"/></div></div><divclass="form-group"><divclass="col-md-4"><buttonclass="btn-primary">登录</button></div></div></form></div><div></div><divclass="container"><divclass="row"><divclass="col-md-6"><ulid="mytab"class="navnav-tabs"><liclass="active"><ahref="#xw1"data-toggle='tab'>新闻1</a></li><li><ahref="#xw2"data-toggle='tab'>新闻2</a></li></ul><divclass="tab-content"><divclass="tab-panefadeinactive"id='xw1'><p><ahref="">openstack百花争鸣</a><spanclass="pull-right">2015-10-1</span></p><p><ahref="">openstack百花争鸣</a><spanclass="pull-right">2015-10-1</span></p><p><ahref="">openstack百花争鸣</a><spanclass="pull-right">2015-10-1</span></p><p><ahref="">openstack百花争鸣</a><spanclass="pull-right">2015-10-1</span></p><p><ahref="">openstack百花争鸣</a><spanclass="pull-right">2015-10-1</span></p><p><ahref="">openstack百花争鸣</a><spanclass="pull-right">2015-10-1</span></p></div><divclass="tab-panefade"id='xw2'><p><ahref="">openstack百花争鸣</a><spanclass="pull-right">2015-10-2</span></p><p><ahref="">openstack百花争鸣</a><spanclass="pull-right">2015-10-2</span></p><p><ahref="">openstack百花争鸣</a><spanclass="pull-right">2015-10-2</span></p><p><ahref="">openstack百花争鸣</a><spanclass="pull-right">2015-10-2</span></p><p><ahref="">openstack百花争鸣</a><spanclass="pull-right">2015-10-2</span></p><p><ahref="">openstack百花争鸣</a><spanclass="pull-right">2015-10-2</span></p></div></div></div></div><divclass="row"><divclass="col-md-12"><ulclass="breadcrumb"><li><ahref="">开发语言</a></li><li><ahref=""class="text-muted">web应用</a></li></ul></div></div></div><div></div><divclass="container"><divclass="row"><divclass="col-md-4"><divclass="thumbnail"><imgsrc="img/logo.png"/><divclass="caption"><h4><ahref="http://www.cloud.net">云官网</a></h4><p>创业公司</p></div></div></div><divclass="col-md-4"><divclass="thumbnail"><imgsrc="img/logo.png"/><divclass="caption"><h4><ahref="http://www.cloud.net">云官网</a></h4><p>创业公司</p></div></div></div><divclass="col-md-4"><divclass="thumbnail"><imgsrc="img/logo.png"/><divclass="caption"><h4><ahref="http://www.cloud.net">云官网</a></h4><p>创业公司</p></div></div></div><divclass="col-md-4"><divclass="thumbnail"><imgsrc="img/logo.png"/><divclass="caption"><h4><ahref="http://www.cloud.net">云官网</a></h4><p>创业公司</p></div></div></div><divclass="col-md-4"><divclass="thumbnail"><imgsrc="img/logo.png"/><divclass="caption"><h4><ahref="http://www.cloud.net">云官网</a></h4><p>创业公司</p></div></div></div><divclass="col-md-4"><divclass="col-md-6"><divclass="thumbnail"><imgsrc="img/logo.png"/><divclass="caption"><h4><ahref="http://www.cloud.net">云官网</a></h4><p>创业公司</p></div></div></div><divclass="col-md-6"><divclass="page-header"><h3>openstack介绍</h3></div><p>openstack介绍</p></div></div></div></div><divclass="container-fluid"><divclass="col-md-9"><divclass="list-group"><divclass="list-group-item"><ahref=""><h5>openstackorg</h5></a><small>发布时间：2015-2-11</small><smallclass="pull-right">点击量：<spanclass="badge">20</span></small><pclass="text-muted">********************************************************************************************************************************************************************************</p><p><spanclass="badge">奇犽</span><spanclass="badge">小杰</span></p></div><div></div><divclass="list-group-item"><ahref=""><h5>openstackorg</h5></a><small>发布时间：2015-2-11</small><smallclass="pull-right">点击量：<spanclass="badge">20</span></small><pclass="text-muted">********************************************************************************************************************************************************************************</p><p><spanclass="badge">奇犽</span><spanclass="badge">小杰</span></p></div><div></div><divclass="text-center"><ulclass="pagination"><li><ahref="">«</a></li><li><ahref="">1</a></li><li><ahref="">2</a></li><li><ahref="">3</a></li><li><ahref="">4</a></li><li><ahref="">5</a></li><li><ahref="">»</a></li></ul></div></div></div></div><scripttype="text/javascript">//$('#mytaba[href="#xw2"]').tab('show');//$('#mytaba:last').tab('show');//$('#mytabli:eq(0)a').tab('show');$('#mytab').on('shown.bs.tab',function(e){vartxt=$(e.target).attr('href');varpretxt=$(e.relatedTarget).attr('href');$(txt).html($(pretxt).html());//$('#xw2').html('yao');})</script></body></html>