【bootstrap知识笔记】的更多相关文章

bootstrap知识笔记

.nav>.active>a{ background-color:#0088cc; color:#fff; } /*! * Bootstrap v3.3.7 (http://getbootstrap.com) * Copyright 2011-2016 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) *//*! normalize.css v3.0.3 | MI…

Bootstrap~学习笔记索引

回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方api:http://v3.bootcss.com/ Bootstrap~学习笔记索引 Bootstrap~页面的布局 Bootstrap~Panel和Table Bootstrap~表单Form Bootstrap~日期控制 Bootstrap~多级导航(级联导航)的实现 Bootstrap~大叔封…

6.bootstrap练习笔记-缩略图和list-group

bootstrap练习笔记-缩略图 1.其实缩略图很简单,只要按照固定的格式来设计 div.container 总容器  在宽度为1200px以上 div.row 一行内容 div.col-lg-3.col-md-4.col-sm-6.col-xs-12 表示在大于1200px (992px,1200px] (768px,992px] (0,768px]每行分别有 12/3 12/4 12/6 12/12   个缩略图 div.thumbnail表示存放缩略图的开始 img为缩略图 div.ca…

5.bootstrap练习笔记-巨幕和流体布局

bootstrap练习笔记-巨幕和流体布局 1.在bootstrap中 .jumbotron可以设置巨幕效果 2.div.jumnotron自动设置一个黑色的巨幕效果 3.div.container 表示宽度为1200的时候显示效果 4.div.fluid表示采用流体布局(百分比布局) 5.Img.img-responsive表示图片自适应 6.hidden-xs表示在小于小屏幕的时候隐藏,其他的显示 7.bootstrap采用的是移动端优先,首先设置的就是移动端效果,然后再根据不同的屏幕调整大…

3.bootstrap练习笔记-媒体内容

bootstrap练习笔记-多媒体对象 1.在bootstrap中,如果想存放内容,一种解决的方式就是利用media这个class 首先要设置一个div.container作为一个总的容器来存放内容 div.row表示一行,一般结合栅格布局 一般格式如下 <div class='row'> <div class='col-md-6'> //表示一个div占据一行6/12 如果的col-md-3就是占据 3/12 <div class='media'> //表示用媒体来布…

4.bootstrap练习笔记-内容区块

bootstrap练习笔记-内容区块 1.bootstrap中,采用的全部是div布局,把你的内容首先要包含在一个大的DIV区块当中 2.然后再写一个div.container,这个div里面存放真正的内容 3.div.row表示这个div占据一整行 4.div.row>div.col-md-6.col-sm-6*2表示这两个div在大于768px和大屏幕的时候都占据一行的 6/12   md.sm.lg等都表示屏幕分辨率的大小 5.Img.img-responsive表示做成响应式的图片 ce…

1.bootstrap练习笔记-导航条

bootstrap练习笔记 1.关于导航栏   官网链接:http://v3.bootcss.com/components/#nav 结构大概是这样的: nav标签标识导航栏 class为navbar 告诉BS这是一个导航条 navbar-default 标识引入默认的导航条样式 navbar-fixed-top 标识导航条在像下拉取页面的时候始终固定在顶端 Div.container标识导航栏要存放的内容 Div.navbar-header标识导航条的头部 Div.navbar-header>…

2.bootstrap练习笔记-轮播图

bootstrap练习笔记-轮播图 1.要使用轮播图,首先要将其放在一个主div里面 设置id为myCaroysel class为carousel slide 设置id是标识这个div是轮播图,等到li下面的按钮来指向它,当然可以用其他id Class carousel标识这个是一个轮播图样式 slide表示轮播图的左右两遍有滑动效果 ol>li*3表示有三个图片 ol.carousel-indicators表示是一个指示到轮播图的列表,每一个li有一个与之对应的轮播图 li data-targ…

bootstrap知识小点

年底没什么项目做了,整理下最近做的网站使用到的bootstrap知识 一.导入bootstrap样式和脚本 <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <script src="js/bootstrap.min.js" type="text/javascript"></script…

Bootstrap学习笔记(二) 表单

在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等. 在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名“form-control”,将会实现一些设计上的定制效果. 1.宽度变成了100% 2.设置了一个浅灰色(#ccc)的边框 3.具有4px的圆角 4.设置阴影效果,并且元素…

bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120

为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过"navbar-header"和"navbar-brand"来实现,示例查看代码编辑器(11-22). 原理分析: 此功能主要起一个提醒功能,当然改良一下可以当作是logo(此处不做过多阐述).其样式主要是加大了字体设置,并且设置了最大宽度: /*源码查看bootstrap.css…

bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111

基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分以下几步: 第一步:首先在制作导航的列表(<ul class="nav">)基础上添加类名"navbar-nav" 第二步:在列表外部添加一个容器(div),并且使用类名"navbar"和"navbar-default"…

Bootstrap学习笔记-布局

Bootstrap学习笔记-布局 默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html><head> <meta charset="utf-8"> <title>布局</title> <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"> &l…

Elasticsearch集群知识笔记

Elasticsearch集群知识笔记 Elasticsearch内部提供了一个rest接口用于查看集群内部的健康状况: curl -XGET http://localhost:9200/_cluster/health response结果: { "cluster_name": "format-es", "status": "green", ... } 这里的status有3种状态,分别是green(所有主分片和复制分片都可用…

JS基础知识笔记

2020-04-15 JS基础知识笔记 // new Boolean()传入的值与if判断一样 var test=new Boolean(); console.log(test); // false var test=new Boolean(0); console.log(test); // false var test=new Boolean(null); console.log(test); // false var test=new Boolean(''); console.log(tes…

Java多线程基础知识笔记（持续更新）

多线程基础知识笔记 一.线程 1.基本概念 程序(program):是为完成特定任务.用某种语言编写的一组指令的集合.即指一段静态的代码,静态对象. 进程(process):是程序的一次执行过程,或是正在运行的一个程序.是一个动态的过程:有它自身的产生.存在和消亡的过程(生命周期). 进程作为资源分配的单位,系统在运行时会为每个进程分配不同的内存区域. 线程(tread):进程可以进一步细化为线程,是一个程序内部的一条执行路径. 若一个进程同一时间并行执行多个线程,就是支持多线程的. 线程作为调…

阿里内部资料：Android开发核心知识笔记共2100页，58万字，完整版开放下载

作为一个3-5年的Android工程师,我们经常会遇到这些瓶颈: 1.技术视野窄长期在小型软件公司,外包公司工作,技术视野被限制的太厉害 2.薪资提升难初中级Android岗位薪资上升空间有限,基本上你想拿15k以上,不会点源码层的东西是根本拿不到的 3.学习资源少入门之后想要提升很难,靠自己接触的简单业务项目,去反复操练那些cv技术.博客和书本上的技术大多比较抽象并且零散,可以借鉴和指导,但是没办法复制成自己的 有了这份阿里众位P7大神整理的Android开发核心知识笔记,所有的瓶颈通通都能快…

bootstrap学习笔记(网页开发小知识)

这是我在学习Boostrap网页开发时遇到的主要知识点: 1.导航条navbar 添加.navbar-fixed-top类可以让导航条固定在顶部,固定的导航条会遮住页面上的其他内容,除非给<body>元素设置了padding. 导航条的默认高度是50px,比如设置:body{ padding-top:70px} 2.下拉菜单 注意:可以通过data属性API就能使用所有的Bootstrap插件,无需写一行JavaScript代码.这是Bootstrap中的一等API,也应该是你的首选方式. &…

Bootstrap学习笔记博客

本片博客用于记录之后要用到Bootstrap的学习笔记   概括: Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的.   选用的原因: 1.浏览器支持:所有的主流浏览器都支持 Bootstrap. 2.容易上手:只要具备 HTML 和 CSS 的基础知识,就可以开始学习 Bootstrap.   包的基本结构: Bootstrap 提供了一个带有网格系统.链接样式.背景的基本结构. Bootstra…

bootstrap 学习笔记

bootstrap作为当下的流行框架不知道它怎么能行呢? 之前也看过好多bootstrap的网上教程,可是发现光看真的记不住,说起来也真是忧桑~重点还是要自己做才是真正的印象深刻.后来我发现解析模板是学习代码最快速的方法. 第一次改模板是在进公司的第一天,那是我第一天工作,经验也不多,虽然在学校学了好多东西,自己在课外也学了好多,但是实践项目是真心的少.内心也是蛮没有底气的,结果一上来就给我公司官网的网址,叫我照着pc端做一个手机页.好吧!心在抖!当时的我,只有自己学过的一些手机移动端的知识,然…

bootstrap 学习笔记（1）---介绍bootstrap和栅格系统

学习前端许久,对于布置框架和响应浏览器用html 和javascript 写的有点繁琐,无意间看到这个框架,觉得挺好用的就开始学习了,但是这个框架上面有很多知识,不是所有的都要学的,故将学习笔记和觉得重点的东西写下来,以便以后学习. Bootstrap  是一个相应式的布局的一个前端框架.bootstrap 学习有以下步骤:    1.bootstrap 安装,    2.bootstrap 全局css 样式    3.bootstrap css组件    4.bootstrap javascr…

bootstrap学习笔记--bootstrap组件

前面已经学习了bootstrap环境搭建以及基本布局方面的知识,下面将学习下关于bootstrap的相关组件,知识点有点多. 关于bootstrap组件知识点目录: Bootstrap--代码显示 Bootstrap--表格 Bootstrap--表单 Bootstrap--按钮 Bootstrap--图片 Bootstrap--辅助类 Bootstrap--响应式实用工具 Bootstrap--字体图标 Bootstrap--下拉菜单 Bootstrap--按钮组 Bootstrap--按钮下…

bootstrap学习笔记--bootstrap安装环境

Bootstrap 安装是非常容易的.此文是本人的学习汇总,便于以后查询学习,同时也希望给大家带来帮助. 下载 Bootstrap 您可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本.当您点击这个链接时,您将看到如下所示的网页: 您会看到两个按钮: Download Bootstrap:下载 Bootstrap.点击该按钮,您可以下载 Bootstrap CSS.JavaScript 和字体的预编译的压缩版本.不包含文档和最初的源代码文件. Dow…

Bootstrap学习笔记（二）

这一节笔记主要记录排版内容笔记,其内容包括标题.文本(包括段落.粗斜体.对齐).列表.表格等. 一.标题 在bootstrap中H1-H6与非框架版的区别不大,需要注意的是<small>标签,在bootstrap中<small></small>标签中的文字设置成了灰色(#999) 二.文字 1.段落 全局文本为14px,行高大约是20px,颜色为深灰色(#333),字体是"Helvetica Neue", Helvetica, Arial, sans…

Bootstrap学习笔记系列1-------Bootstrap网格系统

Bootstrap网格系统 学习笔记 [TOC] 简单网格 先上代码再解释 <!DOCTYPE html> <html> <head> <title>Bootstrap 模板</title> <meta charset="utf-8"> <!-- 引入 Bootstrap --> <link href="http://cdn.static.runoob.com/libs/bootstra…

刻意练习，逃离舒适区——怎么样成为一个高手[罗辑思维]No.183_知识笔记

2016/10/30 14:31:32   一.对事物的见解分为两类:         1.评论性的见解               说的内容都是对的,符合常理的,但是却是不解决问题的.         2.工程学的见解               面对具体的目标,拆解为具体的行为,最终可以解决问题   二.怎样成为一个高手?         答案:刻意练习                  先说练习,         1.套路               接触一个陌生的东西时候,先搜寻老司机的…

Bootstrap学习笔记之整体架构

之前有粗略地看过一下Bootstrap的内容,不过那只是走马观花式地看下是怎么用的,以及里面有什么控件,所以就没想着记笔记.现在由于要给部门做分享,所以不得不深入地去学习下,不然仅是简单地说下怎么用,那就无异于“谋杀”别人(浪费别人的时间等于谋财害命——鲁迅). 1.整体架构 下图为Bootstrap的整体架构图,共分为六大部分:  1.1.12栅格系统 12栅格系统就是把网页的总宽度平分为12份,我们可以自由按份组合.栅格系统使用的总宽度可以不固定,Bootstrap是按百分比进行平分.(保留…

Bootstrap学习笔记上（带源码）

阅读目录 排版 表单 网格系统 菜单.按钮 做好笔记方便日后查阅o(╯□╰)o bootstrap简介: ☑  简单灵活可用于架构流行的用户界面和交互接口的html.css.javascript工具集. ☑  基于html5.css3的bootstrap,具有大量的诱人特性:友好的学习曲线,卓越的兼容性,响应式设计,12列格网,样式向导文档. ☑  自定义JQuery插件,完整的类库,基于Less等. bootstrap模板为使IE6.7.8版本(IE9以下版本)浏览器兼容html5新增的标签,…

Bootstrap学习笔记(一) 排版

Bootsrap是一款优秀的前端开发框架,我从慕课网上开始学习Bootstrap,以下我学习过程中的一些笔记及代码. 首先学习排版: 从Bootstrap网站下载Bootstrap3中文文档(V3.3.5),解压到本地.由于幕课上排版系列课程主要用的是Bootstrap的Css,所以下载解压,将其中的bootstrap.min.css复制粘贴到我保存html文件里的一个styles文件夹中,此文件夹专用来保存css文件. 编辑器使用 sublime text3. 然后再html文件的head里插…

Javascript 基础知识笔记

标签(空格分隔): 廖老师学习笔记 javascript 基本入门 根据廖雪峰老师官网,自己看后的简单笔记 第一小节 基本知识 <script type="text/javascript"></script> 中默认 type 为 Javascript,所以可以省略type指定为javascript. 多个alert出现时,alert也依次弹出.eg: alert('啦啦啦'); alert('ba啦啦');alert('baba啦'); ==与 ===的差别.…