2019独角兽企业重金招聘Python工程师标准>>>

今天花了一个下午加晚上的时间研究了bootstrap,收获还是很多,首先是进入官方网站http://twitter.github.io/bootstrap/。也有中文的网站,由于个人英文不好,所以就是登录的中文网站http://www.bootcss.com/。

首先我是把点击了入门指南,大概介绍了bootstrap主要包含的那些内容,我们可以用的。

第一肯定是下载

然后就是目录介绍,因为bootstrap是个轻量级的框架,目录不是很多,所以很容易理解,主要有用的就是三个文件,bootstrap.js,bootstrap.css,bootstrap-responsive.css(是响应是布局才需要引入的css)。很简单,要用所有的功能,就全部引入自己的html页面里面。然后还可以看一看它官方给出的一些模版,当然模版我们参考就是了,copy是没有意义的。

第二步是研究了scaffolding

这个是bootstrap的布局相关的,bootstrap的布局很简单,只要在你的div里面加上class属性,然后再把bootstrap.css里的class加上去就能够实现布局了,很简单,介绍两种很流行的布局,流体布局和响应事布局,都是基于bootstrap的栅格系统

贴上一段代码

<div class="container-fluid"><div class="row-fluid"><div class="span2"><!--Sidebar content--></div><div class="span10"><!--Body content--></div></div>
</div>
响应事布局需要引入下面两端代码
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

然后就可以进行自己的响应时布局了,然后可以通过以下一些类来判断不同的屏幕宽度来对应显示到浏览器最佳的内容,可以通过这些类来进行选项

是不是很简单。

基本的css样式

包括了

  • 排版
  • 代码
  • 表格
  • 表单
  • 按钮
  • 图片
  • 图标

这些无论从实现还是理解上都是很简单的,只需要把bootstrap.css里的类放到你的标签的class里面就能实现很好的布局效果了

接下来是一些基本的组件

列表目录也就不用详细写了,因为和基本的样式是样的,最主要的是这个bootstrap是很漂亮的

然后就是javascript插件

这个插件用起来还是很简单,只需要在一些如tab,nav,弹框啊,下拉框啊,这些带有事件的组建的实现动态效果,简单的说,也很简单,只要拿到class就能拿到节点,然后用bootstrap封装好的方法调用一个方法就能够轻松的实现了。

下载bootstrap是简单的,也可以按你需要的模块进行下载,

后面是lesscss

这个我也没具体的看,有点高端,但是很强大...加油吧,今天收获很多,还研究完了javascript密码花园里的js常见的错误,和容易忽略的问题。学到很多经验,总的来说今天是有收获的,虽然今天地震了,心情很沉重,逝者安息!

转载于:https://my.oschina.net/u/205358/blog/124142

bootstrap今天的学习心得相关推荐

  1. bootstrap思想总结_bootstrap学习心得总结-css样式设计分享

    由于项目需要,所以打算好好学习下bootstrap框架,之前了解一点,框架总体不难,但涉及到的东西还是很多,想要熟练掌握它,还是要多练练. 一:bootstrap是什么? bs是什么? 即前端页面搭建 ...

  2. html表单的课后心得体会,web前端学习心得体会范文

    <web前端学习心得体会范文>由会员分享,可在线阅读,更多相关<web前端学习心得体会范文(2页珍藏版)>请在装配图网上搜索. 1.web前端学习心得体会范文web前端学习心得 ...

  3. DOCKER学习心得

    前言: Docker的主要学习心得来源于<docker技术入门与实战> --2019.1.1->2019.1.5 la 着重从基础部分--实例分析--进阶技能--开源项目几个部分来介 ...

  4. Java EE学习心得

    –Java EE学习心得   1.    称为编程专家的秘诀是: 思考-----编程--------思考------编程--.. 编程不能一步到位,不能一上来就编,必须先思考如何写,怎样写?然后再编程 ...

  5. Assembly学习心得

    http://blog.csdn.net/etmonitor/ Assembly学习心得 说明: 最近开始准备把学到的.NET知识重新整理一遍,眼过千遍不如手过一遍,所以我准备记下我的学习心得,已备参 ...

  6. 对于mysql存储过程感想_存储过程学习心得

    存储过程学习心得 (2014-12-28 17:28:06) 标签: it 我使用过几次SQL Server,但所有与数据库的交互都是通过应用程序的编码来实现的.我不知到在哪里使用存储过程,也不了解实 ...

  7. 好程序员Web前端教程分享Vue学习心得

    为什么80%的码农都做不了架构师?>>>    好程序员Web前端教程分享Vue学习心得,Vue是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向 ...

  8. 大学计算机课英语心得体会,关于计算机网络辅助大学英语教学的思考学习心得...

    关于计算机网络辅助大学英语教学的思考学习心得 [摘要]计算机网络辅助教学可以增强学生的学习兴趣,提高他们自觉学习的能力,因而得到了大多数学生的认可,取得了比较显著的成效.计算机网络辅助教学也对大学英语 ...

  9. 我的MYSQL学习心得(十六) 优化

    原文:我的MYSQL学习心得(十六) 优化 我的MYSQL学习心得(十六) 优化 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看 ...

最新文章

  1. python netsnmp_使用 Net-SNMP 和 IPython
  2. 数据测试常用的 Data Profiling 方法
  3. 在java的实现栈的插入数据_Java实现数据结构栈stack和队列Queue
  4. 【AutoML】强化学习如何用于模型蒸馏?
  5. idea验证失败_SVN提示https证书验证失败解决办法
  6. python是烂语言吗
  7. ux.form.field.Verify 验证码控件
  8. 实现链表的增删改查java代码_用Java语言实现链表的增删改查
  9. 没想到,区块链竟然是这样的!
  10. 单片机矩阵键盘扫描程序c语言,51单片机矩阵键盘扫描程序详解
  11. Python批量下载抖音大V主页视频
  12. 中芯国际的喜与忧:扣非后盈利后将脱帽,管理层分歧、有进有退
  13. 动态域名解析ipv6 群辉dnspod_群晖IPV6 DDNS设置终极大全(移动用户进)(二)
  14. 西门子1500PLC机器人焊接程序(西门子PLC+西门子触摸屏)
  15. 【转】我和权威的故事
  16. Nginx 配置一个域名使用HTTPS 后其它域名访问HTTPS时也会跳转到该站点解决
  17. uiuc的计算机工程硕士学费标准,美国计算机硕士留学费用全都在这了!
  18. JavaScript 解析json例子
  19. 十二种卫星地图的快速比较和选择方法
  20. 零基础C语言入门001——编译器下载

热门文章

  1. 华为最强AI芯片麒麟980发布:全球首款7nm手机芯片,双核NPU,6项世界第一
  2. 百度投资了光学AI芯片初创公司Lightelligence
  3. 人才第一!英伟达大幅扩大深度学习学院(DLI)规模
  4. Lintcode: Implement Queue by Stacks 解题报告
  5. 各大公司官网都有哪些显而易见的Bug?
  6. 物联网全面崛起 LED企业大有可为
  7. Poco官方PPT_020-ErrorHandlingAndDebugging双语对照翻译
  8. openstack pike版本安装笔记8(Orchestration Server:heat组件,模板服务)
  9. LINUX系统一一CentOS6.5之固化Ip
  10. 如何调试CSS的跨浏览器样式bug