bootstrap

2021-12-06 18:00:30 阅读：200 来源： 互联网

标签：md column text bootstrap 栅格 xs col

对齐：

text-left：居左

text-center居中

text-right居右

text-justify文本对齐

text-nowrap文本不换行

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

改变大小写：

lowercased text.全是小写

UPPERCASED TEXT.全是大写

Capitalized Text.首字母大写

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

栅格系统：

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
通过“行（row）”在水平方向创建一组“列（column）”。
你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-lg-* 不存在，也影响大屏幕设备。

栅格系统Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin用于生成更
具语义的布局。
 1、     不论什么时候、分割父容器时、父容器永远是12分
2、它本身的样式（md）、找的是比它本身小的样式(sm/xs当没有sm时，会默认成sm的格式、当更小时、会是xs的样式)（它本身有时，用本身的，本身没有时，找比它小的，本身更小时，用100%）列重置：
列重置解决的空隙/白问题（重叠问题）visible-xs-block它只在xs上使用，其他地方看不到.
visible-xs-block意思是手机浏览时时显示为块元素， 同理.visible-xs-inline则为行内元素。所有的响应式布局都是基于媒体查询的、在手机上做东西时，很少左右留空白注意：在写代码时，不要行里
面套行、否则内容会被覆盖列偏移使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 
元素向右侧偏移了4个列（column）的宽度。col-sm-offset-0没有列偏移、row-no-gutters没有间距、列排序通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序、
push左边、pull右边、push和pull允许填东西、但是空白不允许填东西嵌套列就是指12分部局、只要让他们的布局等于12就可以(md里可以套md、md、sm、xs他们是样式、这个嵌套列跟样式没太大关系、
只要结果等于12就可以) 当转换成xs样式时，他们两个md-6是上下分布的，因为1：div默认是独占一行的，没有样式，但宽度是100%的 排版h1和div.h1样式是一样的小号文本(<small> ) sub(下标)和sup
(上标)<em>和i是一样的是斜体标签、text-lowercase全改成小写、text-uppercase全改成大写、text-capitalize驼峰式命名（第一个单词的首字母大写）、列表：有序、无序、自定义：dt/dl/dd默认情
况下：dd和dt不在一行

标签：md,column,text,bootstrap,栅格,xs,col
来源： https://www.cnblogs.com/ltc123/p/15651028.html

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

ICode9

bootstrap