300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > 前端基础之《Bootstrap(3)—全局CSS样式_排版 代码 表格和按钮》

前端基础之《Bootstrap(3)—全局CSS样式_排版 代码 表格和按钮》

时间:2021-03-27 05:19:20

相关推荐

前端基础之《Bootstrap(3)—全局CSS样式_排版 代码 表格和按钮》

一、排版

1、标题(.page-header)

从<h1>到<h6>均可使用page-header样式。

<body><div><h1 class="page-header">h1. Bootstrap heading</h1><p class="lead">有lead样式</p><p>没有lead样式</p></div></body>

效果:

2、段落(.lead)

p标签:p标签与生俱来外上边距、外下边距都改了。(见上面)

3、<mark></mark>标记

4、<del></del>删除线

5、<s></s>删除线

6、<ins></ins>下划线

7、<small></small>小号字体

8、文本对齐

.text-left:左对齐

.text-center:居中对齐

.text-right:右对齐

9、文本大小写

.text-lowercase:小写

.text-uppercase:大写

.text-capitalize:首字母大写

10、无样式列表(.list-unstyled)

没有小点点。

<body><ul class="list-unstyled"><li>linux</li><li>linux</li><li>linux</li><li>linux</li><li>linux</li></ul></body>

11、内联列表(.list-inline)

通过设置display: inline-block;把块标签变成行标签。

12、自定义列表

<dl><dt>选择题:</dt><dd>A. xxx</dd><dd>B. xxx</dd><dd>C. xxx</dd><dd>D. xxx</dd></dl>

13、水平排列列表(.dl-horizontal)

二、代码

1、<code></code>内联代码

2、<pre></pre>代码块

3、<kbd></kbd>用户输入

三、表格

1、基本格式(.table)

从原本挤在一起,瞬间分开了。

2、条纹状(.table-striped)

增加了明暗条纹。

3、带边框(.table-bordered)

4、鼠标悬停(.table-hover)

鼠标放上去会有移动效果。

5、紧缩表格(.table-condensed)

<body><div class="container"><h1 class="page-header">bootstrap前端框架</h1><table class="table table-striped table-bordered table-hover table-condensed"><tr><th>ID</th><th>用户名</th><th>密码</th></tr><tr><td>001</td><td>002</td><td>003</td></tr><tr><td>001</td><td>002</td><td>003</td></tr><tr><td>001</td><td>002</td><td>003</td></tr><tr><td>001</td><td>002</td><td>003</td></tr><tr><td>001</td><td>002</td><td>003</td></tr></table></div></body>

6、响应式表格(.table-responsive)

将table包裹在<div class="table-responsive"></div>中,缩小屏幕会出现水平滚动条。

四、按钮

1、按钮样式(.btn)

2、白色(.btn-default)

3、蓝色(.btn-primary)

4、绿色(.btn-success)

5、青色(.btn-info)

6、红色(.btn-warning)

7、黄色(.btn-danger)

8、把按钮做的和a链接一样(.btn-link)

9、大按钮(.btn-lg)

10、小按钮(.btn-sm)

11、微小按钮(.btn-xs)

12、button变为块标签,独占一行(.btn-block)

13、禁用按钮(disabled属性)

14、哪些标签可以做按钮

<button class="btn btn-primary btn-block btn-lg">个人信息</button><a class="btn btn-primary btn-block btn-lg" href="">个人信息</a><input type="button" class="btn btn-primary btn-block btn-lg" value="OK" /><input type="submit" class="btn btn-primary btn-block btn-lg" value="OK" /><input type="reset" class="btn btn-primary btn-block btn-lg" value="OK" />

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。