黑马程序员技术交流社区

标题: 【成都】bootstrap简要 [打印本页]
作者: 小蜀哥哥    时间: 2019-12-6 12:41
标题: 【成都】bootstrap简要
  1.1案例介绍
本案例使用Bootstrap重写首页，整个案例中将使用到Bootstrap 中的各个模块。为了方便编程，将采用拆分的方式，各个模块单独编写，最后组合。

    1.2案例相关技术

    1.2.1BootStrap概述

1.2.1.1 什么是Bootstrap

Bootstrap是基于HTML、CSS、JAVASCRIPT的前端框架（半成品）。其预定义一套CSS样式和与样式对象的jQuery代码，我们只需要提供固定的HTML结构，添加固定的class样式，就可以完成指定效果的实现。

Bootstrap是在jQuery的基础上工作的，可以理解Bootstrap是jQuery的一个插件。

Bootstrap使得Web开发更加快捷，代码优雅，美观大方。

Twitter的设计师Mark Otto和Jacob Thornton合作开发

Bootstrap基础入门使用的都是自带的CSS样式，高级开发中需要使用HTML5、CSS3、动态CSS语言Less进行自定义开发，javaEE课程中学习“基础入门”。

国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。

中文官网：http://www.bootcss.com/

1.2.1.2 什么是响应式布局

响应式布局是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。

Bootstrap就是响应式布局最成功的实现，为了兼容不同的浏览器采用jQuery，为了适配不同的终端采用CSS3 Media Query(媒体查询)。

​​​​​​​1.2.2.0环境搭建

1.2.2.1 下载

中文官网地址：https://v3.bootcss.com/getting-started/#download

github地址：https://github.com/twbs/bootstrap/archive/v3.3.6.zip



1.2.2.2 目录结构



1.2.2.3 内容结构

发布版，即开始使用到的Bootstrap内容结构







1.2.2.4 简洁模板

[HTML] 纯文本查看 复制代码
<!DOCTYPE html>



<html lang="zh-CN">



 



<head>



<meta charset="utf-8">



<!--声明文档兼容模式，表示使用IE浏览器的最新模式-->



<meta http-equiv="X-UA-Compatible" content="IE=edge">



<!--设置视口的宽度(值为设备的理想宽度)，页面初始缩放值<理想宽度/可见宽度>-->



<meta name="viewport" content="width=device-width, initial-scale=1">



<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->



<title>Bootstrap基本模板</title>



 



<!-- 引入Bootstrap核心样式文件 -->



<link href="../../css/bootstrap.min.css" rel="stylesheet">



 



 



</head>



 



<body>



<h1>你好，世界！</h1>



 



<!-- 引入jQuery核心js文件 -->



<script src="../../js/jquery-1.11.0.min.js"></script>



<!-- 引入BootStrap核心js文件 -->



<script src="../../js/bootstrap.min.js"></script>



</body>



 



</html>


1.2.2.5 完整模板（了解）

<!DOCTYPE html>

<html lang="zh-CN">



<head>

<meta charset="utf-8">

<!--声明文档兼容模式，表示使用IE浏览器的最新模式-->

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!--设置视口的宽度(值为设备的理想宽度)，页面初始缩放值<理想宽度/可见宽度>-->

<!--视口的作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，会将页面缩放到设备这么大来展示-->

<!--width 设置layout viewport  的宽度，为一个正整数，或字符串"width-device"(表示采用设备的宽度)

initial-scale 设置页面的初始缩放值，为一个数字，可以带小数

minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数

maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数

height 设置layout viewport  的高度，这个属性对我们并不重要，很少使用

user-scalable 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许

如果设置"user-scalable=no",那么"minimum-scale"和"maximum-scale"无效

-->

[JavaScript] 纯文本查看 复制代码
<meta name="viewport" content="width=device-width, initial-scale=1">



<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->



<title>Bootstrap完整模板</title>



 



<!-- 引入Bootstrap核心样式文件 -->



<link href="../../css/bootstrap.min.css" rel="stylesheet">



 



<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->



       <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果，必须放置到web服务器中，暂时不必掌握 -->



      <!--[if lt IE 9]>



         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>



         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>



      <![endif]-->



</head>



 



<body>



<!--正文从此处开始-->



<h1>你好，世界！</h1>



 



<!--前端开发建议：网站优化时，除了立即需要工作的js存放在head外，将大部分JS文件放在页面的末尾-->



 



<!-- 引入jQuery核心js文件，必须放置在bootStrap.js前面！ -->

<script src="../../js/jquery-1.11.0.min.js"></script>

<!-- 引入BootStrap核心js文件 -->

<script src="../../js/bootstrap.min.js"></script>

</body>



</html>



重写首页之topbar
1.3.1 案例相关技术

1.3.1.1 布局容器

帮助手册：https://v3.bootcss.com/css/#overview-container

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。

.container 类用于固定宽度并支持响应式布局的容器。

<div class="container"> ... </div>

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

<div class="container-fluid"> ... </div>



1.3.1.2 栅格

帮助手册：https://v3.bootcss.com/css/#grid

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

栅格系统特点：

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
通过“行（row）”在水平方向创建一组“列（column）”。
你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-*栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-*不存在， 也影响大屏幕设备。
栅格参数：“col-*-*”





其中：

large:lg 大尺寸

medium:md 中等尺寸

small:sm 小尺寸

x-small:xs 特小尺寸

案例：
[HTML] 纯文本查看 复制代码


<div class=”container”>



<div class="row"> 



    <div class="col-md-1">.col-md-1</div> 



    <div class="col-md-1">.col-md-1</div> 



    <div class="col-md-1">.col-md-1</div> 



    <div class="col-md-1">.col-md-1</div> 



<div class="col-md-1">.col-md-1</div> 



<div class="col-md-1">.col-md-1</div> 



<div class="col-md-1">.col-md-1</div> 



<div class="col-md-1">.col-md-1</div> 



<div class="col-md-1">.col-md-1</div> 



<div class="col-md-1">.col-md-1</div> 



<div class="col-md-1">.col-md-1</div> 



<div class="col-md-1">.col-md-1</div> 



</div> 



<div class="row"> 



    <div class="col-md-8">.col-md-8</div> 



    <div class="col-md-4">.col-md-4</div> 



</div> 



<div class="row"> 



    <div class="col-md-4">.col-md-4</div> 



    <div class="col-md-4">.col-md-4</div> 



    <div class="col-md-4">.col-md-4</div> 



</div> 



<div class="row"> 



    <div class="col-md-6">.col-md-6</div> 



    <div class="col-md-6">.col-md-6</div> 



</div>



</div>




欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2