基于bootstrap的网页开发_技术笔记

首页课程实战体系课手记专栏慕课教程

慕函数9224229 2022-03-04

滚动广告 carousel
carousel-example-generic
点点导航：
carousel-indicators
轮播组件的内容：
.carousel-inner role:listbox
.carousel-caption
分页按钮：
.carousel-example-generic data-slide="prev"
左右按钮：glyphicon glyphicon-chevron-left、right

0赞 · 0采集
慕少3466256 2021-10-25

厉害了蹑手蹑脚睡觉睡觉睡觉忘记额几哈

0赞 · 0采集
longyb 2021-06-09

很有用

0赞 · 0采集
山水 2021-05-11

v3.3

截图
0赞 · 0采集
多鑫 2021-03-17

导航栏添加分割线Bootstrap中<li class="divider"></li>可以添加分割线
在 Bootstrap中，任何下拉菜单中均可通过添加标题来标明一组动作，添加方式为：<li class="dropdown-header">标题名称</li>。

0赞 · 0采集
多鑫 2021-03-17

导航条是在应用或网站中作为导航页头的响应式基础组件。
它在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。
响应式导航条在移动设备上默认折叠。

0赞 · 0采集
多鑫 2021-03-17

导航条navabar
1、添加类【navbar-fixed-top】可以让导航条固定在顶部
2、可以包含一个类为【container】或者类【container-fluid】的容器，从而让导航条居中或者自适应显示
3、通过添加类【navbar-inverse】可以改变导航条的外观，变成黑底显示
4、添加类【navbar-fixed-top】可以让导航条固定在顶部，固定的导航条会遮住页面上的其他内容，除非给<body>元素设置padding。导航条的默认高度为“50px”,比如设置body{padding-top:70px};

0赞 · 0采集
多鑫 2021-03-15

Bootstrap工作原理
①行必须包含在container这个容器中
② 使用行在行中组建一组列，内容放置在列中
③通过设置padding控制列之间间距，为第一列与最后一列设置负值的magin
来抵消padding的影响
④列是通过1~·12来控制跨越范围

0赞 · 0采集
多鑫 2021-03-15

Bootstrap中的JS插件依赖于Jquery。因此Jquery要在Bootstrap之前引用

0赞 · 0采集
论斤烤 2021-01-20

打开标签页

截图
0赞 · 0采集
论斤烤 2021-01-20

弹出框代码

截图
0赞 · 0采集
论斤烤 2021-01-18

滚动广告：

截图
0赞 · 0采集
论斤烤 2021-01-18

下拉菜单代码

截图
0赞 · 0采集
论斤烤 2021-01-18

导航条基本代码

截图
0赞 · 0采集
论斤烤 2021-01-17

案例效果：浏览器博物馆

截图
0赞 · 0采集
qq_我为我狂_0 2021-01-07

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

<title>Hello World</title>

</head>

<body>
<div class="container nav-main" style="text-align:center">
<h1 class="web-title">Hello World!</h1>
<button type="button" class="btn btn-lg btn-primary">我是按钮，按我一下！</button>
</div>

<script src='http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js'></script>
<script src='http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>

</body>
</html>

0赞 · 0采集
是怡Ya_ 2020-07-13

bootstrap
html5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。让CSS 样式应用在未知元素上只需执行 document.createElement(elementName) 即可实现。html5shiv就是根据这个原理创建的。

0赞 · 0采集
qq_慕用5319160 2020-06-16

下拉菜单！

截图
0赞 · 0采集
WE_Xing 2020-05-01

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架

0赞 · 0采集
WE_Xing 2020-05-01

Bootstrap

截图
0赞 · 0采集
xixidemooc 2020-04-16

<!DOCTYPE html>//html5的定义
<html lang="en>
<head>
<meta charset="utf-8"> //页面uft-8编码
<meta http-equiv="X-UA-Compatible" content ="IE=edge">//bootstrap不支持IE的兼容模式，这句是为了在IE运行最新的渲染模式
<meta name="viewport" content="width=device-width, initial-scale=1">//适配移动浏览器时一般都要加上的代码。
平时使用的移动浏览器是把页面放在一个虚拟的视口，即"viewport"中，通常这个虚拟视口比屏幕宽，这样就不用每个网页挤到一个很小的视口中，但是这样会破坏没有针对移动浏览器优化的网页布局，用户可以通过平移和缩放来看网页不同的部分；viewport可以让网页开发者控制大小和缩放
//视口的宽度等于物理设备的宽度，设置初始缩放比例，即页面第一次载入时缩放比例，这里设置为1，不作任何的缩放
<link href="css/bootstrap.min.css" rel="stylesheet">//载入Bootstrap的CSS样式
</head>
<body>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src = "js/bootstrap.min.js"></script>
//加入jQuery和Bootstrap js插件的支持
//css文件放在head中，js文件要放到body的最下面
</body>

