搜档网
当前位置:搜档网 › bootstrap实战笔记

bootstrap实战笔记

bootstrap实战笔记
bootstrap实战笔记

Bootstrap框架实战笔记

使用bootstrap框架必须,先引入框架文件:

bootstrap 布局方式是将页面分成一行12个列,同时布局要放到盒子类container 里面,类row 代码的是行,而类span代表的是列。

例如:

代表这行占用了12列的3列的宽度

响应式位移:

offse数字,例如offset4 就标签距离左边4个列的宽度距离。

代码案例:

此代码表示占用两个列的宽度,距离左边是4个列的宽度

响应式布局的使用类:

.visible-phone:在手机上显示这个元素

.visible-tablet:在平板电脑上显示这个元素

.visible-desktop:在普通电脑上显示这个元素

.hidden-phone :在手机上隐藏这个元素

.hidden-tablet:在平板电脑上隐藏这个元素

.hidden-desktop:在普通电脑上隐藏这个元素

:段落标签

:文章标题

:加粗标签

:标注提示标签

:斜体

:引用说明

文字内容
:左对齐显示文字内容

文字内容
:又对齐显示文字内容

:小字体

Bootstrap Well

Well 是一种会引起内容凹陷显示或插图效果的容器

。为了创建Well,只需要简单地把内容放在带有class .well 的
中即可。下面的实例演示了一个默认的Well:

代码案例:

您好,我在Well 中!

您可以使用可选类 well-lg 或 well-sm 来改变Well 的尺寸大小。这两个类是与 .well 类结合使用的。这两个类会影响内边距(padding),根据使用的类,Well 会显示得更大或者更小。代码案例:

您好,我在Well 中!

您好,我在Well 中!

响应是布局常用列表:

无序列表:ul

有序列表:ol

分类列表:dl

注意:dl列表里bootstrap提供了一个类dl-horizontal 能改变dl原有的样式bootstrap里面的

code标签:加重注释,加重突出

:段落突出显示,能原样显示文本原有的排版格式

bootstrap里面的表格:

表格头
表格内容

table (基本的样式,只要使用表格就必须添加这个类)

案例:

table table-striped(隔行变色)

案例:

table table-bordered(四周边框都有的)

案例:

table table-hover(移上变色)

案例:

table table-condensed (内边距变成原来的一半)

案例:

注:以上table的类可以混合使用,但是前提必须使用table类,后面在用其他的类。

Bootstrap中表格自带的行类:

success (成功信息的类,颜色会发生变化)

案例:

error(失败信息的类,颜色会发生变化)

案例:

warning(警告信息的类颜色会发生变化)

案例:

Info(信息提示类,颜色会发生变化)

案例:

Bootstrap中form表单:

说明:bootstrap中默认给form表单中的input标签添加了样式。

结合input标签使用

案例: 类:help-block 用于输入信息提示的格式

案例:

输入用户名格式正确

用于查询功能表单的类:form-search 和search-query

form-search 用于form里面,而search-query用于input里面

案例:

用于内联样式的表单类,也就是在一行显示:form-inline

常常与小样式的input类input-small 结合使用。

案例:

多行样式的表单类:form-horizontal,control-group,controls-label,controls

form-horizontal 用于修饰form

control-group 用于修饰div等标签(代表一组或者一行)

controls 用于修饰div等标签(放input标签到里面)

controls-label 用于修饰label标签(放提示信息)

案例:

关于复选框checkbox 行内样式类:inline

案例:

1

2

3

关于选择下拉框select 中multiple="multiple" 可以进行多行显示

案例:

Bootsrap中对form表单的扩展应用类:

类:add-on 添加到input开头或者末尾,但是必须和类input-prepend或者input-append 结合使用

案例:

@

email

$

.00

Input 文本域的几种类的样式:

input-mini :微小样式

input-small :小样式

input-medium :中等样式

input-large:大样式

input-xlarge:超大样式

input-xxlarge:超大大样式

案例:

Bootstrap里面对文本域进行禁用的类:uneditable-input

案例:

Boostrap 里面的类form-actions 里面可以设置一组按钮触发form表单

案例:

Bootstrap行内帮助文本类:help-inline

案例:help……

Bootstrap 换行帮助文本类:help-block

案例:eduask

Bootstrap必须验证类:required

案例:

Bootstrap样式提示:

Warning :警告

Error:错误

Info:信息

Success: 成功

代码案例:

Bootstrap里面的按钮样式类:

btn :基本样式,其他样式必须继承的类

btn btn-primary :普通触发按钮样式(蓝色)

btn btn-info :信息样式按钮(淡蓝色)

btn btn-success :成功样式按钮(绿色)

btn btn-warning:警告样式按钮(橘黄色)

btn btn-danger:危险样式按钮(红色)

btn btn-inverse:黑色样式按钮

btn btn-link :类似超链接

案例:

Bootstrap里面的按钮大小

