为了账号安全,请及时绑定邮箱和手机立即绑定
  • 添加 .navbar-fixed-bottom 类可以让导航条固定在底部<br> 添加 .navbar-static-top 类可创建一个与页面等宽度的导航条,随页面向下滚动而消失<br> 添加 .navbar-inverse 类可以改变导航条的外观。<br> 添加 .navbar-left 和 .navbar-right 工具类让导航链接、表单、按钮或文本对齐。
    查看全部
    3 采集 收起 来源:练习题

    2018-03-22

  • 打开标签页: $('#myTab a[href="#profile"]').tab('show'); $('#myTab a:firest').tab('show); $('#myTab a:last').tab('show'); $('#myTab li:eq(2) a').tab('show');
    查看全部
  • 1.Carousel是一个用于轮播内容的组件(bootstrap对于组件的实现是用data属性来实现的) Carousel基本结构如下图:<ol></ol>对应轮播图下面的小点点;ol下面的div对应轮播组件内容,而组件内容中的div可通过p、h来,设置图片文字,<a class="btn 其他按钮类名">来设置有超链接的按钮,如:下载;div下面的两个<a>对应轮播的用于鼠标切换的左右按钮 ol中的data-slid-to=“0”表示index(即缩影)为从0开始,这里<li>的个数及li中data-slid-to=“”的编号与下面轮播内容的个数相对应 http://img.mukewang.com/554cb5c00001a08012000530-120-68.jpg 限制轮播内容的height:只需在style下设置.carousel{height: ; blackground-color:#000;(没有图片的部分显示为黑色) } .carousel .item{height: ; background-color:#000;} .carousel img{ width:100%;} 还可另外设置间距,文字大小等。
    查看全部
    3 采集 收起 来源:滚动图片广告

    2018-03-22

  • 1.搭建基础的bootstrap页面 2.根据课程所学或官方文档先建立好导航条和基础栅格布局(左右两列) 3.左列制作成左侧导航,注意添加样式 4.右列是管理控制台,添加标题、按钮和下面的面板内容,内容为2列布局,面板使用bootstrap的panel 5.在面板中添加警告框、表格、徽章导航、进度条等多个组件 6.任务完成后,可以根据自己的想象,添加更多的组件
    查看全部
    3 采集 收起 来源:编程挑战

    2015-05-10

  • bootstrap是移动设备优先的,它针对移动设备的样式融合进了框架的每个角落 初始化框架使用的是Normalize.css 栅格结构(grid system) 栅格布局中所有的行必须放在class为container的容器中. 通过一系列的行(row)与列(column)的组合来创建页面布局, 自动分为最多12列,内容在列中. 栅格的class在屏幕宽度大于或等于阈值的设备上起作用,并针对小屏幕设备所设置的class覆盖掉 对所有按钮外部加上<div class="btn-group">后所有按钮会成为按钮组,bootstrap会自动为第一个及最后一个加圆角,这些按钮会连在一块。按钮的功能的实现可用js插件 js插件包括了所有jqury,可一次引入所有插件,也可单个引入
    查看全部

  • <!DOCTYPE html>

    <html lang="en">


    <head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>


    <!-- 1. 引入 bootstrap 的全局样式-->

    <link rel="stylesheet" href="dist/css/bootstrap.min.css">

    </head>


    <body>


    <h1 class="text-center">Hello World!</h1>


    <button class="btn btn-info center-block">我是按钮,按我一下</button>



    <!-- 2. 引入Jquery 文件-->

    <!--jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边)-->

    <script src="jquery/jquery-3.3.1.min.js"></script>

    <!-- 3. 引入bootstrap JavaScript -->

    <script src="dist/js/bootstrap.min.js"></script>

    </body>


    </html>



    查看全部
    3 采集 收起 来源:编程练习

    2018-06-05

  • V4版的话 第一行,col-md-4 第二行,第二个col-md-4 ml-auto 第三行,两个都col-md-4 ml-auto 第四行,col-md-6 ml-auto mr-auto
    查看全部
    3 采集 收起 来源:编程练习

    2017-09-16

  • 通过 data 属性:使用 data 属性可以很容易控制轮播(Carousel)的位置。 属性 data-slide 接受关键字 prev 或 next,用来改变幻灯片相对于当前位置的位置。 使用 data-slide-to 来向轮播床底一个原始滑动索引,data-slide-to="2" 将把滑块移动到一个特定的索引,索引从 0 开始计数。 data-ride="carousel" 属性用于标记轮播在页面加载时就开始动画播放。 通过 JavaScript:轮播(Carousel)可通过 JavaScript 手动调用,如下所示: $('.carousel').carousel()
    查看全部
    2 采集 收起 来源:编程练习

    2018-03-22

  • Bootstrap简单、灵活的用于搭建WEB页面的HTML、CSS、JavaScript的工具集。简洁强大的前端开发框架。
    查看全部
    2 采集 收起 来源:课程介绍

    2014-12-10

  • 功能实现
    查看全部
    2 采集 收起 来源:编程挑战

    2016-03-15

  • 素材准备:js需要新增下载几个文件 1、html5shiv.js 解决ie对html5的支持 2、jquery-1.11.1.min.js 3、respond.min.js 解决ie8对css3媒体查询的支持 4、jquery-1.11.1.min.map
    查看全部
  • 下拉菜单出不来的,把底下的jQuery引用链接换成这个 <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> 就能用了(解决方法1) 也可以直接下载到本地,然后链接过去就好
    查看全部
  • 应该是通过添加 .navbar-left 和 .navbar-right 工具类让导航链接、表单、按钮或文本对齐。两个类都会通过 CSS 设置特定方向的浮动样式。
    查看全部
    2 采集 收起 来源:练习题

    2015-04-23

  • 素材准备:js需要新增下载几个文件 1、html5shiv.js 解决ie对html5的支持 2、jquery-1.11.1.min.js 3、respond.min.js 解决ie8对媒体查询的支持 4、jquery-1.11.1.min.map
    查看全部
  • <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

     <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

    <title>Hello World</title>



    </head>


    <body>

    <nav class="navbar navbar-default" role="navigation">

        <div class="container-fluid">

        <div class="navbar-header">

            <a class="navbar-brand" href="#">某管理系统</a>

        </div>

        <div>

            <ul class="nav navbar-nav">

                <li class="active"><a href="#">首页</a></li>

               

                <li class="dropdown">

                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">

                        功能

                        <b class="caret"></b>

                    </a>

                    <ul class="dropdown-menu">

                        <li class="disabled"><a href="#" >业务功能</a></li>

                        <li><a href="#">信息建立</a></li>

                        <li><a href="#">信息查询</a></li>

                        <li><a href="#">信息管理</a></li>

                        <li class="divider"></li>

                        <li class="disabled"><a href="#" >系统功能</a></li>

                        <li><a href="#">设置</a></li>

                    </ul>

                </li>

                <li><a href="#">帮助</a></li>

            </ul>

        </div>

    <form class="navbar-form navbar-right">

    <div class="form">

    <input type="text" class="form-control" placeholder="用户名...">

    <input type="text" class="form-control" placeholder="密码...">

    <button type="submit" class="btn btn-default">登录</button>

    </div>

    </form>


        </div>

    </nav>




     <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

       <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </body>

    </html>


    查看全部
    2 采集 收起 来源:编程练习

    2019-07-23

首页上一页1234567下一页尾页

举报

0/150
提交
取消
课程须知
本课程针对Bootstrap基础知识进行概览式介绍,所以希望您已学习本网站的“玩转Bootstrap”课程知识点,同时希望您会使用HTML、CSS、JavaScript做简单的网页,如果您已具备jQuery基础知识会更好。
老师告诉你能学到什么?
1.了解Bootstrap框架基础知识。 2. 如何开始使用Bootstrap框架。 3. 如何运行初始代码,并修改成所需要的代码。 4. 如何利用Bootstrap制作响应式布局的网页。 5. 如何使用Bootstrap中的组件、插件及定制。

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!