Bootstrap
杨四郎2018
这个作者很懒,什么都没留下…
展开
-
Bootstrap后台主区域
Bootstrap后台主区域1.设置背景运行效果(注意:整个page-main占满全屏,而“hello”也被左边的功能栏给遮挡住了。所以我们要做的就是当屏幕大于768像素的时候,让核心的主要区域离左边的间距255px,同样我们可以设高度为600px。)原创 2017-04-05 09:05:28 · 1282 阅读 · 0 评论 -
Bootstrap标签、徽章、大屏展播...
Bootstrap标签、徽章、大屏展播...标签.label1.新建一个web项目ch17,复制一下ch16里面的css文件、js文件等信息。2.打开ch17里面的demo01.html,把上节课在里面所写的东西删除掉,保留头文件。3.有这四种标签样式实例(label-default、label-dange原创 2017-04-04 10:05:53 · 871 阅读 · 0 评论 -
面包屑导航与分页导航
面包屑导航与分页导航面包屑 .breadcrumb1.新建一个web项目ch16,把ch15中的内容复制过来。将ch16中的demo01.html打开,删除上节课做的内容,留下头文件。2.面包屑导航 .breadcrumb实例首页新闻国内新闻高考专题原创 2017-04-04 10:04:40 · 999 阅读 · 0 评论 -
反色导航条与响应式导航
反色导航条与响应式导航反色导航条1.反色导航条实例Bootstrap给我们定义了两种导航条的样式,一种是default,一种是inverse。2.运行效果响应式导航1.新建一个demo02.html2.响应式导航实例原创 2017-04-04 10:03:36 · 1052 阅读 · 0 评论 -
Bootstrap导航条
Bootstrap导航条基础导航条1.新建一个web项目ch15,复制ch14相关的css、js等文件的内容。2.基础导航用法实例基础导航//导航条默认是圆角并带有背景导航//加一个导航条样式"navbar-brand",比较醒目。首页原创 2017-04-04 10:02:59 · 711 阅读 · 1 评论 -
Bootstrap导航
Bootstrap导航选项卡导航.nav .nav-tabs1.新建一个web项目ch14,把ch13中的这些css文件、js文件拷贝过来。2.打开ch14中的demo01.html。3.设置选项卡的导航选项卡//首先给一个类选择器,注意nav和btn不一样,bt原创 2017-04-04 10:02:08 · 584 阅读 · 0 评论 -
Bootstrap输入框
Bootstrap输入框基本用法1.新建一个web项目ch13,将ch12里面的css文件和js文件拷贝过来。2.打开ch13的demo01.html将头文件导入进来。3.Bootstrap输入框的基本用法实例 基本用法 //首先给它一个样式说明它是文原创 2017-04-04 10:01:10 · 5384 阅读 · 0 评论 -
Bootstrap按钮下拉菜单
Bootstrap按钮下拉菜单组合式下拉菜单1.新建一个web项目ch12,然后将ch11的东西copy过来。2.打开ch12中的demo01.html3.设置一个下拉菜单 下拉 //按钮名字// 注意:data-toggle="dropdow原创 2017-04-04 09:59:42 · 2172 阅读 · 0 评论 -
垂直分组与自适应分组
垂直分组与自适应分组垂直分组1.设置垂直分组 按钮组 按钮组 按钮组2.运行效果自适应分组1.自适应按钮分组实例//我们做一个栅格 //占了6原创 2017-04-04 09:59:04 · 452 阅读 · 0 评论 -
按钮尺寸设置与嵌套分组
按钮尺寸设置与嵌套分组按钮尺寸设置1.设置按钮尺寸 按钮组//我们先设置一个大尺寸的“按钮组” 按钮组 按钮组 2.运行效果3.在整个“btn-group”的容器上设置按钮的尺寸//设置整个按钮组原创 2017-04-04 09:57:27 · 651 阅读 · 0 评论 -
按钮组用法与工具栏
按钮组用法与工具栏基本用法1.新建一个web项目ch11,将ch10里面的东西复制进来,再打开ch11中的demo01.html,将之前写的内容删除。2.设置按钮组(这个按钮组将最前面的按钮的左上和左下设成圆角,将最后面的按钮的右上和右下设成圆角。)按钮组按钮组按钮组原创 2017-04-04 09:56:50 · 806 阅读 · 0 评论 -
Bootstrap下拉菜单
Bootstrap下拉菜单基本用法新建一个web项目ch10,然后把ch09里面的内容复制过来。2.打开ch10中的demo01,删除上节课里面的内容并且导入jquery。 content="width=device-width, initial-scale原创 2017-04-04 09:56:15 · 766 阅读 · 0 评论 -
Bootstrap缩略图
Bootstrap缩略图缩略图.thumbnail1.新建一个web项目ch18,将上节课写到的web项目ch17里面的css、js文件复制过来,打开ch18中的demo02.html,将之前写到的里面的内容删掉,保留头文件。2.打开demo01.html,设置缩略图。//需要用到我们之前所学的栅格系统原创 2017-04-04 10:06:26 · 2697 阅读 · 0 评论 -
Bootstrap警告框
Bootstrap警告框默认警告框1.新建一个demo02.html,将demo01.html的头文件复制过来。2.设置默认警告框× //设置警告框上的关闭按钮这里是提示信息3.运行效果可关闭原创 2017-04-05 08:59:04 · 454 阅读 · 0 评论 -
后台侧边功能栏
后台侧边功能栏1.上一节我们做完导航,接着我们做左边的这个侧边功能栏。将侧边功能栏放在标签里面。2.侧边功能栏实例//增加两个样式,并设置id //"input-group-button"在文本框右边设置按钮(按钮紧挨原创 2017-04-05 09:04:45 · 582 阅读 · 0 评论 -
Bootstrap后台导航
Bootstrap后台导航1.新建一个web项目admin,首先要把bootstrap这些库给导进来。2.打开bootstrap中文网站,找到文档。点击起步里面有一个模版,把这个模版直接复制到我们的web项目的index.html中。3.接下来在里面设置导航(注意,我原创 2017-04-05 09:04:12 · 1963 阅读 · 0 评论 -
Bootstrap焦点轮播图
Bootstrap焦点轮播图焦点轮播图所谓的焦点轮播图就是,点击图片左右两边的箭头或者是下面的1、2、3、4、5、6的数字图标时,图片进行切换的效果。基本用法1.布局与样式整个焦点轮播图由三部分组成,图片列表、小圆圈的列表、左右两个按钮。图片宽度默认是600x40原创 2017-04-05 09:03:39 · 2993 阅读 · 0 评论 -
Bootstrap折叠实战
Bootstrap折叠实战1.将上一节写到的demo02.html内容复制到新建的demo05.html,打开demo05.html,将“栏目管理2”和“栏目管理3”内容的代码删除掉,保留“栏目管理1”中的代码。2.折叠实例 增加栏目 //每一个列表项上是原创 2017-04-05 09:03:09 · 583 阅读 · 0 评论 -
Bootstrap折叠效果
Bootstrap折叠效果声明式用法1.新建一个web项目ch27,将ch26里面bootstrap所要用到的css、JavaScript文件等复制到ch27。2.声明式用法实例 //data-toggle="collapse" 用来触发JavaScript插件。//给这个加原创 2017-04-05 09:02:42 · 3153 阅读 · 0 评论 -
Bootstrap警告框
Bootstrap警告框1.警告框实例 //栅格系统,占三列。 //alert表示警告框,alert-danger红色, //fade in默认显示出来有淡入淡出的效果。原创 2017-04-05 09:02:11 · 1316 阅读 · 0 评论 -
Bootstrap弹出框
Bootstrap弹出框1.弹出框的基本用法2.打开HBuilder新建一个web项目ch26,把上节课讲到的ch25的东西复制过来。3.弹出框实例 title="向左显示" data-cont原创 2017-04-05 09:01:41 · 866 阅读 · 0 评论 -
Bootstrap工具提示框
Bootstrap工具提示框基本用法(data-toggle、data-placement)1.新建一个web项目ch25,把ch24中css、js文件等复制过来。2.打开ch25中的demo01.html,设置工具提示框的基本用法。content="width=device-width, init原创 2017-04-05 09:01:13 · 799 阅读 · 0 评论 -
Bootstrap Js选项卡
Bootstrap Js选项卡选项卡的组成与布局(选项卡组件、底部可切换的选项卡面板)1)新建一个web项目ch24,把之前的css、js等文件拷贝过来。2)布局选项卡实例3)运行效果声明式用法1.增加d原创 2017-04-05 09:00:39 · 3091 阅读 · 0 评论 -
Bootstrap媒体对象
Bootstrap媒体对象媒体对象默认样式1.新建一个demo02.html文件,把demo01.html的头文件复制过来。2.我们可以查看bootstrap中文网查看媒体对象默认样式的用法。3.设置媒体对象默认样式(首先给一个样式“media”,“media”表示里原创 2017-04-05 09:00:10 · 367 阅读 · 0 评论 -
Bootstrap进度条
Bootstrap进度条进度条基本样式1.新建一个web项目ch19,把ch18的东西复制过来。2.设置进度条基本样式(两个容器嵌套,最外层是“progress”样式,里面那层用“progress-bar”样式。其实就是两个,一个用来做背景,另一个为进度条。)3.运行效果原创 2017-04-05 08:59:33 · 471 阅读 · 0 评论 -
Bootstrap小图标
Bootstrap小图标小图标的基本用法1.打开bootstrap中文网站找到Gliyphicons字体图标(我们可以看到里面有250多个来自Glyphicon Halflings的字体图标,Glyphicon Halflings一般是收费的,但是它们的作者允许Bootstrap免费使用。)2.新建原创 2017-04-04 09:55:34 · 6585 阅读 · 0 评论 -
辅助样式之隐藏与显示
辅助样式之隐藏与显示1.show显示和.hidden隐藏内容2.设置在中等分辨率底下显示ccc3.运行效果小分辨率底下不显示直到中等分辨率才会显示4.设置在中等分辨率底下给隐藏掉ccc原创 2017-04-04 09:55:01 · 900 阅读 · 0 评论 -
bootstrap列表
bootstrap列表列表分类无序列表2.有序列表3.去点列表 .list-unstyled4.内联列表 .list_inline5.dl列表6.水平列表dl.dl-horizontal使用列表的具体操作原创 2017-04-03 10:02:59 · 3186 阅读 · 0 评论 -
排版之地址与引用
排版之地址与引用地址元素address我们的地址在HTML5中增加了一个address标签,可以把我们的地址写在address标签里面,address里面强调换行等等都是可以的。实例: Twitter, Inc. 795 Folsom Ave, Suite 600 San Francisco, CA原创 2017-04-03 10:02:14 · 570 阅读 · 0 评论 -
排版之文本与缩略语
排版之文本与缩略语强调文本1、强调文本有small、strong、em、cite,对于这些标签,我们的Bootstrap都给定义了相应的样式2、标签应用smallem //em是强调文本cite url //一般荧幕里引用的网址b //b和strong是一样的,表示加粗。原创 2017-04-03 10:01:41 · 842 阅读 · 0 评论 -
排版之页面主题
排版之页面主题1.body全局样式下面这个就是Bootstrap为body设置的全局样式行body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;//Helvetica Neue代表设置的字体 //设置字体为14px line原创 2017-04-03 10:01:06 · 770 阅读 · 0 评论 -
Bootstrap排版之标题
Bootstrap排版之标题1.定义标题样式2.运行效果3.定义4.运行效果,表面上看是差不多的,但其实你看这两个的源代码,第二种样式是没有定义margin-top和 marging-bottom,第一种标签则定义了margin-top和margi原创 2017-04-03 10:00:18 · 1714 阅读 · 0 评论 -
Bootstrap排版前基础
Bootstrap排版前基础排版前的基础1.HTML5文档类型 2.移动设备优先user-scalable=no,可以禁用缩入,在移动设备浏览器中,不缩放要用滚动条来帮助查看viewport原创 2017-04-03 09:59:38 · 616 阅读 · 0 评论 -
禁止响应布局
禁止响应布局删除viewpt的meta 要禁止响应布局很简单,第一步把移动设备优先删掉name="viewport"content="width=device-width,initial-scale=1">为.container设为固定宽度然后直接用id原创 2017-04-03 09:58:51 · 379 阅读 · 0 评论 -
Bootstrap栅格参数
Bootstrap栅格参数跨设备组合定义定义一行,在中等分辨率下是8:4,在超小分辨率下是6:6,在小分辨率下是3:6 8 4 运行结果:这是在中等分辨率下,此时它是8:4这是在超小分辨率下,此时它是6:6原创 2017-04-03 09:57:45 · 929 阅读 · 0 评论 -
格布局基本用法
栅格布局基本用法1.1布局容器1)新建demo02.html文件,定义一个container容器,我们看container帮我们做了哪些事情。2)运行一下,首先是把这个div是居中的。3)当浏览器变小的时候,它基本上就全屏了。4)也就是bootstrap帮我们定义一个cont原创 2017-04-03 09:57:01 · 947 阅读 · 0 评论 -
Bootstrap栅格系统原理
Bootstrap栅格系统原理Bootstrap栅格系统布局1、栅格系统简介1)响应式设计我们现实生活中所使用到的设备有手机、平板电脑、笔记本、台式机。这些设备最大的区别在于它的屏幕的大小不一样,也就是分辨率大小不一样。响应式设计最核心的思想是就一个网站能够兼容多个终端,而不是为每个终端特定的一原创 2017-04-03 09:52:33 · 18551 阅读 · 0 评论 -
bootstrap安装配置
bootstrap安装配置下载Bootstrap打开官方网站http://getbootstrap.com/,点击Download Bootstrap。1) 下载用于生产环境的文件2) 下载用于编译css的Less源码及插件的js源文件3) 下载用于编译css的Lass源码及原创 2017-04-03 09:51:58 · 8933 阅读 · 0 评论 -
bootstrap代码
bootstrap代码代码标签显示单行内联代码2.显示用户输入代码3.多行代码块4.变量5.程序结果使用代码操作学习如何使用、、、、代码标签,具体操作如下:1)新建一个demo02.html,原创 2017-04-03 10:03:49 · 614 阅读 · 0 评论 -
Bootstrap表格样式
Bootstrap表格样式Bootstrap表格样式分类基础样式.table2.带背条纹表格.table-striped3.带边框.table-border4.悬停.table-hover5.紧凑.table-condensed6.行样原创 2017-04-03 10:04:33 · 9558 阅读 · 0 评论