[关闭]
@wangyupu 2020-05-21T06:12:49.000000Z 字数 4035 阅读 28

Bootstrap入门及布局

Bootstrap

本章目标

  1. 会使用12栅格系统布局网页结构
  2. 会使用基础排版元素布局网页
  3. 会使用表单元素布局网页
  4. 会使用按钮布局网页
  5. 会使用图片属性制作响应式的带有形状的图片

Bootstrap简介

  1. 来自Twitter，是流行的前端框架
  2. 是基于HTML、CSS、Javascript的一个简洁、灵活的开源框架，便于开发人员随时上手
  3. 使用广泛的版本 V3
  4. 受欢迎的原因
  5. 快速制作响应式的网页来适配各种终端
  6. 开发简单、方便
  7. 移动先行
  8. 代码开源
  9. 代码有良好的规范

Bootstrap的使用场景

  1. 响应式页面
  2. 移动端页面
  3. 后台页面
  4. 带有交互效果的页面
  5. 开发环境（webstorm）
  6. 引入Bootstrap框架文件
  7. 压缩处理文件bootstrap.min.css，bootstrap.min.js
  8. 使用 Bootstrap 中文网提供的免费 CDN 加速服务

基本模板

  1. <html>
  2. <head lang="en">
  3. <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0/>
  4. <link href="css/bootstrap.css" rel="stylesheet">
  5. </head>
  6. <body>
  7.     <h1>这是一个Bootstrap框架的最基本HTML模板</h1>
  8.     <script src="js/jquery-1.12.4.js"></script>
  9.     <script src="js/bootstrap.js"></script>
  10. </body>
  11. </html>

基本模板特色

  1. V3.x和V 2.x版本相比，有一个很大亮点
  2. <meta name="viewport" content="width=device-width, initial-scale=1">
  3. Bootstrap从V 3版本开始全面支持移动平台，并贯彻移动先行的宗旨

栅格系统

  1. 实现原理
  2. 通过定义容器的大小，平分为12份
  3. 调整内外边距
  4. 结合媒体查询

栅格系统工作原理

  1. 一行数据（row）必须包含在 .container中，以便为其赋予合适的对齐方式和内边距
  2. 使用行在水平方向创建一组列
  3. 具体内容放在列内，列可以作为行的直接子元素
  4. 内置的一大堆样式，可以使用col-xs-4（占4列宽度）的样式来快速创建栅格
  5. 通过设置padding从而创建列之间的间隙，让后面第一列和最后一列设置负值margin来抵消掉padding的影响
  6. 栅格系统中指定1到12的值来表示其跨越的范围

栅格系统的使用

  1. 列组合
  2. 列偏移
  3. 列嵌套
  4. 列排序

列组合

  1. <div class="container">
  2.     <div class="row">
  3.         <div class="col-md-8">.col-md-8</div>
  4.         <div class="col-md-4">.col-md-4</div>
  5.     </div>
  6. </div>

列偏移

  1. <div class="row">
  2.     <div class="col-md-4">.col-md-4</div>
  3.     <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
  4. </div>

列嵌套

  1. <div class="row">
  2.     <div class="col-md-9">Level 1: .col-md-9
  3.         <div class="row">
  4.         <div class="col-md-6"> Level 2: .col-md-6</div>
  5.         <div class="col-md-6">Level 2: .col-md-6</div>
  6.      </div>
  7.     </div>
  8.     <div class="col-md-3"></div>
  9. </div>

列排序

  1. <div class="row">
  2.   <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  3.   <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
  4. </div>

响应式栅格

CSS全局样式

  1. 又称为CSS布局
  2. 是Bootstrap三大核心内容的基础，即基础的布局语法
  3. 包括
  4. 基础排版（Typography）
  5. 表单（Forms）
  6. 按钮（Buttons）
  7. 图片（Images）
  8. … … 等

基础排版

  1. 标题
  2. 页面主体
  3. 强调文本
  4. 列表

标题

  1. Bootstrap为传统的标题h1-h6重新定义了标准的样式，使得在所有浏览器下显示效果都一样

