a标签补充

1.<a></a>   a标签里什么都不写就是一个字符串
2.<a href=‘‘></a> a标签里有href属性空的 会刷新当前页面
3.<a href=‘#‘></a> a标签不会刷新当前页面,但是网址后面会有#
4.<a href=‘javascript:void(0)‘></a> a标签不会刷新页面,网址后面也没有#号

input标签补充

<input placeholder = ""> placeholder 给input标签提供了一个背景提示

box-sizing

box-sizing:border-box 表示标签的高度,宽度加上padding+margin是你设置的高度宽度 得算

bootstrap

1.CDN加速
首先 访问异地网站 需要经过漫长的路由分发
在本地建立服务器 存放网站文件 加速
一般是大厂来做的 腾讯 阿里 移动 联通
2. 引入bootstrap 的 cdn加速  一般不通过引入别的网站的引入bootstrap(网站崩了 路径改了)
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" >
3.引入  本地引入

定制html文件

?

布局容器

1. 两边有留白
<div class="container"></div>
2.充满整个窗口
<div class="container-fluid"></div>

栅格系统

1.首先 <div class=‘row‘>  //把div分成12份;
2. class = ‘col-md-2‘ //col --> colum 列 表示这个div占几列
<div class="container">
        <div class="row">
            <div class="col-md-2 c1" ></div>
            <div class="col-md-10 c2" ></div>
        </div>
    </div>
 3.自动 .col-xs- <768px
 小屏幕 .col-sm- >=768px
 中等屏幕 .col-md- >=992
 大屏幕 .col-lg  >=1200px
 4. 超出row划分的12行 会自动换行
 不够就剩下
5.列偏移
.col-md-offset-* 类可以将列向右侧偏移
.col-md-offset-4 元素向右侧偏移了4个列（column）的宽度
6.栅格嵌套
<div class="row">
  <div class="col-sm-9"> //占了9份
    Level 1: .col-sm-9
    <div class="row"> //把这9份分成12份
      <div class="col-xs-8 ">
       //占8fen
      </div>
      <div class="col-xs-4" >
       占4份
      </div>
    </div>
  </div>
</div>
7.列排序 换位置
col-md-push-10 向右退10份
col-md-pull-2 向左拉两份
?

排版

1.bootstrap 标题
<h1>h1. Bootstrap heading</h1>
2.bootstrap 标题 +小标题
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>

中心内容

突出显示内容加入 class =‘lead‘   <p class="lead">...</p>

mark

<mark>highlight</mark> 着重显示,会往文字后面加入淡黄色背景色

strong 相当于 font-wight

<strong>rendered as bold text</strong> 着重

斜体

<em> <em>

对齐/加一些类值

<p class="text-left">Left aligned text.</p>  往左对齐
<p class="text-center">Center aligned text.</p> 居中对齐
<p class="text-right">Right aligned text.</p> 往右对齐
<p class="text-justify">Justified text.</p>  
<p class="text-nowrap">No wrap text.</p> 

改变大小写/加一些类值

<p class="text-lowercase">Lowercased text.</p>  变小写
<p class="text-uppercase">Uppercased text.</p>  变大写
<p class="text-capitalize">Capitalized text.</p> 首字母大写

缩略语/首字母缩写

缩略语 就是词语的缩写
abbr标签套起来 缩写的单词 title属性表示要缩写的单词
首字母缩写 添加.initialism 类;

地址

<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></blockquote> 引用
<cite></cite> 标注出自哪里
class = ‘blockquote-reverse‘ 引用靠右

代码 用code标签标注

按键提醒 kbd标签 着重显示

pre 代码块效果 跟markdown一样crtl+q

变量 var标签包裹 有一个倾斜的效果

-------------------------------------------重点内容

table标签 所有提供的属性

.table 给表格加样式

.table-striped 给表格加斑马线

.table-border 给表格加边框

.table-hover 给表格加悬浮响应

.table -condensed 表格紧缩 padding 减半

表格tr颜色 详细看bootstrap

from 表单

1.div标签 里 类from group 包裹表单里的每个input

2.类from-control 给input标签一个聚焦泛蓝的样式

 //写项目经常用的
 <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>

3.<form class="form-inline"> //内联样式

4.bootstrap提供了一种付款样式

5.有水平样式的 form 表单 .form-horizontal

6.input时间控件

7.内联单选多选和 普通单选多选

8.修改密码控件

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">email@example.com</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

9.用户名/密码 独占一行的提示信息

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

10.校验状态 几个重要的类值

has-error has-success has-warning

11.按钮样式 颜色 /尺寸 bootstrap上都有

12.按钮 块级结构 跟父标签一样大

?

13.按钮禁用

用户不输入信息,不让你点击网站

14.头像

<img src="..." alt="..." class="img-circle">

15.情景颜色 背景颜色 显示 隐藏

16.浮动 清除浮动 文本域x 下拉箭头

bootstrap-css