文档章节

Bootstrap技巧小集合

柴高八斗之父
 柴高八斗之父
发布于 2016/11/29 13:34
字数 358
阅读 38
收藏 0
点赞 0
评论 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;

 

© 著作权归作者所有

共有 人打赏支持
柴高八斗之父
粉丝 4
博文 172
码字总数 86465
作品 0
宁波
前端工程师
jshow for bootstrap

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

supperman
2013/10/21
1K
0
Laravel 不权威导航

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

weixingo
2016/02/05
180
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
288.2K
33
纯函数式堆(纯函数式优先级队列)part three ---- bootstrapping (自举)

前言: 这篇文章是基于我看过的一篇论文,主要是关于函数式数据结构,函数式堆(优先级队列), 我会以自己的理解写下来,然后论文中出现的代码将会使用scala这们语言。 论文链接: Optimal ...

Ldpe2G
2013/12/14
0
0
[2] UI原型设计工具Pencil Project 学习系列----- 入门

在上一篇文章,笔者提到了一个开源免费的超级强大的UI原型设计工具---Pencil Project,那么该如何使用这个软件呢?下面让笔者来分享一下简单的心得。本文以Window操作系统为例子。 @ 打开Pen...

chancein007
2017/07/27
0
0
Bootstrap 3.2.0 发布,Web 前端 UI 框架

最新的 Bootstrap 3.2.0 发布了,该版本主要新特性包括: Responsive embeds New responsive utility classes Copy docs snippets LMVTFY Browser bugs 等等,详细介绍请看官方发行说明。 下...

oschina
2014/06/27
19.2K
59
Bootstrap 2.0.2 发布,Web 前端工具包

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

红薯
2012/03/13
2.4K
5
thinkphp+ajax无刷新分页并加载显示图片

最近自己用thinkphp和bootstrap做一个小站点,在用到ajax与后台数据库交互实现无刷新分页时,因为我需要返回的数据是html代码,里面包含要显示出图片,然而返回数据到静态页面时,却发现返回...

glowry
2014/03/17
0
0
推荐 10 款基于 Bootstrap 框架的扩展

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

oschina
2013/06/21
53.8K
32

没有更多内容

加载失败,请刷新页面

加载更多

下一页

【面试题】盲人坐飞机

有100位乘客乘坐飞机,其中有一位是盲人,每位乘客都按自己的座位号就坐。由于盲人看不见自己的座位号,所以他可能会坐错位置,而自己的座位被占的乘客会随便找个座位就坐。问所有乘客都坐对...

garkey
45分钟前
0
0
谈谈神秘的ES6——(二)ES6的变量

谈谈神秘的ES6——(二)ES6的变量 我们在《零基础入门JavaScript》的时候就说过,在ES5里,变量是有弊端的,我们先来回顾一下。 首先,在ES5中,我们所有的变量都是通过关键字var来定义的。...

JandenMa
今天
1
0
arts-week1

Algorithm 594. Longest Harmonious Subsequence - LeetCode 274. H-Index - LeetCode 219. Contains Duplicate II - LeetCode 217. Contains Duplicate - LeetCode 438. Find All Anagrams ......

yysue
今天
0
0
NNS拍卖合约

前言 关于NNS的介绍,这里就不多做描述,相关的信息可以查看NNS的白皮书http://doc.neons.name/zh_CN/latest/nns_background.html。 首先nns中使用的竞价货币是sgas,关于sgas介绍可以戳htt...

红烧飞鱼
今天
1
0
Java IO类库之管道流PipeInputStream与PipeOutputStream

一、java管道流介绍 在java多线程通信中管道通信是一种重要的通信方式,在java中我们通过配套使用管道输出流PipedOutputStream和管道输入流PipedInputStream完成线程间通信。多线程管道通信的...

老韭菜
今天
0
0
用Python绘制红楼梦词云图,竟然发现了这个!

Python在数据分析中越来越受欢迎,已经达到了统计学家对R的喜爱程度,Python的拥护者们当然不会落后于R,开发了一个个好玩的数据分析工具,下面我们来看看如何使用Python,来读红楼梦,绘制小...

猫咪编程
今天
1
0
Java中 发出请求获取别人的数据(阿里云 查询IP归属地)

1.效果 调用阿里云的接口 去定位IP地址 2. 代码 /** * 1. Java中远程调用方法 * http://localhost:8080/mavenssm20180519/invokingUrl.action * @Title: invokingUrl * @Description: * @ret......

Lucky_Me
今天
1
0
protobuf学习笔记

相关文档 Protocol buffers(protobuf)入门简介及性能分析 Protobuf学习 - 入门

OSC_fly
昨天
0
0
Mybaties入门介绍

Mybaties和Hibernate是我们在Java开发中应用的比较多的两个ORM框架。当然,目前Mybaties正在慢慢取代Hibernate,这是因为相比较Hibernate而言Mybaties性能更好,响应更快,更加灵活。我们在开...

王子城
昨天
2
0
编程学习笔记之python深入之装饰器案例及说明文档[图]

编程学习笔记之python深入之装饰器案例及说明文档[图] 装饰器即在不对一个函数体进行任何修改,以及不改变整体的原本意思的情况下,增加函数功能的新函数,因为这个新函数对旧函数进行了装饰...

原创小博客
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部