JavaWebDay11

课程大纲

1、BootStrap的概述和快速入门
2、BootStrap的常用样式组件插件
3、综合案例黑马旅游网

第一章 BootStrap概述和快速入门

1、BootStrap的概述

A.BootStrap是Twitter公司开发的"前端框架"B.好处:a.包含有很多定义好的 CSS和JS代码,可以直接使用b.支持响应式布局.（一套代码在不同分辨率上面都有很好的体验效果）

2、BootStrap的入门

中文官方网站地址 http://d.bootcss.com/bootstrap-3.3.5.zip

A.复制文件

bootstrap-3.3.7-dist 文件夹下面的 css js fonts 文件夹复制项目.
jquery-3.2.1.min.js 文件复制到 js 目录下面

B.复制模板代码

Bootstrap离线文档\v3.bootcss.com\index.htm -> 起步 -> 基本模板

C.模板代码

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>基础模板</title><!-- Bootstrap css 引入的路径需要修改 --><link href="../css/bootstrap.min.css" rel="stylesheet"></head><body><h1>你好，世界！</h1><!-- jQuery 引入的路径需要修改--><script src="../js/jquery-3.2.1.min.js"></script><!-- bootstrap.min.js 引入的路径需要修改 --><script src="../js/bootstrap.min.js"></script></body>
</html>

第二章 BootStrap样式组件插件

1、栅格系统

(体现出"响应式布局")

在离线文档位置：【全局CSS样式】->【栅格系统】

A.将屏幕划分成为12个格子.B.操作步骤a.样式"理解成为table"   .container (两端留白) 或者 .container-fluid (宽度全屏)b.样式"理解成为tr"      .rowc.样式"理解成为td"      .col-尺寸-占格数目 C.尺寸的大小: (顺序"英文字母顺序lmsx")a. lg 超大屏幕尺寸(超大)b. md 中等屏幕尺寸(大)c. sm 平板屏幕尺寸(中等)d. xs 手机屏幕尺寸(小)D.注意事项a.设置的"占格数目"超过12会前面的独占一行,后面的自动换一行b.设置的"尺寸"大于设备的尺寸,会独占一行c.设置的"尺寸"小于设备的尺寸,会向上兼容,也具备上面的效果.E.列偏移a.语法col-尺寸-offset-占格数目b.含义在原始的栅格当中,占据几个空白格

2、按钮样式设置

A.位置文档: 全局CSS样式 -> 按钮 B.设置<button type="button" class="btn btn-default">（默认样式）Default</button><button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>

3、图片样式设置

A.位置文档: 全局CSS样式 -> 图片B.设置<img src="..." alt="..." class="img-rounded">  <!-- 圆角矩形 -->  <img src="..." alt="..." class="img-circle">   <!-- 椭圆 -->  <img src="..." alt="..." class="img-thumbnail"> <!-- 相框 -->

4、表格样式设置

A.位置文档: 全局CSS样式 -> 表格B.设置<table class="table table-hover"> <!-- 鼠标悬浮 -->  <table class="table table-bordered"> <!-- 带有边框 -->  <table class="table table-striped"> <!-- 条纹表格 -->

5、表单样式设置

A.位置文档: 全局CSS样式 -> 表单 B.设置水平表单

6、导航条样式设置

A.位置文档: 组件 -> 导航条B.设置<nav class="navbar navbar-inverse">  <!-- 反色设置"黑色" -->

7、分页条样式设置

A.位置文档: 组件 -> 分页

8、轮播图

A.位置文档: JavaScript插件 -> CarouselB.设置data-interval="3000"  <!-- 设置时间差 每隔多长时间替换一次，在轮播图div上面设置 -->

第三章综合案例黑马旅游网

1、综合概述

1、页眉(栅格系统两行)
2、导航(栅格系统行当中加入的导航条)
3、轮播图(栅格系统行当中加入的轮播图)
4、主体(新的栅格系统当中加入的主体)
5、页脚(新的栅格系统当中加入的页脚两行)

2、准备工作

A.拷贝BootStrap的三个文件夹和jquery-3.2.1.min.jsa. cssb. fontsc. js （需要拷贝jquery-3.2.1.min.js）
B.BootStrap的模板代码
C.准备一些图片文件存在img文件夹下面

3、页眉部分

在页眉的部分,是一个栅格系统 被<header>语义化标签包裹的 class="container-fluid"
第一行: <div class="row"> 存放的是一个图片
第二行: 黑马图片 <div class="col-md-3">输入框<div class="col-md-5">电话号码图片<div class="col-md-4">
第三行：导航栏 <div class="row"><nav class="navbar navbar-default">....参考 BootStrap的手册.......</div>
第四行：轮播图<div class="row"><div id="carousel-example-generic" class="carousel slide" data-ride="carousel">....参考 BootStrap的手册.......</div>

4、主体部分