0赞 · 0采集
xixidemooc 2020-04-16

Bootstrap中的JS插件依赖于jQuery，因此jQuery要在Bootstrap之前引用

0赞 · 0采集
努力让世界更美好 2020-03-19

国&老婆好(;Y 他9看7&天天看大数据战略7吗6&）安粘&孜7发6 t

0赞 · 0采集
慕神5275407 2020-03-09
1. Tooltip 浮动提示框效果
2. data-toggle="tooltip"
3. data-placement="left" 代表位置
0赞 · 0采集
慕的地4563549 2020-03-08

Carousel-example-genetic Carousel-slide date-ride

截图
0赞 · 0采集
慕的地4563549 2020-03-08

carousel

截图
0赞 · 0采集
weixin_慕虎3367198 2020-02-27

<!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">
<title>某管理系统</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">


<style>
body {
padding-top: 50px;
padding-bottom:10px;
}

/*侧栏*/
.sidebar {
background-color: #ddd;
position: fixed;
top: 50px;
bottom: 0;
padding-top: 20px;
}
.sidebar ul {
margin-left: -15px;
margin-right: -18px;
}
.sidebar li.active > a,
.sidebar li > a:hover {
color: #fff;
border-top-left-radius:0px;
border-top-right-radius:0px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
background-color: #428BCA;
}
.sidebar .nav-divider {
background-color: transparent;
}

/*主要内容*/
.main > .page-header {
margin-top: 20px;
}
.btn-ground{
margin-bottom:10px;
}
.progress{
margin-top: 10px;
}
}
</style>

</head>

<body>
<header>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="##" class="navbar-brand">某管理系统</a>
</div>
<div class="navbar-collapse collapse" id="menu-nav">
<ul class="nav navbar-nav">
<li class="active"><a href="#ad-carousel">首页</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">功能 <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#feature-tab" data-tab="tab-one">信息建立</a></li>
<li><a href="#feature-tab" data-tab="tab-two">信息查询</a></li>
<li><a href="#feature-tab" data-tab="tab-three">信息管理</a></li>
<li><a href="#feature-tab" data-tab="tab-four">信息统计</a></li>

</ul>
</li>
<li><a href="#" data-toggle="modal" data-target="#about-modal">帮助</a></li>
</ul>
<form role="form" class="navbar-form navbar-right">
<div class="form-group">
<input type="email" class="form-control" id="admin" placeholder="用户名...">
</div>
<div class="form-group">
<input type="password" class="form-control" id="password" placeholder="密码...">
</div>

<button type="submit" class="btn btn-default">登录</button>
</form>
</div>
</div>
</div>
</header>
<nav>
<div class="container-fluid">
<div class="row">
<aside class="col-md-2 sidebar">
<ul class="nav nav-tabs nav-stacked">
<li class="active"><a href="##">首页</a></li>
<li class="nav-divider"></li>
<li><a href="##">信息建立</a></li>
<li><a href="##">信息查询</a></li>
<li><a href="##">信息管理</a></li>
<li class="nav-divider"></li>
<li><a href="##">设置</a></li>
<li><a href="##">帮助</a></li>
</ul>
</aside>
<section class="col-md-10 col-md-offset-2 main">
<h1 class="page-header">管理控制台</h1>
<div class="btn-ground">
<button type="btn" class="btn btn-deauflt">操作1</button>
<button type="btn" class="btn btn-primary">操作2</button>
<button type="btn" class="btn btn-success">操作3</button>
<button type="btn" class="btn btn-info">操作4</button>
<button type="btn" class="btn btn-warning">操作5</button>
<button type="btn" class="btn btn-danger">操作6</button>
</div>
<div class="row">
<div class="col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">最新消息</div>
<div class="panel-body">
<div class="alert alert-success"><strong>提示</strong> 您的订单（2014001）已经审批通过！</div>
<div class="alert alert-danger"><strong>提示</strong> 您的订单（2014002）被打回！</div>
<div class="alert alert-warning"><strong>提示</strong> 您的订单（2013001）客户付款延迟！</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">我的任务</div>
<div class="panel-body">
<div class="alert alert-info" role="alert">订单审批<span class="badge pull-right">42</span></div>
<div class="alert alert-info" role="alert">收款确认<span class="badge pull-right">20</span></div>
<div class="alert alert-info" role="alert">付款确认<span class="badge pull-right">10</span></div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">最新订单</div>
<div class="panel-body">
<table class="table table-striped">
<thead>
<tr>
<td>#</td>
<td>产品</td>
<td>数量</td>
<td>总金额</td>
<td>业务员</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Apple MacBook air</td>
<td>10</td>
<td>80000</td>
<td>王小贱</td>
</tr>
<tr>
<td>2</td>
<td>Apple iPad air</td>
<td>20</td>
<td>65000</td>
<td>尹开花</td>
</tr>
<tr>
<td>3</td>
<td>Apple MacBook pro</td>
<td>5</td>
<td>50000</td>
<td>刘老根</td>
</tr>
</tbody>
</table>
<button type="btn" class="btn btn-primary">查看详细>></button>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">工程进度</div>
<div class="panel-body">
<span class="label label-primary">水井挖掘工程</span>
<div class="progress">
<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%"></div>
</div>
<span class="label label-danger">基建工程</span>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%"></div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

