bootstrap简介
课程目标了解Bootstrap注意:在学习这门课程之前,大家最好已经学习过了 HTML、CSS、JAVASCRIPT这些内容。Bootstrap简介Bootstrap 是最受欢迎的 HTML、CSS 和 JS框架,用于开发响应式布局、移动设备优先的 WEB 项目,由Twitter于2011年8月在G... 查看原文
Bootstrap是由Twitter发布一款目前最受欢迎的前端框架。Bootstrap基于 HTML、CSS、JAVASCRIPT的,它简洁灵活,将常见的CSS布局、常用组件和JavaScript插件进行了完整并完善的封装,能让没有经验的前端工程师和后端开发工程师都迅速掌握和使用,大大提高开发效率,它还在某种程度上规范前端团队编写CSS和JavaScript的规范。总之学习Bootstrap可以让你很轻松开发出响应式的WEB项目。
32章节|183839次播放
课程目标了解Bootstrap注意:在学习这门课程之前,大家最好已经学习过了 HTML、CSS、JAVASCRIPT这些内容。Bootstrap简介Bootstrap 是最受欢迎的 HTML、CSS 和 JS框架,用于开发响应式布局、移动设备优先的 WEB 项目,由Twitter于2011年8月在G... 查看原文
下载Bootstrap打开官方网站http://getbootstrap.com/,点击Download Bootstrap。1) 下载用于生产环境的文件2) 下载用于编译css的Less源码及插件的js源文件3) 下载用于编译css的Lass源码及插件的js源文件4) Bootstrap文件结构其... 查看原文
Bootstrap栅格系统布局1、栅格系统简介1)响应式设计我们现实生活中所使用到的设备有手机、平板电脑、笔记本、台式机。这些设备最大的区别在于它的屏幕的大小不一样,也就是分辨率大小不一样。响应式设计最核心的思想是就一个网站能够兼容多个终端,而不是为每个终端特定的一个版本。页面的设计与开发应当根据用... 查看原文
跨设备组合定义定义一行,在中等分辨率下是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-... 查看原文
删除viewpt的meta 要禁止响应布局很简单,第一步把移动设备优先删掉<meta name="viewport" content="width=device-width, initial-scale=1">为.container设为固定宽度然后直接用id运行结果:这就是我们传统的外文模式。... 查看原文
排版前的基础1.HTML5文档类型<!DOCTYPE html><html> <head> <meta charset="utf-8"> </head> <body></body></html>2.移动设备优先<meta name="viewport" content="width=de... 查看原文
1.定义标题样式2.运行效果3.定义4.运行效果,表面上看是差不多的,但其实你看这两个的源代码,第二种样式是没有定义margin-top和 marging-bottom,第一种标签则定义了margin-top和marging-bottom5.使用small小字体标签<h1>第一个标题样式<small... 查看原文
列表分类无序列表2.有序列表3.去点列表 .list-unstyled4.内联列表 .list_inline5.dl列表6.水平列表dl.dl-horizontal使用列表的具体操作学习如何使用无序列表、有序列表、去点列表、内联列表、dl列表以及水平列表,具体的操作如下:1)新建一个web项目ch0... 查看原文
代码标签<code>显示单行内联代码2.<kbd>显示用户输入代码3.<pre>多行代码块4.<var>变量5.<samp>程序结果使用代码操作学习如何使用<code>、<kbd>、<pre>、<var>、<samp>代码标签,具体操作如下:1)新建一个demo02.html,将demo01.htm... 查看原文
Bootstrap表格样式分类基础样式.table2.带背条纹表格.table-striped3.带边框.table-border4.悬停.table-hover5.紧凑.table-condensed6.行样式 .active .success .info7.响应式表格具体使用操作学习如何使用基础... 查看原文
主要内容全局样式2.form-control3.form-group4.实际操作操作1、新建一个web项目ch062、然后将我们bootstrap用到的css、JavaScript文件导进来。3、在ch06中新建一个demo01.html,接着再打开demo01.html,将移动设备优和css文件先... 查看原文
实际操作1.新建demo02.html,并将demo01.html复制到demo02.html。2.我们只需在form标签上加一个form-inline,它就变成内联表单了<form action="#" method="post" class="form-inline">3.运行效果(在一条水平线... 查看原文
主要内容在form上应用.form-horizontal2.使用栅格系统3.实际操作操作1、新建一个demo03.html,接着再打开demo03.html,将移动设备优和css文件先导入到头文件(粘贴过来就行了),保存一下。<meta name="viewport"//移动设备优content="... 查看原文
1.我们切换到bootstrap的中文网,找到被支持的控件。注意“只有正确设置了type属性的输入空间才能被赋予正确的样式”这句话。比如说,要格式化文本,它是这样格式化的。我们可以通过行和列来指定文本域的宽度。2.表单控件实例2.1textarea在ch06中新建一个demo04.html,在里面添... 查看原文
1.焦点状态autofocus就是页面加载完以后它自动获得焦点。运行效果:2.禁用状态disabled表示禁用掉的状态运行效果:3.被禁用的fieldset运行效果,这样fieldset里面所有的组件就被禁用掉了4.只读状态运行效果:让它获得焦点时的状态 </div> <div class=" fo... 查看原文
1.在ch06中新建一个demo05.html,将之前的demo01.html中的内容复制粘贴到demo05.html。删除多余的控件,只留下“用户名”这个控件就行了。2.在文本框加入这个小图标(首先就需要在外层的div里面加一个has-feedback,因为这是需要它对小图标进行定位。然后我们需要... 查看原文