文档章节

Bootstrap技巧小集合

柴高八斗之父
 柴高八斗之父
发布于 2016/11/29 13:34
字数 358
阅读 65
收藏 0

轻装上阵用Bootstrap框架,

第一步:引入bootstrap样式,bootstrap.css

第二步:引入bootstrap字体图标

<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

这里是采用的 fontawesome的字体库,因为此字体库最强大最全面。采用链接远程的方式最简单,样式css文件和字体图标都会在该服务器上。我们只管调用即可。
图标丰富程度:
fontawesome > Glyphicons >simple-line-icon以及其他

fontawesome图标一览表:    http://fontawesome.dashgame.com/
Glyphicons图标一览表:http://v3.bootcss.com/components/ 
simple-line-icon图标一览表:  http://simplelineicons.com/

第三步:引入js bootstrap.min.js,此处别忘了jquery公共库文件。
js用于需要交互的插件,如下拉菜单,弹窗,折叠等,不用交互的仅适用css即可。
 

Bootstrap CSS 概览
了解基础概念:http://www.runoob.com/bootstrap/bootstrap-css-overview.html  很有必要

 

 

别样用法:
single-testimonial-text::before {

  content: "\f032";
  font-family: fontawesome;
  left: 30px;
  position: absolute;
  top: 21px;
}

如何获得这个图标在字体可以的代码?

打开该样式表里找即可。

这里是采用的fontawesome字体图标,利用before在内容前插入图标,\f032

 

 

在一个row中,本来跨列只能12列,也就是
如果你row内,col-md-4,那么最多并列是3列。超过3列则需要另起一个row。

如果你循环N个后,会出现下图这个情况:

解决办法就是在col-md-4这些里面的div内容元素做个 float:left;

 

© 著作权归作者所有

共有 人打赏支持
柴高八斗之父
粉丝 5
博文 200
码字总数 111898
作品 0
宁波
前端工程师
私信 提问
jshow for bootstrap

jshow for bootstrap是整理改造的一款可用于搭建一个功能完善的站点的bootstrap插件集合。本系统基于Bootstrap2.x进行构造,感谢Bootstrap这一优秀的开源软件!由于bootstrap3对modal和拖动已...

supperman
2013/10/21
1K
0
发布在github上的bootstrap文档的中文版本

Bootstrap是快速开发Web应用程序的前端工具包。它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等。 我正在翻译boots...

孔祥赫
2012/03/23
0
7
30 个惊艳的 Bootstrap 扩展插件

Bootstrap 是快速开发Web应用程序的前端工具包。它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等。 Bootstrap 的使...

oschina
2013/08/28
296.4K
33
Laravel 不权威导航

Laravel不权威导航 Hi 这里是Roy整理的Laravel相关索引,希望能帮到大家 ,目前只是一小部分,正在努力整理中... Laravel 文档 Laravel 官方文档 —— 英文 Laravel 中文文档 —— laravel-...

weixingo
2016/02/05
180
0
Bootstrap 2.0.2 发布,Web 前端工具包

Bootstrap 2.0.2 版本今天发布了,包含大量的 bug 修复和文档的更新,一些些新特性,下载地址:Bootstrap docs. Bootstrap是快速开发Web应用程序的前端工具包。它是一个CSS和HTML的集合,它使...

红薯
2012/03/13
2.4K
5

没有更多内容

加载失败,请刷新页面

加载更多

开始看《Java学习笔记》

虽然书买了很久,但一直没看。这其中也写过一些Java程序,但都是基于IDE的帮助和对C#的理解来写的,感觉不踏实。 林信良的书写得蛮好的,能够帮助打好基础,看得出作者是比较用心的。 第1章概...

max佩恩
昨天
7
0
Redux 三大原则

1.单一数据源 在传统的MVC架构中,我们可以根据需要创建无数个Model,而Model之间可以互相监听、触发事件甚至循环或嵌套触发事件,这些在Redux中都是不被允许的。 因为在Redux的思想里,一个...

wenxingjun
昨天
3
0
跟我学Spring Cloud(Finchley版)-12-微服务容错三板斧

至此,我们已实现服务发现、负载均衡,同时,使用Feign也实现了良好的远程调用——我们的代码是可读、可维护的。理论上,我们现在已经能构建一个不错的分布式应用了,但微服务之间是通过网络...

周立_ITMuch
昨天
2
0
XML

学习目标  能够说出XML的作用  能够编写XML文档声明  能够编写符合语法的XML  能够通过DTD约束编写XML文档  能够通过Schema约束编写XML文档  能够通过Dom4j解析XML文档 第1章 xm...

stars永恒
昨天
1
0
RabbitMQ学习(2)

1. 生产者客户端 void basicPublish(String exchange, String routingKey, boolean mandatory, boolean immediate, BasicProperties props, byte[] body) 1. 在生产者客户端发送消息时,首先......

江左煤郎
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部