Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.
<aclass="btn btn-primary"href="#"role="button">Link</a><buttonclass="btn btn-primary"type="submit">Button</button><inputclass="btn btn-primary"type="button"value="Input"><inputclass="btn btn-primary"type="submit"value="Submit"><inputclass="btn btn-primary"type="reset"value="Reset"...
<button class="btn btn-primary">Save changes</button> </div> </div> 调用方式 通过data属性 无需编写JavaScript代码即可生成一个对话框。在一个主控元素,例如按钮,上设置data-toggle="modal",然后再设置data-target="#foo" 或href="#foo" 用以指向某个将要被启动的对话框。 <button type="button" data...
<a tabindex="-1" href="#">More options</a> <ul class="dropdown-menu"> ... </ul> </li> </ul> 按钮组 案例 两个基本类型和更多变种类型。 单一按钮组 将带有.btn类的一系列按钮包裹在.btn-group中。 Left Middle Right <div class="btn-group"> <button class="btn">Left</button> <...
-- 可选的 Bootstrap 主题文件(一般不用引入) --><linkrel="stylesheet"href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"crossorigin="anonymous"><!-- 最新的 Bootstrap 核心 ...
<a href="#">Inbox <span class="badge">42</span></a> <button class="btn btn-primary" type="button"> Messages <span class="badge">4</span> </button> Self collapsing 如果没有新的或未读的信息条目,也就是说不包含任何内容,徽章组件能够自动隐藏(通过CSS的 :empty 选择符实现) 。 跨浏览器...
<button type="submit" class="btn btn-primary">Submit</button> </form> </div> <!-- 引入Bootstrap JS和依赖 --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js">...
--可选的 Bootstrap 主题文件(一般不用引入)--><link rel="stylesheet"href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"crossorigin="anonymous"><!--最新的 Bootstrap ...
为<a>、<button> 或<input> 元素添加按钮类(button class)即可使用 Bootstrap 提供的样式。 Link Button Copy <a class="btn btn-default" href="#" role="button">Link</a> <button class="btn btn-default" type="submit">Button</button> <input class="btn btn-default" type="button" value=...
可以使用 a 链接的href属性或者 button 元素使用data-bs-target属性来设置侧边栏。这两种情况都需要使用data-bs-toggle="offcanvas"。 创建滑动导航实例如下: 实例 <aclass="btn btn-primary"data-bs-toggle="offcanvas"href="#offcanvasExample"role="button"aria-controls="offcanvasExample">使用链接的 href 属...