Bootstrap3CSS样式基本用法总结

作者：坤哥小妹 | 来源：互联网 | 2017-05-12 01:33

出于学习需要，自觉得把基本的bootstrap用法自己敲一遍，对每个用法有个较清晰的印象，所以做了本篇总结，这也是一个巩固的学习过程。

可点击左边的目录，方便速查。

按钮

a,input,button都可以设置为按钮

a标签按钮 button标签按钮

        a标签按钮

预置样式

default样式 primary样式 success样式 info样式 warning样式 danger样式 link样式

按钮大小

大按钮btn-lg 默认按钮小按钮btn-sm 超小按钮btn-xs

块级按钮-btn-block

块级按钮，与父元素等宽块级按钮，与父元素等宽

禁用状态 class="disabled"

被禁用的按钮

激活状态 class="active"

激活状态的按钮

图片

响应式图片-img-responsive

图片的三种形状

表格

基本表格 .table

表格标题表格标题表格标题

表格单元	表格单元	表格单元
表格单元	表格单元	表格单元
表格单元	表格单元	表格单元

                                            表格标题               表格标题               表格标题             
          
                                    表格单元               表格单元               表格单元             
                           表格单元               表格单元               表格单元             
                           表格单元               表格单元               表格单元

斑马线表格 .table .table-striped

表格标题表格标题表格标题

表格单元	表格单元	表格单元
表格单元	表格单元	表格单元
表格单元	表格单元	表格单元

                                            表格标题               表格标题               表格标题             
          
                                    表格单元               表格单元               表格单元             
                           表格单元               表格单元               表格单元             
                           表格单元               表格单元               表格单元

带边框表格 .table .table-bordered

表格标题表格标题表格标题

表格单元	表格单元	表格单元
表格单元	表格单元	表格单元
表格单元	表格单元	表格单元

                                            表格标题               表格标题               表格标题             
          
                                    表格单元               表格单元               表格单元             
                           表格单元               表格单元               表格单元             
                           表格单元               表格单元               表格单元

鼠标悬停表格 .table .table-hover

表格标题表格标题表格标题

表格单元	表格单元	表格单元
表格单元	表格单元	表格单元
表格单元	表格单元	表格单元

                                            表格标题               表格标题               表格标题             
          
                                    表格单元               表格单元               表格单元             
                           表格单元               表格单元               表格单元             
                           表格单元               表格单元               表格单元

紧凑表格 .table .table-condensed

表格标题表格标题表格标题

表格单元	表格单元	表格单元
表格单元	表格单元	表格单元
表格单元	表格单元	表格单元

                                            表格标题               表格标题               表格标题             
          
                                    表格单元               表格单元               表格单元             
                           表格单元               表格单元               表格单元             
                           表格单元               表格单元               表格单元

响应式表格 .table .table-responsive

表格标题表格标题表格标题

表格单元	表格单元	表格单元
表格单元	表格单元	表格单元
表格单元	表格单元	表格单元

表格标题	表格标题	表格标题
表格单元	表格单元	表格单元
表格单元	表格单元	表格单元
表格单元	表格单元	表格单元

状态类

表格标题表格标题表格标题

状态active	状态active	状态active
状态success	状态success	状态success
状态info	状态info	状态info
状态warning	状态warning	状态warning
状态danger	状态danger	状态danger

                                            表格标题               表格标题               表格标题             
          
                                    状态active               状态active               状态active             
                           状态success               状态success               状态success             
                           状态info               状态info               状态info             
                          状态warning               状态warning               状态warning             
                          状态danger               状态danger               状态danger

表单

基本表单-.from-control 和.from-group搭配

用户名

密码

记住密码

确定

用户名

密码

记住密码

内联表单-.from-inline

用户名

密码

记住密码

确定

用户名

密码

记住密码

移动端注意(隐藏label)

用户名

密码

记住密码

确定

用户名

密码

记住密码

input的内联组合

前面

后面

提交

前面

后面

水平排列表单(用栅格系统)

用户名

密码

记住密码

确定

用户名

密码

记住密码

单选框和复选框的内联形式

选择1 选择2 选择3

静态控件 .form-control-static

