首页文章Bootstrap CSS微型手机 超小「Bootstrap CSS」

Bootstrap CSS微型手机 超小「Bootstrap CSS」

时间2025-01-16 19:36:22发布yu分类文章浏览122
导读:超小设备手机(宽度<768px): 网格行为:一直是水平的 最大容器宽度: None(auto) Class前缀:.col-xs- ...

超小设备手机(宽度<768px):

        网格行为:一直是水平的

        最大容器宽度: None(auto)

        Class前缀:.col-xs-

        最小列宽:Auto

小型设备平板电脑(992px>宽度>=768px):

        网格行为:以折叠开始,断点以上是水平的

        最大容器宽度: 750px

        Class前缀:.col--

        最小列宽:60px

中性台式电脑电脑(1200px>宽度>=992px):

        网格行为:以折叠开始,断点以上是水平的

        最大容器宽度: 970px

        Class前缀:.col-md-

        最小列宽:60px

大型台式电脑电脑(宽度>=1200px):

        网格行为:以折叠开始,断点以上是水平的

        最大容器宽度: 1170px

        Class前缀:.col-lg-

        最小列宽:60px

列数量和都是:12;间隙宽度都是:30px(一个列的每边分别 15px);都可以嵌套都有偏移量都能列排序。

.lead使段落突出显示

.all设定小文本 (设置为父文本的 85% 大小)

.text-left设定文本左对齐

.text-center设定文本居中对齐

.text-right设定文本右对齐

.text-justify设定文本对齐,段落中超出屏幕部分文字自动换行

.text-nowrap段落中超出屏幕部分不换行

.text-lowercase设定文本小写

.text-uppercase设定文本大写

.text-capitalize设定单词首字母大写

.initiali显示在 <abbr> 元素中的文本以小号字体展示,且可以将小写字母转换为大写字母

.blockquote-reverse设定引用右对齐

.list-unstyled移除默认的列表样式,列表项中左对齐 ( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项,你需要在嵌套的列表中使用该样式)

.list-inline将所有列表项放置同一行

.dl-horizontal该类设置了浮动和偏移,应用于 <dl> 元素和 <dt> 元素中,具体实现可以查看实例

.pre-scrollable使 <pre> 元素可滚动,代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条

text-muted:提示,使用浅灰色(#999)

.text-primary:主要,使用蓝色(#428bca)

text-success:成功,使用浅绿色(#3c763d)

.text-info:通知信息,使用浅蓝色(#31708f)

.text-warning:警告,使用黄色(#8a6d3b)

.text-danger:危险,使用褐色(#a94442)

<var>变量赋值: x = ab + y

<kbd>按键提示: CTRL + P

<pre>多行代码

<pre class="pre-scrollable">多行代码带有滚动条

<samp>电脑程序输出: Sample output

<code>同一行代码片段: , 

<table>为表格添加基础样式。

<thead>表格标题行的容器元素(<tr>),用来标识表格列。

<tbody>表格主体中的表格行的容器元素(<tr>)。

<tr>一组出现在单行上的表格单元格的容器元素(<td> 或 <th>)

<td>默认的表格单元格。

<th>特殊的表格单元格,用来标识列或行(取决于范围和位置)。必须在 <thead> 内使用。

<caption>关于表格存储内容的描述或总结。

表格类

.table为任意 <table> 添加基本样式 (只有横向分隔线)

.table-striped在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)

.table-bordered为所有表格的单元格添加边框

.table-hover在 <tbody> 内的任一行启用鼠标悬停状态

.table-condensed让表格更加紧凑

<tr>, <th> 和 <td> 类

.active将悬停的颜色应用在行或者单元格上

.success表示成功的操作

.info表示信息变化的操作

.warning表示一个警告的操作

.danger表示一个危险的操作

垂直或基本表单

向父 <form> 元素添加 role="form"

把标签和控件放在一个带有 class .form-group 的 <div> 中

向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control"

内联表单

如果需要创建一个表单,它的所有元素是内联的,向左对齐的,标签是并排的,请向 <form> 标签添加 class .form-inline

水平表单

向父 <form> 元素添加 class .form-horizontal

把标签和控件放在一个带有 class .form-group 的 中

向标签添加 class .control-label <div>

输入框(Input)

文本框(Textarea)

复选框(Checkbox)

单选框(Radio)

选择框(Select)

禁用的输入框 input(disabled )

.btn为按钮添加基本样式

.btn-default默认/标准按钮

.btn-primary原始按钮样式(未作)

.btn-success表示成功的动作

.btn-info该样式可用于要弹出信息的按钮

.btn-warning表示需要谨慎操作的按钮

.btn-danger表示一个危险动作的按钮操作

.btn-link让按钮看起来像个链接 (仍然保留按钮行为)

.btn-lg制作一个大按钮

.btn-制作一个小按钮

.btn-xs制作一个超小按钮

.btn-block块级按钮(拉伸至父元素100%的宽度)

.active按钮被点击

.disabled禁用按钮

.img-rounded为图片添加圆角 (IE8 不支持)

.img-circle将图片变为圆形 (IE8 不支持)

.img-thumbnail缩略图功能

.img-responsive图片响应式 (将很好地扩展到父元素)

.text-muted              color: #777;

.text-primary            color: #337ab7;

.text-success           color: #3c763d;

.text-info                  color: #31708f;

.text-warning           color: #8a6d3b;

.text-danger            color: #a94442;

 其他

.pull-left元素浮动到左边

.pull-right元素浮动到右边

.center-block设置元素为 display:block 并居中显示

.clearfix清除浮动

.show强制元素显示

.hidden强制元素隐藏

.sr-only除了屏幕阅读器外,其他设备上隐藏元素

.sr-only-focusable与 .sr-only 类结合使用,在元素获取焦点时显示(如:键盘操作的用户)

.text-hide将页面元素所包含的文本内容替换为背景图

.close显示关闭按钮

图木舒克版权声明:本网信息来自于互联网,目的在于传递更多信息,并不代表本网赞同其观点。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,并请自行核实相关内容。本站不承担此类作品侵权行为的直接责任及连带责任。如若本网有任何内容侵犯您的权益,请及时联系我们,本站将会在24小时内处理完毕,E-mail:xinmeigg88@163.com

展开全文READ MORE
超小手机微型
手机基础知识手机知识「手机基础知识」 浦发银行安卓版v14.0.1浦发手机银行「浦发银行安卓版v14.0.1」