15、响应式布局和BootStrap 全局CSS样式知识点总结-part2-白红宇

15、响应式布局和BootStrap 全局CSS样式知识点总结-part2

阅读量：6303 次

发布时间：2019-06-22

本文共 6897 字，大约阅读时间需要 22 分钟。

1、表格

1 
     
        2   3     
      
         4         
          5         
  6         
  7         
  8         
  9         
          10             
 11             
 12             
 13             
 14         
 15         
          16             
 17             
 18             
 19             
 20         
 21     
                        name          sex          age         
       
                        hello          hello          hello          hello         
                 hello          hello          hello          hello         
       
      
 22  23     
      
 24      鼠标悬停有效果 25     
      
        26         
         27         
 28         
 29         
 30         
 31         
          32             
 33             
 34             
 35             
 36         
 37         
          38             
 39             
 40             
 41             
 42         
 43     
                        name          sex          age         
       
                        hello          hello          hello          hello         
                 hello          hello          hello          hello         
       
      
 44  45  46     
      
  紧缩表格 47     
      
        48         
         49         
 50         
 51         
 52         
 53         
          54             
 55             
 56             
 57             
 58         
 59         
          60             
 61             
 62             
 63             
 64         
 65     
                        name          sex          age         
       
                        hello          hello          hello          hello         
                 hello          hello          hello          hello         
       
      
 66  67     
      
 带边框 68     
      
        69         
         70         
 71         
 72         
 73         
 74         
          75             
 76             
 77             
 78             
 79         
 80         
          81             
 82             
 83             
 84             
 85         
 86     
                        name          sex          age         
       
                        hello          hello          hello          hello         
                 hello          hello          hello          hello         
       
      
 87  88  89     
      
带条纹效果 90     
      
        91         
         92         
 93         
 94         
 95         
 96         
          97             
 98             
 99             
100             
101         
102         
         103             
104             
105             
106             
107         
108     
                        name          sex          age         
       
                        hello          hello          hello          hello         
                 hello          hello          hello          hello         
       
      
109 110     
      
       111         
        112         
113         
114         
115         
116         
         117             
118             
119             
120             
121         
122         
         123             
124             
125             
126             
127         
128     
                        name          sex          age         
       
                        hello          hello          hello          hello         
                 hello          hello          hello          hello         
       
      
129 130     
      
131 
     
132 133 其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。134 
     
      135     
      
       136         
        137         
138         
139         
140         
141         
142         
         143             
144             
145             
146             
147             
148             
149             
150             
151             
152             
153             
154             
155             
156             
157             
158             
159         
160     
                        name          sex          age          shit         
       
                        hello          hello          hello          hello          hello          hello          hello          hello          hello          hello          hello          hello          hello          hello          hello          hello         
       
      
161

name	sex	age
hello	hello	hello	hello
hello	hello	hello	hello

name	sex	age
hello	hello	hello	hello
hello	hello	hello	hello

name	sex	age
hello	hello	hello	hello
hello	hello	hello	hello

name	sex	age
hello	hello	hello	hello
hello	hello	hello	hello

name	sex	age
hello	hello	hello	hello
hello	hello	hello	hello

name	sex	age
hello	hello	hello	hello
hello	hello	hello	hello

name	sex	age	shit
hello	hello	hello	hello	hello	hello	hello	hello	hello	hello	hello	hello	hello	hello	hello	hello

将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

2、表单

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

.form-inline 类可使其内容左对齐,只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。

包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。

如果需要在表单中将一行纯文本和 label 元素放置于同一行，为 <p> 元素添加 .form-control-static 类即可

1 
     
       2     
      
        3         
       EmailAddress 4         
        5     
      
 6  7     
      
        8         
       Password 9         
       10     
      
11 12     
      
       13         
       SelectFile14         
       15     
      
16 17     
      
       18         
       19              check me out20         21     
      
22 23     
      24 25

1     
     
       2         
       3             Option one is this and that—be sure to include why it's great 4          5     
     
 6  7     
     
       8         
       9             Option two can't be checked10         11 12     
      13     
      
       14         
       
        15             
         hello16         
       17     
      
18     
      
       19         
       
        20             
         hello121         
       22     
      
23     
      
       24         
       
        25             
         hello226         
       27

下拉列表:

为<fieldset> 设置 disabled 属性,可以禁用 <fieldset> 中包含的所有控件。<a>标签链接功能不受影响

1 
     
       2     
      
        3         
       
         4             
        Email 5                  6              7         
       
 8  9         
       
        10             
        
         11                 
         hello world12             
        13         
       
14 15         
       21 22         
       baidu23 24         
       25     
      
26

3、按钮

3.1 可作为按钮使用的标签或元素:

　　　　为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式

1 
     
       2     
      hello 3     
      
 4     
      hello 5     
      
 6     
      hello 7     
      
 8     
       9     
      10     
      11     
      12     
      13 14     
      
15     
      16 17     
      18 19     
      20 21     
      Primary link22     
      Link23

4、图片

5、辅助类

转载于:https://www.cnblogs.com/kunyashaw/p/5330183.html

你可能感兴趣的文章

HP ProCurve交换机与Cisco交换机生成树协议相关命令比较