美文网首页我爱编程
Bootstrap学习笔记

Bootstrap学习笔记

作者: LeeJoy | 来源:发表于2017-03-01 18:17 被阅读0次

    介绍:基于html css javascript 的前端框架

    特点:是以移动设备为优先,pc 平板 手机

    引入:

    第一种:下载本地,然后下载jQuery;

    第二种:联网状态,导入链接

    <meta charset="UTF-8">

    <!--移动设备优先,屏幕和设备的屏幕一致,初始缩放为1:1,禁止用户缩放-->

    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

    <title>引入方式<\title>

    <!--引入bootstrap主题文件-->

    <link rel="stylesheet" href="dis/css/bootstrap.min.css">

    <!--引入jQuery文件,在引入js之前要先引入jquery-->

    <script scr="dis/js/jquery.min.js">

    <!--引入js文件-->

    <script scr="dis/js/bootstarp.min.js">

    布局:

    div:

    <div class="container-fluid"> 宽度为100%

    <div class="container"> 宽度为1170px

    <h1 class="page-header"> 线

    排版的标签:

    <h1> 36px

    <h2> 30px

    <h3> 24px

    <h4> 18px

    <h5> 14px

    <h6> 12px

    <h1 class="page-header">   页头加线

    <small> 小一号的标题

    <p> 段落 12px的字体

    <big> 大一号的标题

    <strong> 推荐使用的加粗

    <em> 推荐使用

    <del>删除线

    文本的对其方式:

    .text-left、center、right

    text-uppercase:英文全大写

    text-lowercase:英文全小写

    text-capitalize:英文首字母大写

    列表:

    ist-unstyled:无系统样式

    list-inline:列表进行水平布局

    自定义列表:

    <dl class="dl-horizontal"> : 横向排列

    表格:

    class="table" 表格的一个基类

    .table-bordered 加线

    .table-hove   加鼠标悬停

    .table-striped 加斑马线效果,隔行换色

    .table-condensed 表格紧凑

    给table的父元素加table-responsive 响应式栅格(可随尺寸变化而变化)

    响应式图片:

    class="imgrasponsive" //响应式

    图片形状:

    img-circle    椭圆形

    img-rounded     圆角矩形

    img-thumbnail     给图片加圆角的边框

    例:class="imgrasponsive img-thumbnail"

    一般配合栅格系统使用

    栅格系统:

    栅格系统一定要放在容器里。

    栅格系统,浏览器窗口自动分配最多12列,栅格系统是把屏幕分割最多12列

    必须要有容器,div="container",在div里写div class="row",在row里写col

    栅格的响应式效果表:

    小于798px                                 手机端                         col-xs

    大于798px 小于992px                平板                            col-sm

    大于992px 小于1200px               pc                             col-md

    大于1200px                                大屏                            col-lg

    例:

    //pc占3块 平板占4块 手机占6块

    偏移:offset(只能向右偏移)

    col-xs/sm/md/lg-offset-3 ,那么偏移就是col-md-offset-3

    排序:pull(可以向左偏移,也可以向右偏移,需要计算)

    col-xs/sm/md/lg-pull     向左偏移

    col-xs/sm/md/lg-push   向右偏移

    辅助样式:

    情景文本颜色:.text-muted(柔和)    .text-success    .text-primary    .text-info    .text-warning    .text-danger

    背景文本颜色:.bg-success     .bgt-primary     .bg-info     .bg-warning     .bg-danger

    下拉的三角:

    快速浮动: pull-left 左浮动     pull-right 右浮动

    清除浮动: clearfix   给父盒子加

    表单:

    表单分组:<div class="form-group">

    相关文章

      网友评论

        本文标题:Bootstrap学习笔记

        本文链接:https://www.haomeiwen.com/subject/dbrcgttx.html