bootstrap用法

bootstrap是一种高级的前端开发工具包。它提供了优雅的HTML和CSS规范,由动态CSS语言Less写成。是基于jQuery框架开发的,目前本人还没有对jQuery有系统的学习,所以这里主要是介绍bootstrap的一些基本写法。

要使用bootstrap和其他框架一样,需要先下载工具包,并且在HTML中引用bootstrap.min.css或者bootstrap.css文件,两者的效果都是一样的差别就在于第一个是简化版,省去了一些没有意义的空格,一般在我们进行开发的时候使用,可以减少占用的内存,但是如果我们要对其源代码进行修改或者查询的话,还是一般使用bootstrap.css。

bootstrap对许多我们经常使用但自己写又比较麻烦的页面元素有很好的支持,使得我们能非常容易迅速的写出好看的样式,而且如果对其不满意,还可以进行修改,非常非常的牛。

这里只介绍table,其他的可以直接在API里面找到。

<table class="table"></table>

直接写出这句代码,自动生成的表格自己就有了很规范的样式,不用我们在CSS中再进行编写。

而且还可以许多好看的效果:

table-striped可以使奇数行的背景设为灰色。

table-bordered可以使边框显示。

table-hover可以使鼠标悬停的行的背景变为灰色

table-condensed可以使行间距变小。

这些我们都能直接引用,非常的方便,关于这方面就不进行一一介绍,详细可查看API。

bootstrap还有一个更为牛的地方,Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义classe,还有强大的mixin用于生成更具语义的布局。

四种栅格选项,他们分别是col-xs ,col-sm,col-md,col-lg

xs(超小屏幕)
sm(小屏幕)
md(中屏幕)
lg(大屏幕)

这个效果对我们在进行不同平台上的开发带来难以想象的便利,它能够根据使用的电脑,手机,ipad..自动对页面进行调节。

时间: 2024-10-15 15:07:56

bootstrap用法的相关文章

bootstrap用法小计

1.D盘下建文件夹html,html下建立src文件夹,里面包含以下3个文件夹: 其中scss里必须包含all.scss文件,在html目录下建立demo文件夹,包含以下内容: 其中css放置all.css文件,这个文件在cmd当前目录运行下列命令中生成:npm run gulp 最后cmd中在demo目录下运行python -m SimpleHTTPSever 12306,在网址内输入http://127.0.0.1:12306,即可预览网站效果 原文地址:https://www.cnblog

Notes : &lt;Hands-on ML with Sklearn &amp; TF&gt; Chapter 7

.caret, .dropup > .btn > .caret { border-top-color: #000 !important; } .label { border: 1px solid #000; } .table { border-collapse: collapse !important; } .table td, .table th { background-color: #fff !important; } .table-bordered th, .table-bordere

前端各种插件

h3 { background-color: palegreen } 一各种插件汇总 插件 ---Bootstrap http://v3.bootcss.com/getting-started/ http://v3.bootcss.com/ ---Font Awesome http://fontawesome.io/ ----bxslider http://bxslider.com/ -----jquery EasyUI http://www.jeasyui.com/download/index

web开发-Django博客系统

项目界面图片预览 项目代码github地址 项目完整流程 项目流程: 1 搞清楚需求(产品经理) (1) 基于用户认证组件和Ajax实现登录验证(图片验证码) (2) 基于forms组件和Ajax实现注册功能 (3) 设计系统首页(文章列表渲染) (4) 设计个人站点页面 主要是orm查询 (5) 文章详情页 (6) 实现文章点赞功能 (7) 实现文章的评论 ---文章的评论 ---评论的评论 (8) 富文本编辑框和防止xss攻击 (9) 密码修改 2 设计表结构 用户信息表 个人站点表 个人文

vue-UI(mui和muit-UI)

MUI和MUIT-UI 这里使用了连个UI---mui和mit-ui mit-ui是基于vue.js的,而mui是一个高性能前端框架(H5+提供的),类似于bootstrap,所以在引入时区别还是很大的 main.js中导入,app.vue中使用 main.js import Vue from 'vue' // 1. 导入 vue-router 包 import VueRouter from 'vue-router' // 2. 手动安装 VueRouter Vue.use(VueRouter)

bootstrap基本用法

进入中文官网:http://www.bootcss.com 开始第一个Demo 准备工作: (1)进入bootstrap中文官网,点击起步 (2)下载生产环境 下载好的文件是一个压缩文件,学习时建议使用未压缩版本,项目开发时必须使用压缩版本. (3)找到基本模板,将其复制粘贴进来,当然,必要时需要按需求进行更改. 学习bootstrap首先需要理解的是栅格系统,看官网(http://v3.bootcss.com/css/#grid-intro)给的定义: 我们需要理解的是col-xs- .col

Bootstrap 提示工具(Tooltip)插件方法的用法

方法 下面是一些提示工具(Tooltip)插件中有用的方法: 方法 描述 实例 Options: .tooltip(options) 向元素集合附加提示工具句柄. $().tooltip(options) Toggle: .tooltip('toggle') 切换显示/隐藏元素的提示工具. $('#element').tooltip('toggle') Show: .tooltip('show') 显示元素的提示工具. $('#element').tooltip('show') Hide: .t

Bootstrap Affix(附加导航(Affix)插件的用法)

原文网址:http://www.runoob.com/bootstrap/bootstrap-affix-plugin.html Bootstrap 附加导航(Affix)插件 附加导航(Affix)插件允许某个 <div> 固定在页面的某个位置.您也可以在打开或关闭使用该插件之间进行切换.一个常见的例子是社交图标.它们将在某个位置开始,但当页面点击某个标记,该 <div> 会锁定在某个位置,不会随着页面其他部分一起滚动. 如果您想要单独引用该插件的功能,那么您需要引用 affix

Bootstrap栅格系统用法介绍

 1.栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅格系统叫做布局.它就是通过一系列的行(row)与列(column)的组合创建页面布局,然后你的内容就可以放入到你创建好的布局当中.下面就简单介绍一下Bootstrap栅格系统的工作原理: 网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的)