-
添加 .navbar-fixed-bottom 类可以让导航条固定在底部<br> 添加 .navbar-static-top 类可创建一个与页面等宽度的导航条,随页面向下滚动而消失<br> 添加 .navbar-inverse 类可以改变导航条的外观。<br> 添加 .navbar-left 和 .navbar-right 工具类让导航链接、表单、按钮或文本对齐。查看全部
-
打开标签页: $('#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://img1.sycdn.imooc.com//554cb5c00001a08012000530-120-68.jpg 限制轮播内容的height:只需在style下设置.carousel{height: ; blackground-color:#000;(没有图片的部分显示为黑色) } .carousel .item{height: ; background-color:#000;} .carousel img{ width:100%;} 还可另外设置间距,文字大小等。查看全部
-
1.搭建基础的bootstrap页面 2.根据课程所学或官方文档先建立好导航条和基础栅格布局(左右两列) 3.左列制作成左侧导航,注意添加样式 4.右列是管理控制台,添加标题、按钮和下面的面板内容,内容为2列布局,面板使用bootstrap的panel 5.在面板中添加警告框、表格、徽章导航、进度条等多个组件 6.任务完成后,可以根据自己的想象,添加更多的组件查看全部
-
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>
查看全部 -
V4版的话 第一行,col-md-4 第二行,第二个col-md-4 ml-auto 第三行,两个都col-md-4 ml-auto 第四行,col-md-6 ml-auto mr-auto查看全部
-
通过 data 属性:使用 data 属性可以很容易控制轮播(Carousel)的位置。 属性 data-slide 接受关键字 prev 或 next,用来改变幻灯片相对于当前位置的位置。 使用 data-slide-to 来向轮播床底一个原始滑动索引,data-slide-to="2" 将把滑块移动到一个特定的索引,索引从 0 开始计数。 data-ride="carousel" 属性用于标记轮播在页面加载时就开始动画播放。 通过 JavaScript:轮播(Carousel)可通过 JavaScript 手动调用,如下所示: $('.carousel').carousel()查看全部
-
Bootstrap简单、灵活的用于搭建WEB页面的HTML、CSS、JavaScript的工具集。简洁强大的前端开发框架。查看全部
-
功能实现查看全部
-
素材准备: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 设置特定方向的浮动样式。查看全部
-
素材准备: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>
查看全部
举报