bootstrap常用的类名

最新推荐文章于 2023-01-10 17:37:05 发布
最新推荐文章于 2023-01-10 17:37:05 发布
阅读量3.8k 收藏 7
点赞数
文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/miaozhenzhong/article/details/74481079
版权
一、 常用类
1、container
居中的内容展示
2、row  行内容显示
3、col 列内容显示， 列必须在row 中
xs 宽度小于768 ，sm宽度小于990 大于768 ,md 宽度大于990，小于1200， lg宽度大于1200
col-xs-4 代表 小屏下显示为4列，
col-xs-4 col-md-2  代表小屏下占4列，大屏下占2列
 
<</span>div class="container"> <</span>h1>Hello, world!</</span>h1> <</span>div class="row"><</span>div class="col-xs-4"> <</span>h2 class="page-header">区域一</</span>h2><</span>p>Bootstrap has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</</span>p></</span>div> <</span>div class="col-xs-4"> <</span>h2 class="page-header">区域二</</span>h2><</span>p>If you work with Bootstrap's uncompiled source code, you need to compile the LESS files to produce usable CSS files. For compiling LESS files into CSS, we only officially support Recess, which is Twitter's CSS hinter based on less.js.</</span>p> </</span>div> <</span>div class="col-xs-4"> <</span>h2 class="page-header">区域三</</span>h2> <</span>p>Within the download you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.</</span>p> </</span>div> </</span>div> </</span>div>\ 4、h1-H6  排版 5、pageHeader  6、small 小一号的深灰色 ，用作副标题。 7、lead  处理一个段落的文字，让其显示效果显著。 8、文字class <</span>h1>强调Class</</span>h1> <</span>p class="text-muted">Maecenas sed diam eget risus varius blandit sit amet non magna.</</span>p> <</span>p class="text-primary">Maecenas sed diam eget risus varius blandit sit amet non magna.</</span>p> <</span>p class="text-success">.Maecenas sed diam eget risus varius blandit sit amet non magna.</</span>p> <</span>p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna..</</span>p> <</span>p class="text-warning">Maecenas sed diam eget risus varius blandit sit amet non magna..</</span>p> <</span>p class="text-danger">.Maecenas sed diam eget risus varius blandit sit amet non magna.</</span>p><</span>h1></</span>h1> bootstrap <wbr>常用类名 9、list-unstyled  无样式的列表 10、list-inline 横向水平列表  11、table 基本使用一致。table-hover 某行鼠标变色；table-condensed 表格紧缩，实际padding减半。 bootstrap <wbr>常用类名 .table包裹在.table-responsive中即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于768px宽度时，水平滚动条消失。 12、form  <</span>form role="form"> <</span>div class="form-group"> <</span>label for="exampleInputEmail1">Email address</</span>label> <</span>input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> </</span>div> <</span>div class="form-group"> <</span>label for="exampleInputPassword1">Password</</span>label> <</span>input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"></</span>div> <</span>div class="form-group"> <</span>label for="exampleInputFile">File input</</span>label> <</span>input type="file" id="exampleInputFile"> <</span>p class="help-block">Example block-level help text here.</</span>p> </</span>div> <</span>div class="checkbox"><</span>label> <</span>input type="checkbox"> Check me out </</span>label> </</span>div><</span>button type="submit" class="btn btn-default">Submit</</span>button> </</span>form> class="form-inline"   将表单内容横向紧缩排列 。 input  class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..."disabled>  设为不可用。 
Bootstrap对表单控件的校验状态，如error、warning和success状态，都定义了样式。使用时，添加.has-warning、.has-error或.has-success到这些控件的父元素即可。任何包含在此元素之内的.control-label、.form-control和.help-block都将接受这些校验状态的样式。

div class="form-group has-success"> "text" class="form-control" id="inputSuccess">
class= " form-group has-warning ">    " text "  class= " form-control " id= " inputWarning ">
class= " form-group has-error ">    " text "  class= " form-control " id= " inputError "> 
13、按钮
bootstrap <wbr>常用类名
btn-lg、.btn-sm、.btn-xs   大中小三种按钮尺寸
active  激活状态

disabled="disabled"  不可用状态
button type="button" class="close" aria-hidden="true">×span class="caret">

class="center-block"   居中并 display:block

class="clearfix"   清除浮动

14 img 
bootstrap <wbr>常用类名"http://placehold.it/150x150" alt="..." class="img-rounded"> 
bootstrap <wbr>常用类名"http://placehold.it/150x150" alt="..." class="img-circle"> 
bootstrap <wbr>常用类名"http://placehold.it/150x150" alt="..." class="img-thumbnail
bootstrap <wbr>常用类名


img src="..." class="img-responsive" alt="Responsive image"
为图片赋予了max-width: 100%;和height: auto;属性，可以让图片按比例缩放，不超过其父元素的尺寸

通过单独或联合使用以下列出的class，可以针对不同屏幕尺寸隐藏或显示页面内容。
bootstrap <wbr>常用类名

打印class

和常规的响应式class一样，使用下面的class可以针对打印机隐藏或显示某些内容。


15  下拉菜单  dropdown

class= " dropdown ">  
bootstrap <wbr>常用类名
改为右对齐
  • class="dropdown-menu text-right" role="menu" aria-labelledby="dropdownMenu1">

    下拉菜单

    class= " dropdown "> 
    复制代码

    主要是添加了

  • Dropdown header
  •   里面有个.dropdown-header的样式类。

    16 、  导航  nav

    Bootstrap中可用的导航有相似的标记，用基类.nav开头，这是相似的部分。改变修饰类可以改变样式。

    1、标签页

    注意.nav-tabs类需要.nav基类。

    在这里暂时只进行探讨简单的样式。

    2、胶囊式标签页

    用相同的 HTML 标记，但要用.nav-pills代替。

    Pills 可以竖直堆叠。只要加上.nav-stacked。

     

    使用下拉菜单

    6、带下拉菜单的胶囊式标签页

     

    标签

     简单案例

    Example heading class="label label-default">New

    Example heading class="label label-default">New

    Example heading class="label label-default">New

    Example heading class="label label-default">New
    Example heading class="label label-default">New
    Example heading class="label label-default">New

    可用的变体

    用下面的任何一个class即可改变标签的外观。

    class="label label-default">Default class="label label-primary">Primary class="label label-success">Success class="label label-info">Info class="label label-warning">Warningclass="label label-danger">Danger

    面包屑导航

     用一个带方向的层次表明当前页面的位置。

    分割符自动地通过CSS的:before和content添加上了。

    1. class="breadcrumb">
    2. "#">Home
    3. "#">Library
    4. class="active">Data


    17 、分页   pagination

     
   
     
  
     
   复制代码 
  
     
     
     
     
     
     
  
     
    
  
     
     
     
    18、 警示

     
    可关闭的警告框
     
     可以用一个可选的.alert-dismissable和关闭按钮。
     
  
     
   
     
   
     
    class= 
    " 
    alert alert-warning alert-dismissable 
    ">  
     
    button 
    "  
    class= 
    " 
    close 
    " data-dismiss= 
    " 
    alert 
    " aria-hidden= 
    " 
    true 
    ">×  
    Warning! Best check yo self, you 
    ' 
    re not looking too good. 
   
     
  
     
     
     
  
     
   
    确定在所有设备上的正确行为
     
   
     一定要给data-dismiss="alert"属性用上。
     
  
     
    警告框中的链接
     
     用.alert-link工具类，可以快速提供在任何警告框中相符的颜色。
     
   
     
     
    19、进度条

     
  
     
   
     
   
     
    class= 
    " 
    progress 
    "> 
    
     
     class= 
     " 
     progress-bar 
     " role= 
     " 
     progressbar 
     " aria-valuenow= 
     " 
     60 
     " aria-valuemin= 
     " 
     0 
     " aria-valuemax= 
     " 
     100 
     " style= 
     " 
     width: 60%; 
     ">  
     class="sr-only">60% Complete 
    
     
   
     
  
     
     
     
     20、列表组加入徽章，它会自动地放在右面。
     
  
     
   
     
    复制代码 
   
     
   
    • class="list-group">
    • class="list-group-item">class="badge">14Cras justo odio
    • class="list-group-item">class="badge">33Dapibus ac facilisis in
    • class="list-group-item">class="badge">11Morbi leo risus
    • class="list-group-item">class="badge">41Porta ac consectetur ac
    • class="list-group-item">class="badge">21Vestibulum at eros
     
   
     
    复制代码 
   
     
  
     
     
     
     
     
     标签而不是
     
  • 标签（也就是说父元素是 
  
     
   而不是 
   
     
    ）。没必要给每个元素都加一个父元素。 
     
    
     
     
    
    定制内容
     
    
     在里面可以加几乎任何HTML，甚至是像下面的带链接的列表组。
     
    
     
     
     
      复制代码 
     
     
     
     
      class= 
      " 
      list-group 
      ">  
      "#" class="list-group-item active"> 
      
    class="list-group-item-heading">List group item heading
     
      
     class="list-group-item-text">Cras sit amet nibh libero, in gravida nulla. n vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
     
      "#" class="list-group-item"> 
      
    class="list-group-item-heading">List group item heading
     
      
     class="list-group-item-text">Cras sit amet nibh libero, in gravida nulla. n vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
     
      "#" class="list-group-item"> 
      
    class="list-group-item-heading">List group item heading
     
      
     class="list-group-item-text">Cras sit amet nibh libero, in gravida nulla. n vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
     
     
     
     
     
      复制代码 
     
     
    
     
    21、面板 
    
    带表格的面版
     
    
     为了无缝的设计，在面版中加入.table。如果有.panel-body，就在表格的上方加上一个用于分割的边界。
     
    
     
     
     
      复制代码 
     
     
     
     
      class= 
      " 
      panel panel-default 
      "> 
      
     
       class= 
       " 
       panel-heading 
       ">Panel heading 
      
     
      
     
       class= 
       " 
       panel-body 
       "> 
       
     Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
     
       class= 
       " 
       table 
       "> 
       
    First NameLast NameUser Name
     aehyok leo @aehyok
     lynn thl @lynn
     
      
     
      
     
       复制代码 
      
     
     
     
     
    