用户名

Tab Weng

用户名

Tab Weng

标题

（提示：由于默认的h1~h7在博客园编辑器中受默认样式的影响，所以无法显示bootstrap的样式，其具体样式与下面的class="h1"等相同）

h1标题样式

h4标题样式

h5标题样式 h6标题样式

      h1标题样式
      h4标题样式
      h5标题样式
      h6标题样式

标题也可用class="h1"设置

通过class="h1"来设置样式

通过class="h4"来设置样式

通过class="h5"来设置样式

通过class="h6"来设置样式

        通过class="h1"来设置样式
        通过class="h4"来设置样式
        通过class="h5"来设置样式
        通过class="h6"来设置样式

副标题-(或class="small")

设置样式h1 这里是副标题

设置样式h4 这里是副标题

设置样式h5 这里是副标题

设置样式h6 这里是副标题

设置样式h1这里是副标题

设置样式h4这里是副标题

设置样式h5这里是副标题

设置样式h6这里是副标题

页面内容

p标签

Web前端开发工程师，主要职责是利用(X)HTML/CSS/Javascript/DOM/Flash等各种Web技术进行产品的界面开发。制作标准优化的代码，并增加交互动态功能，开发Javascript以及Flash模块，同时结合后台开发技术模拟整体效果，进行丰富互联网的Web开发，致力于通过技术改善用户体验。

突出段落-class="lead"

内联文本元素

标记-

使用mark来标记一下

        使用mark来标记一下

删除线-或

用del标签来删除这段话

用s标签来删除这段话

~~用del标签来删除这段话~~

~~用s标签来删除这段话~~

下划线-或

ins标签表示插入文本
u标签表示加上下划线

ins标签表示插入文本
u标签表示加上下划线

小号文本-

这是小号文本

这是小号文本

强调-

这是加强字体，用strong

这是加强字体，用strong

斜体-

这是斜体，用em

这是斜体，用em

对齐

居左对齐

居中对齐

居右对齐

[两端对齐] 现代项目的开发，需要掌握多种技术。互联网项目，需要用到后端开发、前端开发、界面设计、产品设计、数据库、各种移动客户端、三屏兼容、restFul API设计和OAuth等等，比较前卫的项目，还会用到Single Page Application、Web Socket、HTML5/CSS3 这些技术以及像第三方开发像微信公众号微博应用等等。

[没有对齐] 现代项目的开发，需要掌握多种技术。互联网项目，需要用到后端开发、前端开发、界面设计、产品设计、数据库、各种移动客户端、三屏兼容、restFul API设计和OAuth等等，比较前卫的项目，还会用到Single Page Application、Web Socket、HTML5/CSS3 这些技术以及像第三方开发像微信公众号微博应用等等。

居左对齐

居中对齐

居右对齐

[两端对齐] 现代项目的开发，需要掌握多种技术。互联网项目，需要用到后端开发、前端开发、界面设计、产品设计、数据库、各种移动客户端、三屏兼容、restFul API设计和OAuth等等，比较前卫的项目，还会用到Single Page Application、Web Socket、HTML5/CSS3 这些技术以及像第三方开发像微信公众号微博应用等等。

[没有对齐] 现代项目的开发，需要掌握多种技术。互联网项目，需要用到后端开发、前端开发、界面设计、产品设计、数据库、各种移动客户端、三屏兼容、restFul API设计和OAuth等等，比较前卫的项目，还会用到Single Page Application、Web Socket、HTML5/CSS3 这些技术以及像第三方开发像微信公众号微博应用等等。

改变大小写

LowerCase HahaHa

UpperCase Hahaha

capitalize haHaha

LowerCase HahaHa

UpperCase Hahaha

capitalize haHaha

缩略语标签

bootstrap是一个高度集成化的开发框架此处缩略
bootstrap是一个高度集成化的开发框架此处缩略

bootstrap是一个高度集成化的开发框架此处缩略
bootstrap是一个高度集成化的开发框架此处缩略

引用

基本引用

这是html的基本引用标签blockquote，bootstrap为它左边添加了一个灰色带

这是html的基本引用标签blockquote，bootstrap为它左边添加了一个灰色带

