Bootstrap3 CSS样式基本用法总结
来源:互联网 发布:今日头条采集 帝国cms 编辑:程序博客网 时间:2024/05/17 03:10
按钮
a,input,button都可以设置为按钮
a标签按钮
预置样式
按钮大小
块级按钮-btn-block
禁用状态 class="disabled"
激活状态 class="active"
图片
响应式图片-img-responsive
图片的三种形状
表格
基本表格 .table
斑马线表格 .table .table-striped
带边框表格 .table .table-bordered
鼠标悬停表格 .table .table-hover
紧凑表格 .table .table-condensed
响应式表格 .table .table-responsive
状态类
表单
基本表单-.from-control 和.from-group搭配
内联表单-.from-inline
移动端注意(隐藏label)
input的内联组合
水平排列表单(用栅格系统)
单选框和复选框的内联形式
静态控件 .form-control-static
标题
(提示:由于默认的h1~h7在博客园编辑器中受默认样式的影响,所以无法显示bootstrap的样式,其具体样式与下面的class="h1"等相同)
h1标题样式
h4标题样式
h5标题样式
h6标题样式
标题也可用class="h1"设置
通过class="h1"来设置样式
通过class="h4"来设置样式
通过class="h5"来设置样式
通过class="h6"来设置样式
副标题-<small>(或class="small")
设置样式h1 这里是副标题
设置样式h4 这里是副标题
设置样式h5 这里是副标题
设置样式h6 这里是副标题
页面内容
p标签
Web前端开发工程师,主要职责是利用(X)HTML/CSS/JavaScript/DOM/Flash等各种Web技术进行产品的界面开发。 制作标准优化的代码,并增加交互动态功能,开发JavaScript以及Flash模块,同时结合后台开发技术模拟整体 效果,进行丰富互联网的Web开发,致力于通过技术改善用户体验。
突出段落-class="lead"
Web前端开发工程师,主要职责是利用(X)HTML/CSS/JavaScript/DOM/Flash等各种Web技术进行产品的界面开发。 制作标准优化的代码,并增加交互动态功能,开发JavaScript以及Flash模块,同时结合后台开发技术模拟整体 效果,进行丰富互联网的Web开发,致力于通过技术改善用户体验。
内联文本元素
标记-<mark>
使用mark来标记一下
使用mark来<mark>标记</mark>一下
删除线-<del>或<s>
用s标签来删除这段话
下划线-<ins>或<u>
小号文本-<small>
这是小号文本
<small>这是小号文本</small>
强调-<strong>
这是加强字体,用strong
<strong>这是加强字体,用strong</strong>
斜体-<em>
这是斜体,用em
<em>这是斜体,用em</em>
对齐
居左对齐
居中对齐
居右对齐
[两端对齐] 现代项目的开发,需要掌握多种技术。互联网项目,需要用到后端开发、 前端开发、界面设计、产品设计、数据库、各种移动客户端、三屏兼容、restFul API设计 和OAuth等等,比较前卫的项目,还会用到Single Page Application、Web Socket、HTML5/CSS3 这些技术以及像第三方开发像微信公众号微博应用等等。
[没有对齐] 现代项目的开发,需要掌握多种技术。互联网项目,需要用到后端开发、 前端开发、界面设计、产品设计、数据库、各种移动客户端、三屏兼容、restFul API设计 和OAuth等等,比较前卫的项目,还会用到Single Page Application、Web Socket、Html5/CSS3 这些技术以及像第三方开发像微信公众号微博应用等等。
改变大小写
LowerCase HahaHa
UpperCase Hahaha
capitalize haHaha
缩略语 <abbr>标签
bootstrap是一个高度集成化的开发框架 此处缩略
bootstrap是一个高度集成化的开发框架 此处缩略
引用
基本引用
这是html的基本引用标签blockquote,bootstrap为它左边添加了一个灰色带
引用来源<footer>
这世界并不会在意你的自尊。这世界指望你在自我感觉良好之前先要有所成就。
比尔盖茨
居右的引用,添加类.blockquote-reverse
这世界并不会在意你的自尊。这世界指望你在自我感觉良好之前先要有所成就。
比尔盖茨
列表
无样式列表.list-unstyled
- 这里是列表
- 这里是列表
- 这里是二级列表
- 这里是二级列表
- 这里是二级列表
- 这里是二级列表
- 这里是列表
- 这里是列表
- 这里是列表
内联列表-同一行显示.list-inline
- 这里是列表
- 这里是列表
- 这里是二级列表
- 这里是二级列表
- 这里是二级列表
- 这里是二级列表
- 这里是列表
- 这里是列表
- 这里是列表
普通描述
- 名言
- 如果你陷入困境,那不是你父母的过错,所以不要尖声抱怨我们的错误,要从中吸取教训。
- 比尔盖茨的名人名言是这样描述的
- 在你出生之前,你的父母并非像他们现在这样乏味。 他们变成今天这个样子是因为这些年来他们一直在为你付账单,给你洗衣服,听你大谈你是如何的酷。 所以,如果你想消灭你父母那一辈中的"寄生虫"来拯救雨林的话,还是先去清除你房间衣柜里的虫子吧。
水平排列描述.dl-horizontal
- 名言
- 如果你陷入困境,那不是你父母的过错,所以不要尖声抱怨我们的错误,要从中吸取教训。
- 比尔盖茨的名人名言是这样描述的
- 在你出生之前,你的父母并非像他们现在这样乏味。 他们变成今天这个样子是因为这些年来他们一直在为你付账单,给你洗衣服,听你大谈你是如何的酷。 所以,如果你想消灭你父母那一辈中的"寄生虫"来拯救雨林的话,还是先去清除你房间衣柜里的虫子吧。
代码
内联代码 code
Let's add a headFile #include<stdio>
Let's add a headFile <code>#include<stdio></code>
用户输入 kbd
请按 F5 刷新
请按 <kbd>F5</kbd> 刷新
代码块 pre
<div>This is a tag name div </div>
<pre><div>This is a tag name div </div></pre>
变量 var
a
<var>a</var>
程序输出 samp
Hello World!
<samp>Hello World!</samp>
- Bootstrap3 CSS样式基本用法总结
- Bootstrap3 CSS样式基本用法总结
- BOOTstrap3 各类CSS样式范例
- BootStrap3.0学习--全局 CSS 样式
- BootStrap3.0学习--全局 CSS 样式
- CSS的基本样式总结(一)
- CSS的基本样式总结(二)
- CSS的基本样式总结(三)
- css样式的零碎用法总结
- css table布局样式用法总结
- 【CSS】CSS样式总结
- 基本css样式
- CSS基本样式
- css基本样式
- CSS基本样式
- CSS基本样式一
- CSS基本样式二
- CSS基本样式
- Fragment嵌套Fragment时遇到的那些坑
- 基于Xposed 拦截百度 高德地图 实现根据经纬度 改变当前位置
- 百度地图 获取经纬度为4.9E-324
- 服务器架构前的基础知识补充-持续学习
- PHP设计模式——装饰器模式
- Bootstrap3 CSS样式基本用法总结
- glib使用之哈希表
- Ubuntu安装MySQL-python
- 深入研究 Runtime
- ORB SLAM2运行步骤/怎样跑通orbslam2
- 类加载器的工作原理
- Emmet:HTML/CSS代码快速编写神器
- PHP设计模式——策略模式
- 分享一个小工具:Excel表快速转换成JSON字符串