当前位置：Gxlcms > JavaScript > Bootstarp中CSS的使用方法_javascript技巧

Bootstarp中CSS的使用方法_javascript技巧

时间：2021-07-01 10:21:17 帮助过：7人阅读

Bootstrap 使用了一些 HTML5 元素和 CSS 属性，所以需要使用 HTML5 文档类型。

...

为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：

//禁止页面缩放（可选）

Bootstrap 使用 Normalize 来建立跨浏览器的一致性。Normalize.css 是一个很小的 CSS 文件，在 HTML 元素的默认样式中提供了更好的跨浏览器一致性。

关于布局

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

img-responsive 用于img元素

container 用于包裹页面上的内容的元素

行需要放在container，并用来创建列的水平组。
预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。

行列可相互嵌套，嵌套后的自适应以父级元素为准，而不是设备宽度
要创建三个相等的列，则使用三个 col-xs-4，要是12个列就12个col-xs-1。


 
  
  
  
  
 
 ...

.... 

//可使用.col-md-push-* 和 .col-md-pull-* 这种类设定显示，col-md-push-6按照我个人的理解，是在左面浮动了6列，然后再插入元素，col-md-pull-3则是在右边浮动了3列，然后从右往左插入元素

媒体查询是非常别致的"有条件的 CSS 规则"。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件，则应用相应的样式。

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
//对于所有带有 min-width: @screen-sm-min 的设备，如果屏幕的宽度小于 @screen-sm-max，则会进行一些处理。

关于排版

关于文本

本行内容是在标签内
本行内容是在标签内
本行内容是在标签内，并呈现为斜体

向左对齐文本

居中对齐文本

向右对齐文本

本行内容是减弱的

灰

本行内容带有一个 primary class

蓝

本行内容带有一个 success class

绿

本行内容带有一个 info class

深蓝

本行内容带有一个 warning class

黄

本行内容带有一个 danger class

红

Bootstrap 定义元素的样式为显示在文本底部的一条虚线边框，当鼠标悬停在上面时会显示完整的文本（只要您为 title 属性添加了文本）。为了得到一个更小字体的文本，请添加 .initialism 到。

WWW

RSS

使用标签，您可以在网页上显示联系信息。
使用标签作为引用

这是一个带有源标题的引用。Someone famous in Source Title

list-unstyled用于未定义样式列表ul，list-inline用于水平列表ul
pre-scrollable使pre可滚动
内联显示代码，显示多行代码


关于表格


通过把任意的 .table 包在 .table-responsive class 内，您可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，您将看不到任何的差别。




 
  响应式表格布局
  
   
   产品
   付款日期
   状态
   
  
  
   
   产品1
   23/11/2013
   待发货
   
  
 
  


关于表单

  在form上加上属性role="form"就会应用Bootstrap基本的表单结构，此时默认为垂直表单
  把标签和控件放在一个带有 class .form-group 的  中。这是获取最佳间距所必需的。
  向所有的文本元素 、 和 <select> 添加 class .form-control。</strong></span><br />
  </li>
</ul>
<div class="jb51code">
<pre class="brush:php;toolbar:false">
<input type="text" class="form-control" placeholder="文本输入"/>
<textarea class="form-control" rows="3">
可多选的选择列表

响应式表格布局
产品	付款日期	状态
产品1	23/11/2013	待发货



  在form加上类calss=form-inline，那么表单元素就会变成内联的
  在form加上类class=form-horizontal，那么表单元素就会变成水平的

1）设置表单控件padding和margin值

2）改变“form-group”的表现形式，类似于网格系统的“row”。

3）向标签添加 class .control-label。



  复选框和单选框

  

