2018.8.5 Bootstrap 使用
发布时间:2020-12-17 20:51:04 所属栏目:安全 来源:网络整理
导读:Bootstrap的环境搭建 link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /script src="js/jquery-1.11.0.min.js"/scriptscript type="text/javascript" src="js/bootstrap.min.js"/script HTML模板 !DOCTYPE htmlhtml head titleBootstra
Bootstrap的环境搭建<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <script src="js/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> HTML模板<!DOCTYPE html> <html> <head> <title>Bootstrap HTMl模板</title> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <!-- 引入 Bootstrap --> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> </head> <body> <h1>Hello,world!</h1> <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) --> <script src="js/jquery-3.3.1.min.js"></script> <!-- 包括所有已编译的插件 --> <script src="js/bootstrap.min.js"></script> </body> </html> Bootstrap 网格系统Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。 网格系统的定义Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统,可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类,也包含了用于生成更多语义布局的功能强大的混合类。 网格系统的使用·行必须放置在 .container class 内,以便获得适当的对齐(alignment)和内边距(padding)。 ·使用行来创建列的水平组。 ·内容应该放置在列内,且唯有列可以是行的直接子元素。 ·预定义的网格类,比如 .row 和 .col-xs-4,可用于快速创建网格布局。LESS 混合类可用于更多语义布局。 ·列通过内边距(padding)来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距(margin)取负,表示第一列和最后一列的行偏移。 ·网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如,要创建三个相等的列,则使用三个 .col-xs-4。 基本网格系统的结构<div class="container"> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <div class="row">...</div> </div> <div class="container">.... 网格系统的列排序实例在下面的实例中,我们有两列布局,左列很窄,作为侧边栏。我们将使用 .col-md-push-* 和 .col-md-pull-* 类来互换这两列的顺序。<div class="container"> <h1>Hello,world!</h1> <div class="row"> <p> 排序前 </p> <div class="col-md-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444,inset -1px 1px 1px #444;"> 我在左边 </div> <div class="col-md-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444,inset -1px 1px 1px #444;"> 我在右边 </div> </div> <br> <div class="row"> <p> 排序后 </p> <div class="col-md-4 col-md-push-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444,inset -1px 1px 1px #444;"> 我在左边 </div> <div class="col-md-8 col-md-pull-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444,inset -1px 1px 1px #444;"> 我在右边 </div> </div> </div> bootstrap排版引导主体副本为了给段落添加强调文本,则可以添加 class="lead",这将得到更大更粗、行高更高的文本,如下面实例所示: <p class="lead">添加clss实现排版</p> 强调HTML 的默认强调标签 <small>(设置文本为父文本大小的 85%)、<strong>(设置文本为更粗的文本)、<em>(设置文本为斜体)。Bootstrap 提供了一些用于强调文本的类,如下面实例所示: <small>本行内容是在标签内</small><br> <strong>本行内容是在标签内</strong><br> <em>本行内容是在标签内,并呈现为斜体</em><br> <p class="text-left">向左对齐文本</p> <p class="text-center">居中对齐文本</p> <p class="text-right">向右对齐文本</p> <p class="text-muted">本行内容是减弱的</p> <p class="text-primary">本行内容带有一个 primary class</p> <p class="text-success">本行内容带有一个 success class</p> <p class="text-info">本行内容带有一个 info class</p> <p class="text-warning">本行内容带有一个 warning class</p> <p class="text-danger">本行内容带有一个 danger class</p> 列表Bootstrap 支持有序列表、无序列表和定义列表。 有序列表:有序列表是指以数字或其他有序字符开头的列表。 无序列表:无序列表是指没有特定顺序的列表,是以传统风格的着重号开头的列表。如果您不想显示这些着重号,您可以使用 class .list-unstyled 来移除样式。您也可以通过使用 class .list-inline 把所有的列表项放在同一行中。 定义列表:在这种类型的列表中,每个列表项可以包含 <dt> 和 <dd> 元素。<dt> 代表 定义术语,就像字典。接着,<dd> 是 <dt> 的描述。.dl-horizontal 可以让 <dl> 内的短语及其描述排在一行。开始是像 <dl> 的默认样式堆叠在一起,随着导航条逐渐展开而排列在一行。 <h4>有序列表</h4> <ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ol> <h4>无序列表</h4> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> <h4>未定义样式列表</h4> <ul class="list-unstyled"> 这个样式会自动帮我们拍好 <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> <h4>内联列表</h4> <ul class="list-inline"> 添加这个会显示在一行上面 内联 <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> <h4>定义列表</h4> <dl> <dt>Description 1</dt> <dd>Item 1</dd> <dt>Description 2</dt> <dd>Item 2</dd> </dl> <h4>水平的定义列表</h4> <dl class="dl-horizontal"> <dt>Description 1</dt> <dd>Item 1</dd> <dt>Description 2</dt> <dd>Item 2</dd> </dl> 排版类<p class="text-lowercase">Lowercased text(小写文本).</p> <p class="text-uppercase">Uppercased text(大写文本).</p> <p class="text-capitalize">Capitalized text(首字母大写文本).</p> <p class="text-left">左对齐文本</p> <p class="text-right">右对齐文本</p> <p class="text-center">居中对齐文本</p> <p class="text-justify">对齐文本。该段落会根据屏幕的大小对超出屏幕的文字进行换行</p> <p class="text-nowrap">该段落不会根据屏幕的大小对超出屏幕的文字进行换行。</p> Bootstrap 代码pre 会形成一个圈 <p><code><header></code> 作为内联元素被包围。</p> <p>如果需要把代码显示为一个独立的块元素,请使用 <pre> 标签:</p> <pre> <article> <h1>Article Heading</h1> </article> </pre> Bootstrap 表格table 类.table 为任意 <table> 添加基本样式 (只有横向分隔线) 这是最基本的 .table-striped 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持) .table-bordered 为所有表格的单元格添加边框 .table-hover 在 <tbody> 内的任一行启用鼠标悬停状态 .table-condensed 让表格更加紧凑 一句代码实现全部的实现 <table class="table table-striped table-bordered table-hover table-condensed"> ,和 类.active 将悬停的颜色应用在行或者单元格上 .success 表示成功的操作 .info 表示信息变化的操作 .warning 表示一个警告的操作 .danger 表示一个危险的操作 Bootstrap 表单Bootstrap 提供了下列类型的表单布局:垂直表单(默认) 内联表单 水平表单 内联表单<form class="form-inline" role="form"> <div class="form-group"> 水平表单水平表单与其他表单不仅标记的数量上不同,而且表单的呈现形式也不同。如需创建一个水平布局的表单,请按下面的几个步骤进行: 向父 <form> 元素添加 class .form-horizontal。 把标签和控件放在一个带有 class .form-group 的 <div> 中。 向标签添加 class .control-label。 <form class="form-horizontal" role="form"> <div class="form-group"> <label for="firstname" class="col-sm-2 control-label">名字</label> <div class="col-sm-10"> <input type="text" class="form-control" id="firstname" placeholder="请输入名字"> </div> </div> <div class="form-group"> <label for="lastname" class="col-sm-2 control-label">姓</label> <div class="col-sm-10"> <input type="text" class="form-control" id="lastname" placeholder="请输入姓"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox"> 请记住我 </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">登录</button> </div> </div> </form> 复选框(Checkbox)和单选框(Radio)复选框和单选按钮用于让用户从一系列预设置的选项中进行选择。 当创建表单时,如果您想让用户从列表中选择若干个选项时,请使用 checkbox。如果您限制用户只能选择一个选项,请使用 radio。 对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class,控制它们显示在同一行上。 下面的实例演示了这两种类型(默认和内联): 默认是垂直的 <label for="name">默认的复选框和单选按钮的实例</label> <div class="checkbox"> <label><input type="checkbox" value="">选项 1</label> </div> <div class="checkbox"> <label><input type="checkbox" value="">选项 2</label> </div> 这个是水平的 也就是内联的 <div> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox2" value="option2"> 选项 2 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox3" value="option3"> 选项 3 </label> <label class="radio-inline"> <input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked> 选项 1 </label> <label class="radio-inline"> <input type="radio" name="optionsRadiosinline" id="optionsRadios4" value="option2"> 选项 2 </label> </div> 选择框(Select)当您想让用户从多个选项中进行选择,但是默认情况下只能选择一个选项时,则使用选择框。 使用 <select> 展示列表选项,通常是那些用户很熟悉的选择列表,比如州或者数字。 使用 multiple="multiple" 允许用户选择多个选项。 <form role="form"> <div class="form-group"> <label for="name">选择列表</label> <select class="form-control"> /// <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <label for="name">可多选的选择列表</label> <select multiple class="form-control"> /// <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> </form> Bootstrap 分页(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |