发表于： 2019-05-17 21:12:05
3 898
今天看了任务8的Bootstrap 感觉上还是有点看不明白 只是简单的了解了一下作用
Bootstrap是一个前端框架、是目前最受欢迎、最流行的web前端框架、是Twitter公司的Mark Otto和Jacob Thornton一起开发的，Bootstra框架是基于HTML、CSS、JavaScript 开发的，它因简洁、直观、功能强大被开发者广发使用。
Bootstrap前端框架使得 Web 开发更加快捷，提供了优雅的HTML、CSS和JavaScript规范，它是由动态CSS语言Less写成。Bootstrap前端框架刚推出就颇受欢迎，一直是GitHub上的热门开源项目，是一些前端开发者较为熟悉的框架。
还有简单的看了一些Bootstrap的一些组件看了一下导航栏
还有去了解了一下Z-INDEX属性
Z-index 堆叠顺序属性
若干个Bootstrap组件利用z-indexCSS属性，通过提供第三轴来安排内容来帮助控制布局。我们在Bootstrap中使用默认的z-index量表，该缩放比例设计用于正确地分层导航、工具提示、扩展插件、模态框等场合。
一般情况下，不推荐用户去自定义这些属性，否则可能牵一发而动全，影响全响呈现。以下为BootStrap系统内置的Z-index堆叠顺序属性清单：
Copy
$zindex-dropdown: 1000 !default;
$zindex-sticky: 1020 !default;
$zindex-fixed: 1030 !default;
$zindex-modal-backdrop: 1040 !default;
$zindex-modal: 1050 !default;
$zindex-popover: 1060 !default;
$zindex-tooltip: 1070 !default;
为了处理组件内的重叠边界（例如，输入组中的按钮和输入），我们使用1,2和3的低单位数z-index值来表示默认，悬停和活动状态。 在悬停/焦点/活动时，我们将一个特定元素带到最前面，使用更高的z-index值来显示它们在兄弟元素上的边界。Z轴就是一根立着的筷子顶着头顶的那种 给 正数就是Z轴上面 负值就是Z轴下面
使用Bootstrap框架必须要引入4行代码这4行代码分别是
1行 CSS
复制下面的 <link> 样式表粘贴到网页 <head> 里面，并放在其它CSS文件之前.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ73行 JS
全局组件运行在 jQuery 组件上，其中包括 Popper.js, 以及系统内置 JavaScript 插件. 建议将 <script> 的结束放在页面的 </body> 之前以符合新移动WEB规范，并遵循下面代码的先后顺序。
您可以引用 jQuery 精简版,兼容完整版，并无二异。
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM明天开始任务8吧
返回列表
评论