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…

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'> //表示用媒体来布…

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…

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>…

Bootstrap学习笔记之整体架构

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

Bootstrap学习笔记(二) 表单

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

bootstrap学习笔记多媒体对象

本文将介绍Bootstrap中的多媒体对象(Media Object).这些抽象的对象样式用于创建各种类型的组件(比如博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐.媒体对象可以用更少的代码来实现媒体对象与文字的混排. 媒体对象轻量标记.易于扩展的特性是通过向简单的标记应用class来实现的.你可以在html标签中添加以下两种形式来设置媒体对象: media:该class 允许将媒体对象里的多媒体(图像.视频.音频)浮动到内容区块的左边或者右边. media-list 如果你…

Bootstrap~学习笔记索引

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

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采用的是移动端优先,首先设置的就是移动端效果,然后再根据不同的屏幕调整大…

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…

安卓第十四天笔记-内容提供者(ContentProvider)

安卓第十四天笔记-内容提供者(ContentProvider) ContentProvider--内容提供者 1.ContentProvider简介 ContentProvider是不同应用程序之间进行数据交换的一种方式或者称标准API. ContentProvider以某种Uri的方式对外提供数据,允许其他应用访问或者修改数据其它的程序根据Uri去访问操作指定的数据 2.Uri简介 http://www.qq.com:80/news.jsp http://:URL的协议部分,只要通过HTTP…

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"…

《SQLSERVER2012实施与管理实战指南》前4章节笔记内容

<SQLSERVER2012实施与管理实战指南>前4章节笔记内容 <SQLSERVER2012实施与管理实战指南>的前面4章是<SQLSERVER企业级平台管理实践>里没有的个人觉得前4章内容对SQLSERVER的HADR技术,编程技术,安装问题,AlwaysOn技术讲解得非常清楚除了复制技术没有深入讲解,其他技术都讲解得很深入了从第五章开始就是把<SQLSERVER企业级平台管理实践>的内容搬过来,当然里面也添加了强有力的补充内容,这些内容是 <…

Bootstrap学习笔记-布局

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

01_Hadoop学习笔记内容说明

Hadoop学习笔记内容说明_00 1. 观看云帆大数据梦琪老师的<企业级 Hadoop 1.x 应用开发基础课程>2014年4月左右版本. 2. 博客是在梦琪老师的随堂笔记上改动的,方便的是自己以后回顾学习,也或许能给需要改方面帮助的同行提供些许帮助,在此非常感谢梦琪老师. 3. 本系列是在CentOS6.4+hadoop1.2.1上实验通过的. 4. 由于本人刚刚接触,对Linux也只是初步了解,实验过程中遇到比较奇葩的问题,也在此博客写出. 5. 云帆大数据官网公布了一些公开的…

吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：内容居中

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 居中内容块</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css&…

Bootstrap 学习笔记项目实战首页内容介绍下

最终效果: HTML代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <…

Bootstrap 学习笔记项目实战首页内容介绍上

效果图: HTML代码: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <…

Bootstrap学习笔记博客

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

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">  <link href="http://cdn.static.runoob.com/libs/bootstra…

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里插…

Bootstrap学习笔记01

1.Make Images Mobile Responsive 用处: 使图片适配你的页面宽度. 操作: 给图片添加 .img-responsive class属性. <img src="/images/cat.jpg" class="img-responsive"> 2.Center Text with Bootstrap 用处: 使文本居中. 操作: 给文本添加 center-text class属性. <p class=&qu…

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

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

BootStrap学习笔记，优缺点总结

本篇约定Bootstrap简写为BT BT的受欢迎程度是大家有目共睹的,用它可以快速的搭建出网站.很早就接触过这个框架,其中的栅格系统,css模块化以及js插件做的相当不错,由于工作中较少使用也一直没有好好梳理下,这篇文章就来好好分析一下这个系统. BT虽然很好,但也不是没有缺点,由于框架很多都是模块化的,只能这么用,当您的网站比较多样化,界面复杂的话就不太适合使用,此时您需要大量重写代码,维护比较麻烦,此外这个系统的CSS内容也比较多,很多内容是根本用不到的,对于带宽不是很理想的情况下就会…

bootstrap学习笔记--bootstrap组件

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

bootstrap学习笔记--bootstrap排版类的使用

标题 Bootstrap 中定义了所有的 HTML 标题(h1 到 h6)的样式,这个和一般的html没啥区别.请看下面的实例: <h1>测试1 h1</h1> <h2>测试2 h2</h2> <h3>测试3 h3</h3> <h4>测试4 h4</h4> <h5>测试5 h5</h5> <h6>测试6 h6</h6> 内联子标题如果需要向任何标题添加一个内联子…

bootstrap学习笔记--bootstrap布局方式

Bootstrap 3 是移动设备优先的,在这个意义上,Bootstrap 代码从小屏幕设备(比如移动设备.平板电脑)开始,然后扩展到大屏幕设备(比如笔记本电脑.台式电脑)上的组件和网格. 移动设备优先策略内容决定什么是最重要的. 布局优先设计更小的宽度. 基础的 CSS 是移动设备优先,媒体查询是针对于平板电脑.台式电脑. 渐进增强随着屏幕大小的增加而添加元素. 响应式网格系统随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.如下图: Bootstrap 网格系统…

【4.bootstrap练习笔记-内容区块】的更多相关文章