bootstrap入门

课程导师

李景山 李景山
5年WEB开发经验,痴迷于程序设计,多次担任百万级流量电商网站研发负责人,负责过多个大型综合信息网站的研发,精通移动和PC WEB开发技术。
00:00:00
Play
Next
00:00 / 00:00
40%
  • 2x
  • 1.5x
  • 1.25x
  • 1x
1x
15.Bootstrap按钮组
离线学习

下载APP离线观看

技能补充更多
  • Javascript初步
    Javascript初步

    Javascript是web前端开发常用技术之一,也是web前端开发必学技术之一,本章麦子学院原创JavaScript视频教程,将围绕其相关基础知识和实际应用全面讲解,让你轻松掌握并精通JavaScript的使用。

  • Photoshop切片
    Photoshop切片

    Photoshop切片是web前端开发常用技术之一,本章将由麦子学院资深web前端工程师为你讲解ps切片的基本操作、技巧及要点,让你快速入门Photoshop切片。

  • Python语言编程基础
    Python语言编程基础

    Python是一种面向对象、解释型计算机程序设计语言,语法简洁而清晰,具有丰富和强大的类库。本章Python编程基础的视频教程,为现目前国内最全面的Python视频教程之一,由麦子学院资深Python工程师录制,主要围绕Python编程实战方方面面展开。

  • Javascript初步
    Javascript初步

    javascript是一种动态类型、弱类型、基于原型的语言,广泛应用于客户端,而在Python中,JavaScript是 web前端开发不可或缺的一个技术,本章主要是麦子学院资深web前端开发工程师通过系统讲解js的语法、对象、函数、变量及其的使用等等,让零基础学员迅速入门。

  • 最新问答
  • WIKI资料
  • 课件下载
