Bootstrap 全局CSS

最新推荐文章于 2024-05-17 17:36:00 发布

weixin_45846263

最新推荐文章于 2024-05-17 17:36:00 发布

阅读量216

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_45846263/article/details/105933669

版权

按钮

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

<div class="container">          
      <h3>按钮样式</h3>          
	<!-- 标准的按钮 -->          
	<button class="btn btn-default">默认按钮</button>
    	 <!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->          
    	 <button class="btn btn-primary">原始按钮</button>
 	 <!-- 表示一个成功的或积极的动作 -->   
         <button class="btn btn-success">成功按钮</button>
     	<!-- 信息警告消息的上下文按钮 -->    
        <button class="btn btn-info">信息按钮</button>
     	<!-- 表示应谨慎采取的动作 -->       
        <button class="btn btn-warning">警告按钮</button>                    
        <!-- 表示一个危险的或潜在的负面动作 -->          
        <button class="btn btn-danger">危险按钮</button>
     	<!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->          
     	<button class="btn btn-link">链接按钮</button>       
      <h1>按钮 3种</h1>          
         <h3>btn按钮</h3>           
            <button class="btn btn-primary">btn按钮</button>          
          <h3>a标签按钮</h3>           
             <!-- 实际项目中推荐使用a作为按钮 -->           
              <a class="btn btn-danger" href="http://www.baidu.com">断网测试</a>         
           <h3>input按钮</h3>            
              <input type="button" class="btn  btn-default" value="input按钮">
       <h1>按钮的大小</h1>          
        	<a href="#" class="btn btn-danger btn-xs">超小按钮</a>         
         	<a href="#" class="btn btn-warning btn-sm">小按钮</a>          
         	<a href="#" class="btn btn-info">默认</a>          
         	<a href="#" class="btn btn-success btn-lg">大按钮</a>        
   	<h1>块级按钮</h1>          
           <!-- btn-block是一个块级元素，使得button占整个父元素的整宽 -->          
           <a href="#" class="btn btn-primary btn-block">块级按钮</a>       
     	 <h1>按钮的禁用</h1>             
             <button class="btn btn-default" disabled="disabled">点不了</button>        
             <button class="btn btn-default active">点中了</button>        
             <button class="btn btn-default">点我</button>     
  </div>

在这里插入图片描述

响应式图片

为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%; height: auto; display: block; 属性，从而让图片在其父元素中更好的缩放。

在这里插入图片描述
注意这里图片为块级元素，如果需要让使用了 .img-responsive 类的图片水平居中，请使用 .center-block 类，原理是为任意元素设置 display: block 属性并通过margin 属性让其中的内容居中,不要用 .text-center,会没有效果。

 <img src="img/img0.jpg" class="img-responsive center-block">

在这里插入图片描述
图片形状

<!--border-radius: 6px;-->
<img src="img/img3.jpg" class="img-rounded">        
<!--border-radius: 50%;-->
<img src="img/img1.jpg" class="img-circle">        
<img src="img/img2.jpg" class="img-thumbnail">

上面源码中都存在CSS3 中的圆角属性，但Internet Explorer 8 不支持 CSS3 中的圆角属性。所以需注意IE8不兼容

表单

为所有输入框添加label标签,不然内容要手动定位
form-control input,textarea,select元素宽度被设置为width:100%
form-group 用于包裹上面元素和label标签，可以得到更好的排布
form-inline 内联表单，添加到form元素类中，横向排布
form-horizontal 添加到form,让form-group类如同row效果，可以让label与控件水平排列
注意：使用form-horizontal想要水平排列时，需要将输入框放入盒子内，因为输入框宽度为100%
内联单选和多选框
通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。
不带label文本的Checkbox 和 radio
如果需要<label> 内没有文字，输入框（input）正是你所期望的。目前只适用于非内联的 checkbox 和 radio。请记住，仍然需要为使用辅助技术的用户提供某种形式的 label（例如，使用 aria-label）。
控件尺寸
通过.input-lg类似的类可以为控件设置高度，通过.col-lg-*类似的类可以为控件设置宽度。
水平排列的表单组的尺寸
通过添加.form-group-lg或.form-group-sm 类，为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺寸。

