-
添加 .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>
查看全部
举报