博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Bootstrap 基本css样式
阅读量:5238 次
发布时间:2019-06-14

本文共 2365 字,大约阅读时间需要 7 分钟。

1.标题

1级标题<h1> 38px 是默认大小的2.7倍
2级标题<h2> 32px 是默认大小的2.25倍
3级标题<h3> 24px 是默认大小的1.70倍
4级标题<h4> 18px 是默认大小的1.25倍
5级标题<h5> 14px 是默认大小的1.00倍
6级标题<h6> 12px 是默认大小的0.85倍
添加<small>标签会得到比标题字体更小的文本。
<h1><small>这里会得到比h1更小的文本</small></h1>
2.页面主体
bootstrap定义了一个和其他段落有所区别的中心段落。
要想创建一个中心段落,可以把lead类添加到段落中。
<p class = "lead">这是一个中心段落。</p>
3.排版元素
强调内联元素、对齐、强调类、缩略语、地址、引用、列表
3.1强调内联元素
<strong>字体设置为粗体,文本比周围其他文本重要。<b>元素没有任何语义上的含义,只是粗体。
<em>设置为斜体重点强调。注意与<i>的区分,<i>无语义上的含义。
<mark>用于突出显示从其他地方引用过来的文本
<u>为文本添加下划线
<del>删除线
3.2对齐类
text-left:在其父级块元素中左对齐。与text-align:left效果一样。
text-center:右对齐。
text-right:居中。
text-justify:类似Word排版中的文字两端对齐。
3.3强调类
text-muted:文本情景颜色设置为浅灰色。用来降低文本的重要性。
text-warning:文本情景颜色设置为橙色。表示警告或出现错误。
text-danger:文本情景颜色设置为红色。表示危险的动作、问题或很重要的错误。
text-success:文本情景颜色设置为绿色。某个动作执行成功。
text-info:文本情景颜色设置为蓝色。一般信息
text-primary:文本情景颜色设置为天蓝色。表示文本具有一定的优先级。
同样,有情景背景色。
bg-primary\bg-success\bg-info\bg-warning\bg-danger
3.4地址
<address>
<a href = "mailto:1214443035@qq.com">Contact me</a>
</address>
3.5引用
将<p>元素放入<blockquote>来显示引用。在引用的的左侧加入了一条5像素长的浅灰色线。
<blockquote>
<p>这一段是引用</p>
</blockquote>
3.6缩略语
<abbr>HTML</abbr>
在缩略语的底部添加浅灰色的短线。有个title属性。有个辅助光标。
3.7列表
无序列表、有序列表、描述列表的外边距和内边距变的一直。
<li> <ol> <dl>
4.表格
在<table>中添加class = “table”这个类。
table-bordered#设置边框
table-striped#设置斑马条纹
为某个单元格添加情景颜色使用success、warning、danger、info、active类。
5.按钮
可以在<a>或<input>元素上使用button类
<button type = "button" class = "btn btn-default"></button>
<button type = "button" class = "btn btn-primary"></button>
<button type = "button" class = "btn btn-success btn-lg"></button>
<button type = "button" class = "btn btn-info btn-sm"></button>
<button type = "button" class = "btn btn-waning btn-xs"></button>
<button type = "button" class = "btn btn-danger"></button>
<button type = "button" class = "btn btn-link"></button>
6.表单
正常、内联、水平
<form role = "form"></form>
<form role = "form" class = "form-inline"></form> #相同元素的处于同一行中。
<form role = "form" class = "form-horizontal"></form> #表单具有水平的布局
7.代码
<code>代码片段<code/>#将内联的代码片段包起来。如果有多个片段,就要使用<pre>标签。
<code>标签中的尖括号必须要用&lt;和&gt;来代替。
8.图片
<img src = "1.png" class = "img-rounded" height = "150" width = "130">#方角
<img src = "1.png" class = "img-circle">#圆角
<img src = "1.png" class = "img-thumbnail" height = "75" width = "75">#缩略图
还可以使用img-responsive类让图片成为响应式的。
9.字体
Bootstrap默认包含sans-serif、serif、monospace
10.字体尺寸

 

转载于:https://www.cnblogs.com/xubing-613/p/6908186.html

你可能感兴趣的文章
[ROS] Chinese MOOC || Chapter-4.4 Action
查看>>
简单的数据库操作
查看>>
解决php -v查看到版本与phpinfo()版本不一致问题
查看>>
在线制作logo
查看>>
Java反射之修改常量值
查看>>
jmeter远程分布执行遇到的网卡坑(A Test is currently running,stop or ....)
查看>>
Xcode 中设置部分文件ARC支持
查看>>
iOS-解决iOS8及以上设置applicationIconBadgeNumber报错的问题
查看>>
亡灵序曲-The Dawn
查看>>
MySQL中的隔离级别和悲观锁及乐观锁示例
查看>>
手机端h5 ajax 上传图片支持微信内置浏览器
查看>>
移动的彩虹
查看>>
Redmine
查看>>
HtmlEditor常用模式
查看>>
Another app is currently holding the yum lock; waiting for it to exit.. yum被锁定无法使用
查看>>
帧的最小长度 CSMA/CD
查看>>
xib文件加载后设置frame无效问题
查看>>
第一次博客
查看>>
Java Map 常见用法举例
查看>>
编程算法 - 左旋转字符串 代码(C)
查看>>