前端基础之《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 ...
最新文章
- React-Amap-HOC组件封装
- kettle 内存设置_Kettle性能调优汇总
- eclipse编辑器未包含main类型_Shopify模版编辑器问题排查及解决办法汇总
- python 列表有没有顺序_python-如何获取列表的所有顺序,以使该列表等于另一个列表?...
- 【转】在Ubuntu 12.04 上为Virtualbox 启用USB 设备支持--不错
- 逻辑卷管理LVM (Logical Volume Manager)
- DNS服务器配置图解过程(1)
- 现在唯一可以得到卡巴斯基激活码的地方
- 使用U盘在虚拟机中安装系统
- 吐血整理:顶级程序员工具集和在线网站大集合~
- 计算机毕设-学籍管理系统
- 就..而言as far as ..is concerned
- 【系统架构设计师】第一章:操作系统(1.2.2) 信号量与pv操作
- 基于VUE+SSM框架的公司公文管理系统(毕业设计+论文)
- Xilinx ISE_14.7安装包下载
- 抓包工具Charles使用指南二:Charles主界面介绍和基础配置
- c语言编程高阶证书考试,c语言二级考试
- 现场问题:定时任务不执行
- 不能使用 UPN 格式的用户名登录到使用 IIS 6.0的FTP
- 2018年10月ios最新退款方法 苹果内购退款流程 必看!!!
热门文章
- QT制作电池电量图标
- 经典算法: 哈夫曼编码
- 加内存条还是固 态硬盘好
- 分享汽车保险杠内分型
- ResNet结构分析
- PCL1.12.1无效的宏定义BOOST_DEFINITIONS -DBOOST_ALL_NO_LIB
- 根据gff/gtf等注释文件取负链上的序列:先反向互补染色体再截取?还是先截取区间再反向互补序列?
- php post返回协议头,POST其实很简单 5 理论基础:http访问的协议头
- 截止目前为止,我遇到的最难的一道算法题:计算相邻两个数的最大差值
- TCGA下载基因表达矩阵、可视化分析