bootstrap使用-全局样式

首先在这里我先开始学习bootstrap3的使用

首先有个前提我默认大家都已经熟悉html、css、JavaScript以及其中用到的html5和css3的知识了，这里学习的bootstrap具相当于只是为了学习一个工具用于快速开发项目

有一点就是能使用bootstrap的就尽量不用自己写的样式和js
下载地址
生产环境上的这个是用于上线是后使用的版本这个是经过压缩的
https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip
源码未经过压缩可以用来学习使用
https://github.com/twbs/bootstrap/archive/v3.3.7.zip

为了在上线后为了减轻访问服务器频繁调用这些js css文件带来的服务器压力我建议在上线时候可以使用bootcdn加速
在需要使用bootstrap的文件当中加入以下代码

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可选的 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 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

可以直接将模板文件套进去

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </body>
</html>

栅格系统通过行列布局

行row必须包含在.container(有外边距15px)或者.container-fluid(100%宽度)当中

通过“行（row）”在水平方向创建一组“列（column）”。
你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。

row有外边距为-15px可以消掉.container的内边距

栅格类适用于与屏幕宽度大于或等于分界点大小的设备基本用不上col-lg-*

 <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
使用列偏移
 <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">
使用 .col-md-offset-* 类可以将列向右侧偏移

通过使用 .col-md-push-* 和 .col-md-pull-*

一个是推到右边

标题以及副标题

标题为1到6

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>

全局变量

Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 
元素和所有段落元素。另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）

添加.head让段落突出

<p class="lead">...</p>

内联文本

<mark>highlight</mark> text.

被删除

无用文本

<s></s>

插入文本

带下划线

小号文本

着重

斜体

文本对齐

改变大小写

uppercase capitalize

缩略语

<abbr title="hello">显示hello</abbr>

地址使用

<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">first.last@example.com</a>
</address>

引用

风格

<blockquote class="blockquote-reverse">


  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>

</blockquote>

列表

ul>li 在ul上添加类

list-unstyled无样式列表

list-inline 内敛列表

表格：

table 添加类

.table 少量的内补和水平分割线

.table-striped 斑马条纹给tbody内的行添加条纹使用到nth-child实现 IE8无法使用

.table-bordered 带边框的表格

.table-hover鼠标悬停效果

.table-condensed让表格更加紧凑

.table-responsive响应式表格小屏幕显示滚动条大屏幕滚动条消失

tr上添加类

.success

.danger

.warning

.info

.active

表单使用

所有用到form-control类的空间都是以100%宽度显示

将label和控件一起放在一个表单组当中是最好的排列div.form-group

如下

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

不要将表单组合输入框混合使用锦衣将输入框放在表单组当中（这里意思是除了输入框要这样其他的不规定）

form添加类

form-inline水平显示使用左头部的搜索框当宽度为手机屏幕时候折叠显示

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

建议使用到label 如果没有就不方便阅读得加placeholder 或者可以设置label的class为sr-only

特殊使用

<div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>

form上添加

form-horizontal水平排列表单

水平排列表单

<div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>

输入框的样式还与type属性相关

 text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。

文本域

<textarea class="form-control" rows="3"></textarea>

单选框

<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

显示在一行上面

<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>

不带文本的label

<div class="checkbox">
  <label>
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
</div>
需要添加aria-label

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
显示多项

静态控件

  <p class="form-control-static">email@example.com</p>

禁止状态

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

使用fieldset包含所有控件为fieldset添加disabled 应用：用户为登录状态不可评论表单

只读状态

readonly

帮助文字

<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

控件添加样式

应用在JavaScript验证时候动态添加类

<div class="form-group has-success">

输入框图标

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>

设置控件form-control的高度input-lg和和宽度col-sm-*

快速设置form-horizental尺寸可以在form-group上添加 form-group-sm

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

按钮

btn btn-info btn-danger

导航栏和导航只支持buttjon元素

btn-block叨叨父级元素的100%而且为块级标签

激活状态

active 类

disabled = "disabled"禁用状态

链接a添加disabled类达到禁用状态

响应式图片

image-responsive再添加img-block使居中

辅助类文本样式

p.text-danger 改变文本的颜色

p.bg-danger改变文本的背景颜色

关闭按钮

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

三角符号

<span class="caret"></span>

快速浮动

<div class="pull-left">...</div>
<div class="pull-right">...</div>

清除浮动

<!-- Usage as a class -->
<div class="clearfix">...</div>

显示或者隐藏内容

<div class="show">...</div>
<div class="hidden">...</div>

响应式类

.visible-sm-*
.visible-sm
.hidden-sm-*
.hiddem-sm

posted on 2019-09-06 17:57 渐凸强、啊哈阅读(657) 评论(0) 编辑收藏举报

刷新页面返回顶部

bootstrap使用-全局样式

公告