bookstrap之全局css样式文字总结

第一次写,按照bookstrap官方文档(https://v3.bootcss.com/css/),菜鸟教程!!!(可在线测试编辑)(http://www.runoob.com/bootstrap/bootstrap-css-overview.html)和其他博文(表单及控件详解)(https://www.cnblogs.com/sankexin/p/5509955.html)借鉴写的较完整的文字版本.可配合着上述链接看

开始了!!!有不完整的地方请见谅,觉得有点抽象的可以借鉴文档和菜鸟教程测试编辑

!!!
注:下文所有都是下标,即都从0-11*

1.与

结合的长度最大长度为12

col-xs-* :超小屏幕 手机
col-sm- * :小屏幕 平板
col-md- * :中等屏幕 桌面显示器
col-lg- *:中等屏幕 桌面显示器
特例:转换为 100% 宽度的布局。

!!!

2.col-md-offset-'*':将列向右侧偏移的比例

!!!
*

3,嵌套列:内容再次嵌套，

;里的

在嵌套一遍 上述row和col-xx-;**

此时最里层的col-xx-* <=12,占比此时变为为父层长度的相对占比了.... 

!!!

4.列排序:改变列（column）的顺序。

col-xx-push-* 从左边开始
col-xx-pull-* 从右边开始(镜像布局,但是格式和从左边(头朝向左)开始是一样的)

注:一般两者加起来要等于12,否则<12时虽然可以布局,但是两者边框会重叠,不建议!!!

**

5.mixin 和变量自定义css(涉及修改mixin内容要利用Less)(不常用)**

mixin:已定义好的部分 带参数或不带参数的css(即.xx)集合 语义化的 CSS 代码。
使用mixin:
1.修改这些变量的值(即修改mixin内容)
或者
2.用默认值调用这些 mixin (直接调用);
如再css中.content-main {
.make-lg-column(8);再在HTML中

...

}
!!!
**

6. 排版 基本标签

6.1rendered as bold text(加粗)
6.2

h1. Bootstrap heading Secondary text

(显小)
6.3rendered as italicized text(斜体)
6.4You can use the mark tag to highlight text.(高亮)
6.5This line of text is meant to be treated as deleted text.(划删除线,同义区别不大)
6.6This line of text will render as underlined)(带下划线的文本)
6.7(不常用

Lowercased text.

(效果:lowercased text.都小写)

Uppercased text.

(效果:UPPERCASED TEXT.都大写)

Capitalized text.

(效果:Capitalized Text.首字母都大写)
)
6.8attr(鼠标移至attr,显示attribute提示)
6.9HTML(基本同上,添加 .initialism 类，可以让 font-size 变得稍微小些)
6.10

(如果

为右对齐,不常用)

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
  		
Someone famous in Source Title
	
(
 用于标明引用来源 ,其中cite 为斜体)
即可表现为引用样式。对于直接引用，我们建议用 
 标签

6.10

(无样式列表,无序列表的基础上去除前缀标记)

  		
...
	   

!
6.10(内联列表,横向排列)(通过设置 display: inline-block; 并添加少量的内补（padding），将所有元素放置于同一行。)

  
1
2

!
6.11(带有描述的短语列表。即dl,dt,dd)(附:还可利用class="text-overflow “(自动截断)包含无法在框中(被限制了width)或页面一行容纳的长文本被修剪,用”…"代替省略的内容)

(特殊:如果加class="dl-horizontal",则
和
在一行	)**
  			
1
 		 	        
1.1
				
1.2.
		
	

!
6.12.

...

中心内容(放大)
通过添加 .lead 类可以让段落突出显示。

7.代码 基本标签

7.1 添加灰色背景的方型块


 Sa在这里插入代码片mple text here.. 


(效果:

Sample text here...

(被灰色背景的方型块状包围)
多行代码可以使用

 标签。为了正确的展示代码，注意将尖括号做转义处理。)
 
  
7.2 内联代码,
 打印section标签<section> 啊
 (效果:打印section标签
 啊 
  
 
  
7.2用户输入,标黑(类似高亮),不常用,
 To switch directories, type cd followed by
 
  
7.3,声明变量的样式(类似斜体))
 y = mx + b(效果y = mx + b
 7.4程序输出(和普通打印输出没样式区别!!!))
 This is a
 
  
!!!
 
  
8.表格(实际写html时,table外一般还被一层
包围https://v3.bootcss.com/css/#tables)
 
  
8.1普通
 
  
8.2条纹状(灰白相间)
8.3带边框
8.4鼠标 悬停(默认白色,悬停时变灰色)
8.5紧缩表格(表格更加紧凑)
(附加:
 1. 状态类背景颜色(可应用tr或td)
 class: active灰色 success绿色 warning黄色 danger粉色 info蓝色)
 2…table-responsive,可适应手机等小屏幕表格滑动查阅 ,
 (会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。
)
  			

   				 ...
   			

!!!

9.表单

https://v3.bootcss.com/css/#forms
或http://www.runoob.com/bootstrap/bootstrap-forms.html
或https://www.cnblogs.com/sankexin/p/5509955.html
(注意
1.不要将表单组form和输入框input组混合使用,正确应是…
2.一定要添加 label 标签, 屏幕阅读器则可以正确识别.
如果要隐藏可以加.sr-only如名称!!! )
9.1常见实例模板 (其中可加role=“form”,给读屏软件用的,帮助阅读障碍的人设置的属性)

	

  
(label中for的名字和input中id的名字对应!!)
    Email address
    class="form-control"是bookstrap的文本框的css格式,placeholder内容为默认提示
  
  

    Password
    
  
  

    File input
    file是特殊的button
    
Example block-level help text here.
浅灰色字体,可用作帮助提示
  
		
  

    
       Check me out
    
  
  Submit(此submit会和js结合的形式提交)