全面解析Bootstrap布局组件应用

2024-03-21 17:53:02 35

本文示例介绍了Bootstrap布局组件应用，分享给大家供大家参考，具体内容如下

字体图标的应用示例

<buttontype="button"class="btnbtn-default">
<spanclass="glyphiconglyphicon-sort-by-attributes"></span>
</button>

下拉菜单示例

<divclass="dropdown">
<buttontype="button"class="btndropdown-toggle"id="dropdownMenu1"
data-toggle="dropdown">
主题
<spanclass="caret"></span>
</button>
<ulclass="dropdown-menu"role="menu"aria-labelledby="dropdownMenu1">
<lirole="presentation"class="dropdown-header">下拉菜单标题</li>
<lirole="presentation">
<arole="menuitem"tabindex="-1"href="#">选项1</a>
</li>
<lirole="presentation">
<arole="menuitem"tabindex="-1"href="#">选项2</a>
</li>
<lirole="presentation">
<arole="menuitem"tabindex="-1"href="#">选项3</a>
</li>
<lirole="presentation"class="divider"></li><!--分割线-->
<lirole="presentation">
<arole="menuitem"tabindex="-1"href="#">分离的链接</a>
</li>
</ul>
</div>

按钮工具栏与按钮组

<divclass="btn-toolbar"role="toolbar"><!--用来嵌套btn-group-->
<divclass="btn-groupbtn-group-lg">
<!--btn-group-lg用来控制按钮组的大小,bt-group-vertical是垂直的按钮组,bt-group也可以嵌套bt-group-->
<buttontype="button"class="btnbtn-default">Button1</button>
<buttontype="button"class="btnbtn-default">Button2</button>
<buttontype="button"class="btnbtn-default">Button3</button>
</div>
<divclass="btn-groupbtn-group-sm">
<buttontype="button"class="btnbtn-default">Button4</button>
<buttontype="button"class="btnbtn-default">Button5</button>
<buttontype="button"class="btnbtn-default">Button6</button>
</div>
<divclass="btn-groupbtn-group-xs">
<buttontype="button"class="btnbtn-default">Button7</button>
<buttontype="button"class="btnbtn-default">Button8</button>
<buttontype="button"class="btnbtn-default">Button9</button>
</div>
</div>

按钮下拉菜单

<divclass="btn-group"><!--加类.dropup可以变成按钮上拉菜单-->
<buttontype="button"class="btnbtn-defaultdropdown-toggle"
data-toggle="dropdown"><!--加类.btn-xs之类的东西改变按钮大小-->
默认<spanclass="caret"></span>
</button>
<ulclass="dropdown-menu"role="menu">
<li><ahref="#">功能</a></li>
<li><ahref="#">另一个功能</a></li>
<li><ahref="#">其他</a></li>
<liclass="divider"></li><!--分割线-->
<li><ahref="#">分离的链接</a></li>
</ul>
</div>

表单中的输入框组

<formclass="bs-examplebs-example-form"role="form">
<divclass="input-groupinput-group-lg"><!--input-group-lg调整输入框组大小-->
<inputtype="text"class="form-control">
<spanclass="input-group-addon">.00</span>
</div>
<br>
<divclass="input-group">
<spanclass="input-group-addon">
<inputtype="checkbox"><!--复选框和单选框都能应用于输入框组-->
</span>
<inputtype="text"class="form-control">
</div>
<br>
<divclass="input-group">
<inputtype="text"class="form-control">
<spanclass="input-group-btn"><!--按钮也能应用于输入框组请注意这里的类变为了input-group-btn，甚至可以加上前面的按钮下拉菜单-->
<buttonclass="btnbtn-default"type="button">
Go!
</button>
</span>
</div>
</form>

导航（tab标签页）