<form class="container container-small">        
	<h1>注册</h1>        
	<!-- 将姓与名放到一行中，若窗口小，仍为两行，体现响应式布局 -->        
	<div class="form-inline">           
	 	<div class="form-group has-error">                
 			<!-- control-label使得div的状态应用到label上 -->                
 			<label class="control-label">姓</label>               
  			<input type="text" class="form-control input-lg">           
   		</div>            
   		<div class="form-group has-success">                
   			<label class="control-label">名</label>               
    			<input type="text" class="form-control input-sm">         
       		</div>        
       </div>        
       <div class="form-group">            
       		<label class="control-label">充值金额</label>           
        	<div class="input-group">                
        		<div class="input-group-addon">￥</div>               
         		<input type="text" class="form-control">              
          		<div class="input-group-addon">.00</div>            					
          	</div>        
          </div>       
           <div class="form-group has-warning">           
            	<label class="control-label">地址</label>    
                <select class="form-control">             
                    <option value="1">北京</option>                
                    <option value="2">上海</option>                
                    <option value="3">深圳</option>            
                </select>       
            </div>        
            <div class="form-group">           
                <label class="checkbox-inline">                
                	<input type="checkbox" id="inlineCheckbox1" value="option1"> 1            
                </label>            
                <label class="checkbox-inline">                
                	<input type="checkbox" id="inlineCheckbox2" value="option2" disabled> 2            
                 </label>      
                 <label>     
                     <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">            
                  </label>        
  	    </div>    
        
        <!-- 将表单与栅格结合 -->        
        <!-- 以下就是密钥的经典样式 -->        
        <!-- 利用row将下面的表单与上面的对齐，因为row有负margin，在不希望栅格有两边的padding的情景下使用 -->       
         <div class="row">            
         	<div class="col-sm-4">                
         		<input type="text" class="form-control" placeholder="XXXX">            
         	</div>            
         	<div class="col-sm-4">                
         		<input type="text" class="form-control" placeholder="XXXX">            
         	</div>            
         	<div class="col-sm-4">                
         		<input type="text" class="form-control" placeholder="XXXX">           
          	</div>       
    	</div>    
</form>

在这里插入图片描述

表格table

table 基本样式，设置了padding和水平方向分割线
.table-striped 条纹状表格，tbody的每列灰白相间注意条纹状表格是依赖 :nth-childCSS 选择器实现的，而这一功能不被 Internet Explorer 8 支持。
.table-bordered 带边框的表格，设置了边框线
table-hover 鼠标悬停，鼠标悬浮的列有阴影显示
.table-condensed 让表格更加紧凑，单元格中的内补（padding）均会减半
响应式
将任何 .table元素包裹在 .table-responsive元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

在这里插入图片描述
nav用于局部导航，nav-bar用于整站导航。
.navbar用来表示该元素的语义：它是一个导航栏，Bootstrap将会以导航栏的方式来设置其子元素的样式。
.navbar-default用来表示该元素的样式：使用default（默认）样式，即灰色的背景，黑色的文字。将navbar-default替换为navbar-inverse，便可将导航栏设置为反色样式

<div class="navbar navbar-inverse navbar-fixed-top">        
   <div class="container">            
	<div class="navbar-header">                
		<!-- 以下专门用来放logo -->                
		<a href="#" class="navbar-brand">logo</a>            
	</div>            
	<!-- 默认向左浮动 -->            
	<ul class="nav navbar-nav">               
 		<li><a href="#">首页</a></li>               
  		<li><a href="#">产品</a></li>               
   		<li><a href="#">联系我们</a></li>            
   	</ul>
            
     <!-- navbar-left表示使其向左浮动 -->           
     <form class="navbar-form navbar-left">              
         <div class="form-group">                    
           <input type="text" class="form-control">              
          </div>               
          <button type="submit" class="btn btn-primary">搜一下</button>            
      </form>
      <!-- 使其向右浮动 -->            
      <ul class="nav navbar-nav navbar-right">               
          <li><a href="#">登录</a></li>               
          <li><a href="#">注册</a></li>            
       </ul>       
   </div>    
</div>