1）对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class，控制它们显示在同一行上。



  当您需要在一个水平表单内的表单标签后放置纯文本时，请在  上使用 class .form-control-static。
  禁用的输入框 input，如果您想要禁用一个输入框 input，只需要简单地添加 disabled 属性
  对  添加 disabled 属性来禁用  内的所有控件。
  Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class（.has-warning、 .has-error 或 .has-success）即可使用验证状态。
  .input-lg 和.input-sm可以改变输入框的高度样式
  help-block   Bootstrap 表单控件可以在输入框 input 上有一个块级帮助文本。为了添加一个占用整个宽度的内容块，请在  后使用 .help-block。

  



 一个较长的帮助文本块，超过一行，
 需要扩展到下一行。本实例中的帮助文本总共有两行。


关于按钮

 





















按钮的大小


 


 


 


 


 



  class为active表示激活按钮
  class为disabled表示禁用按钮

在a和input上使用按钮class也能弄成按钮的样子，但是考虑到跨浏览器的问题还是在button上比较好。
关于图片
关于图片的样式除了之前提到的img-responsive用于图片的自适应之外还有以下三个样式：



  .img-rounded 圆角图片
  .img-circle 圆形图片
  .img-thumbnail 缩略图功能

 关于其它样式类

  .pull-left左浮动

  
  .pull-right右浮动

  
  center-block内容居中

  
  .clearfix清除浮动

  
  .caret显示下拉式

  
  .close关闭图标

  

关于不同设备


以上就是Bootstarp中CSS的使用方法，希望大家会喜欢。



                  

	 	
                    
                        
                            
                                < 上一篇
js实现简单的省市县三级联动效果实例_javascript技巧
                            
                            
                                 下一篇 >
Bootstrap入门书籍之（五）导航条、分页导航_javascript技巧


                
                  

                    
                        人气教程排行
                    
                    
			
                        
						
 
                                
                                    213次
                                    1
                                   vue2 设置router-view默认路径的实例                                
                            
							  								  														  
                                
                                    213次
                                    2
                                   Vue-路由导航菜单栏的高亮设置方法                                
                            
								  														  								  
                                
                                    213次
                                    3
                                   基于Axios 常用的请求方法别名(详解)                                
                            
														  								  							
                                
                                    213次
                                    4
                                   JavaScript+canvas实现七色板效果实例                                
                            
							  								  							
                                
                                    212次
                                    5
                                   实现vuex的初始化方法                                
                            
							  								  							
                                
                                    212次
                                    6
                                   jQuery：当鼠标快速移动时无法触发mouseleave事件的问题解决                                
                            
							  								  							
                                
                                    212次
                                    7
                                   Array.slice()与Array.splice()的返回值类型_基础知识                                
                            
							  								  							
                                
                                    212次
                                    8
                                   微信小程序使用swiper组件实现层叠轮播图                                
                            
							  								  							
                                
                                    212次
                                    9
                                   element-ui 限制日期选择的方法(datepicker)                                
                            
							  								  							
                                
                                    212次
                                    10
                                   vue-baidu-map 进入页面自动定位的解决方案(推荐)                                
                            
							  								  							
                                
                                    212次
                                    11
                                   JS实现元素上下左右移动效果                                
                            
							  								  							
                                
                                    212次
                                    12
                                   node.js中的emitter.on方法使用说明                                
                            
							  								  							
                                
                                    211次
                                    13
                                   在js中如何实现图片左右滑动                                
                            
							  								  							
                                
                                    211次
                                    14
                                   layui button 按钮弹出提示窗口,确定才进行的方法                                
                            
							  								  							
                                
                                    211次
                                    15
                                   深入理解Vue生命周期、手动挂载及挂载子组件                                
                            
							  								  							
                                
                                    211次
                                    16
                                   JS 使用for循环遍历子节点查找元素                                
                            
							  								  							
                                
                                    210次
                                    17
                                   bootstrap如何设置表单必填                                
                            
							  								  							
                                
                                    210次
                                    18
                                   bootstrap4兼容哪些浏览器                                
                            
							  								  							
                                
                                    210次
                                    19
                                   jQuery实现追加数组并去重功能                                
                            
							  								  							
                                
                                    210次
                                    20
                                   jQuery实现的在线答题功能_jquery