【Bootstrap 排版 笔记】的更多相关文章

Bootstrap 排版 笔记

Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默认的字体栈. 使用 Bootstrap 的排版特性,您可以创建标题.段落.列表及其他内联元素 标题 Bootstrap 中定义了所有的 HTML 标题(h1 到 h6)的样式.请看下面的实例: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 标题</title> &l…

Bootstrap学习笔记(二) 表单

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

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学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120

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