Bootstrap学习笔记

介绍:基于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 网格系统如何跨多个设备工作![Uploading Paste_Image_217205.p...
    Lareina林暖暖阅读 218评论 0 1
  • 一.bootstrap的集成与引入 bootsrap中文网bootstrap官网 集成方法一 下载bootstra...
    朱敏_ITer阅读 263评论 0 2
  • bootsrap的两种使用方式:1)、官网下载bootsrap压缩包:http://v3.bootcss.com/...
    wangzaiplus阅读 160评论 0 2
  • 一、网格布局(栅格系统)概念 1、有12列(col) 2、col有四个类分别适应不同设备 xs——extra sm...
    杨肆月阅读 295评论 0 6
  • 第一次在简书上写文章,为了不是别的,只是为自己的2017定个计划。快要26了现在不能为自己想怎么生活就怎么生活了,...
    叶文征阅读 112评论 3 0
  • 不知你最近有没有被小美好的甜蜜席卷---一部连空气都很甜的电视剧。 近年来,电视剧领域刮起了一阵“小”旋风,从“小...
    安笙U阅读 171评论 2 3
  • 如今的职场中,你能意识到很多人都是被动的付出,是一种理所应当的状态。一直在被别人利用着自己的善良去获得他人...
    阿米巴中的那些事阅读 121评论 0 2