• 首页
• 食谱
• 列表
• 正文

mybootstrap

2024-12-06 00:00:00

980 960

BootStrap最大的优势是响应式布局，发展至今，最新的版本是BootStrap4版本。

BootStrap通过一系列.css，即可完成对页面样式的设置。

BootStrap自带12种插件，调用插件有2种方式：

所以，BootStrap非常容易上手，你只需使用.CSS即可完成大部分功能，而不用编写JS代码。

BootStrap是基于jQuery的插件，所以，在使用BootStrap之前，必须先添加对jQuery的引用，页面布局如下：

和jQuery类似，BootStrap提供了2种安装方式；

DownloadBootStrap：包含BootStrapCSS，JavaScritp和字体的预编译的压缩版本，不包含文档和最初的源代码；

BootStrap3开始，默认的CSS就是移动设备优先，然后才是桌面设备。

BootStrap3使用body{margin:0}来移除body的边框；

body的设置：

使用@font-family-base，@font-size-base和@line-height-base属性作为排版样式；

通过属性@link-color设置全局链接的颜色；

链接的默认样式，如下：

Normalize.css是一个很小的CSS文件，在HTML元素的默认样式中提供了更好的跨浏览器一致性；

下表为BootStrap支持的最新版本的浏览器和平台：

BootStrap中有很多标签和控件，使用相同的后缀来表示相同的颜色，比如：

BootStrap中大部分插件的事件，都使用了过去式和过去分词的命名规则，表示刚调用A方法时触发和A方法执行完后触发，比如：

111

222

333

使用BootStrap的排版特性，可以创建标题，段落，列表及其他内联元素。

BootStrap有2种方式显示代码：

注意：请确保使用pre和code标签时，开始和结束标签使用了unicode变体：<和*>*。

|类|描述||----------------|-----------------------------------------------||.table|为任意

|类|描述||--------|---------------------------------||.active|将悬停的颜色应用在行或者单元格上||.success|表示成功的操作||.info|表示信息变化的操作||.warning|表示警告的操作||.danger|表示危险的操作|

BootStrap提供了下列类型的表单布局：

创建步骤：

|类|描述|按钮类型||------------|--------------------------------------|--------||.btn|为按钮添加基本样式|基本样式||.btn-default|默认/标准样式|按钮样式||.btn-primary|原始按钮样式(未被操作)|按钮样式||.btn-success|表示成功的操作|按钮样式||.btn-info|表示要弹出信息的按钮|按钮样式||.btn-warning|表示要谨慎操作的按钮|按钮样式||.btn-danger|表示危险操作的按钮|按钮样式||.btn-link|让按钮看起来像个链接(仍然保留按钮行为)|按钮样式||.btn-lg|制作一个大按|按钮大小||.btn-sm|制作一个小按钮|按钮大小||.btn-xs|制作一个超小按钮|按钮大小||.btn-block|块级按钮(拉伸至父元素100%的宽度)|按钮大小||.active|按钮被点击|按钮状态||.disabled|禁用按钮|按钮状态|

|类|描述||-------------|-------------------------||.text-muted|减弱的文本样式(浅灰色)||.text-primary|原始文本样式(浅蓝色)||.text-success|成功的文本样式(绿色)||.text-info|信息的文本样式(棕蓝色)||.text-warning|警告的文本样式(黄色)||.text-danger|危险/错误的文本样式(红色)|

|类|描述||-----------|-------------------------||.bg-primary|原始背景颜色(棕蓝色)||.bg-success|成功背景颜色(绿色)||.bg-info|信息背景颜色(浅蓝色)||.bg-warning|警告背景颜色(浅黄色)||.bg-danger|危险/错误背景颜色(浅红色)|

|类|描述||------------------|------------------------------------------------------------||.pull-left|元素浮动到左边||.pull-right|元素浮动到右边||.center-block|设置元素为display:block并居中显示||.clearfix|清除浮动||.show|强制元素显示||.hidden|强制元素隐藏||.sr-only|除了屏幕阅读器外，其他设备上隐藏元素||.sr-only-focusable|与.sr-only类结合使用，在元素获取焦点时显示(如：键盘操作的用户)||.text-hide|将页面元素所包含的文本内容替换为背景图||.close|显示关闭按钮||.caret|显示下拉式功能|

