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>&lt;header&gt;</code> 作为内联元素被包围。</p>

<p>如果需要把代码显示为一个独立的块元素，请使用 &lt;pre&gt; 标签：</p>

<pre>

&lt;article&gt;

	&lt;h1&gt;Article Heading&lt;/h1&gt;

&lt;/article&gt;

</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 分页

2018.8.5 Bootstrap 使用的更多相关文章

  1. AIX7.1环境打补丁缺少bash OPATCHAUTO-72049

    DB:12.1.0.2.0 RAC OS:AIX 7.1 [To patch only the GI home] su - root export UNZIPPED_PATCH_LOCATION=/o ...

  2. ABP module-zero +AdminLTE+Bootstrap Table+jQuery权限管理系统第十七节--Quartz与ABP框架Abp.Quartz及扩展

    ABP+AdminLTE+Bootstrap Table权限管理系统一期 Github:https://github.com/Jimmey-Jiang/ABP-ASP.NET-Boilerplate- ...

  3. 2018年Web前端自学路线

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. Web前端入门的自学路线 新手入门前端,需要学习的基础内容有很多,如下. ...

  4. 2018年如何快速学Java

    前言 只有光头才能变强 提前预警:本文适合Java新手阅读(老手可在评论区给下建议),希望大家看完能有所收获. 一.为什么我要写下这篇文章 1.1直接缘由: 在今天(2018年11月4日)有个同学给我 ...

  5. 动态请求数据并放入bootstrap轮播图

    下面是前端代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  6. Django+Bootstrap+Mysql 搭建个人博客（一）

    1.1.环境搭建 (1)虚拟环境 mkvirtualenv website pip install django==1.11.7 (2)创建项目和app:website和blog (3)设置中文set ...

  7. SpringBoot入门教程(七)整合themeleaf+bootstrap

    Thymeleaf是用于Web和独立环境的现代服务器端Java模板引擎.Thymeleaf的主要目标是将优雅的自然模板带到您的开发工作流程中—HTML能够在浏览器中正确显示,并且可以作为静态原型,从而 ...

  8. [ZZ] [精彩盘点] TesterHome 社区 2018年 度精华帖

    原文地址: https://testerhome.com/topics/17646 相逢即是缘分,总有一篇适合您! 感觉好的请点赞收藏 ,感觉分类不严谨的,欢迎反馈给我! 测试方法&测试管理 ...

  9. python-day18 JS正则，组件BootStrap、EasyUI、JQueryUI1，插件轮播，django

    @第一节课程内容 js正则 登录注册验证 @text-判断字符串是否符合规定的正则 @exec-获取匹配的数据 bootstrap(组件) –css –js 学习bootstrap规则 jQueryu ...

随机推荐

  1. Vue循环中多个input绑定指定v-model

    Vue.js中提供了v-model可以双向绑定表单元素,这个方法可以非常方便的获得输入的值,但是有时候表单元素需要循环生成,在循环中要怎样获得指定输入框的值呢 这里介绍两种,一种是v-for中循环生成 ...

  2. SQL Server Reporting Service(SSRS) 第五篇 自定义数据处理扩展DPE(Data Processing Extension)

    最近在做SSRS项目时,遇到这么一个情形:该项目有多个数据库,每个数据库都在不同的服务器,但每个数据库所拥有的数据库对象(table/view/SPs/functions)都是一模一样的,后来结合网络 ...

  3. java编程--01介绍日期的比较

    引子:平时开发常常需要对时间进行格式化,进行比较,进行加减计算.最常用的类不外乎:SimpleDateFormat,Calendar,Date,DateTimeStamp等.下面想对java中的日期编 ...

  4. Android Studio CMake 生成多个so

    生成多个so案例 这里stringFromJNI和stringFromJNI11分别是调用one-lib和two-lib两个so package com.test.ndkmoreso; import ...

  5. maya2016安装失败如何卸载重装

    AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...

  6. 手机缺失sqlite3时操作数据库的多种解决方案 ----adb命令科普

    在Android应用开发无处不在SQLite数据库的身影.那么在开发中怎么使用adb命令操作数据库的功能呢? 下面我们将完整的介绍与数据库操作相关的命令集及当手机缺少sqlite3的时候的多种解决方案 ...

  7. Technical Committee Weekly Meeting 2016.06.21

    Meeting time: 2016.June.21 1:00~2:00 Chairperson:  Thierry Carrez Meeting summary: 1.Add current hou ...

  8. BoostrapTable-本地模式（一次性加在所有数据）

    直接上代码 数据: [ { "id": "1001", "name": "yyq", "isAdmin&quo ...

  9. 详细记录vue项目实战步骤(含vue-cli脚手架)

    一.通过vue-cli创建了一个demo. (vue-cli是快速构建这个单页应用的脚手架,本身继承了多种项目模板:webpack(含eslit,unit)和webpack-simple(无eslin ...

  10. ASP.NET操作DataTable各种方法

    转:http://www.cnblogs.com/isking/p/6178268.html http://www.cnblogs.com/sntetwt/p/3496477.html public ...