只看我参与的
  • bootstrap

    Bootstrap简介

    课程目标了解Bootstrap注意:在学习这门课程之前,大家最好已经学习过了 HTML、CSS、JAVASCRIPT这些内容。Bootstrap简介Bootstrap 是最受欢迎的 HTML、CSS 和 JS框架,用于开发响应式布局、移动设备优先的 WEB 项目,由Twitter于2011年8月在G...

  • bootstrap

    bootstrap安装配置

    下载Bootstrap打开官方网站http://getbootstrap.com/,点击Download Bootstrap。1) 下载用于生产环境的文件2) 下载用于编译css的Less源码及插件的js源文件3) 下载用于编译css的Lass源码及插件的js源文件4) Bootstrap文件结构其...

  • bootstrap

    Bootstrap栅格系统原理

    Bootstrap栅格系统布局1、栅格系统简介1)响应式设计我们现实生活中所使用到的设备有手机、平板电脑、笔记本、台式机。这些设备最大的区别在于它的屏幕的大小不一样,也就是分辨率大小不一样。响应式设计最核心的思想是就一个网站能够兼容多个终端,而不是为每个终端特定的一个版本。页面的设计与开发应当根据用...

  • bootstrap

    栅格布局基本用法

    1.1布局容器1)新建demo02.html文件,定义一个container容器,我们看container帮我们做了哪些事情。2)运行一下,首先是把这个div是居中的。3)当浏览器变小的时候,它基本上就全屏了。4)也就是bootstrap帮我们定义一个container这样一个样式,containe...

  • bootstrap

    Bootstrap栅格参数

    跨设备组合定义定义一行,在中等分辨率下是8:4,在超小分辨率下是6:6,在小分辨率下是3:6<hr />   <div class="row">    <div class="col-md-8 col-xs-6 col-sm-3">8</div>    <div class="col-...

  • bootstrap

    禁止响应布局

    删除viewpt的meta    要禁止响应布局很简单,第一步把移动设备优先删掉<meta name="viewport" content="width=device-width, initial-scale=1">为.container设为固定宽度然后直接用id运行结果:这就是我们传统的外文模式。...

  • bootstrap

    Bootstrap排版前基础

    排版前的基础1.HTML5文档类型<!DOCTYPE html><html>   <head>   <meta charset="utf-8">  </head>  <body></body></html>2.移动设备优先<meta name="viewport" content="width=de...

  • bootstrap

    Bootstrap排版之标题

    1.定义标题样式2.运行效果3.定义4.运行效果,表面上看是差不多的,但其实你看这两个的源代码,第二种样式是没有定义margin-top和 marging-bottom,第一种标签则定义了margin-top和marging-bottom5.使用small小字体标签<h1>第一个标题样式<small...

  • bootstrap

    排版之页面主题

    1.body全局样式下面这个就是Bootstrap为body设置的全局样式行body {  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;//Helvetica Neue代表设置的字体  font-size: 14px;//设...

  • bootstrap

    排版之文本与缩略语

    强调文本1、强调文本有small、strong、em、cite,对于这些标签,我们的Bootstrap都给定义了相应的样式2、标签应用<small>small</small><em>em</em>   //em是强调文本<cite>cite url</cite>   //一般荧幕里引用的网址<b>b...

  • bootstrap

    排版之地址与引用

    地址元素address我们的地址在HTML5中增加了一个address标签,可以把我们的地址写在address标签里面,address里面强调换行等等都是可以的。实例:<address>  <strong>Twitter, Inc.</strong><br>  795 Folsom Ave, Sui...

  • bootstrap

    bootstrap列表

    列表分类无序列表2.有序列表3.去点列表 .list-unstyled4.内联列表 .list_inline5.dl列表6.水平列表dl.dl-horizontal使用列表的具体操作学习如何使用无序列表、有序列表、去点列表、内联列表、dl列表以及水平列表,具体的操作如下:1)新建一个web项目ch0...

  • bootstrap

    bootstrap代码

    代码标签<code>显示单行内联代码2.<kbd>显示用户输入代码3.<pre>多行代码块4.<var>变量5.<samp>程序结果使用代码操作学习如何使用<code>、<kbd>、<pre>、<var>、<samp>代码标签,具体操作如下:1)新建一个demo02.html,将demo01.htm...

  • bootstrap

    Bootstrap表格样式

    Bootstrap表格样式分类基础样式.table2.带背条纹表格.table-striped3.带边框.table-border4.悬停.table-hover5.紧凑.table-condensed6.行样式 .active .success .info7.响应式表格具体使用操作学习如何使用基础...

  • bootstrap

    Bootstrap基础表单

    主要内容全局样式2.form-control3.form-group4.实际操作操作1、新建一个web项目ch062、然后将我们bootstrap用到的css、JavaScript文件导进来。3、在ch06中新建一个demo01.html,接着再打开demo01.html,将移动设备优和css文件先...

  • bootstrap

    Bootstrap内联表单

    实际操作1.新建demo02.html,并将demo01.html复制到demo02.html。2.我们只需在form标签上加一个form-inline,它就变成内联表单了<form action="#" method="post" class="form-inline">3.运行效果(在一条水平线...

  • bootstrap

    Bootstrap横向表单

    主要内容在form上应用.form-horizontal2.使用栅格系统3.实际操作操作1、新建一个demo03.html,接着再打开demo03.html,将移动设备优和css文件先导入到头文件(粘贴过来就行了),保存一下。<meta name="viewport"//移动设备优content="...

  • bootstrap

    Bootstrap表单控件

    1.我们切换到bootstrap的中文网,找到被支持的控件。注意“只有正确设置了type属性的输入空间才能被赋予正确的样式”这句话。比如说,要格式化文本,它是这样格式化的。我们可以通过行和列来指定文本域的宽度。2.表单控件实例2.1textarea在ch06中新建一个demo04.html,在里面添...

  • bootstrap

    Bootstrap表单控件状态

    1.焦点状态autofocus就是页面加载完以后它自动获得焦点。运行效果:2.禁用状态disabled表示禁用掉的状态运行效果:3.被禁用的fieldset运行效果,这样fieldset里面所有的组件就被禁用掉了4.只读状态运行效果:让它获得焦点时的状态 </div> <div class=" fo...

  • bootstrap

    Bootstrap表单图标

    1.在ch06中新建一个demo05.html,将之前的demo01.html中的内容复制粘贴到demo05.html。删除多余的控件,只留下“用户名”这个控件就行了。2.在文本框加入这个小图标(首先就需要在外层的div里面加一个has-feedback,因为这是需要它对小图标进行定位。然后我们需要...

  • Bootstrap入门 思维导图

    Bootstrap入门 思维导图

  • Bootstrap栅格系统布局 思维导图

    Bootstrap栅格系统布局 思维导图

  • Bootstrap文本排版 思维导图

    Bootstrap文本排版 思维导图

  • 列表与代码 思维导图

    列表与代码 思维导图

  • Bootstrap表格样式 思维导图

    Bootstrap表格样式 思维导图

  • Bootstrap表单样式 思维导图

    Bootstrap表单样式 思维导图

  • Bootstrap按钮样式 思维导图

    Bootstrap按钮样式 思维导图

  • Bootstrap图片 思维导图

    Bootstrap图片 思维导图

  • Bootstrap简介 源码

    Bootstrap简介 源码

  • Bootstrap栅格系统 源码

    Bootstrap栅格系统 源码

  • Bootstrap排版基础 源码

    Bootstrap排版基础 源码

  • bootstrap列表与代码样式 源码

    bootstrap列表与代码样式 源码

  • Bootstrap表格样式 源码

    Bootstrap表格样式 源码

  • Bootstrap表单样式 源码

    Bootstrap表单样式 源码

  • Bootstrap按钮 源码

    Bootstrap按钮 源码

  • Bootstrap图片与辅助样式 源码

    Bootstrap图片与辅助样式 源码

  • Bootstrap小图标 思维导图

    Bootstrap小图标 思维导图

  • Bootstrap小图标 源码

    Bootstrap小图标 源码

  • Bootstrap下拉菜单 思维导图

    Bootstrap下拉菜单 思维导图

  • Bootstrap下拉菜单 源码

    Bootstrap下拉菜单 源码

  • Bootstrap按钮组 思维导图

    Bootstrap按钮组 思维导图

  • Bootstrap按钮组 源码

    Bootstrap按钮组 源码

  • Bootstrap按钮下拉菜单 思维导图

    Bootstrap按钮下拉菜单 思维导图

  • Bootstrap按钮下拉菜单 源码

    Bootstrap按钮下拉菜单 源码

  • Bootstrap输入框 思维导图

    Bootstrap输入框 思维导图

  • Bootstrap输入框 源码

    Bootstrap输入框 源码

  • Bootstrap导航 思维导图

    Bootstrap导航 思维导图

  • Bootstrap导航 源码

    Bootstrap导航 源码

  • Bootstrap导航条 思维导图

    Bootstrap导航条 思维导图

  • Bootstrap导航条 源码

    Bootstrap导航条 源码

  • Bootstrap面包屑导航和分页导航 思维导图

    Bootstrap面包屑导航和分页导航 思维导图

  • Bootstrap面包屑导航和分页导航 源码

    Bootstrap面包屑导航和分页导航 源码

  • 标签、徽章、大屏展播、页面标题 思维导图

    标签、徽章、大屏展播、页面标题 思维导图

  • 标签、徽章、大屏展播、页面标题 源码

    标签、徽章、大屏展播、页面标题 源码

  • 缩略图和警告框 思维导图

    缩略图和警告框 思维导图

  • 缩略图和警告框 源码

    缩略图和警告框 源码

  • 进度条和媒体对象 思维导图

    进度条和媒体对象 思维导图

  • 进度条和媒体对象 源码

    进度条和媒体对象 源码

  • Js选项卡 课件

    Js选项卡 课件

  • 工具提示框 课件

    工具提示框 课件

  • 弹出框与警告框 课件

    弹出框与警告框 课件

  • 折叠效果 课件

    折叠效果 课件

  • 焦点轮播图 课件

    焦点轮播图 课件

  • Js选项卡 源码

    Js选项卡 源码

  • 工具提示框 源码

    工具提示框 源码

  • 弹出框与警告框 源码

    弹出框与警告框 源码

  • 折叠效果 源码

    折叠效果 源码

  • 焦点轮播图 源码

    焦点轮播图 源码

© 2012-2016 www.maiziedu.com

蜀ICP备13014270号-4 Version 5.0.0 release20160127

一名课程顾问想与您沟通

免费电话咨询