1赞 · 1采集
weixin_慕虎3367198 2020-02-26

<!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">
<title>Hello World</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<style type="text/css">
.row div p{
border:solid 1px #ccc;
paidding: 10px;
}
</style>
</head>

<body>
<div class="container">
<div class="row">
<div class="col-md-4"><p>慕课网是一家从事互联网免费教学的网络教育公司。秉承"开拓、创新、公平、分享"的精神，将互联网特性全面的应用在教育领域，致力于为教育机构及求学者打造一站式互动在线教育品牌。</p>
</div>
<div class="col-md-4"><p>慕课网是一家从事互联网免费教学的网络教育公司。秉承"开拓、创新、公平、分享"的精神，将互联网特性全面的应用在教育领域，致力于为教育机构及求学者打造一站式互动在线教育品牌。</p>
</div>
<div class="col-md-4"><p>慕课网是一家从事互联网免费教学的网络教育公司。秉承"开拓、创新、公平、分享"的精神，将互联网特性全面的应用在教育领域，致力于为教育机构及求学者打造一站式互动在线教育品牌。</p>
</div>
</div>
<div class="row">
<div class="col-md-4"><p>慕课网是一家从事互联网免费教学的网络教育公司。秉承"开拓、创新、公平、分享"的精神，将互联网特性全面的应用在教育领域，致力于为教育机构及求学者打造一站式互动在线教育品牌。</p>
</div>
<div class="col-md-4 col-md-offset-4"><p>慕课网是一家从事互联网免费教学的网络教育公司。秉承"开拓、创新、公平、分享"的精神，将互联网特性全面的应用在教育领域，致力于为教育机构及求学者打造一站式互动在线教育品牌。</p>
</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3"><p>慕课网是一家从事互联网免费教学的网络教育公司。秉承"开拓、创新、公平、分享"的精神，将互联网特性全面的应用在教育领域，致力于为教育机构及求学者打造一站式互动在线教育品牌。</p>
</div>
<div class="col-md-3 col-md-offset-3"><p>慕课网是一家从事互联网免费教学的网络教育公司。秉承"开拓、创新、公平、分享"的精神，将互联网特性全面的应用在教育领域，致力于为教育机构及求学者打造一站式互动在线教育品牌。</p>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3"><p>慕课网是一家从事互联网免费教学的网络教育公司。秉承"开拓、创新、公平、分享"的精神，将互联网特性全面的应用在教育领域，致力于为教育机构及求学者打造一站式互动在线教育品牌。</p>
</div>
</div>
</div>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

0赞 · 0采集
weixin_慕虎3367198 2020-02-26

<!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">
<title>Hello World</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.carousel {
height: 500px;

}
.carousel .item {
height: 500px;
background-color: #000;
}
.carousel .item img {
width: 100%;
}
</style>
</head>

<body>
<div id="ad-carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#ad-carousel" data-slide-to="0" class="active"></li>
<li data-target="#ad-carousel" data-slide-to="1"></li>
<li data-target="#ad-carousel" data-slide-to="2"></li>
<li data-target="#ad-carousel" data-slide-to="3"></li>
<li data-target="#ad-carousel" data-slide-to="4"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="http://img.mukewang.com/5412ad400001e52014280484.jpg" alt="1 slide">

<div class="container">
<div class="carousel-caption">
<p>11 英寸 MacBook Air 充电一次可运行长达 9 小时，而 13 英寸机型则可运行长达 12 小时。</p>
</div>
</div>
</div>
<div class="item">
<img src="http://img.mukewang.com/5412ad7c0001d2eb10880541.jpg" alt="2 slide">
<div class="container">
<div class="carousel-caption">
<p>无论是什么任务，配备 Intel HD Graphics 5000 图形处理器的第四代 Intel Core 处理器都能应对自如。</p>
</div>
</div>
</div>
<div class="item">
<img src="http://img.mukewang.com/5412ad7c0001d2eb10880541.jpg" alt="2 slide">
<div class="container">
<div class="carousel-caption">
<p>有了新一代 802.11ac 技术，MacBook Air 令 Wi-Fi 速度超越极限。</p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#ad-carousel" data-slide="prev"><span
class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#ad-carousel" data-slide="next"><span
class="glyphicon glyphicon-chevron-right"></span></a>
</div>

<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">

</body>
</html>

0赞 · 0采集
xiaowang_1982 2020-01-10

boostoop

截图
0赞 · 0采集

数据加载中...