<p>标签式的导航菜单</p>
<ulclass="navnav-tabs"><!--加上类nav-justified可以让导航两端对齐-->
<liclass="active"><ahref="#">Home</a></li>
<li><ahref="#">SVN</a></li>
<li><ahref="#">iOS</a></li>
</ul>
<p>基本的胶囊式导航菜单</p>
<ulclass="navnav-pills">
<liclass="active"><ahref="#">Home</a></li>
<li><ahref="#">SVN</a></li>
</ul>
<p>垂直的胶囊式导航菜单</p>
<ulclass="navnav-pillsnav-stacked">
<liclass="active"><ahref="#">Home</a></li>
<li><ahref="#">SVN</a></li>
</ul>

导航栏

<navclass="navbarnavbar-default"role="navigation">
<divclass="navbar-header">
<aclass="navbar-brand"href="#">W3Cschool</a>
</div>
<div>
<ulclass="navnavbar-nav"><!--.navbar-fixed-top和.navbar-fixed-bottom可以使导航栏固定在顶部和底部，.navbar-static-top会使导航栏随页面滚动吗，.navbar-inverse实现背景颜色和文字颜色互换-->
<liclass="active"><ahref="#">iOS</a></li>
<li><ahref="#">SVN</a></li>
<liclass="dropdown">
<ahref="#"class="dropdown-toggle"data-toggle="dropdown">
Java
<bclass="caret"></b>
</a>
<ulclass="dropdown-menu">
<li><ahref="#">jmeter</a></li>
<li><ahref="#">EJB</a></li>
<li><ahref="#">JasperReport</a></li>
<liclass="divider"></li>
<li><ahref="#">分离的链接</a></li>
</ul>
</li>
</ul>
<!--导航栏中的表单-->
<formclass="navbar-formnavbar-left"role="search">
<divclass="form-group">
<inputtype="text"class="form-control"placeholder="Search">
</div>
<buttontype="submit"class="btnbtn-default">提交</button>
</form>
<!--导航栏按钮-->
<buttontype="button"class="btnbtn-defaultnavbar-btn">
导航栏按钮
</button>
<!--导航栏文本-->
<divclass="navbar-textnavbar-right">
<p>导航栏文本<ahref="#"class="navbar-link">我是链接</a></p>
</div>
<!--navbar-left和navbar-right可以实现向左和向右对齐-->
</div>
</nav>

响应式的导航栏

以下金黄色部分为对一般的导航栏的区别

<navclass="navbarnavbar-default"role="navigation">
<divclass="navbar-header">
<buttontype="button"class="navbar-toggle"data-toggle="collapse"
data-target="#example-navbar-collapse">
<spanclass="icon-bar"></span>
<spanclass="icon-bar"></span>
<spanclass="icon-bar"></span><!--下面有几个选项这里就有几个iconbar-->
</button>
<aclass="navbar-brand"href="#">W3Cschool</a>
</div>
<divclass="collapsenavbar-collapse"id="example-navbar-collapse">
<ulclass="navnavbar-nav">
<liclass="active"><ahref="#">iOS</a></li>
<li><ahref="#">SVN</a></li>
<li><ahref="#">Troy</a></li>
</ul>
</div>
</nav>

面包屑导航

<olclass="breadcrumb">
<li><ahref="#">Home</a></li>
<li><ahref="#">2013</a></li>
<liclass="active">十一月</li>
</ol>

分页和翻页

<!--以下所有示例都可以用disabled和active类来控制激活和禁用-->
<!--分页-->
<ulclass="pagination"><!--pagination-sm和pagination-lg来控制分页的大小-->
<li><ahref="#">&laquo;</a></li>
<liclass="active"><ahref="#">1</a></li>
<liclass="disabled"><ahref="#">2</a></li>
<li><ahref="#">3</a></li>
<li><ahref="#">4</a></li>
<li><ahref="#">5</a></li>
<li><ahref="#">&raquo;</a></li>
</ul>
<!--翻页-->
<ulclass="pager">
<li><ahref="#">Previous</a></li>
<li><ahref="#">Next</a></li>
</ul>
<!--翻页-->
<ulclass="pager">
<liclass="previous"><ahref="#">&larr;Older</a></li>
<liclass="next"><ahref="#">Newer&rarr;</a></li>
</ul>

标签