在主体的部分,是一个栅格系统 被<div>标签包裹的 class="container"
第一行:显示图片和文字"黑马精选"<div class="row jx">
第二行:等分栅格系统,等分四列,每一份占3格 <div class="col-md-3">每个格子当中设置相册的图片效果。<div class="thumbnail">在相册当中，设置的是图文显示的效果"上海直飞三亚5天4晚自..."
第三行:显示图片和文字"国内游"<div class="row jx">
第四行:左边的图片占据4份的大小 <div class="col-md-4">右边的整体占据8份的大小 <div class="col-md-8">右边整体当中的划分情况: 分为两行 <div class="row">每一行当中重新平分12列。<div class="col-md-4">每个格子当中设置相册的图片效果。<div class="thumbnail">在相册当中，设置的是图文显示的效果"上海直飞三亚5天4晚自..."

5、页脚部分

在页脚的部分,是一个栅格系统 被<footer>语义化标签包裹的 class="container-fluid"
第一行:在第一行当中,显示的是一张图片信息<div class="row">
第二行:在第二行当中,显示的是文字信息<div class="row company">

JavaWebDay11_BootStrap概述,快速入门,常用样式组件插件相关推荐

手把手带你打造自己的UI样式库（第三章）之常用样式组件的设计与开发
常用样式组件的设计与开发 Search搜索框样式的设计与开发搜索组件的需求搜索框的功能比较简单,最基本的就是输入和提交两个逻辑.但是我们这个搜索框要额外的加一些细节,输入框分为输入状态和非输入状态 ...
大数据技术之_20_Elasticsearch学习_01_概述 + 快速入门 + Java API 操作 + 创建、删除索引 + 新建、搜索、更新删除文档 + 条件查询 + 映射操作
大数据技术之_20_Elasticsearch学习_01 一概述 1.1 什么是搜索? 1.2 如果用数据库做搜索会怎么样? 1.3 什么是全文检索和 Lucene? 1.4 什么是 Elastic ...
大数据技术之_20_Elasticsearch学习_01_概述 + 快速入门 + Java API 操作 + 创建、删除索引 + 新建、搜索、更新删除文档 + 条件查询 + 映射操作...
一概述1.1 什么是搜索?1.2 如果用数据库做搜索会怎么样?1.3 什么是全文检索和 Lucene?1.4 什么是 Elasticsearch?1.5 Elasticsearch 的适用场景1.6 ...
VUE常用UI组件插件及框架-vue前端UI框架收集
UI组件及框架 element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - ...
BootStrap一页通（样式+组件+插件）（全）
初识 bootstrap是一种前端框架,实现美观的页面效果. 使用BootStrap的前期工作(注意顺序): <!DOCTYPT html>:因为Bootstrap用到了h5的特性,所以需 ...
BootStrap一页通（样式+组件+插件）
bootstrap是一种前端框架,实现美观的页面效果. 使用BootStrap的前期工作(注意顺序): <!DOCTYPT html>:因为Bootstrap用到了h5的特性,所以需要此步 ...
vue3快速入门-Teleport(瞬移组件)
查看本系列文章合集click me 下载本系列文章源码click me Teleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术. 如果我们嵌套在 Vue ap ...
Pycharm快速入门（10） — 插件管理
1.插件安装 File | Settings | Plugins | Marketplace 搜索插件点击Install安装 2.插件卸载 File | Settings | Plugins | In ...
Bootstrap 栅格样式组件插件
-----------------------------起先是我们造成习惯,后来是习惯造成我们. day 51 Bootstrap 官方网站: bootcss.com/ <!DOCTYP ...

JavaWebDay11_BootStrap概述,快速入门,常用样式组件插件

JavaWebDay11

课程大纲

第一章 BootStrap概述和快速入门

1、BootStrap的概述

2、BootStrap的入门

A.复制文件

B.复制模板代码

C.模板代码

第二章 BootStrap样式组件插件

1、栅格系统

2、按钮样式设置

3、图片样式设置

4、表格样式设置

5、表单样式设置

6、导航条样式设置

7、分页条样式设置

8、轮播图

第三章综合案例黑马旅游网

1、综合概述

2、准备工作

3、页眉部分

4、主体部分

5、页脚部分

JavaWebDay11_BootStrap概述,快速入门,常用样式组件插件相关推荐

最新文章

热门文章

JavaWebDay11_BootStrap概述,快速入门,常用样式组件插件

JavaWebDay11

课程大纲

第一章 BootStrap概述和快速入门

1、BootStrap的概述

2、BootStrap的入门

A.复制文件

B.复制模板代码

C.模板代码

第二章 BootStrap样式组件插件

1、栅格系统

2、按钮样式设置

3、图片样式设置

4、表格样式设置

5、表单样式设置

6、导航条样式设置

7、分页条样式设置

8、轮播图

第三章 综合案例黑马旅游网

1、综合概述

2、准备工作

3、页眉部分

4、主体部分

5、页脚部分

JavaWebDay11_BootStrap概述,快速入门,常用样式组件插件相关推荐

最新文章

热门文章

第三章综合案例黑马旅游网