||超小屏幕手机(<768px)|小屏幕平板(>=768px)|中等屏幕桌面(>=992px)|大屏幕桌面(>=1200px)||-------------|---------------------|--------------------|----------------------|---------------------||.visible-xs-*|可见|隐藏|隐藏|隐藏||.visible-sm-*|隐藏|可见|隐藏|隐藏||.visible-md-*|隐藏|隐藏|可见|隐藏||.visible-lg-*|隐藏|隐藏|隐藏|可见||.hidden-xs|隐藏|可见|可见|可见||.hidden-sm|可见|隐藏|可见|可见||.hidden-md|可见|可见|隐藏|可见||.hidden-lg|可见|可见|可见|隐藏|

|类组|CSSdisplay||-----------------------|----------------------||.visible--block|display:block;||.visible--inline|display:inline;||.visible-*-inline-block|display:inline-block;|

|class|浏览器|打印机||---------------------------|------|------||.visible-print-block|隐藏|可见||.visible-print-inline|隐藏|可见||.visible-print-inline-block|隐藏|可见||.hidden-print|可见|隐藏|

|Class|描述||-------------------------------------------|------------------------------------------------------------||.btn-group|该class用于形成基本的按钮组。在.btn-group中放置一系列带有.btnclass的按钮。||.btn-toolbar|该class有助于把几组.btn-group结合到一个.btn-toolbar中，一般获得更复杂的组件。||.btn-group-lg，.btn-group-sm，.btn-group-xs|这些class用于调整整个按钮组的大小，而不是单个按钮的大小。||.btn-group-vertical|该class让一组按钮处置堆叠显示，而不是水平显示。|

向.form-controlclass添加前缀或后缀的步骤如下(文本输入框组)：

导航菜单和下拉菜单类似；

|Class|描述||------------------------------|------------------------------------------------------------||.pagination|添加该class来在页面上显示分页；||.disabled，.active|自定义链接；.disabled定义不可点击的链接；.active定义当前的页面；||.pagination-lg，.pagination-sm|设置不同大小的项；|

|Class|描述||----------------|------------------------------------------------------------||.pager|添加该class来显示翻页；||.previous，.next|(链接不在默认居中)；.previous把链接向左对齐；.next把链接向右对齐；||.disabled|链接不可点击，颜色变淡；|

我们可以向缩略图添加各种HTML内容，比如标题，段落，按钮等；步骤如下：

IE9及之前的版本和旧版的Firefox不支持该特性，Opera12不支持动画；

列表组用于以列表形式呈现复杂的和自定义的内容；

BootStrap自带12种jQuery插件，引用方式有两种：

两种方法：

|事件|描述||---------------------|------------------------------------------||activate.bs.scrollspy|每当一个新项目被滚动监听激活时，触发该事件|

默认情况下是把提示工具(tooltip)放在它们的出发元素后面。有两种方式添加提示工具(tooltip)：

|事件|描述||-----------------|-----------------------------------------------------||show.bs.tooltip|当调用show实例方法时立刻触发；||shown.bs.tooltip|当提示工具对用户可见时触发(将等待CSS过渡效果完成)；||hide.bs.tooltip|当调用hide实例方法时立刻触发；||hidden.bs.tooltip|当提示工具对用户隐藏时触发(将等待CSS过渡效果完成)；|

和提示工具（tooltip）类似，把tooltip改成popover。

|事件|描述||---------------|-------------------------------------------------||close.bs.alert|当调用close实例方法时立即触发；||closed.bs.alert|当警告框被关闭时触发（将等待CSS过渡效果完成）；|

|选项名称|类型/默认值|Data属性|描述||--------|---------------------------|-----------|--------------------------------------------||parent|selector默认值：false|data-parent|指定父元素；用于创建带分组管理的折叠；||toggle|boolean默认值：true|data-toggle|切换调用可折叠元素；|

|事件|描述||------------------|-------------------------------------------------------||show.bs.collapse|当调用show方法时触发；||shown.bs.collapse|当折叠元素对用户可见时触发（将等待CSS过渡效果完成）；||hide.bs.collapse|当调用hide方法时触发；||hidden.bs.collapse|当折叠元素对用户隐藏时触发（将等待CSS过渡效果完成）；|

|事件|描述||-----------------|---------------------------------||slide.bs.carousel|当调用slide实例方法时立即触发；||slid.bs.carousel|当轮播完成幻灯片过渡效果时触发；|