zoukankan      html  css  js  c++  java
  • Bootstrap3.0学习(一)

      Bootstrap是Twitter退出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态Css语言和Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。

                                                                                                        --摘自--百度百科

    准备工作:

    1、去官网下载bootstrap文件 http://v3.bootcss.com/getting-started/

    2、网站引用bootstrap文件

    注意:bootstrap脚本是建立在jquery基础上的,在引用bootstrap.min.js前需引用jquery,jquery版本支持1.9.1以上版本。

    一:导航栏

      

    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <ul class="nav nav-pills" >
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">首页 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Profile</a></li>
                        <li><a href="#">Messages</a></li>
                    </ul>
                </li>
                <li><a href="#">Home</a></li>
                <li><a href="#">Home</a></li>
                <li><a href="#">Home</a></li>
            </ul>
        </div>
        </nav>
    

      运行后效果为:

    二:Carousel 轮播

    <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <!--轮播指标-->
            <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" role="listbox">
                <div class="item active">
                    <img src="../Img/xx.png" />
                    <div class="container">
                        <div class="carousel-caption">标题1</div>
                    </div>
                </div>
                <div class="item">
                    <img src="../Img/xx.png" />
                    <div class="container">
                        <div class="carousel-caption">标题2</div>
                    </div>
                </div>
                <div class="item">
                    <img src="../Img/xx.png" />
                    <div class="container">
                        <div class="carousel-caption">标题3</div>
                    </div>
                </div>
            </div>
            <!--轮播导航-->
            <a class="carousel-control left" href="#myCarousel" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control right" href="#myCarousel" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    

      运行效果如图:

    用法:

    通过 data属性:使用data属性可以控制轮播的位置。

    属性data-slide接受关键字prev或next,用来改变幻灯片相对于当前位置的位置。

    使用data-ride="carousel"属性用于标记轮播在页面加载时就开始播放动画。

    通过javascript:可以通过 $('.carousel').carousel()手动调用。

    具体使用方法可以去bootstrap官网了解http://www.bootcss.com/  

  • 相关阅读:
    信号量的简单使用
    [Unity 3D] Unity 3D 性能优化(二)
    Android 开机动画源码分析
    关于FTP操作的功能类
    ArcGIS Engine 改变线IPolyline的方向
    使用ORACLE SQL Tuning advisor快速优化低效的SQL语句
    Linux CPU 负载度量公式
    Java垃圾回收机制
    常用的shell命令整理
    UVa340
  • 原文地址:https://www.cnblogs.com/zb-success/p/4110490.html
Copyright © 2011-2022 走看看