【响应式Web前端设计】一文学会使用Bootstrap！
2024-05-23 19:27:52
文章目录
- 1 概念
- 2 Bootstrap简介
- 3 布局容器
- 4 导航栏（navbar）
- 4.1 基本
- 4.2 响应式
- 5 垂直表单-基本表单
- 6 栅格系统
- 7 标签页
- 8 响应式工具
请先学习该文
1 概念
媒体查询
媒体(media)查询在 CSS3 上有介绍：CSS3 @media 查询。
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
实例
如果浏览器窗口小于 500px, 背景将变为浅蓝色：
@media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}
2 Bootstrap简介
3 布局容器
<!DOCTYPE html>
<html>
<head><title>布局容器</title><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<br>
<!--居中显示，两边有留白-->
<div class="container" style="border:1px solid #000000; height:100px;">.container</div>
<!--整个宽度-->
<div class="container-fluid" style="border:1px solid #000000; height:100px;">.container-fluid</div>
<script src="lib/jquery/jquery-1.11.0.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
4 导航栏（navbar）
4.1 基本
<!DOCTYPE html>
<html>
<head><title>Bootstrap基础导航栏</title><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default" role="navigation"><!--这里可以定义品牌图标--><div class="navbar-header"><a class="navbar-brand " id="nav-brand-itheima" href="#" >网站首页</a></div><ul class="nav navbar-nav"><li class="active"><a href="##">系列教程</a></li><li><a href="##">名师介绍</a></li><li><a href="##">成功案例</a></li><li><a href="##">关于我们</a></li></ul>
</nav>
<script src="lib/jquery/jquery-1.11.0.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
4.2 响应式
<!DOCTYPE html>
<html>
<head><title>Bootstrap响应式导航栏</title><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet"><!--自定义背景色--><!--<style>--><!--.navbar-default {--><!--background-color: #ff6e9b;--><!--}--><!--</style>-->
</head>
<body>
<nav class="navbar navbar-default" role="navigation"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false"><span class="sr-only">汉堡按钮</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><!--这里可以定义品牌图标--><div class="navbar-header"><a class="navbar-brand " id="nav-brand-itheima" href="#" >网站首页</a></div><div class="collapse navbar-collapse" id="navbar-collapse"><ul class="nav navbar-nav"><li class="active"><a href="##">系列教程</a></li><li><a href="##">名师介绍</a></li><li><a href="##">成功案例</a></li><li><a href="##">关于我们</a></li></ul>
</div>
</nav>
<script src="lib/jquery/jquery-1.11.0.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head><title>餐饮网站header部分</title><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 引入 Bootstrap --><link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet"><style type="text/css">/*设置body元素字体为Microsoft YaHei*/body { font-family: Microsoft YaHei}.head-top{background: #5fa022;padding: 0.8em 0;}.navbar-brand{padding: 0 0;}/*设置图片logo的大小和位置*/.navbar-brand>img{height: auto;margin-right: 5px;margin-top: 5px;width: 250px;}/*设置整个导航菜单的内边距、背景色和阴影*/.navbar-default{padding: 1.5em 0;background-color: #f2f0f1;box-shadow: 12px -5px 39px -12px;}/*设置导航栏中菜单a链接的样式*/.navbar-default .navbar-nav>li a {top: 10px;padding: 0.5em 3em;text-decoration: none;font-weight: 600;font-size: 1.2em;color:#919191;}/*设置导航栏菜单的鼠标悬停和获取焦点时的状态*/.navbar-default .navbar-nav> li >a:hover,.navbar-default .navbar-nav> li >a:focus {background:#D96B66;color: white;border-radius: 3px;-webkit-border-radius: 3px;}/*设置导航栏右侧a链接（0.00）的颜色*/.navbar-right>a{color:#D96B66;}/*媒体查询：当视口小于970px时，导航菜单字体变小，避免了换行的问题*/@media (max-width: 970px) {.navbar-default .navbar-nav>li a {font-size: 1.1em;}}/*header部分结束*/</style>
</head>
<body>
<!-- header -->
<header><div class="head-top"></div><nav class="navbar navbar-default" ><div class="container-fluid"><div class="container"><div class="navbar-header"><!--<div class="logo">--><a href="#" class="navbar-brand" ><img src="data:images/logo.png" alt=""></a><!--</div>--><!-- 当进入最小设备时，导航条将隐藏，显示“汉堡按钮”，点击时可以切面显示导航条隐藏的信息* data-target ：用于确定需要显示div--><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false"><span class="sr-only">汉堡按钮</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button></div><!-- 导航链接、表单和其他内容切换 --><div class="collapse navbar-collapse" id="navbar-collapse"><ul class="nav navbar-nav"><li><a href="#" >主页</a></li><li><a href="#">餐厅</a></li><li><a href="#">健康</a></li><li><a href="#">话题</a></li><li><a href="#">联系我们</a></li></ul><div class="navbar-right "><a href="#"><h3> <span >￥0.00 <img src="data:images/bag.png" alt=""/></span></h3></a></div></div></div></div><!-- /.navbar-collapse --></div><!-- /.container-fluid --></nav>
</header>
<!-- header -->
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="lib/jquery/jquery-1.11.0.min.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
5 垂直表单-基本表单
<!DOCTYPE html>
<html>
<head><title>Bootstrap基本表单</title><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<form role="form"><div class="form-group"><label for="name">名称</label><input type="text" class="form-control" id="name"placeholder="请输入名称"></div><div class="form-group"><label for="inputfile">文件输入</label><input type="file" id="inputfile"><p class="help-block">这里是块级帮助文本的实例。</p></div><div class="checkbox"><label><input type="checkbox">记住我</label></div> <button type="submit" class="btn btn-default">提交</button>
</form>
</body>
</html>
6 栅格系统
<!DOCTYPE html>
<html>
<head><title>栅格系统</title><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<style>div{border: 1.5px solid #000000;}
</style>
<br>
<div class="container"><div class="row"><div class="col-md-3 col-xs-6">1</div><div class="col-md-3 col-xs-6">2</div><div class="col-md-3 col-xs-6">3</div><div class="col-md-3 col-xs-6">4</div></div><div class="row"><div class="col-md-3 col-xs-6">5</div><div class="col-md-3 col-xs-6">6</div><div class="col-md-3 col-xs-6">7</div><div class="col-md-3 col-xs-6">8</div></div>
</div>
<script src="lib/jquery/jquery-1.11.0.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
7 标签页
说到点子上了 标签式导航是一个页面内的导航。导航条是整站的导航。
<!DOCTYPE html>
<html>
<head><title>胶囊标签页</title><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<br><ul class="nav nav-pills"><li role="presentation" class="active"><a href="#home" role="tab" data-toggle="pill">Home</a></li><li role="presentation"><a href="#profile" role="tab" data-toggle="pill">Profile</a></li><li role="presentation"><a href="#messages" role="tab" data-toggle="pill">Messages</a></li></ul><div class="tab-content"><div class="tab-pane active" id="home">我是第一页</div><div class="tab-pane " id="profile">我是第二页</div><div class="tab-pane " id="messages">我是第三页</div></div>
<script src="lib/jquery/jquery-1.11.0.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
8 响应式工具
<!DOCTYPE html>
<html>
<head><title>响应式工具</title><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet"><style>div{border: 1px solid black;font-weight: 800;}</style>
</head>
<body>
<br>
<div class="container" style="padding: 40px;"><div class="row visible-on"><div class="col-xs-6 col-sm-3" ><span class="hidden-xs">特别小型设备隐藏</span><span class="visible-xs">✔ 在特别小型设备上可见</span></div><div class="col-xs-6 col-sm-3" ><span class="hidden-sm">小型设备隐藏</span><span class="visible-sm">✔ 在小型设备上可见</span></div><div class="clearfix visible-xs"></div><div class="col-xs-6 col-sm-3" ><span class="hidden-md">中型设备隐藏</span><span class="visible-md">✔ 在中型设备上可见</span></div><div class="col-xs-6 col-sm-3" ><span class="hidden-lg">大型设备隐藏</span><span class="visible-lg">✔ 在大型设备上可见</span></div></div>
</div>
</body>
</html>【响应式Web前端设计】一文学会使用Bootstrap！相关推荐
- 【响应式Web前端设计】CSS3 :nth-of-type() 选择器
<!DOCTYPE html> <html> <head> <style> p:nth-of-type(2) {background:#ff0000; ...
- 【响应式Web前端设计】css如何设置边框的圆角样式？border-radius属性设置圆角样式（图 文）
border-radius包含5种设置圆角样式方式: border-radius :同时设置4个边框的圆角样式. border-top-left-radius :设置左上角边框的圆角样式. borde ...
- 【响应式Web前端设计】css中：overflow：hidden解决塌陷
overflow:hidden是当元素内的内容溢出的时候使它隐藏溢出的部分,即超出部分隐藏. 1.我们给一个父元素,里面有两个子元素 2.样式如下:给父元素设置背景颜色,子元素设置边框,两个字元素向左 ...
- 【响应式Web前端设计】CSS浮动(float,clear)讲解
首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为d ...
- 【响应式Web前端设计】!important的用法及作用
div { color: #f00 !important; } div { color: #000; } //上述代码中,ie6及其以下浏览器div的文本颜色为#fff,后面的重写的div样式没有起作 ...
- 【响应式Web前端设计】new Option()函数的作用（三区联动）
在做三级联动的时候遇见了这个函数,对函数的用法进行一下小总结,不太详细,敬请谅解. 作用:用于创建一个新的选项 Option()构造函数接受两个参数:文本(text)和值(value);第二个参数可选 ...
- 【响应式Web前端设计】设置图片间隙为0
解决方案一background 设置父容器的background,可以平铺一个合适的背景或图片.这样的话,两个图片之间的过渡,就会显得更加平滑.但是相关空隙依然存在,只不过因为父容器的背景色的缘故,使 ...
- 【响应式Web前端设计】在html页面实时显示系统时间
在html页面实时显示系统时间 桌面新建记事本,将下列代码复制粘贴,重命名后缀为.html,保存,用浏览器打开即可 <html> <head><meta http-equ ...
- 【响应式Web前端设计】:link、:hover、:active和:visited的区别
:link.:hover.:active和:visited的区别? :link表示鼠标点击之前,也称为原始状态 :hover表示鼠标悬停状态 :active表示鼠标点击状态 :visited表示鼠标点 ...
最新文章
- 流量不够用？Facebook要帮你发现附近的免费WiFi
- debian 图形界面安装
- 医学论文摘要撰写的四要素以及注意事项
- Linux网络编程 之 IO多路复用select（八）
- React Native之组件(Component)生命周期学习笔记
- jsp fmt标签详解
- 问了自己8个问题后，我选择了考博...
- SSH 登录速度慢的解决办法
- Pan JiaPu/ A real-time QRS detection algorithm
- office 2010 projectn visio 下载
- 初步了解Linux以及RHCE认证
- TensorFlow之文本分类算法-2
- rxswift_RxSwift
- 【HEVC简介】CTU、CU、PU、TU结构
- Python list 常见用法
- 一文读懂MACD技术指标
- rxjs 经典使用场景
- NEUQOJ 1869: Harry Potter and the Prisoner of Azkaban
- Codeforces Round #782 (Div. 2)-D. Reverse Sort Sum(树状数组)
- 爬虫（三）解析js，抓取优酷免费视频的真实播放地址
热门文章
- mAP@.5 含义：
- opencv 选择矩形框
- There was a problem confirming the ssl certificate
- retina 负样本回归增强loss
- raspberry pi 3B 树莓派 安装tensorflow
- C++智能指针及其简单实现
- Win7x64+VS2012+OpenCV2.4.3+CMake2.8.10+TBB41重编译OpenCV
- HTML, CSS, Javascript, jQuery之间的关系
- l usr bin mysql,解决/usr/bin/ld: cannot find -lmysqlclient错误
- java二叉排序树动态查找表_9.3.1动态查找表—二叉排序树