Bootstrap
关注
分享
扫一扫
Cynhard85
逆水行舟不进则退
展开
-
Bootstrap学习笔记 01 - 开始
获取 Bootstrap通过 bower 获取：bower install bootstrap如果用到 jQuery，则可以通过 npm 下载：npm install --save jquery第一个页面<!-- 文档类型，Bootstrap 要求使用 HTML5 doctype --><!DOCTYPE html><html> <head> <!-- 使用 utf-8原创 2017-10-31 08:58:56 · 469 阅读 · 0 评论 -
Bootstrap学习笔记 14 - 分页
分页<ul class="pagination" id="pagination"> <li id="page1"><a href="#">1</a></li> <li id="page2"><a href="#">2</a></li> <li id="page3"><a href="#">3</a></li></ul>active 与 disabled 状态<ul cla原创 2017-11-29 15:47:03 · 447 阅读 · 0 评论 -
Bootstrap学习笔记 15 - List Groups
<!DOCTYPE html><html> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <link rel="stylesheet" href="./bower_components原创 2017-11-30 08:30:38 · 684 阅读 · 0 评论 -
Bootstrap学习笔记 16 - Panels
<!DOCTYPE html><html> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <link rel="stylesheet" href="./bower_components原创 2017-11-30 08:53:40 · 535 阅读 · 0 评论 -
Bootstrap学习笔记 17 - 下拉菜单
.dropdown 表示下拉菜单示例 <!DOCTYPE html><html> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <link rel="stylesheet" href原创 2017-11-30 13:02:23 · 567 阅读 · 0 评论 -
Bootstrap学习笔记 19 - Tabs
<!DOCTYPE html><html> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <link rel="stylesheet" href="./bower_components原创 2017-12-01 13:45:34 · 570 阅读 · 0 评论 -
Bootstrap学习笔记 20 - Navbar
基本形态<!DOCTYPE html><html> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <link rel="stylesheet" href="./bower_compon原创 2017-12-04 09:15:37 · 690 阅读 · 0 评论 -
Bootstrap学习笔记 21 - Forms
Forms以 .form-control 修饰的表单控件宽度为 100%，例如：<input>，<textarea>，<select>Bootstrap 提供了 3 种表单样式：Vertical，Horizontal，Inline如何应用表单样式？ form 节点添加 role="form"将 label 与 表单控件应用 <div class="form-group"><input>，原创 2017-12-04 12:56:41 · 556 阅读 · 0 评论 -
Bootstrap学习笔记 18 - Collapse
Collapse实现Collapse在某个元素（比如<div>）加上 .collapse 类，该元素用来显示折叠的内容为了控制折叠内容的显示与隐藏，需要增加另外一个元素（ <a> 或者 <button>），并且加上 data-toggle="collapse" 类为了将折叠元素与控制折叠的元素关联起来，需要在折叠元素上加上 id=xxx 并且在控制折叠的元素上加上 data-target=#x原创 2017-12-01 08:50:26 · 782 阅读 · 0 评论 -
Bootstrap学习笔记 22 - Inputs
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">原创 2017-12-07 09:28:50 · 444 阅读 · 0 评论 -
Bootstrap学习笔记 13 - 进度条
<div> 中通过使用 .progress 样式实现进度条<div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%"> <span class=原创 2017-11-29 14:02:23 · 568 阅读 · 0 评论 -
Bootstrap学习笔记 12 - 徽章和标签
徽章：class="badge"标签：class="label"示例：<!DOCTYPE html><html> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <link rel=原创 2017-11-29 12:23:52 · 562 阅读 · 0 评论 -
Bootstrap学习笔记 11 - Button Groups
<!DOCTYPE html><html> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <link rel="stylesheet" href="./bower_components原创 2017-11-29 09:23:48 · 595 阅读 · 0 评论 -
Bootstrap学习笔记 02 - Grids
GridBootstrap 最多允许页面包含12列，多个相邻列可以合并成一个。Bootstrap grids 会根据页面大小自动调整。样式用 row 表示行用col-*-* 表示列 第一个 * 可以是下面四种中的一个： xs（手机）sm（平板）md（桌面）lg（更大的左面）第二个 * 表示占多少列例子<!DOCTYPE html><html> <head>原创 2017-10-31 11:16:10 · 491 阅读 · 0 评论 -
Bootstrap学习笔记 03 - Tables
Basic Table<table class="table"> <thead> <tr><th>Name</th><th>Email</th><th>Address</th></tr> </thead> <tbody> <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>原创 2017-10-31 14:34:24 · 360 阅读 · 0 评论 -
Bootstrap学习笔记 04 - 排版
<!DOCTYPE html><html> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link rel="stylesheet" href="./bower_components/b原创 2017-11-01 09:18:46 · 416 阅读 · 0 评论 -
Bootstrap学习笔记 05 - Images
圆角图片<img src="rabbit.png" class="img-rounded" alt="rabbit" width="121" height="121"/>圆形图片<img src="rabbit.png" class="img-circle" alt="rabbit" width="121" height="121"/>缩略图<img src="rabbit.png" class="原创 2017-11-01 13:44:22 · 250 阅读 · 0 评论 -
Bootstrap学习笔记 06 - Jumbotrons
Jumbotron<div class="jumbotron"> <h1>String class</h1> Strings are objects that represent sequences of characters. The standard string class provides support for such objects with an i原创 2017-11-02 08:32:38 · 343 阅读 · 0 评论 -
Bootstrap学习笔记 07 - Page Header
Page Headerdiv class="page-header"> h1>String classh1>div>p>Strings are objects that represent sequences of characters.p>p>The standard string class provides support for such objects with a原创 2017-11-02 08:38:47 · 319 阅读 · 0 评论 -
Bootstrap学习笔记 08 - Wells
Wellsnormal<div class="well">Normal Well</div>small<div class="well well-sm">Small Well</div>large<div class="well well-lg">Large Well</div>原创 2017-11-02 09:00:31 · 298 阅读 · 0 评论 -
Bootstrap学习笔记 09 - Alerts
AlertsSuccess<div class="alert alert-success"> <strong>Success!</strong> Indicates a successful or positive action.</div>Info<div class="alert alert-info"> <strong>Info!</strong> Indicates a n原创 2017-11-02 09:40:22 · 436 阅读 · 0 评论 -
Bootstrap学习笔记 10 - Buttons
Button 风格<button type="button" class="btn btn-default">Default</button><button type="button" class="btn btn-primary">Primary</button><button type="button" class="btn btn-success">Success</button><bu原创 2017-11-03 09:34:36 · 368 阅读 · 0 评论 -
Bootstrap4：导航栏右侧对齐
Bootstrap 版本： bootstrap-4.0.0-beta.2通过Bootstrap4 的 Flex 布局可以很容易地将导航栏右侧对齐，只需要在包含导航栏的 <div> 加上 .justify-content-end 样式即可。示例： <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class=原创 2017-12-12 10:08:32 · 24788 阅读 · 4 评论