![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
bootstrap
就不能找个大点的碗吗
这个作者很懒,什么都没留下…
展开
-
bootstrap基础知识(一)--排版
bootstrap基于jquery框架,使用jquery样式一)排版1)标题,副标题:<h1>正标题<small>副标题</small></h1>2)段落强调()即加上class类名:<p class=“lead”></p>原样式代码:.lead {margin-bottom: 20px;font-size: 16px;fon...原创 2018-07-02 10:42:20 · 230 阅读 · 0 评论 -
bootstrap基础知识(五)--面板
面板1)基础面板div运用panel 产生具有边框的文本显示块<div class="panel panel-default"> <div class="panel-body">我是一个基础面板,带有默认主题样式风格</div></div> 2)有头有尾的面板另外添加两个容器:panel-heading:设置头面板样式panel-footer:...原创 2018-07-05 10:15:13 · 1383 阅读 · 0 评论 -
bootstrap基础知识(五)--列表组
列表组1)基础列表包括两个部分:ul中list-group以及li中list-group-item例如:<ul class="list-group"> <li class="list-group-item">揭开CSS3的面纱</li> <li class="list-group-item">CSS3选择器</l原创 2018-07-05 10:13:30 · 1067 阅读 · 0 评论 -
bootstrap基础知识(五)--媒体对象
媒体对象 像这样排列1)默认媒体对象容器常使用类名“media”表示对象用”media-object“表示主体用”media-body“表示标题用”media-heading“表示“pull-left”以及“pull-right”表示悬浮方式代码如下:<div class="media"> <a class="pull-left" href="#"> &...原创 2018-07-04 20:03:24 · 894 阅读 · 0 评论 -
bootstrap基础知识(五)--进度条
进度条1)基本样式一般用两个容器进行存储第一个容器类名为“progress”用来设计进度条样式第二个容器名为“progress-bar”用来限制进度条改进:虽然能够实现进度条,但是对于残障人士阅读浏览器有困难,故将结构做得更好,例如:代码如下:<div class=“progress”><div class=“progress-bar” style=“width:40%;” ro...原创 2018-07-04 20:02:33 · 838 阅读 · 0 评论 -
bootstrap基础知识(五)--警示框
警示框提示操作成功或操作错误或警示 1)默认警示框1、成功警示框:告诉用用户操作成功,在“alert”样式基础上追加“alert-success”样式,具体呈现的是背景、边框和文本都是绿色; 2、信息警示框:给用户提供提示信息,在“alert”样式基础上追加“alert-info”样式,具体呈现的是背景、边框和文本都是浅蓝色; 3、警告警示框:提示用户小心操作(提供警告信息),在“alert”...原创 2018-07-04 20:01:47 · 519 阅读 · 0 评论 -
bootstrap基础知识(五)--缩略图
缩略图(一)就是几张图片,底部(左侧或者右侧)带有标题,描述等信息使用方法:通过thumbnail以及bootstrap网格系统完成结构:<div class="container"> <div class="row"> <div class="col-xs-6 col-md-3"> <a href="原创 2018-07-04 20:00:58 · 494 阅读 · 0 评论 -
bootstrap基础知识(四)--导航条
导航条导航条和导航一样也是独立的组件1)基础导航条使用方法:1)先在ul的nav后添加类名“navbar-nav”2)然后在外面添加一个容器(div)并添加类名“navbar-default”2)加入导航标题在容器中添加一个新的名为“nav-header”的容器并在其中添加名为“nav-brand”的a标签代码如下:<div class="navbar navbar-default" rol...原创 2018-07-04 16:16:40 · 545 阅读 · 0 评论 -
bootstrap基础(四)--导航
导航1)基础样式在ul标签中添加类名“nav”即表示默认导航栏样式,需要在后面追加类名“nav-tabs”或者”nav-pills”如:<ul class="nav nav-tabs"> <li><a href="##">Home</a></li> <li><a href=&q原创 2018-07-04 11:52:51 · 590 阅读 · 0 评论 -
bootstrap基础知识(四)--按钮
按钮1)按钮组如果需要多个按钮组合可以是一个div并且添加类名“”btn-group“例如:<div class="btn-group"> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-step-backward">&原创 2018-07-04 09:34:54 · 456 阅读 · 0 评论 -
bootstrap基础知识(四)--菜单
菜单1)基本使用在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件如果你使用的是未编译版本,在js文件夹下你能找到一个名为“dropdown.js”的文件。你也可以调用这个js文件 <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"><...原创 2018-07-03 15:40:39 · 439 阅读 · 0 评论 -
bootstrap基础(三)--网格系统
网格系统:1)列组合通过改变数字进行合并列<div class="container"> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-8">.col-md-8<原创 2018-07-03 14:35:15 · 284 阅读 · 0 评论 -
bootstrap基础知识(二)--表单
二)表单默认表单:Bootstrap框架默认的表单是垂直显示风格,但很多时候我们需要的水平表单风格(标签居左,表单控件居右)在<form>元素上使用类名“form-horizontal”主要有以下几个作用:1、设置表单控件padding和margin值。2、改变“form-group”的表现形式,类似于网格系统的“row”。内联表单:在<form>元素中添加类名“form-...原创 2018-07-03 14:06:03 · 277 阅读 · 0 评论 -
bootstrap基础知识(六)--javascript插件
javascript插件javascript插件:一次性导入:Bootstrap提供了一个单一的文件,这个文件包含了Bootstrap的所有JavaScript插件,即bootstrap.js(压缩版本:bootstrap.min.js)。具体使用如下(或见右侧代码编辑器28-29行):<!—导入jQuery版本库,因为Bootstrap的JavaScript插件依赖于jQuery --&g...原创 2018-07-05 11:21:20 · 1456 阅读 · 0 评论