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/

时间: 2024-10-12 15:21:33

Bootstrap3.0学习(一)的相关文章

Bootstrap3.0学习教程十七:JavaScript插件模态框

这篇文章中我们主要来学习一下JavaScipt插件模态框.在学习模态框之前,我们先来了解一下JavaScript插件吧. JavaScript插件概览 插件可以单个引入(使用Bootstrap提供的单个*.js文件),或一次性全部引入(使用bootstrap.js或压缩版的bootstrap.min.js). 不要将两份文件全部引入 bootstrap.js和bootstrap.min.js同样是包含了所有插件.区别是:一个没有压缩,一个进行了压缩. 插件之间的依赖 某些插件和CSS组件依赖于其

iOS开发——学习总结swift篇&amp;swift 2.0学习与总结一

swift 2.0学习与总结一 一:属性策略(OC中的叫法) strong: 在Swift中是默认的 weak: 通过weak关键词申明 weak var delegate: UITextFieldDelegate? readonly,readwrie 直接通过声明变量var,声明常量let的方式来指明 copy 通过@NSCopying指令声明. 值 得注意的是String,Array和Dictionary在Swift是以值类型(value type)而不是引用类型(reference typ

微软企业库5.0学习笔记(10)ASP.NET模块依赖注入

您可以使用HTTP模块,一个到ASP.NET HttpApplicationState类的扩展,在Global.asax编写代码强制ASP.NET在每一个页面请求时自动注入依赖的对象,就像在ASP.NET Web窗体应用程序中讨论的一样. 下列方法显示了一个合适的方法能够获取PreRequestHandlerExecute事件将它自己注入到ASP.NET的执行流水线,在每个页面请求中通过容器的BuildUp方法运行Http模块,并获取OnPageInitComplete事件.当OnPageIni

一起学ASP.NET Core 2.0学习笔记(二): ef core2.0 及mysql provider 、Fluent API相关配置及迁移

不得不说微软的技术迭代还是很快的,上了微软的船就得跟着她走下去,前文一起学ASP.NET Core 2.0学习笔记(一): CentOS下 .net core2 sdk nginx.supervisor.mysql环境搭建搭建好了.net core linux的相关环境,今天就来说说ef core相关的配置及迁移: 简介: Entity Framework(以下简称EF) 是微软以 ADO.NET 为基础所发展出来的对象关系对应 (O/R Mapping) 解决方案,EF Core是Entity

Spring 3.0 学习-DI 依赖注入_创建Spring 配置-使用一个或多个XML 文件作为配置文件,使用自动注入(byName),在代码中使用注解代替自动注入,使用自动扫描代替xml中bea

文章大纲 在xml中声明bean和注入bean 在xml中声明bean和自动注入bean 自动扫描bean和自动注入bean 对自动扫描bean增加约束条件 首次接触spring请参考 Spring 3.0 学习-环境搭建和三种形式访问 1.典型的Spring XML 配置文件表头 <?xml version="1.0" encoding="UTF-8"?><!-- 一般化的Spring XML 配置 --> <beans xmlns=

PHP OAUTH 2.0(学习)

记录 1.http://bshaffer.github.io/oauth2-server-php-docs/ 2.http://bshaffer.github.io/oauth2-server-php-docs/cookbook/ (step by step walkthough) 3.官网:http://oauth.net/2/ 4.demo:http://brentertainment.com/oauth2/ PHP OAUTH 2.0(学习),布布扣,bubuko.com

solr6.0学习

solr6.0学习(一)环境搭建准备工作:目前最新版本6.0.下载solr 6.0:Solr6.0下载JDK8 下载jdk1.8:jdk1.8[solr6.0是基于jdk8开发的]tomcat8.0 下载:tomcat8##################################在说明搭建环境之前,其实solr5.0之后 solr已经内置jetty服务器,可以自行启动.但是为了加入自己的特性,以及在solr基础之上的应用,此文章主要针对发布在tomcat8上.##############

Servlet3.0学习总结——基于Servlet3.0的文件上传

Servlet3.0学习总结(三)——基于Servlet3.0的文件上传 在Servlet2.5中,我们要实现文件上传功能时,一般都需要借助第三方开源组件,例如Apache的commons-fileupload组件,在Servlet3.0中提供了对文件上传的原生支持,我们不需要借助任何第三方上传组件,直接使用Servlet3.0提供的API就能够实现文件上传功能了. 一.使用Servlet3.0提供的API实现文件上传 1.1.编写上传页面 <%@ page language="java&

【Bootstrap3.0建站笔记三】AspNetPager分页,每一列都可排序

1.AspNetPager分页,实现每一列都可排序: (1).需要将默认排序字段放在HTML页面中. (2).排序字段放置为td节点的属性. 如图: 实现的效果图如: HTML代码: <div class="row"> <div class="col-lg-12 col-sm-12 col-xs-12 col-xxs-12"> <table class="table table-striped table-hover tabl