当前位置：Gxlcms > html代码 > Bootstrap3CSS样式基本用法总结_html/css_WEB-ITnose

Bootstrap3CSS样式基本用法总结_html/css_WEB-ITnose

时间：2021-07-01 10:21:17 帮助过：5人阅读

出于学习需要，自觉得把基本的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

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

选择1 选择2 选择3

                      选择1                                选择2                                选择3                                              选择1                                      选择2                                      选择3

静态控件 .form-control-static

用户名

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<stdio>

用户输入 kbd

请按 F5 刷新

请按 F5 刷新

代码块 pre

This is a tag name div

<div>This is a tag name div </div>

变量 var

a

a

程序输出 samp

Hello World!

Hello World!

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

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

bootstrap4 即将到来，期待！

< 上一篇
margin-top:0px;margin-bottom:0px;不能同时满足，将出现什么情况？_html/css_WEB-ITnose

下一篇 >
CSS3选择器（全）_html/css_WEB-ITnose

人气教程排行

230次 1 如何生成一个调查问卷_html/css_WEB-ITnose

230次 2 在页面直接显示日历_html/css_WEB-ITnose

230次 3 如何点击a标签实现弹出inputfile上传文件对话框_HTML/Xhtml_网页制作

229次 4 关于列表标记的详细介绍

229次 5 cssborder-bottom（指定下边线的样式、宽度及颜色）

229次 6 html新闻详情页_html/css_WEB-ITnose

229次 7 为何页面内容和网页边缘有空隙_html/css_WEB-ITnose

228次 8 position:fixed定位时“高度坍塌”问题的解决_html/css_WEB-ITnose

227次 9 htmlp标签怎么换行？htmlp标签添加br换行标签的应用

226次 10 HTML的<!DOCTYPE>标签

226次 11 html页面中友情链接怎么进行添加设置？（代码示例）

226次 12 form表单中属性及功能应用介绍汇总

226次 13 详解form标签中的method属性

226次 14 HTML5Canvas逼真烟雾效果js插件

226次 15 页面跳转特效_html/css_WEB-ITnose

226次 16 改变鼠标选中区域的样式。_html/css_WEB-ITnose

225次 17 关于$("body").append()一段html代码，在页面写能触发事件，写在js文件里写就没有_html/css_WEB-ITnose

225次 18 CSS3悬浮动画效果_html/css_WEB-ITnose

225次 19 纯C语言实现的CSS解析器：katana_html/css_WEB-ITnose

225次 20 body在默认情况下是具有margin外边距的_html/css_WEB-ITnose

Bootstrap3CSS样式基本用法总结_html/css_WEB-ITnose

按钮

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

人气教程排行

缩略语标签