文档章节

Bootstrap技巧小集合

柴高八斗之父
 柴高八斗之父
发布于 2016/11/29 13:34
字数 358
阅读 47
收藏 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
博文 188
码字总数 103298
作品 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
288.2K
33
Laravel 不权威导航

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

weixingo
2016/02/05
180
0
[2] UI原型设计工具Pencil Project 学习系列----- 入门

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

chancein007
2017/07/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

创建第一个react项目

sudo npm i -g create-react-app@1.5.2 create-react-app react-app cd react-apprm -rf package-lock.jsonrm -rf node_modules #主要是为了避免报错npm installnpm start......

lilugirl
今天
1
0
在浏览器中进行深度学习:TensorFlow.js (八)生成对抗网络 (GAN)

Generative Adversarial Network 是深度学习中非常有趣的一种方法。GAN最早源自Ian Goodfellow的这篇论文。LeCun对GAN给出了极高的评价: “There are many interesting recent development...

naughty
今天
0
0
搬瓦工镜像站bwh1.net被DNS污染,国内打不开搬瓦工官网

今天下午(2018年10月17日),继搬瓦工主域名bandwagonhost.com被污染后,这个国内的镜像地址bwh1.net也被墙了。那么目前应该怎么访问搬瓦工官网呢? 消息来源:搬瓦工优惠网->搬瓦工镜像站b...

flyzy2005
今天
2
0
SpringBoot自动配置

本篇介绍下,如何通过springboot的自动配置,将公司项目内的依赖jar,不需要扫描路径,依赖jar的情况下,就能将jar内配置了@configuration注解的类,创建到IOC里面 介绍下开发环境 JDK版本1.8 spr...

贺小五
今天
3
0
命令行新建Maven多项目

参考地址 # DgroupId 可以理解为包名# DartifactId 可以理解为项目名mvn archetype:generate -DgroupId=cn.modfun -DartifactId=scaffold -DarchetypeArtifactId=maven-archetype-quickst......

阿白
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部