标签：表格 样式 Bootstrap 初识 3.2 CSS 按钮 btn 类名

Bootstrap初识:CSS样式

• 一、Bootstrap介绍
• • 1.1 特点
• 二、排版样式
• • 2.1 页面主体样式
  • 2.2 标题元素
  • 2.3 内联文本元素
  • 2.4 文本对齐方式
  • 2.5 大小写转换
  • 2.6 缩略语
  • 2.7 地址文本
  • 2.7 引用文本
  • 2.8 列表排版
  • 2.9 代码
• 三、表格和按钮
• • 3.1 表格
  • • 3.1.1 基本表格样式、条纹状表格、带边框的表格、悬停鼠标
    • 3.1.2 状态类
    • 3.1.3 隐藏行、响应式表格
  • 3.2 按钮
  • • 3.2.1 注意事项
    • 3.2.2 预定义样式
    • 3.2.3 尺寸大小
    • 3.2.4 块级按钮、激活状态、禁用状态

一、Bootstrap介绍

1.1 特点

1. 跨设备、跨浏览器
   可以兼容所有现代浏览器, 包括比较诟病的 IE7、8
2. 响应式布局
3. 提供全面的组件
   Bootstrap 提供了很多实用性的jquery插件, 包括: 导航、标签等
4. 内置JQuery插件
5. 支持 HTML5、CSS3
6. 支持LESS动态样式
   LESS使用变量、嵌套、操作混合编码, 编写更快、更灵活的CSS

二、排版样式

2.1 页面主体样式

1. font-size: 14px;
2. line-height:1.428(20px)
3. p段落被设置等于1/2行高(即10px);
4. 颜色为#333;
5. .lead类名:用来突出文本

2.2 标题元素

h1-h6既可以当做标签使用还可以作为类名调用
副标题 .small

1. h1-h3为父元素的65%/h4-h6为父元素的75%
2. 背景颜色为#777
3. 行高为1
4. 粗细为400

2.3 内联文本元素

1. mark: 高亮文本 可以为标签也可为类名
2. s del 删除线
3. u ins 下划线
4. b strong 加粗
5. i em 倾斜
6. small 标准字号的85%

2.4 文本对齐方式

都为类名

1. text-left 左对齐
2. text-right 右对齐
3. text-center 居中对齐
4. text-justify 两端对齐
5. text-nowrap 不换行

2.5 大小写转换

都为类名

1. text-lowercase 小写
2. text-uppercase 大写
3. text-capitalize 首字母大写

2.6 缩略语

标签 < addr></addr> 缩略语

2.7 地址文本

//设置地址, 去掉了倾斜, 设置了行高, 底部20px
<address>
	<strong>Twitter, Inc</strong><br>雷猴啊<br>
	San Francisco, CA 94107<br>
	<addr>P:</addr>(123)32432-43534
</address>

2.7 引用文本

默认样式引用, 增加了做边线, 设定了字体大小和内外边距
标签 < blockquote></blockquote> 引用文本
注意: 添加类名 blockquote-reverse 可以在右边引入(边线在右边,文本居右)

2.8 列表排版

1. list-unstyled 移除默认样式
2. list-inline 设置成内联:内部子元素水平排列
3. dl-horizontal 将自定义列表水平排列

2.9 代码

内联代码
< code><\code> 红色高亮
用户输入
< kbd></kbd> 黑色高亮
代码块
< pre></pre> 灰色块包裹

三、表格和按钮

3.1 表格

3.1.1 基本表格样式、条纹状表格、带边框的表格、悬停鼠标

基本表格样式

1. .table 实现基本的表格样式 宽度为100%,子元素宽度平均分配

条纹状表格

1. .table-striped 隔行变色

带边框的表格

1. table-bordered 字面意思

悬停鼠标
.table-hover 鼠标悬停实现背景效果

3.1.2 状态类

可以单独设置每一行的背景样式 类名

样式	说明
active	鼠标悬停在行或者单元格上(灰色)
success	标识成功或积极的动作(成功绿)
info	标识普通的提示信息或动作(提示蓝)
warning	标识警告或需要用户注意(警告黄)
danger	表示危险或潜在的带来负面影响的动作(危险红)

3.1.3 隐藏行、响应式表格

隐藏行 类名 sr-only
响应式表格 表格父元素设置响应式, 小于768px 出现边框
类名 .table-responsive

3.2 按钮

类名 .btn-default

3.2.1 注意事项

可以作为按钮使用的标签或元素

1. a标签
2. button
3. input

注意事项
1 . 针对组件的注意事项
导航和导航条组件只支持<button>元素
2. 链接被作为按钮使用时的注意事项
如果a标签被作为按钮使用–并用于在当前页面触发某些功能–而不是用于链接当前页面中的其他部分, 那么,务必为其设置role=‘button’ 属性
3. 跨浏览器展现
尽可能使用<button>元素来获得在各个浏览器上获得相匹配的挥之效果。

3.2.2 预定义样式

样式	说明
btn-default	默认样式
btn-success	成功样式
btn-info	一般信息样式
btn-warning	警告样式
btn-danger	危险样式
btn-primary	首选项样式
btn-link	链接样式

3.2.3 尺寸大小

类名 btn-lg 大
btn-sm 小
btn-xs 超小的

3.2.4 块级按钮、激活状态、禁用状态

块级按钮
类名 btn-block 将按钮变成块级元素
激活状态
类名 active 使按钮一直处于激活状态
禁用状态
类名 disabled 使按钮一直处于禁用状态

标签：表格,样式,Bootstrap,初识,3.2,CSS,按钮,btn,类名
来源： https://blog.csdn.net/yunmegnze/article/details/118305211

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。