Bootstrap实战

最新推荐文章于 2024-03-21 14:37:47 发布
最新推荐文章于 2024-03-21 14:37:47 发布
阅读量997 收藏 4
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/caoxinhui521/article/details/52367450
版权

Bootstrap在线编辑工具（http://www.layoutit.com）

Bootstrap中文网(http://www.bootcss.com/)

bootstrap-responsive.css必须放置于bootstrap.css后面，否则不具有响应式布局功能。


bootstrap栅格系统

分两种：固定式（fix），流式（fluid）

固定式栅格系统每列宽度与列间间距是固定的，列宽为60px，列间距为20px。

容器为.row，可在容器中加入合适数量的.span*列，在设计页面网格系统时，若确定宽度为940像素，则应确保各列之和等于12。

把列向右移动可使用.offset*类，每个类都给列的左边距增加了指定单位的列。



网页宽度默认等于屏幕宽度，原始缩放比例为1.0

      <meta name="viewpoint" content="width=device-width;initial-scale=1.0">

响应式布局网页字体大小不能用绝对大小（px），而只能用相对大小（em）



优化css样式

文本强调风格：<b>侧重于表现视觉上的强调，<strong>指语义上的强调。<small>标签将缩小文本大小到85%。<em>斜体强调效果 


<p class="muted">提示，浅灰色</p>
<p class="text-warning">警告类文本</p>
<p class="text-error">错误类文本</p>
<p class="text-info">通知类文本</p>
<p class="text-success">成功类文本</p>

<p class="text-left">文本左对齐</p>
<p class="text-right">文本右对齐</p>
<p class="text-center">文本居中对齐</p>

  <p><abbr class="initialism" title="Cascading Style Sheets">CSS</abbr>是英语层叠样式表单
    </p> <span style="white-space:pre">		</span>//对<abbr>标签增强样式，initialism字体大小缩小10%，设置字母全部大写
<pre name="code" class="html"><address>
  	<a href="mailto:cxh@163.com">小灰灰邮箱</a>			//定义地址
  </address>

 
 
<blockquote cite="http://www.w3school.com.cn">
 	<p>引用文字</p>				//定义摘自另一个源的块引用，里面所有的文本都会从常规文本中分离，在左右两边缩进，有时用斜体。
 </blockquote>

 
 
<dl>……</dl>:标识定义列表
 <dt>……</dt>:标识词条
 <dd>……</dd>:标识解释
 <dl class="dl-horizontal"><span style="white-space:pre">		</span>//horizontal可以让解释与词条并列显示
 	<dt>
 		知无不言，言无不尽
 	</dt>
 	<dd>
 		知道的就说，要说就毫无保留
 	</dd>
 </dl>
<code>标签用于表示计算机源代码或者其他机器可以阅读的文本内容 

 

 
 <pre>标签可定义预格式化的文本 

 

 
 
  

 

 
  
 
<table><span style="white-space:pre">		</span>//border-collapse:collapse声明，定义表格单线显示；border-spacing：0声明，清除表格内边距；max-width：100%声明，定义表格100%宽度显示
	<caption>……</caption>
	<thead>
		<tr>
			<th>……</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>……</td>
		</tr>
	</tbody>
</table>
 
 
<span style="white-space:pre">	</span><table class="table table-striped"></table>		//斑马纹样式
	<table class="table table-striped table-bordered"></table>	//圆角边框风格
	<table class="table table-striped table-bordered table-hover"></table>//鼠标悬停风格
	<table class="table table-condensed"></table>		//紧凑单元格风格
 
 
<table class="table table-bordered table-hover">
		<tr><th>样式表</th><th>说明</th></tr>
		<tr class="success"><td>success</td>表示成功或积极的行为</tr>
		<tr class="error"><td>error</td>表示一个危险或存在危险的行为</tr>
		<tr class="warning"><td>warning</td>表示警告，可能需要注意</tr>
		<tr class="info"><td>info</td>作为默认样式的一个替代样式</tr>
	</table>
 
 
<span style="white-space:pre">	</span><input type="text" placeholder="文本框默认值">
	<textarea rows="3"></textarea>		//多行文本域
 
 
<label class="checkbox inline">
		<input type="checkbox" value="">复选框<span style="white-space:pre">				</span>//复选框或单选按钮引用inline类，使他们排列在同一行
	</label>
	<label class="radio inline">
		<input type="radio" name="" id="" value="" checked="">男
	</label>
 
 
<select name="选择城市">
		<optgroup label="山东省">
			<option value="潍坊">潍坊</option>
			<option value="青岛" selected="selected">青岛</option><span style="white-space:pre">			</span>//<optgroup>标签对<option>标签进行分组
		</optgroup>
		<optgroup label="山西省">
			<option value="太原">太原</option>
			<option value="榆次">榆次</option>
		</optgroup>
	</select>
 
 
//add-on类和input组合设计，可在文本输入框之前或之后添加文本或按钮
	<div class="input-prepend">
		<span class="add-on">Email</span>
		<input class="span2" id="" type="text" placeholder="">
	</div>
	<div class="input-append">
		<input class="span2" id="" type="text">
		<span class="add-on">.00</span>
	</div>
	<div class="input-prepend input-append" >
		<span class="add-on">Email</span>
		<input class="span2" id="" type="text" placeholder="">
		<span class="add-on">@163.com</span>
	</div>
 
 
//按钮文本框
	<div class="input-prepend input-append">
		<input type="button" class="btn" value="用户名"/>
		<input type="text"/>
		<button class="btn">注册</button>
	</div>
 
 
<div class="input-prepend input-append">
		<input type="button" class="btn" value="Email"/>
		<input type="text"/>
		<div class="btn-group">		//btn-group定义按钮组
		<button class="btn" data-toggle="dropdown">@163.com	</button>//dropdown-menu定义下拉菜单
		<ul class="dropdown-menu">
			<li><a href="#">@126.com</a></li>
			<li><a href="#">@sohu.com</a></li>
			<li><a href="#">@qq.com</a></li>
		</ul>
		</div>
		<button class="btn">登录</button>
	</div>
 
 
//分段按钮下拉菜单
	<div class="input-prepend input-append">
		<input type="button" class="btn" value="Email"/>
		<input type="text"/>
		<div class="btn-group">		//btn-group定义按钮组
		<button class="btn">@163.com</button>//dropdown-menu定义下拉菜单
		<button class="btn" data-toggle="dropdown" tabindex="-1">
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu">
			<li><a href="#">@126.com</a></li>
			<li><a href="#">@sohu.com</a></li>
			<li><a href="#">@qq.com</a></li>
		</ul>
		</div>
		<button class="btn">登录</button>
	</div>
 
 
//搜索框
	<form class="form-search"><span style="white-space:pre">		</span>//搜索框样式
		<div class="input-append"><span style="white-space:pre">	</span>//表单框
			<input type="text" class="span3">
			<button type="submit" class="btn">快速搜索</button>
		</div>
	</form>
 
 
//默认风格
	<form method="post" action="">
		<label for="username">用户名</label><span style="white-space:pre">		</span>//行内布局form-inline
		<input type="text" id=""/>
		<label for="userPsw">密码</label>
		<input type="password" id=""/>
	</form>
 
 
	//圆角搜索框
	<form class="form-search">
		<input type="text" class="search-query">	//圆角样式
	</form>
 
 
//水平布局
	<form method="post" action="" class="form-horizontal"> 
		<div class="control-group">
			<div class="control-label">
				<label for="username">用户名</label>
			</div>
			<div class="controls">
				<input type="text" id="userName"/>
			</div>
		</div>
		<div class="control-group">
			<div class="control-label">
				<label for="userPsw">密码</label>
			</div>
			<div class="controls">
				<input type="password" id="userPsw"/>
			</div>
		</div>
	</form>
 
 
//若想让每行显示多个文本框，可使用controls-row类为输入框增加合适的间距
	<div class="controls-row">
		<input class="span1" type="text" placeholder=".span1">
		<input class="span6" type="text" placeholder=".span6">
	</div>
 
 
//定制不可编辑的样式控件uneditable-input
	<input class="span4 uneditable-input" disabled type="text" placeholder="">
	<span class="span4 uneditable-input"></span>
	//定制帮助文本
	<input type="text"><span class="help-inline">行内解释文本</span>
	<input type="text"><span class="help-block">块解释文本</span>
	//form-actions控制表单整体样式
	<form class="form-actions">
		<label>
			用户名：
			<input type="text" id=""/>
		</label>
		<label>
			密码：
			<input type="password" id=""/>
		</label>
		<button type="button" class="btn">取消</button>
		<button type="submit" class="btn btn-primary">确定登陆</button>
	</form>
 
 
无效状态
	invalid样式，为它指定type和required属性就可以激活无效状态，用户也可以配合pattern属性，设置输入模式
	<input class="span3" type="email" required>
 
 
//定制风格
	<button class="btn">默认</button>
	<button class="btn btn-info">信息</button>
	<button class="btn btn-primary">主要</button>
	<button class="btn btn-success">成功</button>
	<button class="btn btn-warning">警告</button>
	<button class="btn btn-danger">危险</button>
	<button class="btn btn-inverse">反向</button>
	<button class="btn btn-link">链接</button>
	<button class="btn btn-info btn-large">大号按钮</button>
	<button class="btn btn-info">默认大小</button>
	<button class="btn btn-info btn-small">小号按钮</button>
	<button class="btn btn-info btn-mini">迷你按钮</button>
	<button class="btn btn-info btn-large btn-block">文字</button>
	<button type="button" class="btn btn-large" disabled="disabled">属性禁用</button>
 
 
<div class="text-center span3"><img src="">
		<h3>正常效果</h3>
	</div>
	<div class="text-center span3"><img src="" class="img-rounded">
		<h3>圆角效果</h3>
	</div>
	<div class="text-center span3"><img src="" class="img-circle">
		<h3>圆形效果</h3>
	</div>
	<div class="text-center span3"><img src="" class="img-polaroid">
		<h3>镶边效果</h3>
	</div>
 
 
//按钮图片
	<div class="btn-toolbar">
		<div class="btn-group">
			<a class="btn" href="#"><i class="icon-play"></i></a>
			<a class="btn" href="#"><i class="icon-pause"></i></a>
			<a class="btn" href="#"><i class="icon-stop"></i></a>
			<a class="btn" href="#"><i class="icon-backward"></i></a>
			<a class="btn" href="#"><i class="icon-forward"></i></a>
		</div>
	</div>
 
 
<ul class="nav nav-pills">
		<li class="active"><a href="#"><i class="icon-home icon-white"></i>首页</a></li>
		<li><a href="#"><i class="icon-book"></i>资料</a></li>
		<li><a href="#"><i class="icon-pencil"></i>写日志</a></li>
		<li><a href="#"><i class="icon-film"></i>视频</a></li>
	</ul>
 
 
//设计多级下拉菜单
	<div class="dropdown"><a href="#" data-toggle="dropdown">激活元素</a>
		<ul class="dropdown-menu">
			<li><a href="#">菜单项1</a></li>
			<li><a href="#">菜单项2</a></li>
			<li class="dropdown-submenu"><a href="#">菜单项3</a>
				<ul class="dropdown-menu">
					<li><a href="#">菜单项3-1</a></li>
					<li><a href="#">菜单项3-2</a></li>
					<li><a href="#">菜单项3-3</a></li>
				</ul>
			</li>
		</ul>
	</div>
 
 
设置下拉菜单选项dropdown-menu容器中添加pull-right类实现右对齐
	<div class="dropdown">
		<a href="#" data-toggle="dropdown">文本文字</a>
		<ul class="dropdown-menu pull-right">
			<li><a href="#">菜单项1</a></li>
			<li><a href="#">菜单项2</a></li>
			<li><a href="#">菜单项3</a></li>
		</ul>
	</div>
 
 
//设计菜单分割线
	<div class="dropdown">
		<a href="#" data-toggle="dropdown">激活元素</a>
		<ul class="dropdown-menu">
			<li><a href="#">菜单项1</a></li>
			<li><a href="#">菜单项2</a></li>
			<li class="divider"></li>
			<li><a href="#">菜单项3</a></li>
		</ul>
	</div>
 
 
//向上弹出菜单
	<div class="dropup">
		<a href="#" data-toggle="dropdown">激活元素</a>
		<ul class="dropdown-menu">
			<li><a href="#">菜单项1</a></li>
			<li><a href="#">菜单项2</a></li>
			<li class="dropdown-submenu"><a href="#">菜单项3</a>
				<ul class="dropdown-menu">
					<li><a href="#">菜单项3-1</a></li>
					<li><a href="#">菜单项3-2</a></li>
					<li><a href="#">菜单项3-3</a></li>
				</ul>
			</li>
		</ul>
	</div>
 
 
	//向左弹出菜单
	<div class="dropup">
		<a href="#" data-toggle="dropdown">激活元素</a>
		<ul class="dropdown-menu">
			<li><a href="#">菜单项1</a></li>
			<li><a href="#">菜单项2</a></li>
			<li class="dropdown-submenu pull-left"><a href="#">菜单项3</a>
				<ul class="dropdown-menu">
					<li><a href="#">菜单项3-1</a></li>
					<li><a href="#">菜单项3-2</a></li>
					<li><a href="#">菜单项3-3</a></li>
				</ul>
			</li>
		</ul>
	</div>
 
 
//设计按钮组
<div class="btn-group">
	<p class="btn">按钮</p>
	<li class="btn"></li>
	<a class="btn"></a>
	<span class="btn"></span>
</div>
 
 
//按钮导航条
<div class="btn-toolbar text-center">
	<div class="btn-group">
		<i class="btn"><i class="icon-step-backward"></i></i>
		<i class="btn"><i class="icon-backward"></i></i>
	</div>
	<div class="btn-group">
		<i class="btn">1</i>
		<i class="btn">2</i>
		<i class="btn">3</i>
		<i class="btn">4</i>
	</div>
	<div class="btn-group">
		<i class="btn"><i class="icon-forward"></i></i>
		<i class="btn"><i class="icon-step-forward"></i></i>
	</div>
</div>
 
 
 //设计垂直按钮组
<div class="btn-group-vertical">
	<p class="btn">按钮</p>
	<li class="btn"></li>
	<a class="btn"></a>
	<span class="btn"></span>
</div>
 
 
 //设计导航组件
   <ul class="nav">
   	<li class="active"><a href="#">首页</a></li>
   	<li><a href="#">导航标题1</a></li>
   	<li><a href="#">导航标题2</a></li>
   </ul>
   //设计标签页
   <ul class="nav nav-tabs pull-right">
   	<li class="active"><a href="#">首页</a></li>
   	<li><a href="#">导航标题1</a></li>
   	<li><a href="#">导航标题2</a></li>
   </ul>
   //设计pills导航
   <ul class="nav nav-pills">
   	<li class="active"><a href="#">首页</a></li>
   	<li><a href="#">导航标题1</a></li>
   	<li><a href="#">导航标题2</a></li>
   </ul>
 
 
 //堆叠式效果
  <ul class="nav nav-tabs nav-stacked">
  	<li class="active"><a href="#">首页</a></li>
  	<li><a href="#"></a></li>
  	<li><a href="#"></a></li>
  </ul>
 
 
//标签下拉菜单
 <ul class="nav nav-tabs">
 	<li class="active"><a href="">首页</a></li>
 	<li><a href="#">微课</a></li>
 	<li class="dropdown"><a data-toggle="dropdown" href="#">微博<b class="caret"></b></a>
		<ul class="dropdown-menu">
			<li><a href="#">登录</a></li>
			<li><a href="#">注册</a></li>
			<li><a href="#">退出</a></li>
		</ul>
 	</li>
 </ul>
 
 
//激活标签页
 <div>
 	<ul class="nav nav-tabs">
 		<li class="active"><a href="#tab1" data-toggle="tab">首页</a></li>
 		<li><a href="#tab2" data-toggle="tab">微课</a></li>
 		<li><a href="#tab3" data-toggle="tab">微博</a></li>
 	</ul>
 	<div class="tab-content">
 		<div class="tab-pane active" id="tab1">首页内容框</div>
 		<div class="tab-pane" id="tab2">微课内容框</div>
 		<div class="tab-pane" id="tab3">微博内容框</div>
 	</div>
 </div>
 //标签页淡入效果
 <div class="tabbable"><span style="white-space:pre">			</span>//tabs-below,tabs-left
 	<ul class="nav nav-tabs">
 		<li class="active"><a href="#tab1" data-toggle="tab">首页</a></li>
 		<li><a href="#tab2" data-toggle="tab">微课</a></li>
 		<li><a href="#tab3" data-toggle="tab">微博</a></li>
 	</ul>
 	<div class="tab-content">
 		<div class="tab-pane active" id="tab1"><img src=""></div>
 		<div class="tab-pane active" id="tab1"><img src=""></div>
 		<div class="tab-pane active" id="tab1"><img src=""></div>
 	</div>
 </div>
 
 
//导航条包含框
 <div class="navbar">
 	<div class="navbar-inner"></div>
 </div>
 
 
//导航条分割线效果
 <div class="navbar">
 	<div class="navbar-inner">
 		<a class="brand" href="#">网站名称</a>
 		<ul class="nav">
 			<li class="active"><a href="#">首页</a></li>
 			<li class="divider-vertical"></li>
 			<li><a href="#">导航标题1</a></li>
 			<li class="divider-vertical"></li>
 			<li><a href="#">导航标题2</a></li>
 		</ul>
 	</div>
 </div>
 
 
//设计表单导航条
 <div class="navbar">
 	<div class="navbar-inner">
 		<form class="navbar-form pull-left">
 			<input type="text" class="span3">
 			<input type="text" class="btn span1" value="提交"/>
 		</form>
 	</div>
 </div>
 
 
//设计表单导航条
 <div class="navbar">
 	<div class="navbar-inner">
 		<form class="navbar-search form-search pull-left">
 			<div class="input-append">
 				<input type="text" class="search-query span3">
 				<input type="text" class="btn span1" value="提交"/>
 			</div>
 		</form>
 	</div>
 </div>
 
 
//设计导航条反色效果
 		<div class="navbar navbar-inverse">
 			<div class="navbar-inner">
 				<a class="brand" href="#">导航条</a>
 				<form class="navbar-search form-search pull-left">
 					<div class="input-append">
 						<input type="text" class="search-query span3">
 						<input type="text" class="btn span1" value="搜索"/>
 					</div>
 				</form>
 			</div>
 		</div>
 
 
响应式导航条
 		<div class="navbar">
 			<div class="navbar-inner">
 				<a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
 					<span class="icon-bar"></span>
 					<span class="icon-bar"></span>
 					<span class="icon-bar"></span>
 				</a>
 				<a class="brand" href="#">响应式导航条</a>
 				<ul class="nav nav-collapse collapse navbar-responsive-collapse">
 					<li class="active"><a href="#">首页</a></li>
 					<li><a href="#"></a></li>
 					<li><a href="#"></a></li>
 				</ul>
 			</div>
 		</div>
 
 
	//面包屑
 		<ul class="breadcrumb">
 			<li>
 				<a href="#">首页</a><span class="divider">---></span>
 			</li>
 			<li>
 				<a href="#">首页</a><span class="divider">---></span>
 			</li>
 			<li>
 				<a href="#">首页</a><span class="divider">---></span>
 			</li>
 			<li class="active">新闻详细页</li>
 		</ul>
 		//设计分页
 		<div class="Pagination">
 			<ul>
 				<li><a href="">Pre</a></li>
 				<li><a href="">1</a></li>
 				<li><a href="">2</a></li>
 				<li><a href="">3</a></li>
 				<li><a href="">4</a></li>
 				<li><a href="">Next</a></li>
 			</ul>
 		</div>
 
 
 	<div class="pagination pagination-large"></div>
 	<div class="pagination pagination-large pagination-centered"></div>
 	<div class="pagination pagination-large pagination-right"></div>
 	//翻页组件
 	<ul class="paper">
 		<li class="previous"><a href="#">上一页</a></li>	//class="previous disabled"
 		<li class="next"><a href="#">下一页</a></li>
 	</ul>
 
 
	<span class="label label-info">信息</span>
   	<span class="label label-important">重要</span>
   	<span class="label label-success">成功</span>
   	<span class="label label-warning">警告</span>
   	<span class="label label-inverse">反向</span>
   	<span class="badge">默认</span>
   <span class="badge badge-info">信息</span>
   	<span class="badge badge-important">重要</span>
   	<span class="badge badge-success">成功</span>
   	<span class="badge badge-warning">警告</span>
   	<span class="badge badge-inverse">反向</span>
 
 
 //缩略图
   <ul class="thumbnails">
   	<li class="span1">
   		<a href="#" class="thumbnail"><img src=""></a>
   	</li>
   </ul>
 
 
 //警告框
  <div class="alert alert-danger">
  	<button type="button" class="close" data-dismiss="alert">×</button>
  </div>
//alert-error;alert-success;alert-info
 
 
//进度条
 <div class="progress">
 	<div class="bar" style="width:50%"></div>
 </div>
  <div class="progress progress-striped">
 	<div class="bar" style="width:50%"></div>
 </div>
 <div class="progress progress-info">	//success,warning,danger
 	<div class="bar" style="width:50%"></div>
 </div>
 
 
//版式
 <div class="hero-unit"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

 

 

 

 


                

        

        

    

  


    

      

        

            

              
                
                  奔跑的前端er
                
              
            

            

                关注
              
            

        

        

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

      

      










                



	

		

			

				
					
bootstrap实战

				
			

			

				

					steve1988717的博客
				

				

					02-22
					
					667
					
				

			

		

		

			
				
1,先引入bootstrap环境，如下：
&amp;amp;amp;amp;amp;lt;!doctype html&amp;amp;amp;amp;amp;gt;
&amp;amp;amp;amp;amp;lt;html lang=&amp;amp;amp;amp;quot;zh-cn&amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;gt;
  &amp;amp;amp;amp;amp;lt;head&am

			
		

	



                

              
                



	

		

			

				
					
bootstrape实战案例_bootstrap实战经验

				
			

			

				

					weixin_32980943的博客
				

				

					12-31
					
					250
					
				

			

		

		

			
				
凡是基本的布局需要float实现的，都可以考虑利用网格布局。1，.jumbotron可以形成一个青灰色的背景，并自动调节对应边距2，.panel的应用十分广泛，可以自动设置合适的padding.甚至利用它实现footer等(panel-footer)3, text-justify对齐方式的使用4，可以使用网格布局来控制图片的大小，结合max-width:100%.5，top 和left是针对元素的...

			
		

	



                


  
              

                


	

		

			

				
					
《Bootstrap实战》

				
			

			

				

					chengying332
				

				

					06-25
					
					967
					
				

			

		

		

			
				
《Bootstrap实战》


基于最新的Bootstrap 3撰写，在简单介绍了安装与配置之后就直奔主题，分别讨论了个人作品站点、WordPress主题、企业网站、电子商务网站和单页营销网站等几个最具代表性的应用案例，结合这些案例细致地剖析了Bootstrap还有LESS的使用方式和技巧...


详细解读 和小伙伴们一起来吐槽

			
		

	





	

		

			

				
					
Bootstrap实战 - 响应式布局

				
			

			

				

					后除
				

				

					01-11
					
					2171
					
				

			

		

		

			
				
响应式布局就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。导航栏与轮播在大部分网站的头部占很高的比重，特别是导航栏，扮演着网站地图的角色。在响应式布局中，要求导航栏能够根据终端屏幕大小显示不同的样式。

			
		

	



		

			
		



	

		

			

				
					
【Bootstrap实战】基于Bootstrap实现阿里百秀（未做响应式处理）

				
			

			

				

					在热爱技术的路上一直前行。
				

				

					06-07
					
					364
					
				

			

		

		

			
				
Bootstrap使用四步曲：
3.3 css 代码

3.4 效果

			
		

	





	

		

			

				
					
BootStrap 实战教程 pdf

				
			

			

				

					03-08
				

			

		

		

			
				
### BootStrap实战教程知识点详解  #### 一、BootStrap实战教程概览  本教程主要介绍了如何使用Bootstrap快速构建美观且响应式的网页。通过学习本教程，读者将能够掌握Bootstrap的基本用法，并能独立创建自己的网站...

			
		

	





	

		

			

				
					
全网超神bootstrap综合实战含源码

				
			

			

				

					03-03
				

			

		

		

			
				
本资源“全网超神bootstrap综合实战含源码”提供了全面的Bootstrap实战教程，帮助开发者掌握如何利用Bootstrap创建功能丰富的网页和后台管理界面。  在描述中提到，“全网火爆的bootstrap综合实战，包含前台和后台...

			
		

	





	

		

			

				
					
bootstrap 实战  李松峰

				
			

			

				

					08-14
				

			

		

		

			
				
在"bootstrap 实战 李松峰"这本书中，作者李松峰可能详细介绍了如何使用Bootstrap来构建实际的Web项目。书中的随书代码是学习过程中非常重要的辅助资源，可以帮助读者直观理解理论知识，并进行实践操作。"4524OS_...

			
		

	





	

		

			

				
					
【实战】《Bootstrap实战》——第1章 初识Bootstrap

				
			

			

				

					程序边界
				

				

					04-14
					
					692
					
				

			

		

		

			
				
文章目录一、下载二、准备项目模板文件夹1.下载2.文件目录3.删除不必要的样本文件4.理解样本中的.htaccess文件5.更新必要的样本文件6.更新图标文件三、加入Bootstrap文件1.字体2.JavaScript3.暂不考虑css文件4.复制less文件5.盘点四、构造HTML模板1.原有代码2.新增代码3.编译less文件4.完成响应式导航条5.支持IE8五、小结

一、下载

http...

			
		

	





	

		

			

				
					
BootStrap实战

				
			

			

				

					s1124yy
				

				

					04-12
					
					457
					
				

			

		

		

			
				
导航栏



&lt;!-- 导航 --&gt;
&lt;nav class="navbar navbar-default"&gt;
  &lt;div class="container-fluid"&gt;
    &lt;div class="navbar-header"&gt;
      &lt;button type="button" class=

			
		

	





	

		

			

				
					
Bootstrap实例工程

				
			

			

				

					01-26
				

			

		

		

			
				
本工程为Bootstrap实例，实例详解请访问博主博客：http://blog.csdn.net/u013142781

			
		

	





	

		

			

				
					
Bootstrap从入门到项目实战学习笔记

				
			

			

				

					11-10
				

			

		

		

			
				
通过一个月的学习，整理了这份bootstrap4 class索引和笔记，以及一些参考网站资料信息都做了记录，只需此份，就可精通bs4，先分享给大家，喜欢就给个好评。（笔记最后面章节有你懂的福利，千万不要错过）

			
		

	





	

		

			

				
					
【笔记】《Bootstrap实战》——第6章 单页营销网站

				
			

			

				

					程序边界
				

				

					04-14
					
					1373
					
				

			

		

		

			
				
文章目录一、概况二、初始文件三、了解页面内容四、调整导航条五、定制高清图六、美化功能列表七、装饰用户评论区1.定位及美化说明2.调整说明元素的位置3.添加 Bootstrap 的网格类4.下载并链接 JavaScript 插件5.初始化 Masonry 插件6.切齐图片7.适应小微屏幕八、吸引人的价目表1.准备变量、文件和标记2.表格头3.表体和表脚4.为不同的价目表添加不同的样式5.适配小视口6...

			
		

	





	

		

			

				
					
前端学习，Bootstrap实战总结

				
			

			

				

					qq_39244173的博客
				

				

					06-02
					
					1648
					
				

			

		

		

			
				
文章目录使用Bootstrap设计响应式页面通过Bootstrap使图片适配手机显示通过Bootstrap使文本居中通过Bootstrap添加一个按钮添加一个Bootstrap块级元素按钮尝试给一个Bootstrap按钮添加颜色Bootstrap按钮多种颜色属性设定添加一个Bootstrap警告按钮
使用Bootstrap设计响应式页面
还记得在学习HTML5和CSS的时候,我们创建过一个猫咪照片...

			
		

	





	

		

			

				
					
bootstrape实战案例_Bootstrap实战

				
			

			

				

					weixin_27977279的博客
				

				

					12-31
					
					162
					
				

			

		

		

			
				
第一二章都轻轻松松，第三章玩wordpress可玩死我，照葫芦画瓢也折腾半死。对wordpress瞬间没好感。1. 首先，你先要下载一个xampp，来建立wordpress服务器和数据库。启动xampp-control.exe面板上的项目。(留意装了iis可能和apache端口冲突，tomcat还需要装JAVA SDK等)2. 再下载 wordpress：http://cn.wordpress.o...

			
		

	





	

		

			

				
					
【实战】教你如何使用 Bootstrap 搭建一个企业网站——《Bootstrap实战》

				
			

			

				

					程序边界
				

				

					04-14
					
					3049
					
				

			

		

		

			
				
文章目录一、准备启动文件1.完成之前的效果：2.完成之后的效果3.文件清单4.本章目标二、页头区1.需要完成的效果特性：2.将Logo放在导航条上方3.调整导航条三、添加实用导航1.要实现的效果2.添加代码和样式四、调整响应式导航五、调整配色六、调整折叠后的导航条配色1.调整响应式导航条2.调整水平导航条七、设计复杂的响应式布局1.调整中、宽布局2.调整标题、字体大小和按钮3.增大主栏4.调整第三...

			
		

	





	

		

			

				
					
bootstrape实战案例_bootstrap 实战入门教程（一）

				
			

			

				

					weixin_42498643的博客
				

				

					12-23
					
					449
					
				

			

		

		

			
				
说起响应式前端框架，比较而言，bootstrap还是不错的，虽然可能很多文档都是英文的。今天就整理下自己在学习及使用bootstrap3时的重要知识点和使用案例参考资料：1. 简介Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT。主要是为了支持移动端，所以pc端就很难做得跟以前pc那样复杂漂亮。在之前的 Boot...

			
		

	





	

		

			

				
					
bootstrap实战项目总结 源码及知识点

					
热门推荐

				
			

			

				

					北枫林
				

				

					01-05
					
					1万+
					
				

			

		

		

			
				
在学校里面参加了一个服创比赛，我的任务是前端，一个半月的寒假打算好好学Js，bootstrap，Vue，jQuery，现在先开始学习bootstrap。发现在实战项目中学习是一个不错的方法。

话不多说，直接上源码与做完后的图片，很多知识点我都在源码里详细注释了供大家参考，希望大家不断进步。

我是用webstrom做的，加上一点快捷键：ctrl+F在文件内快速查找代码 ctrl+D复制当前行...

			
		

	





	

		

			

				
					
HarmonyOS NEXT多层级轮播图方案

					
最新发布

				
			

			

				

					shudaoshanQAQ的博客
				

				

					03-21
					
					805
					
				

			

		

		

			
				
该场景多用于购物、资讯类应用。

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值