页面主体

  1. Bootstrap为段落标签设置了全局的字体大小为12px，行间距line-height为字体大小的1.428倍（即20px）
  2. 特别强调的段落标签
  3. <p  class="lead">...</p>    
  4. 如果Bootstrap提供的字体大小等样式不符合实际开发要求，可以在引入的bootstrap.css文件后面重新设置样式以覆盖框架定义好的默认样式

强调文本

  1. 文本强调元素：small、strong、em
  2. 对齐方式
  3. <p class="text-left">左对齐</p>
  4. <p class="text-center">中间对齐</p>
  5. <p class="text-right">右对齐</p>
  6. <p class="text-justify">两端对齐</p>

列表

  1. 内联列表
  2. 水平定义列表
  3. <ul class="list-inline">
  4.     <li>首页</li>
  5.     <li>岗位课</li>
  6.     <li>商城</li>
  7.     <li>关于我们</li>
  8. </ul>
  9. <dl class="dl-horizontal">
  10.     <dt>购物指南</dt>
  11.     <dd>购物流程、会员价格</dd>
  12.     <dt>配送方式</dt>
  13.     <dd>上门自提、海外配送</dd>
  14.     <dt>售后服务</dt>
  15.     <dd>售后政策、价格保护、退款说明、取消订单、退换货</dd>
  16. </dl>

表单

  1. 内联表单
  2. 横向表单
  3. 验证提示状态
  4. 控件大小
  5. <form action="#">
  6.     <div class="form-group ">
  7.         姓名：<input class="form-control" type="text" />
  8.     </div>
  9.     <div class="form-group">
  10.         邮箱：<input class="form-control" type="email" />
  11.     </div>
  12.     <input class=" form-control " type="submit" 提交 />
  13. </form>

内联表单

  1. <form action="#"  class="form-inline">
  2. <!—省略部分HTML代码-->
  3. </form>

横向表单

  1. <form action="#" class="form-horizontal">
  2.         <div class="form-group">
  3.             <span class="col-sm-2 text-center">姓名：</span>
  4.             <div class="col-sm-10">
  5.                 <input class="form-control " type="text" placeholder="请输入你的姓名"/>
  6.             </div>
  7.         </div>
  8. <!—省略部分HTML代码-->
  9. </form>

验证提示状态

  1. .has-warning     警告（黄色）
  2. .has-error        错误（红色）
  3. .has-success   成功（绿色）

控件大小

  1. 大型输入框
  2. 小型输入框
  3. <input type="text" class="input-lg form-control" placeholder="大型输入框"/>
  4. <input type="text" class="form-control" placeholder="正常输入框"/>
  5. <input type="text" class="input-sm form-control" 
  6.  placeholder="小型输入框"/>

按钮

  1. 按钮样式
  2. 按钮大小
  3. <input type="button" class="btn btn-default btn-lg" 
  4.             value="default(灰色)大型"/>
  5. <input type="button" class="btn btn-primary " 
  6.             value="primary(深蓝色) 默认大小"/>
  7. <input type="button" class="btn btn-success btn-sm" 
  8.             value="success(绿色)小型"/>
  9. <input type="button" class="btn btn-info btn-xs" value="info(天蓝色)超小型"/>
  10. <input type="button" class="btn btn-default" value="default(灰色)"/>
  11. <input type="button" class="btn btn-primary" value="primary(深蓝色)"/>
  12. <input type="button" class="btn btn-success" value="success(绿色)"/>
  13. <input type="button" class="btn btn-info" value="info(天蓝色)"/>
  14. <input type="button" class="btn btn-warning" value="warning(黄色)"/>
  15. <input type="button" class="btn btn-danger" value="danger(红色)"/>
  16. <input type="button" class="btn btn-link" value="link(链接)"/>

图片

  1. 响应式图片
  2. 图片形状
  3. <img src="image/1.jpg" class="img-rounded " alt=""/>
  4. <img src="image/1.jpg" class="img-circle " alt=""/>
  5. <img src="image/1.jpg" class="img-thumbnail " alt=""/>
  6. 在使用img-circle制作圆形图片的时候，必须保证图片是正方形的，否则图片将变成椭圆形的
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注