发表于： 2019-03-03 23:53:51
1 854
今天完成的事情：任务的八的导航栏的变化
明天计划的事情： 任务八的图片轮转和中间内容
遇到的问题： boothstrap的标签属性不是很理解
收获：学习到了boothstrap
会运用boothstrap制作简单的导航栏
进一步学习了媒体查询。
1、为什么使用 Bootstrap？
移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式
浏览器支持：所有的主流浏览器都支持 Bootstrap。
容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
它为开发人员创建接口提供了一个简洁统一的解决方案。
它包含了功能强大的内置组件，易于定制。
它还提供了基于 Web 的定制。
它是开源的。
2、Bootstrap 包的内容
基本结构：Bs 提供了一个带有网格系统、链接样式、背景的基本结构。
CSS：Bs 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展class，以及一个先进的网格系统。
组件：Bs 包含十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等
JavaScript 插件：Bs 包含了十几个自定义的 jQuery 插件。
定制：您可以定制 Bs 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。
3、如何使用Bootstrap
步骤 1 :<html>
<html>//这里的lang="en"可以删除，如果不删除的，用谷歌之类打开，它会认为是英文的，会自动给翻译（如果设置了自动翻译的话）.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
步骤 2:响应式meta标签
移动设备优先, Bootstrap 4 不同于历史版本，它首先为移动设备优化代码，然后用CSS媒体查询来扩展组件。为了确保所有的设备的渲染和触摸效果，必须在网页的<head>区添加响应式的视图标签，简要的说就是优先引入下面一行。
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
步骤 3；在head里插入bootstrap的css的样式表
<link href="可以是网址，也可以是本地文件，但最终指向bootstrap.css" rel="stylesheet">
<link href="网址或本地的bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="Task8.css">
<title>首页 | IT修真院 | 更快更高效的免费Java,CSS,JS,运维技术培训</title>
</head>
步骤4：在</body>前加入以下
<script src="网址或本地的jquery.min.js"></script>
<script src="网址或本地的bootstrap.min.js"></script>
<script src="网址或本地的jquery.min.js"></script>
<script src="网址或本地的bootstrap.min.js"></script>
</body>
4、用boothstrap制作导航栏。
步骤1 向 <nav> 标签添加 class .navbar、.navbar-default。
<nav class="navbar navbar-default" role="navigation">
.navbar——设置nav元素为导航条组件
.navbar-default——指定导航条组件为默认主题；
role="navigation"告诉浏览器它是一个导航栏容器，不是普通容器。
步骤2 为选择导航栏盒子模式，
<div class="container-fluid">
container，它呢，是随着屏幕宽度的变化而变化的。自动识别你这个浏览器的分辨率，来帮你设置这个div的宽度是多少，
如果屏幕小于768的话，最大宽度是自动的(满屏)
如果屏幕大于768小于992的话，最大宽度是750
如果屏幕大于992小于1200的话，最大宽度是970
如果屏幕大于1200，最大宽度是1170
因此，屏幕分辨率小于768，container的最大宽度是None自动的，它基本上是占满整个屏幕。
container-fluid它是占满全屏的不管是在哪种分辨率下。就是随便你屏幕大小，它就是100%的宽，
bootstrap框架的.container 和container-fluid 类的区别
（1）.container类出现内边距和外边距，.container-fluid类没有。
（2）.container类左右内边距一直是15px，屏幕小于等于767px的时候没有margin值，屏幕大于767px开始有左右margin值，屏幕宽度为768px和1000px的时候，margin值相对最小，分别是9px和15px，其他时候margin值随着屏幕的增大而增大。.container-fluid类宽度不管屏幕宽度大小，一直是100%
步骤3向 <div> 元素添加一个标题 class .navbar-header
<div class="navbar-hearder">
navbar-header 主要指定div元素为导航条组件包裹品牌图标及切换按钮；
navbar-brand 设置导航条组件内的品牌图标；
默认是放文字的,也可以放图片，但必须是小图片,如果图片太大，位置就会靠下。
在这里可以添加相应式按钮。
步骤四：为了向导航栏添加链接，只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可
<div class="collapse navbar-collapse" id="example-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>
</ul>
</div>
collapse 折叠（Collapse）插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内容面板，它都允许很多内容选项。
navbar-collapse：导航折叠
id="example-navbar-collapse"为了对应BS样式表中，名字为example-navbar-collapse的样式
nav标签定义导航链接的部分。只是作为标注一个导航链接的区域。
navbar-nav
5、利用boothsrap制作按钮(折叠式)
在4中的步骤3里，插入按钮
<div class="navbar-hearder">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse" >
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
navbar-hearder主要指定div元素为导航条组件包裹品牌图标及切换按钮；
navbar-toggle设置button元素为导航条组件的切换钮；
data-toggle="collapse"折叠
data-target="#example-navbar-collapse"样式为BS里名字为#example-navbar-collapse的样式。
sr-only：方便盲人浏览。盲人用的浏览器可以对此元素识别，并朗读出来。
6修改为任务所需要的样式。
步骤一：修改4 的步骤一中的css
margin: 0 ; BS里默认样式，不符合任务要求，修改
border: none; BS里默认样式，不符合任务要求，修改
background-color:#29b078; 任务要求的背景颜色，ps获取
此图时默认样式：
步骤二：修改4 的步骤2中的css
padding: 0; BS里默认样式，不符合任务要求，修改
margin: 0; BS里默认样式，不符合任务要求，修改
font-size: 15px; 字体大小，他还影响4中步骤四链接中的文字大小
此图时默认样式：
步骤三：修改按钮的样式
width: 50px; 按钮大小
height: 50px; 按钮大小
padding: 0;
margin-top: 25px; 为了使按钮居中
步骤四：修改导航栏链接
text-align: center; 导航栏链接中的文字居中
步骤五：修改导航栏链接字体颜色
.navbar-default .navbar-nav>li>a {color: #fff;}
这是因为他有默认样式，和权重优先级，如图
步骤六：修改按钮默认样式，为了使安居居右，且不影响不居
#example-navbar-collapse {
float: right; 为了使导航栏在右侧
position: relative;
}
步骤七：媒体自适应。
@media (min-width: 768px) {
.navbar-nav > li > a {
padding: 40px 10px 35px 10px;
}}
这是为了使屏幕在大时，为光标放上去后，显示下划线的border-bottom做准备
@media (max-width: 768px) {
#example-navbar-collapse {
float: none;在屏幕缩小后，消除移动
position: static;消除位置
margin-top: 100px;为了不掩盖导航栏内容
background-color:#29b078;背景颜色
}}
步骤八：光标移动，会有白线
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
border-bottom: solid 2px #fff;
}
返回列表
评论