自学BootStrap（第一季）

布满荆棘的人生 2022-08-19 13:16 180阅读 0赞

# BootStrap第一季 #

\--------------------------------Class篇

自学BootStrap常用标签class总结：

\------列表（有序列表ol、无序列表ul、自定义列表dl｛dt dd｝）

\----------------无序列表ul/有序列表 去符号  class=“list-unstyled”

\-------------内联列表class="list-inline" (为导航条而生！)

\---------------自定义列表

<dl>  
    <dt>北京</dt>  
    <dd>北京是中国的首都，是政治文化集中地</dd>  
    <dt>上海</dt>  
    <dd>上海号称东方的巴黎</dd>  
</dl>

北京

北京是中国的首都，是政治文化集中地

上海

上海号称东方的巴黎

\--------------------------------水平定义列表  class="dl-horizontal" （只有当屏幕大于768px的时候水平才会起作用）

\-----------------------------------------------------------------------

\------内容部分：

用于显示代码的三种风格：code、pre、kbd

\--------code用于显示内联代码（单个单次或者句子）

\--------pre用于显示代码内容（较多内容）----class pre-scrollable  当内容高度超过340px的时候会出现滚动条

\--------kbd黑的北京，用于显示用户输入的内容

\------表格部分：（important）（bootstrap提供了一种基础、4个附加样式、一个支持响应式的表格）

\-----------------基础表格：class="table"   <table class="table"></table>

\-----------------斑马线表格：（两行间隔颜色）<table class="table table-striped">(实现原理使用了nth-child())

\-----------------带边框的表格：<table class="table table-bordered">

\-----------------鼠标悬浮出现高亮的表格：<table class="table table-hover"></table>

\-----------------紧凑型表格：<table class="table table-condensed"></table>

\-----------------响应式表格：<div class="table-responsive"><table class="table"></table></div>

\-------------------------------表格中，表格行的类--------------

<tr>提供了5中类，表示不同的背景颜色

class="active" 表示当前活动的信息（灰色）

class="success" 表示成功行为（淡绿色）

class="info" 表示中立信息(淡蓝色)

class="warning" 表示警告信息（蛋黄色）

class="danger" 表示错误信息（淡紫色）

注:当使用table-hover的时候 鼠标悬停下后4个class的颜色会加深

\---------------------------------基本表单--------------------------

class="form-group"表单之间外边据  用在Div中（div里面设置label和表单项）

在label里面使用class="sr-only"将会隐藏label的内容，如果不为表单输入控件设置label标签屏幕阅读器将会无法识别。

表单定制效果：class="form-control"-------------宽度100%、设置一个浅灰色边框、有4px圆角、有阴影效果并获取焦点时边框阴影出现变化、设置placeholder颜色\#999

水平表单，显示为横向一排的表单，提示和内容一排---------------在form 中添加class="form-horizontal"   不过当width小于768px的时候还是会换行。

内联表单，表单显示成紧挨着一起浮动显示------------------在form中添加class="form-inline"

发表评论取消回复

表情：

评论列表（有 0 条评论，180人围观）

还没有评论，来说两句吧...

相关阅读

相关 Java入门第一季

一、什么是Java Java是一种广泛应用的计算机编程语言，特别适用于跨平台应用程序的开发。它是一种面向对象的编程语言，由Sun Microsystems开发。

淡淡的烟草味﹌/ 2023年10月15日 16:17/ 0 赞/ 130 阅读

相关 Java 面试题第一季

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

ゝ一世哀愁。/ 2022年10月30日 11:27/ 0 赞/ 215 阅读

相关自学BootStrap（第一季）

BootStrap第一季 \--------------------------------Class篇自学BootStrap常用标签class总结： \---

布满荆棘的人生/ 2022年08月19日 13:16/ 0 赞/ 181 阅读

相关 JavaWeb---框架SpringMvc+Mybatis开发项目第一季(共三季)

勿忘初衷(Stay Real)...走向了JAVA程序员的道路.路途是坎坷的,学习过程中有很多问题需要去解决,曾经想平平淡淡做个简单的猿就可以了,但在看清现实后,顺带在那仅存不

比眉伴天荒/ 2022年08月10日 09:37/ 0 赞/ 199 阅读

相关 ElasticSearch 疯狂学习第二季（自学）

> ElasticSearch 疯狂学习第二季（自学）由于数据量过大，遍历数据库查询进行逻辑判断过慢，为了提高数据查询速率，我打算使用elasticSearch检索

痛定思痛。/ 2022年07月13日 14:11/ 0 赞/ 194 阅读

相关 ElasticSearch疯狂学习第一季

ElasticSearch疯狂学习第一季 [ealsticsearch链接][ealsticsearch] 边学边用，更加深刻的理解ealsticSe

深碍√TFBOYSˉ_/ 2022年07月13日 06:09/ 0 赞/ 206 阅读

相关 ElasticSearch 疯狂学习第三季（自学）

ElasticSearch 疯狂学习第三季（自学） es服务搭建完毕之后，下面我们来学习一下它的增删改查吧。其实可以将es理解为一个数据库，只是他在做全文检

拼搏现实的明天。/ 2022年07月11日 01:54/ 0 赞/ 182 阅读

相关 Spark性能优化第一季

Spark性能优化第一季 1、Spark性能优化需要思考的基本问题 2、CPU和Memory 3、并行度和Task 4、网络一、Spark性能优化核

清疚/ 2022年05月15日 07:16/ 0 赞/ 425 阅读

相关（转载自学）bootstrap表单

基础表单表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。当然表单除了这几个元素之外，还有input、select、texta

男娘i/ 2022年05月10日 00:48/ 0 赞/ 256 阅读

相关 java入门第一季

这是我的第一篇有关java 的博客。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0

浅浅的花香味﹌/ 2022年04月17日 01:50/ 0 赞/ 245 阅读