前端基础之《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" />

前端基础之《Bootstrap（3）—全局CSS样式_排版、代码、表格和按钮》相关推荐

前端基础之《Bootstrap（13）—JavaScript插件_标签页、工具提示、弹出框、折叠效果和幻灯片》
一.data-开头的是什么是bootstrap封装的js. data-toggle data-target data-dismiss data-spy 参考资料:https://blog.csdn. ...
bootstrap插件bootbox参数和自定义弹出框宽度设置
插件官方地址:http://bootboxjs.com/ alert: 1 bootbox.alert("Hello world!", function() {}); dialog ...
AndroidStudio_安卓原生开发_自定义蒙板弹出框WaitDialog---Android原生开发工作笔记134
android在执行程序过程中,很可能会用到,正在执行的提示.下面我们就自己做一个提示框,自带蒙板,执行过程中,后面的窗口内容不能操作. 下面的代码可以直接复制粘贴使用: 1.首先写一个WaitDia ...
前端常用插件之artDialog弹出框
前端常用插件之artDialog弹出框最近,发现一个插件--好看精致的页面弹出框,个人觉得有必要与大家分享一下,它就是artDialog弹出框. 引用上一篇文章<前端常用插件之art-temp ...
Bootstrap系列之弹出框（Popovers）
文章の目录 1.概述 2.Example: Enable popovers everywhere 3.Example: Using the container option 4.Example 4.1 ...
弹出框插件layer使用
layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 插件官方地址:http://layer.layui.co ...
jQuery+Bootstrap美化弹出框
项目中很多弹出的警告框是通过alert()弹出的浏览器警告框,样式比较丑陋且和页面使用的Bootstrap框架样式不吻合,因此需要修改弹出框样式. 采用jQuery+Bootstrap的方式这样弹出的 ...
html弹出框教程,JavaScript 弹出框
JavaScript 弹出框在JavaScript中,您可以创建对话框或弹出窗口来与用户进行交互. JavaScript具有三种不同类型的弹出框:警告框,确认框和提示框. 警告框警告框是最简单的弹 ...
web前端基础之Bootstrap(三) - 插件
模态框放在body内的直接子元素弹出方式 1.通过 data 属性 data-toggle="modal" data-target="#myModal" ...
# 前端基础（HTML + CSS + JavaScript）
一.HTML 基础概念:超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言. 可以使用 HTML 来建立自己的 WEB 站点,H ...

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

前端基础之《Bootstrap（3）—全局CSS样式_排版、代码、表格和按钮》相关推荐

最新文章

热门文章