博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
bootstrap 框架学习笔记
阅读量:5898 次
发布时间:2019-06-19

本文共 1050 字,大约阅读时间需要 3 分钟。

hot3.png

 在这个上面下载bootstrap

为什么使用 Bootstrap?

  • 移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式。

  • 浏览器支持:所有的主流浏览器都支持 Bootstrap。

    Internet Explorer Firefox Opera Google Chrome Safari

  • 容易上手:只要您具备 HTML 和 CSS 的基础知识,您就可以开始学习 Bootstrap。

  • 响应式设计:Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。更多有关响应式设计的内容详见 。

    响应式设计

  • 它为开发人员创建接口提供了一个简洁统一的解决方案。

  • 它包含了功能强大的内置组件,易于定制。

  • 它还提供了基于 Web 的定制。

  • 它是开源的。

less???????????????????????????????不懂是什么

在网页上添加这个,对移动设备友好。用下面这个好像更好

bootstrap有的浏览器不支持,不知道为啥要用bootstrap

Bootstrap 网格系统

Bootstrap 网格系统(Grid System)的工作原理

网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的:

  • 行必须放置在 .container class 内,以便获得适当的对齐(alignment)和内边距(padding)。

  • 使用行来创建列的水平组。

  • 内容应该放置在列内,且唯有列可以是行的直接子元素。

  • 预定义的网格类,比如 .row 和 .col-xs-4,可用于快速创建网格布局。LESS 混合类可用于更多语义布局。

  • 列通过内边距(padding)来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距(margin)取负,表示第一列和最后一列的行偏移。

  • 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如,要创建三个相等的列,则使用三个 .col-xs-4

????为什么要这么复杂 网格没怎么懂

Bootstrap 代码

Bootstrap 允许您以两种方式显示代码:

  • 第一种是 <code> 标签。如果您想要内联显示代码,那么您应该使用 <code> 标签。

  • 第二种是 <pre> 标签。如果代码需要被显示为一个独立的块元素或者代码有多行,那么您应该使用 <pre> 标签。

内联和块 

Bootstrap 表格

加了一些样式而已 

    //插件什么的还没看,data和直接用的区别?

转载于:https://my.oschina.net/sunshinedog/blog/628488

你可能感兴趣的文章
配置ORACLE 11g绿色版客户端和PLSQL远程连接环境
查看>>
ASP.NET中 DataList(数据列表)的使用前台绑定
查看>>
Linux学习之CentOS(八)--Linux系统的分区概念
查看>>
System.Func<>与System.Action<>
查看>>
asp.net开源CMS推荐
查看>>
csharp skype send message in winform
查看>>
MMORPG 游戏服务器端设计--转载
查看>>
SILK 的 Tilt的意思
查看>>
Html学习笔记3
查看>>
HDFS dfsclient写文件过程 源码分析
查看>>
ubuntu下安装libxml2
查看>>
nginx_lua_waf安装测试
查看>>
WinForm窗体缩放动画
查看>>
JQuery入门(2)
查看>>
linux文件描述符
查看>>
传值引用和调用引用的区别
查看>>
hyper-v 无线网连接
查看>>
Python3.7.1学习(六)RabbitMQ在Windows环境下的安装
查看>>
Windows下memcached的安装配置
查看>>
ubuntu: firefox+flashplay
查看>>