本文分析了Bootstrap案例中的header部分，讲解了如何确保网站在不同设备上的显示效果。重点讨论了Bootstrap的栅格系统，包括全局CSS样式、组件和JS组件，并强调了在不同屏幕尺寸下使用col-xs, col-sm, col-md, col-lg来调整布局。"
115876835,10922560,解决Python Selenium嵌套iframe定位问题,"['Python', 'selenium', '自动化测试', '网页元素定位']
一、由于案例比较长我们先简单分析首页中header 部分的制做情况。
<!DOCTYPE html>
<html lang="zh-CN"><head>
<meta charset="utf-8">
二、下面表示用最新的的浏览器解析网站代码，为了保证网站解析效果的完整性
<meta http-equiv="X-UA-Compatible" content="IE=edge">
三、下面是浏览器视口的声明，initial-scale代表着初始化缩放为1是代表着不缩放的意思,为了保证1:1提供最佳的效果体验，user-scalabel是用户可缩放的属性设置no
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>传智播客 - 安全的互联网微金融资产交易平台</title>
四、对于JS中的某些样式能放在后面的要放在后面，让用户更加快捷的浏览到网页的内容，把DOM树更快的加载完成。提供网页的解析速度。对于网页的样式的CSS文件需要放在header部分。jQuery文件放在body中是可以的。最好不要放在</html>后。
<link rel="stylesheet" href="css/main.css">
五、下面是条件注释，满足条件会执行的操作。前者为了让浏览器兼容Ｈ５ 后者为了兼容ＣＳＳ中的媒体查询功能
<!--[if lt IE 9]><script src="lib/html5shiv/html5shiv.min.js"></script>
<script src="lib/respond/respond.min.js"></script>
<![endif]-->
六、下面重点说bootstrap是怎么使用的问题了。我们可到中文bootstrap官网查看。有源码版本可以更改自己喜欢的样式。下载用于生产环境的版本。可以引入到网页中使用。开发项目使用的是压缩版，使用的是bootstrap.css 关于主题的版本暂时不用。
bootstrap怎么用，有时候我们看着就蒙了，其实没有什么，就是在源码中我们需要简单浏览，他的样式的设置。他就是一个帮我们定义了我们开发中常用功能的模块的集合。我们需要关注它定义了那些类，需要使用直接复制粘贴代码，引入到我们的网页代码中就可以。
七、bootstrap定义的板块分类
１.全局ＣＳＳ样式：表格 表单 按钮 图片 栅格系统
最低0.47元/天 解锁文章
449
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