<spanclass="labellabel-default">默认标签</span>
<spanclass="labellabel-primary">主要标签</span>
<spanclass="labellabel-success">成功标签</span>
<spanclass="labellabel-info">信息标签</span>
<spanclass="labellabel-warning">警告标签</span>
<spanclass="labellabel-danger">危险标签</span>

徽章

徽章比标签更圆滑，主要用于突出显示新的或未读的项

<ulclass="navnav-pillsnav-stacked"style="max-width:260px;">
<liclass="active">
<ahref="#">
<spanclass="badgepull-right">42</span>
首页
</a>
</li>
<li><ahref="#">简介</a></li>
<li>
<ahref="#">
<spanclass="badgepull-right">3</span>
消息
</a>
</li>
</ul>

超大屏幕

<divclass="jumbotron">
<divclass="jumbotron">
<h1>欢迎登陆页面！</h1>
<p>这是一个超大屏幕（Jumbotron）的实例。</p>
<p><aclass="btnbtn-primarybtn-lg"role="button">
学习更多</a>
</p>
</div>
</div>
<!--翻过来jumbotron包着jumbotron就会得到一个不带圆角且占更多宽度的超大屏幕-->

页面标题示例

<divclass="page-header">
<h1>页面标题实例
<small>子标题</small>
</h1>
</div>

缩略图

<divhref="#"class="thumbnail">
<imgsrc="/wp-content/uploads/2014/06/kittens.jpg"
alt="通用的占位符缩略图">
</div>
<divclass="caption">
<h3>缩略图标签</h3>
<p>一些示例文本。一些示例文本。</p>
<p>
<ahref="#"class="btnbtn-primary"role="button">
按钮
</a>
<ahref="#"class="btnbtn-default"role="button">
按钮
</a>
</p>
</div>

警告

<divclass="alertalert-successalert-dismissable"><!--alert-dismissable为可删除警告-->
<buttontype="button"class="close"data-dismiss="alert"
aria-hidden="true">
&times;
</button>
成功！很好地完成了提交。
</div>
<divclass="alertalert-infoalert-dismissable">
<buttontype="button"class="close"data-dismiss="alert"
aria-hidden="true">
&times;
</button>
<ahref="#"class="alert-link">成功！很好地完成了提交。</a><!--警告中的标签-->
</div>
<divclass="alertalert-warningalert-dismissable">
<buttontype="button"class="close"data-dismiss="alert"
aria-hidden="true">
&times;
</button>
警告！请不要提交。
</div>
<divclass="alertalert-dangeralert-dismissable">
<buttontype="button"class="close"data-dismiss="alert"
aria-hidden="true">
&times;
</button>
错误！请进行一些更改。
</div>

进度条

<!--一般进度条-->
<divclass="progressprogress-stripedactive"><!--progress-striped为加条纹,加active条纹会产生动画效果-->
<!--progress-bar-infoprogress-bar-warningprogress-bar-dangerprogress-bar-success会给进度条不同颜色，不加就是最基本的-->
<divclass="progress-barprogress-bar-success"role="progressbar"
aria-valuenow="60"aria-valuemin="0"aria-valuemax="100"
style="width:90%;">
<spanclass="sr-only">90%完成（成功）</span>
</div>
</div>
<!---堆叠的进度条-->
<divclass="progress">
<divclass="progress-barprogress-bar-success"role="progressbar"
aria-valuenow="60"aria-valuemin="0"aria-valuemax="100"
style="width:40%;">
<spanclass="sr-only">40%完成</span>
</div>
<divclass="progress-barprogress-bar-info"role="progressbar"
aria-valuenow="60"aria-valuemin="0"aria-valuemax="100"
style="width:30%;">
<spanclass="sr-only">30%完成（信息）</span>
</div>
<divclass="progress-barprogress-bar-warning"role="progressbar"
aria-valuenow="60"aria-valuemin="0"aria-valuemax="100"
style="width:20%;">
<spanclass="sr-only">20%完成（警告）</span>
</div>
</div>

媒体标签

