前端响应式布局:基础与提升视频课程

熟练学习Bootstrap开发框架的使用,可以结合实际项目使用Bootstrap制作多终端响应式页面。

7391人学习

初级66课时2016/11/24更新

二维码下载学堂APP缓存视频离线看

赵甲迪
    • 畅销套餐
    • 精选套餐
    • 人气套餐
    • 尊享套餐
    • 高薪套餐
前端工程师基础与提升系列专题:实战之路
12步入门前端工程师视频教程【赵甲迪】
2607人学习
¥9.00
小白时代:WEB技术实战视频课程(DIV+CSS攻略)
5435人学习
¥19.00
前端工程师实战进阶视频课程——玩转JavaScript
2900人学习
¥16.00
更 多 9 门 课 程
Web前端工程师入职实训系列套餐
小白时代:WEB技术实战视频课程(DIV+CSS攻略)
5435人学习
¥19.00
前端工程师实战进阶视频课程——玩转JavaScript
2900人学习
¥16.00
前端响应式布局:基础与提升视频课程
7391人学习
¥60.00
更 多 5 门 课 程
JavaScript精通之路(实战开发必备视频教程)
全栈web前端:jQuery交互实战视频课程(jQuery+Html5+CSS3.0页面布局)
35738人学习
¥119.00
前端响应式布局:基础与提升视频课程
7391人学习
¥60.00
移动端开发利器 jQuery Mobile开发实录视频课程
13581人学习
¥36.00
更 多 4 门 课 程
学习移动端web开发套餐(jQueryMobile+响应式布局+微信+JavaScript)
移动端开发利器 jQuery Mobile开发实录视频课程
13581人学习
¥36.00
前端响应式布局:基础与提升视频课程
7391人学习
¥60.00
玩转指间:微信开发基础与提升视频课程
3523人学习
¥19.00
更 多 4 门 课 程
学习移动端web开发套餐(jQueryMobile+响应式布局+微信+JavaScript)
移动端开发利器 jQuery Mobile开发实录视频课程
13581人学习
¥36.00
前端响应式布局:基础与提升视频课程
7391人学习
¥60.00
玩转指间:微信开发基础与提升视频课程
3523人学习
¥19.00
更 多 4 门 课 程
  • 课程介绍
  • 课程大纲

适合人群:

web开发爱好者,前端工程师,前端开发人员,web设计者

你将会学到:

熟练学习Bootstrap开发框架的使用,可以结合实际项目使用Bootstrap制作多终端响应式页面。

课程简介:

Bootstrap是由Twitter推出的一个前台页面开发框架,在行业之中使用较为广泛。此开发框架包含了大量的CSS、JS程序代码,可以帮助研发者,尤其是初学者,轻松的实现一个不受浏览器限制的精美界面效果。


本课程将从Bootstrap的取得、配置、使用等概念进行讲解,结合相应的实际项目案例,为学员完整的讲解Bootstrap中基础样式与各个操作组件,并且通过一系列的代码案例来讲解Bootstrap的实战应用。


展开更多

