Bootstrap-导航条-栅格系统-Carousel(轮播效果)-标签页

Bootstrap对于不会设计的童鞋很有用。

Twitter设计师的前台框架

中文官网:http://v3.bootcss.com/

导入包等信息:

<%--使用最新的IE渲染器渲染--%>

<%--移动客户端初始宽度 ;initial-scale=1 不进行缩放--%>


<%-- 对低版本IE支持开始  HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries--%>
<%--源语句
    
    
 --%>

<%--IE9以及IE9以下版本可识别 --%>


<%-- 对低版本IE支持结束--%> 

<%--源语句








 --%>

导航条效果:

 
	<%--导航条开始 http://v3.bootcss.com/components/#navbar  组件下 navbar 导航条  ;navbar-fixed-top固定在顶部; --%>
	

	

		<%--小屏幕开始 --当浏览器缩小都某一个值的时候会显示; 默认不显示   Brand and toggle get grouped for better mobile display--%>

		

			
				Toggle navigation   
			
			<%--左上角放logo的地方缩小屏幕也不会消失 --%>
			HPO
		
		<%--小屏幕结束 --%>

		<%-- 导航内容开始 Collect the nav links, forms, and other content for toggling --%>
		

			

				
课程分类
				
				
课程包
				
				
排序 
				
					

						
最新开课
						
						
评价最好
						
						
评价最差
						
						

						
价格最高
						
						

						
价格最低
						
					
				
			
			<%--右侧搜索和提交按钮 --%>
			

				

					
				
				Submit
			
			<%--右侧下拉框开始--%>
			

				
Link
				
				
Dropdown
						
				
					

						
Action
						
						
Another action
						
						
Something else here
						
						

						
Separated link
						
					
			
			<%--右侧下拉框开始--%>
		
		
	
	
<%-- 导航内容结束 --%> 

栅格系统效果：

 <%-- 栅格 开始   ;col-sm- 小屏幕 平板 (≥768px)堆叠在一起;  http://v3.bootcss.com/css/#grid     css 栅格系统 --%>

	
 
  
小屏幕 平板 (≥768px)
  
小屏幕 平板 (≥768px)
  
小屏幕 平板 (≥768px)
  
小屏幕 平板 (≥768px)
  
小屏幕 平板 (≥768px)
  
小屏幕 平板 (≥768px)
  
中等屏幕 桌面显示器 (≥992px)
  
  
中等屏幕 桌面显示器 (≥992px)
  
中等屏幕 桌面显示器 (≥992px)
  
大屏幕 大桌面显示器 (≥1200px)
 
  
大屏幕 大桌面显示器 (≥1200px)
  
大屏幕 大桌面显示器 (≥1200px)


  
.col-md-8
 
  
.col-md-4


  
.col-md-4
  
.col-md-4
  
.col-md-4
  

  
.col-md-6
  
.col-md-6


 <%-- 栅格 结束 --%>
 
 
功能分割线
功能分割线
功能分割线
功能分割线
功能分割线
功能分割线


 <%-- 栅格2 开始    http://v3.bootcss.com/css/#grid     css 栅格系统 --%>
      

          

              

              <%--;img-circle 图片样式圆角;img-rounded磨圆的   ;img-thumbnail极小的;--%>
                   
                
多弗拉明戈
                
七武海`````````
                
详细

              
              

                   
                
多弗拉明戈
                
七武海`````````
                
详细

              
                

                   
                
多弗拉明戈
                
七武海`````````
                
详细

              
          
 <%-- 栅格 2结束 --%>

功能分割线
功能分割线
功能分割线
功能分割线
功能分割线
功能分割线

Carousel(轮播效果):

<%--轮播效果开始  http://v3.bootcss.com/javascript/#carousel    javascript 下  Carousel carousel.js--%>

  
  

    

    

    

  

  
  

    

      
      

       aaa解释
      
    
    

      
      

      bbb解释
      
    
 
       

      
      

      cccc解释
      
       
       
    
   
  
  
  
    
    Previous
  
  
    
    Next
  

<%--轮播效果结束 --%>

标签页:

<%--标签页开始   http://v3.bootcss.com/javascript/#tabs      javascript下Togglable tabs tab.js   标签页  --%>


  <%-- Nav tabs 导航标签  --%>
  

    
Home路飞
    
Profile索隆
    
Messages山治
    
Settings本贝克曼
  

 <%-- Tab panes 单页内容  --%>
  

    

	
dddddddddddddddddddddddddddd
	
蒙奇·D·路飞（Monkey·D·Luffy）是日本漫画《海贼王》的主人公。草帽海贼团船长。由于他的标志性特征是一顶草帽，因此常被直接称呼为草帽。梦想是找到传说中的ONE PIECE，成为海贼王。性格积极乐观，爱憎分明且十分重视伙伴，对任何危险的事物都超感兴趣。看似白痴，却是一个大智若愚型的无愧船长之职的人。和其他传统的海贼所不同的是，他并不会为了追求财富而无故杀戮，而是享受着身为海贼的冒险。
	
dddddddddddddddddddddddddddd
   
    
    

   
zzzzzzzzzzzzzzzzzzzzzzzzzzz
	
罗罗诺亚·索隆（Roronoa Zoro）日本漫画《海贼王》中的男二号，草帽海贼团中的战斗员，是悬赏过亿武艺高强的三刀流剑士，超新星11人之一，能够自由操纵三把刀战斗。爱喝酒，爱睡觉，讲义气，海贼第一超级大路痴。为了小时候与挚友的约定而踏上了前往世界第一剑士的道路，随后成为主角蒙奇·D·路飞的第一个伙伴。在初次败给世界第一剑士“鹰眼米霍克”后向路飞发誓永不再败，并且更加努力的锻炼自己。两年后的他成功与伙伴们汇合，并且为了实现自己的梦想，奔赴强者如云的新世界。
	
zzzzzzzzzzzzzzzzzzzzzzzzzzz
	


    

		
dddddddddddddddddddddddddddd
	
山治（サンジ，Sanji）是日本人气漫画《海贼王》中的主要角色之一。草帽海贼团厨师，金发，有着卷曲眉毛，永远遮住半边脸的家伙，香烟不离口，最爱女人，很花心但很有风度，海贼中的绅士。小时候跟随大海贼红脚·哲夫学习厨艺。踢技以快准狠被海军称之为“黑足”，但从不愿意伤害任何的女性，哪怕是敌人。在经过司法岛一战后也成了悬赏对象，首次悬赏就有7700万之高。梦想是找到传说之海All Blue而跟随路飞一同进入了伟大航路。

	
dddddddddddddddddddddddddddd
	
    

	   
zzzzzzzzzzzzzzzzzzzzzzzzzzz
	
蒙奇·D·龙是日本动漫《海贼王》中的登场人物，是男主角蒙奇·D·路飞的父亲。性格沉稳霸气，充满野心，因为倡导颠覆世界政府的革命思想而被政府认定为“世界最凶恶的罪犯”，被认为是唯一能直接打倒世界政府的革命军领导人。他秉承自由的思想壮大起来，连续推翻了几个王国，已经成为了世界政府的头号罪犯[1] 。是非常神秘的男人。
	
zzzzzzzzzzzzzzzzzzzzzzzzzzz
	
  



<%--标签页结束 --%>

源代码下载:http://download.csdn.net/detail/dingsai88/8383761