btn-mini 微小尺寸

btn-small 小尺寸

btn-large 大尺寸

btn-block 铺满

案例:

Bootstrap 图片修饰类

img-rounded:圆角

img-circle :圆

img-polaroid:方形

案例:

Bootstrap提供的小图标样式类:

案例:

Bootstrap下拉菜单:

普通代码案例:

以上的代码案例中,data-toggle=”dropdown”与ul 的类class=”dropdown-menu”进行关联

那么单击

这个div 就会弹出

这个菜单内容,注意下拉菜单要放到class=”dropdown”div中。

普通下拉菜单中的中二级子菜单:

代码案例:

data-toggle="dropdown" 与子级菜单class=”dropdown-menu”关联,

单击

就可以下拉出一级菜单,但是在子级菜单里面有class="dropdown-submenu" 与其里面的class="dropdown-menu"

进行关联实现二级子菜单,当鼠标移动到

  • 代码案例:

    导航条结合form表单1:使用类navbar-form结合使用,同时pull-left(居左) ,pull-right (居右)结合使用。

    代码案例:

    导航条结合form表单2:使用类 navbar-search 和 search-query 进行结合使用

    代码案例:

    固定在顶部导航条: navbar-fixed-top

    代码案例:

    固定在底部导航条:navbar-fixed-bottom

    代码案例:

    响应式导航条:

    黑色样式导航条:navbar-inverse

    代码案例:

    分页基本样式代码案例:

    4.24师德师风政治学习笔记

    时间:4.24 主持人:xxx 地点:会议室参加人:全体教师 主题:师德在教育教学中的重要性 师德是社会公德的一个组成部分,它是符合教师职业特点的一种行业公德。它又是社会文化长期积淀的特定的一种道德观念、道德准则、道德行为的综合体。同时,作为社会的一种道德观念,它与其他的观念一样,具有鲜明的时代特征——不同历史时期的师德观必定反映出其不同时代的特征,新时期的师德内涵也应体现新时代的精神风貌。因此,人们应从时代特点看待教师形象,教师更应以新的风貌展现于改革的浪潮中,社会应赋予师德以新时期所特有的内涵。否则,错误地理解师德内涵不仅会影响教师队伍的建设,对社会主义教育事业造成不良后果,还将直接影响到社会主义建设的伟业。清楚的理解师德的内涵,对新时期的师德建设有着十分重要的意义。 一、教师应怎样理解师德。 首先,新时期的师德应表现为一种对社会强烈的使命感和责任感,就是为建设社会的物质财富和精神财富奉献自己取之于社会的文化财富和精神财富。这种使命和责任着眼于对全体学生的培养,着眼于学生德、智、体、美等多方面全面发展。

    其次,新时期的师德应体现时代赋予教师的时代特征。不仅体现在教师自我较高的科学文化素养和道德修为,还包括先进的社会观、教育观、教学观、师生关系观。 再次,新时期历史时期虽为师德加入了新的内涵,还应认识到师德也表现为一种文化传统、道德传统,教师的形象有历史赋予的光环。率先垂范、为人师表、有学问等素质便是历史赋予师德形象的必要因素。子曰:“躬自厚而薄责于人”、“以身立教、为人师表”又曰“其身正,不令而行;其身不正,虽令不从。”教师的工作是培养人的工作,而最能起到深远影响的是教师的人格因素。有人将教师喻为学生人生的引路人,是十分有道理的。 第四,教师还应认识到教师本身在时代的社会价值,不宜妄自菲薄。“教师是人类灵魂的工程师。”“教师是太阳底下最光辉的职业。” 因此,作为教师要看重自我,懂得自重。陶行知先生说:“要人敬的,必先自敬,重师首先师自重。” 二、社会应怎样理解师德。 首先,教师是一种社会人。教师作为一种职业,它就具有一般普通人从业的特点,教师不是不食人间烟火的神。在社会上,人们特别是家长及教育行政的领导们,要清楚的认识到教师首先是普通人,然后才是从事教育行业的教师。 其次,教师作为一种职业,与其他职业一样,有着本行业的特点,人们应尊重行业的特点,应尊重学校那样的育人圣地。教师在

    Bootstrap教程第一课:简单的Bootstrap主页

    Bootstrap教程第一课:简单的Bootstrap主页(1) 写在前面: Bootstrap是目前最流行的前端框架,我从简单的实例开始,写一份文字版的Bootstrap教程,希望能对大家有所帮助。 准备工作: 1、下载Bootstrap框架核心文件。 2、下载jQuery文件。 3、下载HTML5兼容IE的JS插件。 (各位可以从网上找到Bootstrap和jQuery以及HTML5 JS的官方下载地址,也可以直接点击下面的下载链接下载,我已经将jQuery文件放在了js目录里了。)点击下载Bootstrap核心文件 HTML结构: 1、Bootstrap框架的文档必须声明为HTML5文件类型,所以你的每一个页面都必须按照下面的格式进行设置: ...... 2、添加HTML文档meta标记,需要两条标记: 3、引入所需要的核心文件,包括Bootstrap的CSS文件,jQuery插件,Bootstrap的JS核心文件,以及HTML5.JS文件。

    那么现在,你的HTML文档,应该是这个样子的: Bootstrap 第一课:简单的Bootstrap主页 正式开始: 现在就可以在body之间写上你的网页结构代码了,添加上Bootstrap相应的CSS 类样式,就可以完成一个最简单的Bootstrap主页了。 首先,写好HTML结构代码:

    这是一个简单的Bootstrap主页

    这是一个简单的Bootstrap主页,制作这个主页,可 以分为三个步骤:

    最新师德师风学习笔记

    师德师风学习笔记 通过今天的师德师风学习,我更加明确了自己所肩负的重任,认识到了师德师风建设的重要性。通过此次学校组织师德师风教育学习,在全面提高教学质量的思想指导下,我谈下面的几点体会: 一、爱岗敬业。首先,要热爱教育事业,要对教学工作有“鞠躬尽瘁”的决心。既然我们选择了教育事业,就要对自己的选择无怨无悔,不计名利,积极进取,开拓创新,无私奉献,力求干好自己的本职工作,尽职尽责地完成每一项教学工作,不求最好,但求更好,不断的挑战自己,超越自己。在教育教学过程中,不断丰富自身学识,努力提高自身能力、业务水平,严格执行师德师规,有高度的事业心、责任心、爱岗敬业。坚持“一切为了学生,为了学生的一切”,树立正确的人才观,重视对每个学生的全面素质和良好个性的培养,不用学习成绩作为唯一标准来衡量学生,与每一个学生建立平等、和谐、融洽、相互尊重的关系,关心每一个学生,尊重每一个学生的人格,努力发现和开发每一个学生的潜在优秀品质,坚持做到不体罚或变相体罚学生。正确处理教师与学生家长的关系,在与家长联系上相互探究如何使学生发展的方法、措施,在教育教学过程中,利用学科特点加强对学生的思想教育,提高他们的思想政治素质,激发他们的学习积极性,努力提高教育教学质量。 二、爱心是师德素养的重要表现。崇高的师爱表现在对学生一视同仁,绝不能厚此薄彼,按成绩区别对待。要做到“三心俱到”,即

    “爱心、耐心、细心”,无论在生活上还是学习上,时时刻刻关爱学生,特别对那些学习特困生,更是要“特别的爱给特别的你”,切忌易怒易暴,言行过激,对学生要有耐心,对学生细微之处的好的改变也要善于发现,并且多加鼓励,培养学生健康的人格,树立学生学习的自信心,注重培养他们的学习兴趣,提高教学质量。 三、积极进取,提高业务素养。有句话说的好,没有学不会的学生,只有不会教的老师。这就向老师提出了更高的要求,不断提高自身素质,不断完善自己,以求教好每一位学生。怎样提高自身素质呢?这就要求我们一定要与时俱进,孜孜不倦的学习,积极进取,开辟新教法,并且要做到严谨治学,诲人不倦、精益求精,厚积薄发,时时刻刻准备着用“一眼泉的水”来供给学生“一碗水”。 四、以身作则、率先垂范。教师的一言一行对学生的思想、行为和品质具有潜移默化的影响,教师一言一行,一举一动,学生都欢模仿,将会给学生带来一生的影响,因此,教师一定要时时处处为学生做出榜样,凡是教师要求学生要做到的,自己首先做到;凡是要求学生不能做的,自己坚决不做。严于律已,以身作则,才能让学生心服囗服,把你当成良师益友。身正为师,老师首先要成为有道德的人。作为学生,都愿意接近有师德的教师。而作为教师,自然也都愿意与有教养的学生打交道。所以,要做一个让学生和教师都愿意接近的教师,你本身就应当是一个有道德的人。学生在学校里学习,既受同学的影响也受教师的影响,而更主要的是受教师的影响。学生愿意接近的教师,比学生不愿意接近的教师,对学生的影响要大得多。可见,

    黑马程序员UI教程:Bootstrap弹出框

    黑马程序员UI教程:Bootstrap弹出框 使用过JQuery UI的园友们应该知道,它里面有一个dialog的弹出框组件,功能也很丰富。与jQuery UI的dialog类似,Bootstrap里面也内置了弹出框组件。打开bootstrap 文档https://www.sodocs.net/doc/d2437229.html,/components/可以看到它的dialog是直接嵌入到bootstrap.js和bootstrap.css里面的,也就是说,只要我们引入了bootstrap的文件,就可以直接使用它的dialog组件,是不是很方便。本篇我们就结合新增编辑的功能来介绍下bootstrap dialog的使用。废话不多说,直接看来它如何使用吧。 1、c shtml界面代码