bootstrap系统学习

1.响应式中注意的内容：

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px Verdana; color: #424242 }
span.s1 { font: 9.0px "PingFang SC" }

一行(row)必须在.container中。

col-xs-

col-sm-

col-md-

col-lg-

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px Verdana; color: #424242 }
span.s1 { font: 9.0px "PingFang SC" }

列偏移 .col-md-offset-*

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px Verdana; color: #424242 }
span.s1 { font: 9.0px "PingFang SC" }

列排序 .col-md-push-*  .col-md-pull-*

2.文本排版

h1-h6 类h1-h6

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px "PingFang SC Semibold"; color: #424242 }
span.s1 { font: 10.0px "PingFang SC" }

强调文本  small   strong  em  cite b和strong一样吧

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px Verdana; color: #424242 }
span.s1 { font: 10.0px "PingFang SC" }

缩略语     abbr 

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px Verdana; color: #424242 }
span.s1 { font: 10.0px "PingFang SC" }

地址元素 address

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px Verdana; color: #424242 }
span.s1 { font: 10.0px "PingFang SC" }

引用  blockquote

3.代码：

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px "PingFang SC Semibold"; color: #424242 }
span.s1 { font: 9.0px Verdana }
span.s2 { font: 9.0px "PingFang SC" }

<code>显示单行内联代码

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px "PingFang SC Semibold"; color: #424242 }
span.s1 { font: 9.0px Verdana }
span.s2 { font: 9.0px "PingFang SC" }

<kbd>显示用户输入代码

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px Verdana; color: #424242 }
span.s1 { font: 9.0px "PingFang SC" }

<pre>多行代码块

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px Verdana; color: #424242 }
span.s1 { font: 9.0px "PingFang SC" }

<var>变量

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px Verdana; color: #424242 }
span.s1 { font: 9.0px "PingFang SC" }

<samp>程序结果

4.链表ul li

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px Verdana; color: #424242 }
span.s1 { font: 9.0px "PingFang SC" }

去点列表 .list-unstyled

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px Verdana; color: #424242 }
span.s1 { font: 9.0px "PingFang SC" }

内联列表.list_inline

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px Verdana; color: #424242 }
span.s1 { font: 9.0px "PingFang SC" }

水平列表dl.dl-horizontal

5.table

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px Verdana; color: #5d5d5d }
span.s1 { font: 10.0px "PingFang SC" }

带背条纹表格.table-striped

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px Verdana; color: #5d5d5d }
span.s1 { font: 10.0px "PingFang SC" }

带边框.table-border

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px Verdana; color: #5d5d5d }
span.s1 { font: 10.0px "PingFang SC" }

紧凑.table-condensed

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px Verdana; color: #5d5d5d }
span.s1 { font: 10.0px "PingFang SC" }

悬停.table-hover

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px Verdana; color: #5d5d5d }
span.s1 { font: 10.0px "PingFang SC" }

行样式 .active .success .info

6. 表单

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px Verdana; color: #424242 }

.form-control

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px Verdana; color: #424242 }

.form-group

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px Verdana; color: #424242 }
span.s1 { font: 9.0px "PingFang SC" }

在form上应用.form-horizontal

control-label

<form class="form-horizontal" role="from">
                <div class="form-group">
                    <label class=" col-sm-2 control-label">用户名:</label>
                    <div class="col-sm-8">
                      <input type="text" class="form-control"/>
                    </div>
                </div>
</form>

单选和复选框

<div class="radio">
   <label><input type="radio" name="sex" value="M" />男</label>
</div>
<div class="checkbox">
   <label><input type="checkbox" />中国</label>
</div>

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px Verdana; color: #424242 }
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px Verdana; color: #424242 }
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px Verdana; color: #424242 }
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px Verdana; color: #424242 }

时间： 2024-10-21 19:33:30

bootstrap系统学习的相关文章

bootstrap 新手学习笔记 代码整理

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 滚动监听(Scrollspy)插件方法</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/jqu

最新2019学习路线，零基础怎么系统学习大数据？

大数据技术是指从各种各样类型的巨量数据中,快速获得有价值信息的技术.解决大数据问题的核心是大数据技术.零基础怎么系统学习大数据?首先我们先了解一下什么是大数据. 最新2019学习路线,零基础怎么系统学习大数据?"大数据"是一个体量特别大,数据类别特别大的数据集,并且这样的数据集无法用传统数据库工具对其内容进行抓取.管理和处理.大数据工程师需要学习哪些知识?创一个小群,供大家学习交流聊天如果有对学大数据方面有什么疑惑问题的,或者有什么想说的想聊的大家可以一起交流学习一起进步呀.也希望大家

Linux系统理解以及Linux系统学习心得

原创作品转载请注明出处  <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 作者:严哲璟 说一下我对Linux系统的理解 1.加载Linux内核准备:在加载基本输入输出模块(BIOS)之后,从磁盘的引导扇区读入操作系统的代码文件块到内存中,之后开始整个系统的初始化. 2.main.c的start_kernel函数是整个操作系统的入口,这也与Linux是基于C语言的特性相符,start_kernel具体做的动作很多

Bootstrap快速学习笔记（2）表单系列之二

欢迎收看大奥编写的Bootstrap快速学习笔记(2)表单系列之二 本学习笔记根据[慕课网]教程修改而来,用它学习Bootstrap,将会带来全新的体验哦: 表单控件大小 表单控件状态 按钮 图像 详细介绍 表单控件大小表单控件大小可以通过给表单控件添加class类来实现,如果想要比较大,则添加input-lg类,如果想要比较小, 则添加input-sm类,但这仅是对高度进行了处理,如果要对宽度进行处理,需要在每个input控件外围添加div容器并带有col-xs-4类,并 且要在这组控件的外围

Bootstrap快速学习笔记（1）排版系列之二

欢迎收看大奥编写的Bootstrap快速学习笔记(1)排版系列之二 本学习笔记根据[慕课网]教程修改而来,用它学习Bootstrap,将会带来全新的体验哦: 表格 表格行的类 详细介绍 表格表格是Bootstrap的基础组件之一,有一个基础样式和四个附加样式以及一个响应式样式,全部通过class类来实 现,.table:基础表格,这是无论哪种类型的表格都必不可少的类:.table-striped:斑马线表格,更具可读性:.table- bordered:带边框的表格:.table-hover:鼠

Bootstrap 框架学习目录

Bootstrap 框架学习目录 Bootstrap 框架学习目录,布布扣,bubuko.com

Bootstrap快速学习笔记（1）排版系列之一

欢迎收看大奥编写的Bootstrap快速学习笔记(1)排版系列之一 本学习笔记根据[慕课网]教程修改而来,用它学习Bootstrap,将会带来全新的体验哦: 标题 段落 强调内容 粗体和斜体 强调相关的类 文本对齐风格 列表 代码展示 详细介绍 标题 Bootstrap重写了h1-h6标题的样式属性并自定义了.h1-.h6类,并用small标签来显示副标题 段落 Bootstrap重写了p标签的样式属性 强调内容 .lead类改变文本样式 粗体和斜体 粗体<strong><b>斜体

Bootstrap快速学习笔记（2）表单系列之一

欢迎收看大奥编写的Bootstrap快速学习笔记(2)表单系列之一 本学习笔记根据[慕课网]教程修改而来,用它学习Bootstrap,将会带来全新的体验哦: .form-control类 水平表单 内联表单 详细介绍 form-control类把该类直接添加到控件上: 1.宽度变成了100%:2.设置了一个浅灰色(#ccc)的边框:3.具有4px的圆角:4.设置阴影效果,并且元素得到焦点之时,阴影和边框效果会有所变化:5.设置了placeholder的颜色为#999 水平表单最外层form标签要

如何系统学习java体系？

如何系统学习java体系? | 浏览:1248 | 更新:2013-08-26 14:56 | 标签:java 1 2 3 4 分步阅读 Java是一种可以撰写跨平台应用软件的面向对象的程序设计语言,它在工业界应用非常广泛,掌握好java这门技术,你能轻松找一份java程序员的工作. 工具/原料 一些书.一台电脑 方法/步骤 学java首先你要学 J2SE,它是java体系的基础,也是重中之重.很多人往往不重视基础,其实这是舍本逐末的做法.说这么多就是希望大家能重视基础,能在这条路上走的更远.