bookstarp的初体验

今天用了Bootstarp,那感觉就是一个字,爽,基本就是复制,黏贴,然后你改改样式,有些样式都有,你只要加类名就可以,像一些小图标,你直接加个类名就搞定了,而且也可以做成响应式的,既能用于pc端也能用于移动端,真的很方便,但在用之前的准备工作要注意一些问题,它最重要的是创建模板页,要知道里面的各个代表的意思,

1:模板页在bootstarp里也有,我们直接复制过来,但里面一些路径要改掉.

2:

这三个meta必须要放在最前面,其他的千万不能放在他们的前面,这点一定要记住,user-scalable=no,你复制过来的模板里是没有的,是自己加进去的,如果忘了,你可以先打meta:vp再按tap会跳出来移动端的代码,里面有这句,直接复制过去后再删掉就可以了.

3:把下面涉及到的路径都换成你自己保存的路径.

用bootstap做响应式媒体查询很简单,只要加类名就可以了,它已经把整个屏幕划分了区间,每个区间都有相应的类名:

你只要把对应的类名加进去,到临界点它就会改变样式,如果不用bootstarp,用媒体查询,那你要写好多样式了:

如果有多个区间的话在后面加and后在家大小:

这样写很麻烦.

这里用媒体查询写要特别注意一个问题,and前面必须加空格,这个问题是很容易犯的,有时一不注意就会漏写空格.

而用bootstarp就不会有这种问题,而且用起来也很灵活,它最多一行可以分成十二列,可以根据你的要求来分成各种比例,只要总的加起来为12就可以了.

用了一下就喜欢上他了,用这个可以提升你的工作效率很多.很多常用的css样式框架里面都有,你直接调用就可以了,然后只要稍微修改一下样式就可以了.但要改样式的话最好不要再你调用它的css里改.

在bootstarp中使用栅格系统来布局的话,要注意把复制过来的代码放在一个类名为contaner(固定宽度)或contaner-fluid(100%宽度中).具体的可以看文档,反正一句话这个用起来真的很方便.

这只是我第一次使用而已,在你写响应页面中,基本上常见的框架里面都有,真很方便

时间: 2024-11-05 11:32:08

bookstarp的初体验的相关文章

erlang 初体验

最近测试了一下 erlang的坑... 如不出意外.... 大家第一眼看到这语法... 心里第一句一定是"我擦.这TM都是啥!!!!!" 没有变量!!! 没有结构体!!! 没有循环!!! 好吧,至少我是这样想的. 找了半天..连个if也不知道怎么写.. 这记录一些基本常识.. -module(module_name)  %%定义模块 括号内的要和文件名相同. -export([fun1/1 fun2/2]) %%这里是导出2个函数对外使用  函数名/参数名. 一个简单的函数定义如下 f

linux初体验

第一次听到linux这个'词语'是在一次偶然的朋友聊天中朋友提到的,之前压根没听到过'这个东西',所以我可以说是个linux的新新手,菜鸟都不算. 截至到目前,我已经开始linux系统运维学习有差不多10天时间了.在没接触linux之前,我对它的认识仅仅是:它是个计算机系统.决定学习linux系统运维之前,自我以为运维应该是对系统的一些日常维护之类的,不会很难的东西,我更希望运维是个不难的东西,我个人很笨,对难的东西可能接受的很慢,所以我愿意认为运维是很简单的,这样我就可以轻轻松松的掌握运维相关

【Spark深入学习 -15】Spark Streaming前奏-Kafka初体验

----本节内容------- 1.Kafka基础概念 1.1 出世背景 1.2 基本原理 1.2.1.前置知识 1.2.2.架构和原理 1.2.3.基本概念 1.2.4.kafka特点 2.Kafka初体验 2.1 环境准备 2.2 Kafka小试牛刀 2.2.1单个broker初体验 2.2.2 多个broker初体验 2.3 Kafka分布式集群构建 2.3.1 Kafka分布式集群构建 2.3.2 Kafka主题创建 2.3.3 生产者生产数据 2.3.4消费者消费数据 2.3.5消息的

Java8初体验(二)Stream语法详解

原文链接:http://ifeve.com/stream/ 1. Stream初体验 我们先来看看Java里面是怎么定义Stream的: A sequence of elements supporting sequential and parallel aggregate operations. 我们来解读一下上面的那句话: Stream是元素的集合,这点让Stream看起来用些类似Iterator: 可以支持顺序和并行的对原Stream进行汇聚的操作: 大家可以把Stream当成一个高级版本的

hibernate--CRUD初体验

hibernate的crud操作初体验. 看具体实例 package com.fuwh.model; import javax.persistence.Column; import javax.persistence.Entity; import javax.persistence.GeneratedValue; import javax.persistence.Id; import org.hibernate.annotations.GenericGenerator; @Entity publ

Oracle SQL篇(一)null值之初体验

    从我第一次正式的写sql语句到现在,已经超过10年的时间了.我写报表,做统计分析和财务对账,我一点点的接触oracle数据库,并尝试深入了解.这条路,一走就是10年,从充满热情,到开始厌倦,我不知道我还能坚持多久,未来的路,谁知道呢? 也许是该抓紧时间,做一点什么了,我不知道该开始写些什么,我从来没有在网上写东西的习惯.     先从简单的开始吧,那当然就是SQL,这是我SQL系列的第一篇,希望我能够坚持. 在Oracle数据库中,如果一个表中的列没有值的话,我们可以说是空值,比如IT员

AngularJS路由系列(3)-- UI-Router初体验

本系列探寻AngularJS的路由机制,在WebStorm下开发. AngularJS路由系列包括: 1.AngularJS路由系列(1)--基本路由配置2.AngularJS路由系列(2)--刷新.查看路由,路由事件和URL格式,获取路由参数,路由的Resolve3.AngularJS路由系列(3)-- UI-Router初体验4.AngularJS路由系列(4)-- UI-Router的$state服务.路由事件.获取路由参数5.AngularJS路由系列(5)-- UI-Router的路由

Android Studio初体验之启动AVD模拟器异常:cannot set up guest memory 'pc.ram'

启动AVD模拟器异常:Cannot set up guest memory 'pc.ram' 错误信息: HAX is working and emulator runs in fast virt mode Cannot set up guest memory 'pc.ram': Invalid argument Error accepting connect 分析 各种查资料,没有发现网上有同样问题的,在一篇相关文章中找到类似的解决方法. 从语意看,应该是hax安装后没有启动.(不懂hax是什

leaflet开源地图库源码阅读笔记(一)——简介&Demo初体验(by vczero)

一.简介 电子地图已经在O2O.生活服务.出行等领域布局,传统的GIS也孕育着互联网基因.传统GIS的图商有ESRI(Arc系列).四维.高德.超图.中地等等.在web互联网领域,百度和高德较为出色.但是开放源代码都远远做的不够,相比而言国外开源较多且丰富,最近认真研读了openlayers2/3和leaflet的源码,收获颇多,不仅加强对浏览器兼容性.HTML5.CSS3等基础,还增强了GIS的基础.本人现在也在一家互联网公司做js api的研发,因此,需要不断地吸取开源代码的营养. leaf