全面解析Bootstrap布局组件应用_Javascript教程-查字典教程网

摘要：本文示例介绍了Bootstrap布局组件应用，分享给大家供大家参考，具体内容如下字体图标的应用示例下拉菜单示例主题下拉菜单标题选项1选项2选...

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

字体图标的应用示例

下拉菜单示例

<div> <button type="button" id="dropdownMenu1" data-toggle="dropdown"> 主题 <span></span> </button> <ul role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation">下拉菜单标题</li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">选项1</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">选项2</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">选项3</a> </li> <li role="presentation"></li><> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">分离的链接</a> </li> </ul> </div>

按钮工具栏与按钮组

<div role="toolbar"><> <div> <> <button type="button">Button 1</button> <button type="button">Button 2</button> <button type="button">Button 3</button> </div> <div> <button type="button">Button 4</button> <button type="button">Button 5</button> <button type="button">Button 6</button> </div> <div> <button type="button">Button 7</button> <button type="button">Button 8</button> <button type="button">Button 9</button> </div> </div>

按钮下拉菜单

<div><> <button type="button" data-toggle="dropdown"> <> 默认 <span></span> </button> <ul role="menu"> <li><a href="#">功能</a></li> <li><a href="#">另一个功能</a></li> <li><a href="#">其他</a></li> <li></li><> <li><a href="#">分离的链接</a></li> </ul> </div>

表单中的输入框组

导航（tab标签页）

<p>标签式的导航菜单</p> <ul><> <li><a href="#">Home</a></li> <li><a href="#">SVN</a></li> <li><a href="#">iOS</a></li> </ul> <p>基本的胶囊式导航菜单</p> <ul> <li><a href="#">Home</a></li> <li><a href="#">SVN</a></li> </ul> <p>垂直的胶囊式导航菜单</p> <ul> <li><a href="#">Home</a></li> <li><a href="#">SVN</a></li> </ul>

导航栏

<nav role="navigation"> <div> <a href="#">W3Cschool</a> </div> <div> <ul><> <li><a href="#">iOS</a></li> <li><a href="#">SVN</a></li> <li> <a href="#" data-toggle="dropdown"> Java <b></b> </a> <ul> <li><a href="#">jmeter</a></li> <li><a href="#">EJB</a></li> <li><a href="#">Jasper Report</a></li> <li></li> <li><a href="#">分离的链接</a></li> </ul> </li> </ul> <> <form role="search"> <div> <input type="text" placeholder="Search"> </div> <button type="submit">提交</button> </form> <> <button type="button"> 导航栏按钮 </button> <> <div> <p >导航栏文本 <a href="#">我是链接</a></p> </div> <> </div> </nav>

响应式的导航栏

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

<nav role="navigation"> <div> <button type="button" data-toggle="collapse" data-target="#example-navbar-collapse"> <span></span> <span></span> <span></span><> </button> <a href="#">W3Cschool</a> </div> <div id="example-navbar-collapse"> <ul> <li><a href="#">iOS</a></li> <li><a href="#">SVN</a></li> <li><a href="#">Troy</a></li> </ul> </div> </nav>

面包屑导航

分页和翻页

<> <> <ul><> <li><a href="#">«</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="#">5</a></li> <li><a href="#">»</a></li> </ul> <> <ul> <li><a href="#">Previous</a></li> <li><a href="#">Next</a></li> </ul> <> <ul> <li><a href="#">← Older</a></li> <li><a href="#">Newer →</a></li> </ul>

标签

徽章

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

超大屏幕

<div> <div> <h1>欢迎登陆页面！</h1> <p>这是一个超大屏幕（Jumbotron）的实例。</p> <p><a role="button"> 学习更多</a> </p> </div> </div> <>

页面标题示例

<div> <h1>页面标题实例 <small>子标题</small> </h1> </div>

缩略图

<div href="#"> <img src="http://www.jb51.netwp-content/uploads/2014/06/kittens.jpg" alt="通用的占位符缩略图"> </div> <div> <h3>缩略图标签</h3> <p>一些示例文本。一些示例文本。</p> <p> <a href="#" role="button"> 按钮 </a> <a href="#" role="button"> 按钮 </a> </p> </div>

警告

<div><> <button type="button" data-dismiss="alert" aria-hidden="true"> × </button> 成功！很好地完成了提交。 </div> <div> <button type="button" data-dismiss="alert" aria-hidden="true"> × </button> <a href="#">成功！很好地完成了提交。</a><> </div> <div> <button type="button" data-dismiss="alert" aria-hidden="true"> × </button> 警告！请不要提交。 </div> <div> <button type="button" data-dismiss="alert" aria-hidden="true"> × </button> 错误！请进行一些更改。 </div>

进度条

<> <div><> <> <div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" > <span>90% 完成（成功）</span> </div> </div> <> <div> <div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" > <span>40% 完成</span> </div> <div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" > <span>30% 完成（信息）</span> </div> <div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" > <span>20% 完成（警告）</span> </div> </div>

媒体标签

.media：该 class 允许将媒体对象里的多媒体（图像、视频、音频）浮动到内容区块的左边或者右边。

.media-list：如果你需要一个列表，各项内容是无序列表的一部分，可以使用该 class。可用于评论列表与文章列表。

<ul> <li> <a href="#"> <img src="http://www.jb51.netwp-content/uploads/2014/06/64.jpg" alt="通用的占位符图像"> </a> <div> <h4>媒体标题</h4> <p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p> <> <div> <a href="#"> <img src="http://www.jb51.netwp-content/uploads/2014/06/64.jpg" alt="通用的占位符图像"> </a> <div> <h4>嵌套的媒体标题</h4> 这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。 <> <div> <a href="#"> <img src="http://www.jb51.netwp-content/uploads/2014/06/64.jpg" alt="通用的占位符图像"> </a> <div> <h4>嵌套的媒体标题</h4> 这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。 </div> </div> </div> </div> <> <div> <a href="#"> <img src="http://www.jb51.netwp-content/uploads/2014/06/64.jpg" alt="通用的占位符图像"> </a> <div> <h4>嵌套的媒体标题</h4> 这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。 </div> </div> </div> </li> <li> <a href="#"> <img src="http://www.jb51.netwp-content/uploads/2014/06/64.jpg" alt="通用的占位符图像"> </a> <div> <h4>媒体标题</h4> 这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。 </div> </li> </ul>

列表组

<> <ul> <li>免费域名注册</li> <li> <span>新</span> 24*7 支持 </li> <li>每年更新成本</li> <li> <span>新</span> 折扣优惠 </li> </ul> <> <div> <a href="#"> <h4> 入门网站包 </h4> </a> <a href="#"> <h4> 免费域名注册 </h4> <p> 您将通过网页进行免费域名注册。 </p> </a> <a href="#"> <h4> 24*7 支持 </h4> <p> 我们提供 24*7 支持。 </p> </a> </div>

面板

<div><> <div> <h3> 带有 title 的面板标题 </h3> </div> <div> 面板内容 </div> <> <table> <th>产品</th><th>价格 </th> <tr><td>产品 A</td><td>200</td></tr> <tr><td>产品 B</td><td>400</td></tr> </table> <> <ul> <li>免费域名注册</li> <li>免费 Window 空间托管</li> <li>图像的数量</li> <li>24*7 支持</li> <li>每年更新成本</li> </ul> <div>面板脚注</div> </div>

well效果

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