bookstrap之全局css样式文字总结

最新推荐文章于 2024-04-06 20:41:17 发布

置顶

@小伊哥哥

最新推荐文章于 2024-04-06 20:41:17 发布

阅读量2k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： web 文章标签： bookstrap

本文链接：https://blog.youkuaiyun.com/qq_40109477/article/details/84953360

本文是关于Bootstrap全局CSS样式的文字总结，涵盖了列布局、偏移、嵌套、排序、自定义CSS、排版、代码标签、表格、表单、辅助类等内容。详细解释了Bootstrap中的col-xx-*、offset、mixin、变量、表格样式、表单控件状态等关键概念，并提供了相关链接以供参考和测试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一次写,按照bookstrap官方文档(https://v3.bootcss.com/css/),菜鸟教程!!!(可在线测试编辑)(http://www.runoob.com/bootstrap/bootstrap-css-overview.html)和其他博文(表单及控件详解)(https://www.cnblogs.com/sankexin/p/5509955.html)借鉴写的较完整的文字版本.可配合着上述链接看

开始了!!!有不完整的地方请见谅,觉得有点抽象的可以借鉴文档和菜鸟教程测试编辑

!!!
注:下文所有都是下标,即都从0-11*

1.与`<div class="row" >` 结合的长度最大长度为12

col-xs-* :超小屏幕手机
col-sm- * :小屏幕平板
col-md- * :中等屏幕桌面显示器
col-lg- *:中等屏幕桌面显示器
特例:转换为 100% 宽度的布局。

  <div class="container-fluid">
  		<div class="row">
  		 </div>
  </div>

!!!

**2.`col-md-offset-'*'`:将列向右侧偏移的比例**

!!!
*

3,嵌套列:内容再次嵌套， `<div class="row">`;里的 `<div class="col-xx-'">`在嵌套一遍上述row和col-xx-*;**

此时最里层的col-xx-* <=12,占比此时变为为父层长度的相对占比了....

!!!

4.列排序:改变列（column）的顺序。

col-xx-push-* 从左边开始
col-xx-pull-* 从右边开始(镜像布局,但是格式和从左边(头朝向左)开始是一样的)

注:一般两者加起来要等于12,否则<12时虽然可以布局,但是两者边框会重叠,不建议!!!

5.mixin 和变量自定义css(涉及修改mixin内容要利用Less)(不常用)**

mixin:已定义好的部分带参数或不带参数的css(即.xx)集合语义化的 CSS 代码。
使用mixin:
1.修改这些变量的值(即修改mixin内容)
或者
2.用默认值调用这些 mixin (直接调用);
如再css中.content-main {
.make-lg-column(8);再在HTML中<div class="content-main">...</div>
}
!!!
**

6. 排版基本标签

6.1<strong>rendered as bold text</strong>(加粗)
6.2<h1>h1. Bootstrap heading <small>Secondary text</small></h1>(显小)
6.3<em>rendered as italicized text</em>(斜体)
6.4You can use the mark tag to <mark>highlight</mark> text.(高亮)
6.5<del>This line of text is meant to be treated as deleted text.</del>(划删除线,<s>同义区别不大)
6.6<u>This line of text will render as underlined</u>)(带下划线的文本)
6.7(不常用
<p class="text-lowercase">Lowercased text.</p>(效果:lowercased text.都小写)
<p class="text-uppercase">Uppercased text.</p>(效果:UPPERCASED TEXT.都大写)
<p class="text-capitalize">Capitalized text.</p>(效果:Capitalized Text.首字母都大写)
)
6.8<abbr title="attribute">attr</abbr>(鼠标移至attr,显示attribute提示)
6.9<abbr title="HyperText