引用来源

这世界并不会在意你的自尊。这世界指望你在自我感觉良好之前先要有所成就。
比尔盖茨

这世界并不会在意你的自尊。这世界指望你在自我感觉良好之前先要有所成就。

比尔盖茨

居右的引用，添加类.blockquote-reverse

这世界并不会在意你的自尊。这世界指望你在自我感觉良好之前先要有所成就。
比尔盖茨

这世界并不会在意你的自尊。这世界指望你在自我感觉良好之前先要有所成就。

比尔盖茨

列表

无样式列表.list-unstyled

这里是列表

这里是列表

这里是二级列表

这里是二级列表

这里是二级列表

这里是二级列表

这里是列表

这里是列表

这里是列表

这里是列表

这里是列表

这里是二级列表

这里是二级列表

这里是二级列表

这里是二级列表

这里是列表

这里是列表

这里是列表

内联列表-同一行显示.list-inline

这里是列表

这里是列表

这里是二级列表

这里是二级列表

这里是二级列表

这里是二级列表

这里是列表

这里是列表

这里是列表

这里是列表

这里是列表

这里是二级列表

这里是二级列表

这里是二级列表

这里是二级列表

这里是列表

这里是列表

这里是列表

普通描述

名言如果你陷入困境，那不是你父母的过错，所以不要尖声抱怨我们的错误，要从中吸取教训。比尔盖茨的名人名言是这样描述的在你出生之前，你的父母并非像他们现在这样乏味。他们变成今天这个样子是因为这些年来他们一直在为你付账单，给你洗衣服，听你大谈你是如何的酷。所以，如果你想消灭你父母那一辈中的"寄生虫"来拯救雨林的话，还是先去清除你房间衣柜里的虫子吧。

名言

如果你陷入困境，那不是你父母的过错，所以不要尖声抱怨我们的错误，要从中吸取教训。

比尔盖茨的名人名言是这样描述的

在你出生之前，你的父母并非像他们现在这样乏味。他们变成今天这个样子是因为这些年来他们一直在为你付账单，给你洗衣服，听你大谈你是如何的酷。所以，如果你想消灭你父母那一辈中的"寄生虫"来拯救雨林的话，还是先去清除你房间衣柜里的虫子吧。

水平排列描述.dl-horizontal

名言如果你陷入困境，那不是你父母的过错，所以不要尖声抱怨我们的错误，要从中吸取教训。比尔盖茨的名人名言是这样描述的在你出生之前，你的父母并非像他们现在这样乏味。他们变成今天这个样子是因为这些年来他们一直在为你付账单，给你洗衣服，听你大谈你是如何的酷。所以，如果你想消灭你父母那一辈中的"寄生虫"来拯救雨林的话，还是先去清除你房间衣柜里的虫子吧。

名言

如果你陷入困境，那不是你父母的过错，所以不要尖声抱怨我们的错误，要从中吸取教训。

比尔盖茨的名人名言是这样描述的

在你出生之前，你的父母并非像他们现在这样乏味。他们变成今天这个样子是因为这些年来他们一直在为你付账单，给你洗衣服，听你大谈你是如何的酷。所以，如果你想消灭你父母那一辈中的"寄生虫"来拯救雨林的话，还是先去清除你房间衣柜里的虫子吧。

代码

内联代码 code

Let's add a headFile #include

Let's add a headFile #include

用户输入 kbd

请按 F5 刷新

请按 F5 刷新

代码块 pre

This is a tag name p

This is a tag name p

变量 var

a

a

程序输出 samp

Hello World!

Hello World!

本篇总结了一些常用的bootstrap3 的Css样式，但并非所有。

详细的学习请参考bootstrap官网：http://getbootstrap.com

bootstrap4 即将到来，期待！

bootstrap

编辑器

html

css

javascript

restful

微信

写下你的评论吧 !

吐个槽吧,看都看了

会员登录 | 用户注册

推荐阅读

微信
前端人员必须知道的三个问题及其发展阶段

本文介绍了前端人员必须知道的三个问题，即前端都做哪些事、前端都需要哪些技术，以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外，还介绍了一些后端服务，如Node.js。 ... [详细]

