黑马程序员技术交流社区

标题: 【厦门校区JavaEE就业2期-每日总结】Bootstrap [打印本页]

作者: 厦门校区 时间: 2018-7-28 20:49
标题: 【厦门校区JavaEE就业2期-每日总结】Bootstrap
请按照自己的语言，总结下面的知识点：

1. 什么是Bootstrap？

2. 响应式布局的实现和具体步骤？

3. 使用响应式布局，有什么需要注意的地方？

作者: 苏华清 时间: 2018-7-28 21:23
1. 什么是Bootstrap？
前端框架,封装很多CSS属性和JS插件方便开发调用
2. 响应式布局的实现和具体步骤？
定义容器定义行定义元素
3. 使用响应式布局，有什么需要注意的地方？
格子超过12会自动换行
设备宽度小于设置的最小值会一个元素占一行
栅格属性向上兼容

作者: 刘思聪 时间: 2018-7-28 21:24
1. 什么是Bootstrap？
目前最常用的前端框架,预置和封装了大量的CSS预设和JS插件
2. 响应式布局的实现和具体步骤？
Bootstrap的响应式布局基于其栅格系统使用过程如下:
首先,创建容器,通常由container和container-fluid两种
然后创建行,采用样式row;
然后根据布局需要创建每行中的块,采用col-设备代号-格子数的格式设置样式,来决定一个格子在设备上的显示方式
3. 使用响应式布局，有什么需要注意的地方？
要注意元素在设置大小和为止的时候,应当尽可能避免采用绝对数值(比如固定多少像素,固定大小之类的),尽量采用相对数值(比如百分比等等),以确保页面元素能够在各种分辨率下不会因为固定大小而显示失常.

作者: 阿二木 时间: 2018-7-28 21:33

1. 什么是Bootstrap？

前端开发的框架,基于HTML,CSS,Javascript,使开发可以更快捷

2. 响应式布局的实现和具体步骤？

响应式布局依赖于栅格系统(一行平均分成12个格子，可以指定元素占几个格子),
首先定义合适的容器类似table,然后定义行 ,类似tr,最后定义元素

3. 使用响应式布局，有什么需要注意的地方？

1. 一行中如果格子数目超过12，则超出部分自动换行。
2. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。
3. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素沾满一整行。

作者: 厦门黑马王子 时间: 2018-7-28 21:48
郑雪平

1. Bootstrap是前端的JS框架，使用特点是使用方便，简单。采用的是响应式布局，能够实现做一套页面就能适应不同设备的效果。实现的具体步骤：1.首先第一步需要先导入bootstrap依赖的三个包文件css和js和font文件，2.在网页里面分别使用Link标签引入css，用script标签引入JS文件，使用响应式布局开发的过程中需要注意的一点是，在引入两个JS文件的时候要注意引入的先后顺序，首先引入jquery.1.12.4.min.js，之后才引入bootstrap.min.js文件。

作者: bihu2018 时间: 2018-7-28 21:51
1. 什么是Bootstrap？

是一个前端开发的框架,里面集成了html、javaScript、css高度封装的插件，只要引入Bootstrap就可以直接使用这些封装好的样式，
省去了繁琐的代码

2. 响应式布局的实现和具体步骤？

依赖于栅格系统,将一行平均分成12个格子，可以指定元素占几个格子

步骤：1、定义容器
2、定义行
3、定义元素

3. 使用响应式布局，有什么需要注意的地方？

1、一行如果格子超过12，那么超过的会自动换行
2、栅格类的属性可以向上兼容。栅格类适用与屏幕宽度大于或等于分界点大小的设备
3、如果真实设备宽度小于设置栅格属性的设备代码的最小值，会一个元素占满一整行

作者: xiguahx 时间: 2018-7-28 21:54
黄希

1. 什么是Bootstrap？
Bootstrap是一款前端框架，定义了很多css样式、js插件，简化了前端页面的开发，可以做出丰富的页面效果。它还提供了栅格系统，用于制作响应式页面。

2. 响应式布局的实现和具体步骤？
1、定义一个div，class属性设置成container或container-fluid
2、在div内定义行，class设置为row
3、在行内定义元素，元素所占的格子数目根据设备的屏幕宽度来设置，一行的格子数目默认为12
样式为：col-设备代号-格子数目

设备代号：
xs 超小屏幕手机
sm 小屏幕平板
md 中等屏幕桌面显示器
lg 大屏幕大桌面显示器

3. 使用响应式布局，有什么需要注意的地方？
1、一行的格子数目默认为12，超出后自动换行
2、栅格样式向上兼容，适用于屏幕宽度大等于分界点的设备
3、如果设备宽度小于设置的栅格样式，则一个元素占满一行

作者: 康春达 时间: 2018-7-28 22:00
1. 什么是Bootstrap？
一种 web 框架封装了javascript css 代码

2. 响应式布局的实现和具体步骤？
复制bootstra相关文件到ide中将调用代码写入程序
定义容器有两种容器container
row
col-代号-格子数

3. 使用响应式布局，有什么需要注意的地方？
首先选择一个好点的服务器；站内的图片不能过多过大，这样会影响打开的速度，图片可以缩小，保证清晰；适当的写软文，这个有利于网站的排名

作者: wangyuchen 时间: 2018-7-29 07:53
王宇晨
1. 什么是Bootstrap？
是一个前端开发的框架,定义了很多CSS样式和JS框架.
2. 响应式布局的实现和具体步骤？
实现:依赖于栅格系统,将一行平均分成12个格子,可以指定元素占几个格子.步骤:①定义容器相当于以前的table
②定义行,样式row
③定义元素,指定元素在不同的设备上,所占的格子数目,样式col-设备代号-格子数目
3. 使用响应式布局，有什么需要注意的地方？

响应式布局:就是同一套页面可以兼容不同分辨率的设备.
注意:①一行中如果格子数目超过12，则超出部分自动换行。
②栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。
③如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素沾满一整行。

作者: 1NightStand 时间: 2018-8-11 14:48
1. 什么是Bootstrap？
BootStrap是一款基于HTML,CSS和JS的前端框架,简化了前端的开发.

2. 响应式布局的实现和具体步骤？
响应布局时依赖于栅格系统,将一行分成12个格子,而我们可以指定每个元素占用几个格子.
主要分为三步骤:
1.定义容器(相当于table)
2.定义行(相当于tr)

3.定义元素

3. 使用响应式布局，有什么需要注意的地方？
需要注意格子的数目,向上兼容

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

黑马程序员IT技术论坛 X3.2