22 、提示

 
  
主要实现了按钮的上下左右的ToolTip，然后是文本框和链接的ToolTip。
     
     
     
      
     
       复制代码 
      
     
      
    <</span>div class="container" style="margin-top:40px;"> <</span>div class="bs-example tooltip-demo"> <</span>div class="bs-example-tooltips"> <</span>button type="button"class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">左侧Tooltip</</span>button> <</span>button type="button" class="btn btn-default"data-toggle="tooltip" data-placement="top" title="Tooltip on top">上方Tooltip</</span>button> <</span>button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">下方Tooltip</</span>button> <</span>button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">右侧Tooltip</</span>button> </</span>div> </</span>div> <</span>input type="text" id="testt"rel="tooltip" title="123456" /> <</span>a href="#" data-toggle="tooltip" title="Default tooltip" >dsafsdfasdfasdfasd</</span>a> </</span>div>
     
     
     
     
    23、弹出框

四个方向 

     
     
     
      
     
       复制代码 
      
     
      
     
      
    
        " 
       margin-left:200px;margin-top:100px;margin-bottom:200px; 
       "  
       class= 
       " 
       bs-example tooltip-demo 
       "> 
       
     
        class= 
        " 
        bs-example-tooltips 
        ">  
         
        button 
        "  
        class= 
        " 
        btn btn-default 
        " data-container= 
        " 
        body 
        "data-toggle= 
        " 
        popover 
        " data-placement= 
        " 
        left 
        " data-content= 
        " 
        Vivamus sagittis lacus vel augue laoreet rutrum faucibus. 
        ">  
        左侧弹框  
         
        button 
        "  
        class= 
        " 
        btn btn-default 
        " data-container= 
        " 
        body 
        " data-toggle= 
        " 
        popover 
        " data-placement= 
        " 
        top 
        " data-content= 
        " 
        Vivamus sagittis lacus vel augue laoreet rutrum faucibus. 
        ">  
        上方弹框  
         
        button 
        "  
        class= 
        " 
        btn btn-default 
        " data-container= 
        " 
        body 
        " data-toggle= 
        " 
        popover 
        " data-placement= 
        " 
        bottom 
        " data-content= 
        " 
        Vivamus sagittis lacus vel augue laoreet rutrum faucibus. 
        ">  
        下方弹框  
         
        button 
        " 
        class= 
        " 
        btn btn-default 
        " data-container= 
        " 
        body 
        " data-toggle= 
        " 
        popover 
        " data-placement= 
        " 
        right 
        " data-content= 
        " 
        Vivamus sagittis lacus vel augue laoreet rutrum faucibus. 
        "> 
        右侧弹框 
       
     
      
     
      
     
       复制代码 
      
     
     
     
     
    然后用JavaScript来激活
     
    
     
   
     
  
     

                

        

        

    




    

      

        

            

              
                
                  miaozhenzhong
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    7
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
Bootstrap学习下

				
			

			

				

					后知后觉的博客
				

				

					11-07
					
					1237
					
				

			

		

		

			
				
Bootstrap学习下

			
		

	



                

              
                



	

		

			

				
					
Bootstrap_03_(全局CSS之表单&按钮&图片&辅助类&响应式工具)

				
			

			

				

					muxianzhi的博客
				

				

					05-03
					
					641
					
				

			

		

		

			
				
表单
	 基本表单
	
class=”form-control”：可以给<input>、<textarea>、<select>元素设置宽度为100%
示例代码：


<form action="" method="">

<label>用户名:</label>

<input type="text" class="form-control" />

</form>