.media：该class允许将媒体对象里的多媒体（图像、视频、音频）浮动到内容区块的左边或者右边。
.media-list：如果你需要一个列表，各项内容是无序列表的一部分，可以使用该class。可用于评论列表与文章列表。

<ulclass="media-list">
<liclass="media">
<aclass="pull-left"href="#">
<imgclass="media-object"src="/wp-content/uploads/2014/06/64.jpg"
alt="通用的占位符图像">
</a>
<divclass="media-body">
<h4class="media-heading">媒体标题</h4>
<p>这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。</p>
<!--嵌套的媒体对象-->
<divclass="media">
<aclass="pull-left"href="#">
<imgclass="media-object"src="/wp-content/uploads/2014/06/64.jpg"
alt="通用的占位符图像">
</a>
<divclass="media-body">
<h4class="media-heading">嵌套的媒体标题</h4>
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
<!--嵌套的媒体对象-->
<divclass="media">
<aclass="pull-left"href="#">
<imgclass="media-object"src="/wp-content/uploads/2014/06/64.jpg"
alt="通用的占位符图像">
</a>
<divclass="media-body">
<h4class="media-heading">嵌套的媒体标题</h4>
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
</div>
</div>
</div>
</div>
<!--嵌套的媒体对象-->
<divclass="media">
<aclass="pull-left"href="#">
<imgclass="media-object"src="/wp-content/uploads/2014/06/64.jpg"
alt="通用的占位符图像">
</a>
<divclass="media-body">
<h4class="media-heading">嵌套的媒体标题</h4>
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
</div>
</div>
</div>
</li>
<liclass="media">
<aclass="pull-right"href="#">
<imgclass="media-object"src="/wp-content/uploads/2014/06/64.jpg"
alt="通用的占位符图像">
</a>
<divclass="media-body">
<h4class="media-heading">媒体标题</h4>
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
</div>
</li>
</ul>

列表组

<!--一般列表组-->
<ulclass="list-group">
<liclass="list-group-item">免费域名注册</li>
<liclass="list-group-item">
<spanclass="badge">新</span>
24*7支持
</li>
<liclass="list-group-item">每年更新成本</li>
<liclass="list-group-item">
<spanclass="badge">新</span>
折扣优惠
</li>
</ul>
<!--自定义列表组-->
<divclass="list-group">
<ahref="#"class="list-group-itemactive">
<h4class="list-group-item-heading">
入门网站包
</h4>
</a>
<ahref="#"class="list-group-item">
<h4class="list-group-item-heading">
免费域名注册
</h4>
<pclass="list-group-item-text">
您将通过网页进行免费域名注册。
</p>
</a>
<ahref="#"class="list-group-item">
<h4class="list-group-item-heading">
24*7支持
</h4>
<pclass="list-group-item-text">
我们提供24*7支持。
</p>
</a>
</div>

面板

<divclass="panelpanel-default"><!--可替代panel-default的类：panel-primary，panel-success，panel-info，panel-warning，panel-danger-->
<divclass="panel-heading">
<h3class="panel-title">
带有title的面板标题
</h3>
</div>
<divclass="panel-body">
面板内容
</div>
<!---带表格-->
<tableclass="table">
<th>产品</th><th>价格</th>
<tr><td>产品A</td><td>200</td></tr>
<tr><td>产品B</td><td>400</td></tr>
</table>
<!---带列表组-->
<ulclass="list-group">
<liclass="list-group-item">免费域名注册</li>
<liclass="list-group-item">免费Window空间托管</li>
<liclass="list-group-item">图像的数量</li>
<liclass="list-group-item">24*7支持</li>
<liclass="list-group-item">每年更新成本</li>
</ul>
<divclass="panel-footer">面板脚注</div>
</div>

well效果

Well是一种会引起内容凹陷显示或插图效果的容器<div>

<divclass="wellwell-lg">您好，我在大的Well中！</div>
<divclass="wellwell-sm">您好，我在小的Well中！</div>

如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程

以上就是本文的全部内容，希望对大家的学习有所帮助。

全面解析Bootstrap布局组件应用

热门推荐

随机推荐