2018.8.5 Bootstrap 使用

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 使用的更多相关文章

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 ...
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- ...
2018年Web前端自学路线
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. Web前端入门的自学路线新手入门前端,需要学习的基础内容有很多,如下. ...
2018年如何快速学Java
前言只有光头才能变强提前预警:本文适合Java新手阅读(老手可在评论区给下建议),希望大家看完能有所收获. 一.为什么我要写下这篇文章 1.1直接缘由: 在今天(2018年11月4日)有个同学给我 ...
动态请求数据并放入bootstrap轮播图
下面是前端代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
Django+Bootstrap+Mysql 搭建个人博客（一）
1.1.环境搭建 (1)虚拟环境 mkvirtualenv website pip install django==1.11.7 (2)创建项目和app:website和blog (3)设置中文set ...
SpringBoot入门教程(七)整合themeleaf+bootstrap
Thymeleaf是用于Web和独立环境的现代服务器端Java模板引擎.Thymeleaf的主要目标是将优雅的自然模板带到您的开发工作流程中—HTML能够在浏览器中正确显示,并且可以作为静态原型,从而 ...
[ZZ] [精彩盘点] TesterHome 社区 2018年度精华帖
原文地址: https://testerhome.com/topics/17646 相逢即是缘分,总有一篇适合您! 感觉好的请点赞收藏 ,感觉分类不严谨的,欢迎反馈给我! 测试方法&测试管理 ...
python-day18 JS正则，组件BootStrap、EasyUI、JQueryUI1，插件轮播，django
@第一节课程内容 js正则登录注册验证 @text-判断字符串是否符合规定的正则 @exec-获取匹配的数据 bootstrap(组件) –css –js 学习bootstrap规则 jQueryu ...

随机推荐

SQL SERVER – Configuration Manager – Cannot Connect to WMI Provider. You Do Not Have Permission or The Server is Unreachable
打开SQL SERVER Configuarion Manger 出现以下错误 SQL Server Configuration Manager—————————Cannot connect to W ...
使用Koa.js，离不开这十个中间件
随着ES6的普及,async/await的语法受到更多JS开发者的青睐,Koa.js作为比较早支持使用该语法的Node框架越来越受到大家的喜爱,虽然Koa.js本身支持的功能很有限,但官方和社区提供了 ...
jeecg权限设置案例
JEECG简单实例讲解权限控制一.业务背景某公司要实现一个日志系统,用来了解员工的工作量饱和情况. 二.需求 1.角色分为:员工.经理两种. 2.员工每天在日志系统中填报工作总结,然后经理进行点评 ...
使用PIE对IE6、7、8进行CSS3兼容介绍和经验总结
下面说说如何对 IE10 以下版本的浏览器进行部分 CSS3 兼容国外团队开发的兼容插件,去年做项目时才发现,非常强大主角:PIE.js , PIE.htc 两种方法可以实现官方网站:h ...
Unity 为什么有时候播放音乐(音效)会没有声音
1.问题描述昨晚,我遇到的情况如下: 1.MainCamera里有Audio Source,并且在循环播放音乐 2.在其他的GameObject中也新增一个Audio Source,在某个时机播放音 ...
Android Studio中导入v4，v7和recyclerview-v7包的方法
概述 Android Studio中新建工程中会默认导入v7的包,即在gradle中默认配置了com.android.support:appcompat-v7:x.x.x的依赖.但是不会默认为我们配置 ...
《深入浅出Node.js》学习笔记（一）
看了朴灵前辈的node.js系列文章,很开阔视野,虽然能力有限还是有很多不懂,但是还是希望能写下笔记,初步对node.js有点了解. 一.概念 Node.js不是JS应用.而是JS运行平台 Node. ...
js的事件冒泡
先来段代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
React.js 小书 Lesson5 - React.js 基本环境安装
作者:胡子大哈原文链接:http://huziketang.com/books/react/lesson5 转载请注明出处,保留原文链接和作者信息. 安装 React.js React.js 单独使 ...
Fedora 安装 phpMyAdmin(可能只有自己看得懂)
yum groupinstall "Development Tools" yum install php-mysqli php-mbstring php-mcrypt yum in ...

2018.8.5 Bootstrap 使用

Bootstrap的环境搭建

HTML模板

Bootstrap 网格系统

网格系统的定义

网格系统的使用

基本网格系统的结构

网格系统的列排序实例

在下面的实例中，我们有两列布局，左列很窄，作为侧边栏。我们将使用 .col-md-push-* 和 .col-md-pull-* 类来互换这两列的顺序。

bootstrap排版

引导主体副本

强调

列表

排版类

Bootstrap 代码

Bootstrap 表格

table 类

, 和 类

Bootstrap 表单

Bootstrap 提供了下列类型的表单布局：

内联表单

水平表单

复选框（Checkbox）和单选框（Radio）

选择框（Select）

Bootstrap 分页

2018.8.5 Bootstrap 使用的更多相关文章

随机推荐

热门专题

, 和类