蜡笔小新   2023-12-12 12:45:59

微信
PDF内容编辑的两种小方法，你知道怎么操作吗？

本文介绍了两种PDF内容编辑的方法：迅捷PDF编辑器和Adobe Acrobat DC。使用迅捷PDF编辑器，用户可以通过选择需要更改的文字内容并设置字体形式、大小和颜色来编辑PDF文件。而使用Adobe Acrobat DC，则可以通过在软件中点击编辑来编辑PDF文件。PDF文件的编辑可以帮助办公人员进行文件内容的修改和定制。 ... [详细]

蜡笔小新   2023-12-12 19:37:50

import
分享css中提升优先级属性!important的用法总结

web前端|css教程css!importantweb前端-css教程本文分享css中提升优先级属性!important的用法总结微信门店展示源码,vscode如何管理站点,ubu ... [详细]

蜡笔小新   2023-12-11 11:25:16

import
介绍一个免费的具备数据显示/录入/更新/删除功能的asp.net控件

本文介绍了一个免费的asp.net控件，该控件具备数据显示、录入、更新、删除等功能。它比datagrid更易用、更实用，同时具备多种功能，例如属性设置、数据排序、字段类型格式化显示、密码字段支持、图像字段上传和生成缩略图等。此外，它还提供了数据验证、日期选择器、数字选择器等功能，以及防止注入攻击、非本页提交和自动分页技术等安全性和性能优化功能。最后，该控件还支持字段值合计和数据导出功能。总之，该控件功能强大且免费，适用于asp.net开发。 ... [详细]

蜡笔小新   2023-12-11 09:41:26

import
使用chrome编辑器实现网页截图功能的方法

本文介绍了在chrome浏览器中使用编辑器实现网页截图功能的方法。通过在地址栏中输入特定命令，打开控制台并调用命令面板，用户可以方便地进行网页截图操作。 ... [详细]

蜡笔小新   2023-12-10 15:50:00

import
Unity3D引擎的体系结构和功能详解

本文详细介绍了Unity3D引擎的体系结构和功能。Unity3D是一个屡获殊荣的工具，用于创建交互式3D应用程序。它由游戏引擎和编辑器组成，支持C#、Boo和JavaScript脚本编程。该引擎涵盖了声音、图形、物理和网络功能等主题。Unity编辑器具有多语言脚本编辑器和预制装配系统等特点。本文还介绍了Unity的许可证情况。Unity基本功能有限的免费，适用于PC、MAC和Web开发。其他平台或完整的功能集需要购买许可证。 ... [详细]

蜡笔小新   2023-12-10 11:01:31

config
快速学习RN之环境搭建和跑demo(一)

RN即ReactNative基于React框架针对移动端的跨平台框架,在学习RN前建议最好熟悉下html,css,js,当然如果比较急,那就直接上手吧,毕竟用学习前面基础的时间,R ... [详细]

蜡笔小新   2023-10-17 15:29:16

select
【珍藏】2019年最新Vue相干佳构开源项目库汇总

媒介本文的前身是源自github上的项目awesome-github-vue,但由于该项目上次更新时候为2017年6月12日，许多内容早已逾期或是许多近期优异组件未被收录，所以小肆 ... [详细]

蜡笔小新   2023-10-17 14:33:46

default
1223 drf引入以及restful规范

[toc]前后台的数据交互前台安装axios插件,进行与后台的数据交互安装axios,并在main.js中设置params传递拼接参数data携带数据包参数headers中发送头部 ... [详细]

蜡笔小新   2023-10-17 13:41:51

default
Python正课119 —— Django 进阶9

本文内容皆为作者原创，如需转载，请注明出处：https:www.cnblogs.comxuexianqip13045462.html1.自定义分页器的拷贝及使用当我们需要使用 ... [详细]

蜡笔小新   2023-10-16 17:47:02

default
入门Java需熟练掌握哪些技术呢？

Java工程师无疑是当下令人艳羡的工作之一，因此，每年都有大批大批的朋友想要报名Java工程师学习Java也就不奇怪了。那么入门Java掌握哪些技术能力 ... [详细]

蜡笔小新   2023-10-16 15:56:51

default
如果要用前端框架，开发流程是怎样的？

公司有3个后端，一个前端（我），我属于初级水平吧，开发流程：前端切页面、写页面交互，然后把页面给后端（JAVA），后端“套页面”（Velocity模板），然后前端在模板上再进行微调。显然 ... [详细]

蜡笔小新   2023-10-16 09:22:08

default
每天进步一点点——Swift学习

于2012年3月份开始接触OpenStack项目，刚开始之处主要是与同事合作共同部署公司内部的云平台，使得公司内部服务器能更好的得到资源利用。在部署的过程中遇到各种从未遇到过的问题 ... [详细]

蜡笔小新   2023-10-15 16:35:00

default
利用ASP.NET MVC和Bootstrap快速搭建响应式个人博客站(一)

1.0为什么要做这个博客站？　　在工作学习中，经常要搜索查找各种各样的资料，每次找到相关资料后都会顺手添加到浏览器书签中，时间一长，书签也就满了。而且下次再点击这个书签时，可能就会忘记当时为什么要添加这个书签了，更有可能书签连接已经无效。这样一来，也就不方便 ... [详细]

蜡笔小新   2023-10-15 13:22:17

default
用wGenerator给编程提速

1.需求设定问题1：以上的需求设定,如果是你来开发，会需要多久呢？请在心中记下您的答案。2.需要制作的内容与步骤用java来做的话实现上述功能，大致需要7个步骤:1.编写DTO(或 ... [详细]

蜡笔小新   2023-10-15 13:14:45

坤哥小妹

这个家伙很懒，什么也没留下！

Tags | 热门标签

frameworks

typescript

web3

schema

cmd

javascript

netty

select

dll

object

integer

client

random

php5

default

config

solr

timestamp

range

bit

usb

require

cPlusPlus

cookie

instance

ascii

import

function

get

dockerfile

RankList | 热门文章

1css div中文字位置_超赞的 CSS 阴影技巧与细节

2todolist增加markdown模块

3Machine Learning Foundations 笔记：112 Nonlinear Transformation

4join列表的要求

5VS2008 新建网站时没有模板解决办法

6C# 获取实体类的字段名称和值

7mysql超哥

8折腾个半死，数据库初始化设置不当报错 ORA01078: failure in proces...

9Vue项目优化上线

10《汉宫春》翻译原文赏析诗人宋赵时奚

11mmcls多标签分类实战（二）：resnet多标签分类

12Codeigniter3.1.6开启csrf访问被拒绝

13计算机图形学应用题,《计算机图形学》练习题(答案)

14Windows7 安装TensorflowGPU文档

15开发笔记:读《分布式一致性原理》JAVA客户端API操作2

Bootstrap3CSS样式基本用法总结

按钮

a,input,button都可以设置为按钮

预置样式

按钮大小

块级按钮-btn-block

禁用状态 class="disabled"

激活状态 class="active"

图片

响应式图片-img-responsive

图片的三种形状

表格

基本表格 .table

斑马线表格 .table .table-striped

带边框表格 .table .table-bordered

鼠标悬停表格 .table .table-hover

紧凑表格 .table .table-condensed

响应式表格 .table .table-responsive

状态类

表单

基本表单-.from-control 和.from-group搭配

内联表单-.from-inline

移动端注意(隐藏label)

input的内联组合

水平排列表单(用栅格系统)

单选框和复选框的内联形式

静态控件 .form-control-static

标题

h4标题样式

h1标题样式

h4标题样式

h5标题样式

h6标题样式

标题也可用class="h1"设置

副标题-(或class="small")

页面内容

p标签

突出段落-class="lead"

内联文本元素

标记-

删除线-或

下划线-或

小号文本-

强调-

斜体-

对齐

改变大小写

缩略语 标签

引用

基本引用

引用来源

居右的引用，添加类.blockquote-reverse

列表

无样式列表.list-unstyled

内联列表-同一行显示.list-inline

普通描述

水平排列描述.dl-horizontal

代码

内联代码 code

用户输入 kbd

代码块 pre

变量 var

程序输出 samp

缩略语标签