Bootstrap是Twitter推出的一个用于前端开发的开源工具包。
用外链加载的方式可以将Bootstrap链接进来

常用方式:
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">

Bootstrap中提供的方法用class来引入
不同的标签有不同的class
常用标签的常用样式
1,table

table
table-bordered
table-striped: 颜色隔行变化
table-hover: 鼠标划过样式

2,h标签

<h1>36px <small>65%</small></h1>
<h2>30px<s mall>65%</small></h2>
<h3>24px<small>65%</small></h3>
<h4>18px<small>75%</small></h4>
<h5>14px<small>75%</small></h5>
<h6>12px<small>75%</small></h6>

3,文本标签(如:p)

text-center: 居中
text-right: 右对齐
text-left
text-justify: 两端对齐
text-uppercase: 将所有字母都变成大写
text-lowercase: 将所有字母都变成小写
text-capitalize: 首字母大写
text-nowrap: 不换行
lead: 突出 强调(就是加粗加大一些)

4,列表
list-unstyled: 取消列表的默认样式
list-inline: 将列表横放,并取消默认样式

5,button

btn: 正常大小按钮
btn-lg: 大点的按钮
btn-sm: 小点的按钮
btn-xs: 更小的按钮
btn-danger: 红色
btn-warning: 黄色
btn-success: 绿色
btn-info: 浅蓝色
btn-primary: 深蓝色
btn-link: 蓝色的字体

active: 活跃的
disabled: 禁止点击
6.表单
form-inline :表示里面内容是在一行的 通常写在一个大div里,把想要在一行的元素套在里面
form-control : input的基本样式
form-group : 将里面内容分成一组,通常写在个大div里
input-group-aon :

Bootstrap标签的更多相关文章

  1. Bootstrap 标签页(Tab)插件

    摘自: http://www.runoob.com/bootstrap/bootstrap-tab-plugin.html Bootstrap 标签页(Tab)插件 标签页(Tab)在 Bootstr ...

  2. 第二百四十五节,Bootstrap标签页和工具提示插件

    Bootstrap标签页和工具提示插件 学习要点: 1.标签页 2.工具提示 本节课我们主要学习一下 Bootstrap 中的标签页和工具提示插件. 一.标签页选项卡 标签页也就是通常所说的选项卡功能 ...

  3. Bootstrap 标签

    本章将讲解bootstrap标签,标签可用于计数,提示和页面上其它的标记显示.使用class.laber来显示标签,如下面的实例所示 <!DOCTYPE html><html> ...

  4. Bootstrap 标签页和工具提示插件

    一.标签页 标签页也就是通常所说的选项卡功能. //基本用法 <ul class="nav nav-tabs"> <li class="active&q ...

  5. Bootstrap 标签的变体 实例样式

    Bootstrap 标签样式,代码如下: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 标签的 ...

  6. 解决Bootstrap 标签页(Tab)插件切换echarts不显示问题

    1.参考连接:https://blog.csdn.net/qq_24313955/article/details/78363981 问题描述:在echarts跟bootstrap选项卡整合的时候,默认 ...

  7. 使用bootstrap标签页

    关键字:使用标签页,静态调用html页面(使用iframe内联框架) 完整代码如下: <!DOCTYPE html> <html lang="en"> &l ...

  8. bootstrap 标签页tab切换js(含报错原因)

    booststrap 标签页的tab切换,相信大家已经都很熟悉了,在boot官网示例以及其他网站已经很多罗列相关代码的了,这里就不赘述了.这里主要贴下让boot标签页默认显示哪个标签页的js. 主要留 ...

  9. Bootstrap标签页(Tab)插件事件

    事件 下表列出了标签页(Tab)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 show.bs.tab 该事件在标签页显示时触发,但是必须在新标签页被显示之前.分别使用 even ...

随机推荐

  1. ruby学习总结05

    1.数值类(Numeric) 有理数:Rational(分子,分母) 复数:Complex(实数,虚数) 随机数:Rnadom   rand()  返回比1小的浮点数,rand(种子数)  返回0到该 ...

  2. Cacti中文版在Centos上的安装

    最近老有人问Cacti中文版在哪下载啊怎么安装啊,我在这里一遍给大家讲解了:Cacti中文版在Centos上的安装 1.基本安装 cacti是运作在apache+php+mysql+net-snmp工 ...

  3. C++,利用链式栈实现括号匹配,界面友好,操作方便,运行流畅

    #include<iostream> #include<string> using namespace std; struct Node { char ch; Node* ne ...

  4. MySQL(四) —— 操作数据表中的记录

    插入记录 INSERT [INTO] tbl_name [(col_name,...)] {VALUES | VALUE} ({expr | DEFAULT},...),(...),... //法二: ...

  5. Word和Windows有严重的bug这样下去微软堪忧

    Word和Windows对微软的重要性就像C语言的指针. Windows中特别常用的搜索功能有严重的bug,常常搜不到Excel文件. Word中的排版功能有严重的bug,有图超过几十页就无法排版了, ...

  6. js数组去重的三种常用方法总结

    第一种是比较常规的方法 思路: 1.构建一个新的数组存放结果 2.for循环中每次从原数组中取出一个元素,用这个元素循环与结果数组对比 3.若结果数组中没有该元素,则存到结果数组中   Array.p ...

  7. RNAseq分析软件STAR的安装

    wget https://github.com/alexdobin/STAR/releases/STAR-2.5.2a.tar.gz tar -xzf STAR-2.5.2a.tar.gz cd ST ...

  8. poj 1279 -- Art Gallery (半平面交)

    鏈接:http://poj.org/problem?id=1279 Art Gallery Time Limit: 1000MS   Memory Limit: 10000K Total Submis ...

  9. HDU 5723 Abandoned country(落后渣国)

    HDU 5723 Abandoned country(落后渣国) Time Limit: 8000/4000 MS (Java/Others)    Memory Limit: 65536/65536 ...

  10. url 转码 urlencode和 urldecode

    参考网址http://www.t086.com/code/php/function.php-urlencode.php urlencode 将字符串以 URL 编码. 语法: string urlen ...