之前我们写在文本框前面写用户名 一直都是直接写

			
		

	



                


  
              

                


	

		

			

				
					
bootstrap常用类名

				
			

			

				

					chanming的博客
				

				

					06-01
					
					1123
					
				

			

		

		

			
				
一、 常用类
1、container
居中的内容展示
2、row  行内容显示
3、col 列内容显示， 列必须在row 中
xs 宽度小于768 ，sm宽度小于990 大于768 ,md 宽度大于990，小于1200， lg宽度大于1200
col-xs-4 代表 小屏下显示为4列，
col-xs-4 col-md-2  代表小屏下占4列，大屏下占2列

div class="

			
		

	





	

		

			

				
					
Bootstrap的class属性

				
			

			

				

					木上曰末
				

				

					11-21
					
					2435
					
				

			

		

		

			
				
Bootstrap的class属性
1，role
增强语义性，用于自定义组件，可增强组件的访问性，可用性和可交互性
2，文字




属性名
含义




font-size
字体大小


line-height
行高


font-family
默认字体


h1-h6
标题大小


Disolay
控制标题样式


small
创建字号更小颜色更浅的文本


mark
为黄色背景及有一定的内边距（高亮文本）


abbr
显示在文本底部的一条虚线边框(似标记文本）


font-weight-bold


			
		

	



		

			
		



	

		

			

				
					
Bootstrap class快捷笔记

				
			

			

				

					Yzhoun的博客
				

				

					09-07
					
					496
					
				

			

		

		

			
				
添加h标签字体样式h1h2h3h4h5
h标签的副标签



更大的标题display-1display-2display-3display-4
引言lead 突出显示
返回顶部

em 倾斜文本



strong 加粗文本




缩写
相当于提示文本
initialism 字体小一点


返回顶部无特效列表list-unstyled 无特效列表list-inline  让里面的li变为inline-blocklist-inline-item 需要给li加上才行 3.x版本不需要在li上面加list-i

			
		

	





	

		

			

				
					
Bootstrap

				
			

			

				

					linchonghui888的博客
				

				

					04-04
					
					1388
					
				

			

		

		

			
				
学习网址：http://www.runoob.com/bootstrap/bootstrap-tutorial.html


Bootstrap是 Twitter写的，是目前最流行的前端框架


Bootstrap一般使用Html5文档类型 即：     
如果在 Bootstrap 创建的网页开头不使用 HTML5 的文档类型，您可能会面临一些浏览器显示不一致的问题，甚至可能面临一

			
		

	





	

		

			

				
					
bootstrap

				
			

			

				

					weixin_43706224的博客
				

				

					05-24
					
					1180
					
				

			

		

		

			
				
感悟：bootstrap就是一个预定义的模板，你用它的模板最主要的是要知道class是什么，class的作用域，作用范围是什么，各种bootstrap的实现是通过各种类名的添加来实现的，最重要的模块是栅格属性（当然，你可以动态改变栅格系统的列数）
如果要超小屏幕，小屏幕和中等屏幕同时拥有排列效果，那么需要把类前缀都加上（3个）

重要的类名

(相当于css.reset)


想知道元素为什么会设...

			
		

	





	

		

			

				
					
bootstrap框架

				
			

			

				

					07-30
				

			

		

		

			
				
包含bootstrap框架所需的js，css，font，用于快速的构建网站

			
		

	





	

		

			

				
					
Bootstrap的bootstrap.js

				
			

			

				

					05-31
				

			

		

		

			
				
用于前台开发的,很好用的工具 让前台开发更加的容易上手而且 设计出来的还很好看

			
		

	





	

		

			

				
					
BSButton:SwiftiOS基于类名的Bootstrap按钮设计实现

				
			

			

				

					05-02
				

			

		

		

			
				
BSButton是UIButton的子类，它是用swift编写的，适用于Bootstrap按钮之类的样式。 例子 要运行示例项目，请克隆存储库，然后首先从Example目录运行pod install 。 使用CocoaPods进行安装 BSButton可通过。 要安装它...

			
		

	





	

		

			

				
					
bootlint：用于Bootstrap项目HTML linter

				
			

			

				

					02-02
				

			

		

		

			
				
 Bootlint假定您在网页中使用Bootstrap的默认类名，而不是利用Less或Sass的“ mixins”功能将它们映射到自定义类名。 如果您使用的是mixin，Bootlint可能会报告一些假阳性警告。 但是，即使您广泛使用mixins，也有...

			
		

	





	

		

			

				
					
bootstrap-tooltip-custom-class:通过添加自定义类来扩展Bootstrap工具提示和Popover。 适用于Bootstrap 3和Bootstrap 4

				
			

			

				

					04-18
				

			

		

		

			
				
Bootstrap工具提示自定义类 通过添加自定义类来扩展Bootstrap工具提示和Popover。 适用于Bootstrap 3和Bootstrap 4 。  定义自己的定制类或使用预定义的定制类：  工具提示： .tooltip-primary ， .tooltip-success ...

			
		

	





	

		

			

				
					
1-11. Bootstrap网格布局详解

				
			

			

				

					淡泊以明志，宁静以致远
				

				

					01-12
					
					672
					
				

			

		

		

			
				
Bootstrap中class类的使用：

container：获得适当的对齐和内边距
	row：声明行列
	col-xs-：声明移动端
	col-sm-：平板电脑设备
	col-md-：普通pc端设备
	col-lg- ：大型台式设备
例如，col-xs-6：表示一行2列，col-md-4：表示一行三列，bootstrap中一行最多分为12列


<!DOCTYPE html>
&l...

			
		

	





	

		

			

				
					
Bootstrap基本用法

				
			

			

				

					ikEason_的博客
				

				

					04-18
					
					6966
					
				

			

		

		

			
				
Bootstrap
Bootstrap是简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
Bootstrap栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
栅格系统用于通过一系列的行（row）与列（colu

			
		

	





	

		

			

				
					
bootstrap布局

				
			

			

				

					m0_45301039的博客
				

				

					01-10
					
					354
					
				

			

		

		

			
				
1、栅格系统（布局）
Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。
我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行（row）与列（column）的组合创建页面布局，然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理：
网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边

			
		

	





	

		

			

				
					
BootStrap前端框架

				
			

			

				

					Skf_0004010的博客
				

				

					11-04
					
					4483
					
				

			

		

		

			
				
BootStrap
1、Bootstrap介绍

什么是bootstrap?

简单，直观，强悍的前端开发框架，让web开发更迅速，简单。来自Twitter，是目前很受欢迎的前端框架之一。
Bootstrap是基于HTML,CSS,Javascript的

特点

移动端设备优先：自Bootstrap3起，框架包含了贯穿于整个库的移动设备优先的样式
响应式设计：采用栅格布局（底层实现原理：媒体查询结合流体布局）
偏UI，综合框架，包含一些常用的UI组件以及一些JS组件

Bootstrap的适用场景？

b

			
		

	





	

		

			

				
					
后端小白的Bootstrap笔记 一

				
			

			

				

					终极冥帝
				

				

					12-23
					
					819
					
				

			

		

		

			
				
栅格系统免费小说 https://wap.kuwx.net/
下面这张图是Bootstrap对栅格系统有关系数的规定

什么是栅格体统?
栅格系统是Bootstrap提供的移动优先的网格系统, 各个分界点如上: 576px 720px 992px 1200px
一行最多盛放12列, 从上图中也能看出一共是5种响应尺寸(分别对应不同的尺寸的屏幕)
其实大白话讲 : 就是当我们用鼠标拖动浏览...

			
		

	





	

		

			

				
					
BootStrap 栅格系统

				
			

			

				

					july_29的博客
				

				

					10-04
					
					113
					
				

			

		

		

			
				
栅格系统
这套bootstrap提供的是一套响应式、移动设备优先的流式栅格系统。每一行分为最多12列，如果有所超出，就会自动换行。
栅格系统通过一系列的行（row）和列（column）的组合来创建页面布局。
首先我们要先创建布局容器，可以用.contain或者.contain-fluid（100%宽度）。
<div class="contain">
</div>
我们的行（row）是必须包含在容器中的
<div class="contain">
<div class

			
		

	





	

		

			

				
					
[Bootstrap]Bootstrap中按钮如何设置靠右对齐呢？

					
热门推荐

				
			

			

				

					极客神殿
				

				

					09-11
					
					1万+
					
				

			

		

		

			
				
问题描述
如题，Bootstrap中如何将以下列表中的按钮设置为靠右对齐呢？以下是一段简单的示例，需要将其中每个li中的按钮靠右对齐：
<ul>
    <li>One <input class="btn pull-right" value="test"></li>
    <li>Two <input class="btn pull-right" value="test2"></li>
</ul>

方案一
在

			
		

	





	

		

			

				
					
Bootstrap 类名

					
最新发布

				
			

			

				

					06-10
				

			

		

		

			
				
Bootstrap一个流行的前端框架，其中一些常用的类名包括：  - container：用于包含整个页面内容的容器 - row：用于包含一行中的列元素的容器 - col-*：用于定义列元素的样式，* 可以是 1-12 的数字，表示占据的列数 -...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值