课程大纲-前端响应式布局:基础与提升视频课程

  • 第1章基础打桩篇(3小时37分钟22节)

  • 1-1

    学习计划和路线Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架;Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

    「仅限付费用户」点击下载“学习计划和路线.rar”

    [07:04]
  • 1-2

    引入bootstrapBootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的;Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。

    「仅限付费用户」点击下载“引入bootstrap.rar”

    [10:29]
  • 1-3

    网格布局范例(一)Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。

    「仅限付费用户」点击下载“网格布局范例(一).rar”

    [08:24]
  • 1-4

    网格布局范例(二)在网页设计中,它是一种用于快速创建一致的布局和有效地使用 HTML 和 CSS 的方法。

    「仅限付费用户」点击下载“网格布局范例(二).rar”

    [06:50]
  • 1-5

    Bootstrap 网格系统(一)媒体查询是非常别致的"有条件的 CSS 规则",它只适用于一些基于某些规定条件的 CSS。如果满足那些条件,则应用相应的样式,Bootstrap 中的媒体查询允许您基于视口大小移动、显示并隐藏内容。

    「仅限付费用户」点击下载“Bootstrap 网格系统(一).rar”

    [07:11]
  • 1-6

    Bootstrap 网格系统(二)偏移是一个用于更专业的布局的有用功能。它们可用来给列腾出更多的空间。例如,.col-xs=* 类不支持偏移,但是它们可以简单地通过使用一个空的单元格来实现该效果。

    「仅限付费用户」点击下载“Bootstrap 网格系统(二).rar”

    [12:57]
  • 1-7

    Bootstrap CSS 介绍Bootstrap 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工作,您需要使用 HTML5 文档类型(Doctype)。

    「仅限付费用户」点击下载“Bootstrap CSS 介绍.rar”

    [12:22]
  • 1-8

    Bootstrap 排版(一)使用 Bootstrap 的排版特性,您可以创建标题、段落、列表及其他内联元素。

    「仅限付费用户」点击下载“Bootstrap 排版(一).rar”

    [08:29]
  • 1-9

    Bootstrap 排版(二)HTML 的默认强调标签 <small>(设置文本为父文本大小的 85%)、<strong>(设置文本为更粗的文本)、<em>(设置文本为斜体)。

    「仅限付费用户」点击下载“Bootstrap 排版(二).rar”

    [09:46]
  • 1-10

    Bootstrap 排版(三)Bootstrap 支持有序列表、无序列表和定义列表。

    「仅限付费用户」点击下载“Bootstrap 排版(三).rar”

    [10:29]
  • 1-11

    Bootstrap 代码类输出请确保当您使用 <pre> 和 <code> 标签时,开始和结束标签使用了 unicode 变体: < 和 >。

    「仅限付费用户」点击下载“Bootstrap 代码.rar”

    [11:45]
  • 1-12

    Bootstrap 表格(一)Bootstrap 提供了一个清晰的创建表格的布局。

    「仅限付费用户」点击下载“Bootstrap 表格(一).rar”

    [13:18]
  • 1-13

    Bootstrap 表格(二)通过把任意的 .table 包在 .table-responsive class 内,您可以让表格水平滚动以适应小型设备。当在大型设备上查看时,您将看不到任何的差别。

    「仅限付费用户」点击下载“Bootstrap 表格(二).rar”

    [07:43]
  • 1-14

    Bootstrap 表单(一)Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。

    「仅限付费用户」点击下载“Bootstrap 表单(一).rar”

    [09:25]
  • 1-15

    Bootstrap 表单(二)Bootstrap 支持最常见的表单控件,主要是 input、textarea、checkbox、radio 和 select。

    「仅限付费用户」点击下载“Bootstrap 表单(二).rar”

    [11:12]
  • 1-16

    Bootstrap 表单(三)需要在一个水平表单内的表单标签后放置纯文本时,请在 <p> 上使用 class .form-control-static。

    「仅限付费用户」点击下载“Bootstrap 表单(三).rar”

    [12:54]
  • 1-17

    Bootstrap 表单(四)Bootstrap 表单控件可以在输入框 input 上有一个块级帮助文本。为了添加一个占用整个宽度的内容块,可以在 <input> 后使用 .help-block。

    「仅限付费用户」点击下载“17.rar”

    [09:27]
  • 1-18

    Bootstrap 按钮(一)任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观,但是 Bootstrap 提供了一些选项来定义按钮的样式。

    「仅限付费用户」点击下载“Bootstrap 按钮(一).rar”

    [10:17]
  • 1-19

    Bootstrap 按钮(二)在 <a>、<button> 或 <input> 元素上创建按钮也可以使用按钮 clas,但是建议您在 <button> 元素上使用按钮 class,避免跨浏览器的不一致性问题。

    「仅限付费用户」点击下载“Bootstrap 按钮(二).rar”

    [09:06]
  • 1-20

    Bootstrap 图片类应用学习.img-responsive 类将 max-width: 100%; 和 height: auto; 样式应用在图片上。

    「仅限付费用户」点击下载“Bootstrap 图片.rar”

    [10:15]
展开更多
在线
客服
APP
下载

下载Android客户端

下载iphone 客户端

官方
微信

关注官方微信

返回
顶部