boostrap页面布局以及功能实现

来源：互联网发布：萧山区网络问政编辑：程序博客网时间：2024/05/21 11:16
页面涉及html+css+jQuery+boostrap
<!DOCTYPE html><html><head leng="en"><meta charset="utf-8" /><title>boostrap-布局-实例2</title><link href="css/bootstrap.min.css" rel="stylesheet" /><link href="css/style-2.css" rel="stylesheet" /></head><body><div class="side-nav" role="navigation"><ul class="nav-side-nav">    <li><a href="#one" class="tooltip-side-nav"></a></li>        <li><a href="#two" class="tooltip-side-nav"></a></li>        <li><a href="#three" class="tooltip-side-nav"></a></li>        <li><a href="#four" class="tooltip-side-nav"></a></li>        <li><a href="#five" class="tooltip-side-nav"></a></li>    </ul></div><div class="onepage" id="one"><div class="onepage-bg" id="onepagebg">        <div class="container">        <div class="row">            <div class="title-text">                <div class="col-md-12 headfontsize">                    <h1 class="headh1content">运动风<br>一直流行至今</h1>                        <p>欢迎来到"我要运动"，我们是一个致力于为广大运动爱好者<br>提供方便快捷的场地、教练、培训等在线预订服务机互动交流平台</p>                        <p class="btn-app-stroe">                        <a href="#" class="btn btn-success btn-lg">立即注册，开始行动</a>                        </p>                                        </div>                </div>            </div>        </div>    </div></div><div class="twopage" id="two"><div class="twopage-text">    <h1 class="twopage-text-h1"> 选择你喜欢的运动风<img src="images/12.png" /></h1>    </div>    <div class="row">    <div class="twopage-curses col-md-4">        <a href="#">            <img src="images/01.jpg" />                <div class="classicon">                <h1>认真学习</h1>                    <h3><strong>学习这个运动项目</strong></h3>                </div>            </a>        </div>        <div class="twopage-curses col-md-4">        <a href="#">            <img src="images/02.jpg" />                <div class="classicon">                <h1>认真学习</h1>                    <h3><strong>学习这个运动项目</strong></h3>                </div>            </a>        </div>        <div class="twopage-curses col-md-4">        <a href="#">            <img src="images/03.jpg" />                <div class="classicon">                <h1>认真学习</h1>                    <h3><strong>学习这个运动项目</strong></h3>                </div>            </a>        </div>    </div>    <div class="twopagebtn">    <a href="#" class="btn btn-success btn-lg" id="twopage-easy">如果想选择运动，请选择这里</a>    </div></div><div class="threepage" id="three"><div class="threepage-bg" id="threepagebg">        <div class="threepagecontent">    <div class="threepagetext">                <h1>每天锻炼一小时，健康生活50年</h1>            <p>只要每天坚持锻炼，观察每天的的身体变化，积少成多，<br>那么身体就会越来越健康。</p>        </div>        <a href="#" class="btn btn-success btn-lg threepagebtncontent">快速注册</a>    </div>    </div></div><div class="fourpage" id="four"><div class="container">    <div class="fourpage-text">        <h1>运动前，准备好器材</h1><p>怎么运动，才能快速的展现出效果</p>        </div>        <div id="myCarousel" class="carousel slide">            <ol class="carousel-indicators">                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>                <li data-target="#myCarousel" data-slide-to="1"></li>                <li data-target="#myCarousel" data-slide-to="2"></li>            </ol>               <div class="carousel-inner">                <div class="item active">                    <img src="images/2.jpg" alt="First slide">                    <div class="carousel-caption">                    <h4>此处是标签</h4>                        <p>hello, 此处是主要说明部分</p>                    </div>                </div>                <div class="item">                    <img src="images/7.jpg" alt="Second slide">                    <div class="carousel-caption">                    <h4>此处是标签</h4>                        <p>hello, 此处是主要说明部分</p>                    </div>                </div>                <div class="item">                    <img src="images/9.jpg" alt="Third slide">                    <div class="carousel-caption">                    <h4>此处是标签</h4>                        <p>hello, 此处是主要说明部分</p>                    </div>                </div>            </div>            <a class="carousel-control left" href="#myCarousel"                 data-slide="prev">‹            </a>            <a class="carousel-control right" href="#myCarousel"                 data-slide="next">›            </a>            </div></div>    </div><div class="fivepage" id="five"><div class="fivepage-bg" id="fivepagebg">    <div class="container">        <div class="fivetext">            <h1>怎么运动，才能快速的展现出效果</h1>            </div>            <div class="fivebtncenter">            <div class="row">                <a href="#" class="col-md-4">                        <img src="images/five01.jpg" queyeicon  />                    </a>                     <a href="#" class="col-md-4">                        <img src="images/five02.jpg" queyeicon  />                    </a>                     <a href="#" class="col-md-4">                        <img src="images/five03.jpg" queyeicon  />                    </a>                 </div>            </div>            <div class="fivetextbtn">            <button type="button" class="btn btn-success btn-lg">运动运动运动员</button>                <p class="fivetext-btn">                只要每天坚持锻炼，观察每天的的身体变化，积少成多，<br>那么身体就会越来越健康。                </p>            </div>        </div>    </div></div><script src="js/jquery-3.2.1.min.js" /></script><script src="js/bootstrap.min.js" /></script></body></html>
效果图如下
阅读全文
0 0